Editor's Pick
How to start a React Project in 2025
Every year, I want to give you a brief overview of how to start a new React project. I'll reflect on the advantages and disadvantages, the skill level needed as a developer, and the features each starter project offers to you as a React developer. By the end, you'll know about three solutions for different requirements.
Accessibility
What we learned by running an accessibility audit of our app
It's virtually impossible to achieve 100% accessibility on a complex web app. Companies that claim otherwise are likely mistaken, whether intentionally or not. Some conduct their own internal audits, which are clearly not as reliable as those performed by an external, independent organization.
We also discovered that there are some difficult and almost undocumented quirks.
It must also be said that an audit is outdated as soon as it's done, as nothing prevents the code from changing from that date.
Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone
Discover how to enhance accessibility and improve find-in-page search functionality using hidden="until-found" for icon-only buttons and hidden text labels.
Accessible Color Palette Tester
Create and test color palettes for WCAG & APCA contrast compliance. Name, reorder, and compare colors with real-time contrast ratings. Save & share via URL.
CSS
Dynamic Focus Zoom Effect with CSS @property
The dynamic focus zoom effect is created using CSS custom properties and a radial-gradient mask. By updating these properties based on mouse movement, we simulate a spotlight effect that follows the cursor.
This demo is based on the great work of Adam Argyle in his talk about the Symphony of the Web.
10 Awesome CSS text effects for your next project
Text is everywhere on the web, but that doesn’t mean it has to be boring. With just a little CSS, you can turn plain words into eye-catching elements that grab attention and make your design feel more alive and awesome.
Understanding the trade-offs of using Tailwind CSS
Tailwind helps you build web pages quickly with a utility-first approach — but is it right for your project? Here we explore its benefits and trade-offs.
CSS @function + CSS if() = 🤯
Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.
Decoding CSS Selectors: :has(:not) vs :not(:has)
CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. When you combine CSS Functions, the nesting of these functions matters. In this post, we'll look at the difference between :has(:not) and :not(:has), and how to approach decoding CSS selectors that use these nested CSS functions.
JavaScript
How to start a React Project in 2025
Every year, I want to give you a brief overview of how to start a new React project. I'll reflect on the advantages and disadvantages, the skill level needed as a developer, and the features each starter project offers to you as a React developer. By the end, you'll know about three solutions for different requirements.
Testing 10 JavaScript Frameworks on Their HTML Defaults
I don’t know how it is for you, but, traditionally a front-of-the-frontend developer, I’ve always been skeptical about JavaScript frameworks. I’ve been attributing a good part of the HTML crisis—that most sites ship invalid and fantasy HTML—to them.
That’s something I wanted to probe. I took 10 popular JavaScript frameworks, spun up their demo or started or base projects (using all defaults), and validated the HTML source (both raw and hydrated).
human-regex: Human-friendly regular expression builder with English-like syntax.
Features:
- Intuitive builder pattern with chainable methods
- Prebuilt validators for common patterns (emails, URLs, phone numbers)
- Comprehensive character classes and quantifiers
- Type-safe implementation with TypeScript
- Memoized patterns for better performance
- Supports all standard regex flags
Learn The Basics of JavaScript and KAPLAY to Make Games Quickly
KAPLAY is a simple and intuitive library for making games in JavaScript. It’s relatively new, which is why learning resources are scarce. However, it really does make game development easier and faster with its intuitive Entity Component System and built-in features.
Vue is Too Easy
Front end development is a very polarized industry. We argue about programming languages, frameworks, and even the best indentation style. But one thing that everyone agrees on is that Vue has the easiest learning curve.
The Must-Have SEO Checklist for (Next.js) Developers For 2025
So I have been working on a few SEO Focused projects lately and I thought I would share some of the best practices and strategies I have learned along the way for Next.js developers.
StringTune - a modular JS library for smooth web effects like parallax, cursor interactions & animations, using a simple, attribute-based approach
StringTune is a cutting-edge JavaScript library designed to deliver high-performance, modular web effects. Whether you're looking to add smooth parallax scrolling, dynamic cursor interactions, progress tracking, or autoplay videos, StringTune empowers developers with a powerful, attribute-driven approach. It simplifies the creation of visually captivating websites while remaining intuitive for both beginner and advanced developers.
Experience StringTune in action with their interactive demo.
Trig-JS: The easy way to create CSS scroll animations that react to the position of your HTML element on screen. Animate on scroll (AOS) your CSS.
Trig.js is a super simple, efficient and lightweight way of making CSS animations that react to the position of your HTML elements. You can also use Trig.js to trigger CSS animations once an element appears on screen.
See it in action here.
UX
Getting the Relationship Between UX Design and Business Strategy Right
The newfound prominence of UX design led to some misconceptions about the limitations of UX design professionals and their academic backgrounds in dealing with the intricacies of competitive and corporate strategy.
UX designers who want to achieve greater influence within an organization must understand the role that UX design can effectively play in organizational strategy. This can help them better focus on their strengths and understand their limitations in terms of their skills and background.
Miscellaneous
Optimizing The Critical Rendering Path
Shortening the critical rendering path can help your website load faster and provide a better user experience. Learn how to identify critical resources and how to optimize them.
Fast & Smooth Third-Party Web Fonts
If you're loading fonts from a popular third party provider like Google Fonts or Typekit, the stylesheet link-based loading snippets they offer are not great from a performance perspective. Like any ordinary stylesheet, they block page rendering while they are loading, and for all that delay, the CSS you get merely contains font-face definitions for fonts that may be subsequently downloaded if they're used in that page. These steps add up and can make it hard to keep sites rendering quickly.
A guide to modern frontend architecture patterns
Frontend architecture patterns are reusable guidelines that structure any one software product’s implementation on… you guessed it, the frontend. Modern software development teams use a variety of frontend architecture patterns (monolithic, modular, and component-based, just to name a few). The choice of which pattern to use depends on project complexity, scalability, maintainability, product delivery concerns, and development preferences.
In this article, we’ll discuss all popular frontend architecture patterns, their strengths, weaknesses, and usage examples.
Navigating the Web Platform Cheatsheet
As a web developer, navigating the web platform isn't always easy. Here are ways to keep track of what you can use, of what's new in web browsers, and ways you can influence the development of the platform by making your voice heard.
How To Use Chrome's Developer Tools
Learn how to use Chrome DevTools to inspect and edit websites, view what files are downloaded, and generate detailed website performance reports.