Editor's Pick
Accessibility
Designing for All: The Basic Principles of Web Accessibility
In this article, we’ll look at some of the most fundamental and important aspects of accessibility on the Web. We’ll also consider some of the tools available for ensuring that the content on our websites is accessible to all.
CSS
First adventures in View Transitions
If you don’t know what View Transitions do conceptually, here’s the overview: they allow you to transition from one view; which is how things are currently on the page, to the new view; how things are going to be after you have clicked a button (or performed any other action that would change the DOM in some way). This magic trick is performed by the browser taking an image of the before state, an image of the new state, and transitioning between the two. They have been supported in Safari since 18.0 and in Chrome since 111.
CSS Variable Naming: Best Practices and Approaches
Naming CSS variables is essential for the organization, readability, and maintenance of the code in front-end projects. Despite seeming trivial, many companies still do not adopt a naming standard.
This article explores various approaches to naming CSS variables, highlighting the importance of semantic choices and consistent practices.
Styling the icon for HTML date and time types
If you want a custom-styled icon for HTML date/time types, there's some options for you.
Move Modal in on a… shape()
Years ago I did a demo where a modal was triggered open and it came flying in on a curved path. I always thought that was kinda cool. Time has chugged on, and I thought I’d revisit that with a variety of improved web platform technology.
How to style a broken image
When an image fails to load the browser will simply show you the alt text but you can change this using a cool CSS trick. Broken images accept pseudo-elements such as ::before and ::after so we can tweak them to add a custom error message or any visual you want.
Killer Collection of CSS Resets
In this article, I have rounded up a hand-selected collection of freely available global CSS reset styles. I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information.
system.css | A design system for building retro Apple-inspired interfaces
System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.
Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.
The new if() function in CSS has landed in the latest Chrome
CSS is kinda-sorta becoming a true “programming language” with each passing day. With the introduction of new features like CSS variables, the calc() function, The pseudo-classes like :has() and :is(), and the ever versatile @media queries, CSS is making it easier to write complex styles and layouts.
The recent addition to this list is the new if() function in CSS. However, only in Chrome 137 and above at the moment.
HTML
The datalist element
The <datalist> element is one of those HTML features that doesn’t get nearly enough attention, but it’s incredibly useful for creating autocomplete suggestions on text inputs without any need for JavaScript.
Decorative text within HTML
Back in 2020, Andy Bell introduced me to the idea of grouping attribute values.
The nice thing about attributes values is that they can contain any character. Obviously there are some little gotchas. Quotes may need to be encoded, and some attributes only take specific variables.
The class attribute, however, is a little different. If a string isn't referenced within the CSS, it is simply ignored. So let's get creative.
The col element
The <col>/<colgroup> mechanism is complex, unreliable, and specified in a really perplexing way. My advice is to avoid table structures with grouped columns or tiered headers. There are almost always simpler ways to present the data.
JavaScript
Sort an Array of Objects Ways in JavaScript
Sorting arrays of objects in JavaScript is a fundamental task for developers working with complex data structures. Whether you're dealing with numeric values, strings, or dates, JavaScript provides powerful tools to efficiently organize your data. In this guide, we'll explore various methods to sort arrays of objects based on different criteria.
You Don’t Need Your Own Backend to Call LLM from Front End
Until now, creating any AI experience using large language models (LLMs) required building your own backend and integrating it with the frontend. Even for simple projects or proofs of concept, this approach was time-consuming and demanded a broad skill set. Why couldn’t you just call an LLM directly from the frontend?
FrontLLM is a public LLM gateway that forwards requests from your frontend (via CORS), to your LLM provider, such as OpenAI, Anthropic, and others. It includes built-in security features that let you control costs and monitor usage in real time.
Note that you can use FrontLLM with any front-end framework, such as Angular, React, or Vue. You don’t need a framework at all, vanilla JavaScript works just fine too.
ForesightJS - Predictive Mouse Intent Library
ForesightJS is a free and open-source JavaScript library that predicts user intent by analyzing mouse movements and trajectories. It allows developers to prefetch data based on user intent instead of the classic on-click or on-hover.
RenderHooks - Inline render-block-stable React hooks
RenderHooks lets you place hooks right next to the markup that needs them—no wrapper components, no breaking the Rules of Hooks, and zero boilerplate, even when you supply your own custom hooks.
Miscellaneous
Git Branching Strategies: A Comprehensive Guide
This guide explores the most popular Git branching strategies, explaining how each works and analyzing their strengths and weaknesses.