Editor's Pick
Human-readable date formatting with vanilla JavaScript
You probably don’t need moment.js or piles of StackOverflow-ing, you just need Date.toLocaleDateString(). Here’s some common use cases.
Accessibility
Accessibility Issues: Why Accessibility Overlays Fall Short
Some companies offer “overlay accessibility solutions.” Promises vary, but some claim ADA compliance with just a few lines of code. These solutions often include widgets allowing users to make “accessibility adjustments” to what they’re viewing in the browser. Some of these companies even promise they’ll use AI to detect and fix issues automatically.
But as the saying goes: is it too good to be true? On a recent project, my team explored this question. With limited time, resources, and expertise, we needed to determine whether an overlay solution was the right choice. (Spoiler alert: It wasn’t.) Here’s what we did instead.
Top 10 Common Accessibility Issues in Websites
To help you get started on improving your website’s accessibility, we’ve compiled a list of the ten most common accessibility issues we see and how to fix them.
Accessibility isn’t a one-time task—it’s an ongoing process that benefits all users, not just those with disabilities. By prioritizing accessibility, you’re not only avoiding legal risks but also improving user experience and expanding your audience.
AI and Accessibility: the Good, the Bad, and the Bollocks / Léonie Watson / FFConf 2024
Depending on what you read, and who you believe, AI is either the ultimate solution or armageddon in motion, so in this talk, Léonie is going to cut through the clickbait, dodge the doomscrollers, and focus on the facts to bring you the good, the bad, and the bollocks of AI and accessibility.
CSS
Trig-Animations.css – Configurable Predefined Scroll Animations for Your Website
Trig.js makes it easy to create custom CSS scroll animations, while trig-animations.css provides a library of predefined animations out of the box for effortless animation. Whether you want full control or a quick setup, Trig.js has your AOS (animate on scroll) needs covered.
Repo here.
Modern fluid typography editor
Generate fluid typography code snippets using modern CSS clamp function and fine-tune fluid typography behavior using this robust and sleek editor.
CSS :has() for Dynamic Styling Mastery
Learn how to use CSS :has() for dynamic styling and theme switching without JavaScript, enhancing performance and maintainability.
A Million Little Secrets - Deconstructing the “Whimsical Animations” landing page
I spent the past few weeks packing as many easter eggs as I could into my latest project, and in this blog post, I want to dig into some of the more interesting details! If you’re interested in animations/interactions, you’ll want to check this one out; I share a bunch of my favourite secrets and tricks.
Page Speed: Avoid Large Base64 data URLs in HTML and CSS
How do Base64 data URLs impact performance and when should they be used.
A CSS-Only Star Rating Component and More! (Part 2)
In this second article of a two-part series, Temani Afif demonstrates an alternative approach to creating the star rating component from the first article using experimental scroll-driven animations rather than using the border-image property.
Part one can be found here.
CSS Relative Colors - an interactive guide to learn CSS Relative Colors
Over the years, we have been used to using CSS pre-processors like Sass for a use case like applying opacity to a pre-defined color. Today, we have a new way to do that and more with CSS relative colors. In this article, I aim to shed the light on that and introduce how it works along with many practical examples.
A guide to the CSS cursor property
Learn about built-in CSS cursors, creating custom cursors with CSS, using multiple cursors, and adding animations with CSS and JavaScript.
View Transitions Applied: Smoothly animating a border-radius with a View Transition
To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.
An infinite logos animation
Using the offset property to create a CSS-only infinite logos animation.
HTML
Introducing command and commandfor
Buttons are essential to making dynamic web applications. Buttons open menus, toggle actions, and submit forms. They provide the foundation of interactivity on the web. Making buttons simple and accessible can lead to some surprising challenges. Developers building micro-frontends or component systems can encounter solutions that become more complex than necessary. While frameworks help, the web can do more here.
Chrome 135 introduces new capabilities for providing declarative behaviour with the new command and commandfor attributes, enhancing and replacing the popovertargetaction and popovertarget attributes. These new attributes can be added to buttons, letting the browser address some core issues around simplicity and accessibility, and provide built-in common functionality.
With the command and commandfor attributes, buttons can now perform actions on other elements declaratively, bringing the ergonomics of a framework without sacrificing flexibility.
Cool native HTML elements you should already be using
I cover some great HTML elements in this article — modals, accordions, live range previews, progress bars and more. You might already know some of these, but I bet there’s something new here for you too.
JavaScript
JavaScript | 2024 | The Web Almanac by HTTP Archive
JavaScript chapter of the 2024 Web Almanac covering the usage of JavaScript on the web, libraries and frameworks, compression, web components, and source maps.
There has been a continuous increase in the volume of JavaScript. In 2024, this upward trend resumed, with the median JavaScript payload rising by 14%, reaching 558 kilobytes on mobile and 613 kilobytes on desktop. This ongoing trend is concerning. While device capabilities are improving, not everyone has access to the latest technology. Larger JavaScript bundles place additional strain on device resources, impacting performance, especially for users with older or less powerful hardware.
GSAP ScrollTrigger Visualizer
A useful tool for GSAP users to better understand ScrollTrigger behavior.
Human-readable date formatting with vanilla JavaScript
You probably don’t need moment.js or piles of StackOverflow-ing, you just need Date.toLocaleDateString(). Here’s some common use cases.
React Data Table Component
Creating yet another React table library came out of necessity while developing a web application for a growing startup. I discovered that while there are some great table libraries out there, some required heavy customization, were missing out of the box features such as built in sorting and pagination, or required understanding the atomic structure of html tables.
If you want to achieve balance with the force and want a simple but flexible table library give React Data Table Component a chance. If you require an Excel clone, then this is not the React table library you are looking for.
Kitchen sink example here.
Components Are Just Sparkling Hooks
Here’s a question you might encounter while interviewing for React developer roles:
“What is the difference between a component and a hook?”
The answer that the interviewer is likely looking for is along the lines of “A component is a building block for the UI, and hooks are utility functions provided by React to manage state and side-effects”.
It’s a satisfactory answer if your goal is to find employment. But if you want to make an impression, the more daring answer is: “There is no difference”.
Disclaimer: Daring answers to simple questions is an unwise strategy on screening rounds.
UX
Page Flows - UI/UX Design Inspiration for Apps and Websites
Explore real-world user flows and design patterns from leading apps and websites.
Miscellaneous
Build your own chrome extension
I wanted a simple way to track the year's progress, so I decided to build a Chrome extension for it. I’ve also for some reason figured it would be super challenging to build my own chrome extension (spoiler alert: it's not) so I decided to do something about it and got to work.
Our Favorite DevTools Features of 2025
Browser developer tools keep getting better every year, making it easier to build fast, responsive websites. Chrome's latest DevTools update brings some useful features that improve how you debug and optimize your web apps.
Let's explore the most exciting new Chrome DevTools features that will help you build better websites in 2025.
Why Do We Have a Cache-Control Request Header?
Learn how the Cache-Control request header works, how browsers handle refresh and hard refresh caching, and when developers should use it for realtime data and offline-first applications.
What Makes Code Hard To Read: Visual Patterns of Complexity
Not long ago, I was auditing a codebase for work (looking for bugs) when I realized that despite the quality of the code, I was becoming mentally fatigued extremely quickly and had a hard time working on it for long stretches of time.
I ended up figuring out what made this codebase so difficult to stick with, but it didn’t turn out to be what I expected (Cyclomatic Complexity). After doing a little reflection and research, it ended up being something more related to readability–something I didn’t have a lot of data on, but was curious to learn if there was objective terminology or common metrics.
So today we’re jumping into the results of that investigation, which means instead of visualizing code, we’re talking about visual patterns of code, specifically the ones that make my brain hurt.
Webpixels - The Ultimate Bootstrap Component and Template Library
Production-ready components and templates for building high-quality websites and apps, ready to copy and paste seamlessly into your project.
Not free, pricing here.