Editor's Pick
Open Props UI - A modern, cutting edge UI library. So modern you might need browser feature flags enabled
A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with ease-of-use and scalability in mind. Last but not least - you copy and paste the components into your repo. It's the best way to have a complete understanding and ownership over your stuff.
Accessibility
aria-description Does Not Translate
A major risk of using ARIA to define text content is it typically gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services frequently miss content in ARIA attributes when sending text strings to localization vendors.
Content buried in aria-label, aria-placeholder, aria-roledescription, or aria-valuetext can end up being presented to users in a language different than their own. The very thing we add to help users can exclude them instead.
Colleges Must Fix Millions of Web Pages. It's About Damn Time
Think remediation is painful? May you never have to face daily accessibility barriers.
Don’t Wrap Figure in a Link
In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you won’t hear everything announced at once:
No screen reader combo treats the caption as the accessible name nor accessible description, not even for an image that lacks one.
This is because the <figure> element (or, rather, its implicit role) does not allow name from content. It’s just a container.
This becomes a problem when you wrap the entire figure in a link.
Now the link is wrapping a container that does not have an accessible name — remember it doesn’t get its name from its contents. It’s a not a text node.
CSS
Open Props UI - A modern, cutting edge UI library. So modern you might need browser feature flags enabled
A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with ease-of-use and scalability in mind. Last but not least - you copy and paste the components into your repo. It's the best way to have a complete understanding and ownership over your stuff.
Scroll-driven animation in full CSS
Learn five practical ways to smoothly transition an element’s height in CSS, from traditional techniques like max-height to modern methods with flexbox and grid. Discover upcoming features like calc-size() for even more flexibility.
A couple CSS tricks for HTML Dialog elements
You can use CSS to add some simple functionality to HTML <dialog> elements.
CSS text-box-trim
Take back space from above and below your text content; achieve optical balance. text-box lets developers and designers tailor the space above and below text.
This property lets you control the space above and below text, for example <h1>, <button> and <p>. Every font produces a different amount of this block directional space which contributes to the element's size. This chaotic space contribution is not easily measured, and has been impossible to control until now.
HTML
Use cases for <form method="dialog">
I've started using a relatively less known value of the <form> element's method attribute, called dialog, for the following scenarios:
- when a form is submitted via AJAX.
- when a form is a multi-step wizard, where each step is a form in itself, and I have to accummulate values from each step.
JavaScript
The Difference Between HTML Attributes and Properties
Attributes and properties allow you to control how HTML elements function and read data about their state. Although the terms are often used interchangeably, subtle differences between the two can lead to unexpected behavior and bugs.
ECMAScript feature: import attributes
The ECMAScript feature “Import Attributes” helps with importing artifacts other than JavaScript modules. In this blog post, we examine what that looks like and why it’s useful.
Import attributes reached stage 4 in October 2024 and will probably be part of ECMAScript 2025.
Shallow clones versus structured clones
If you find yourself in a pickle when trying to clone your state, it may be because you are only making a shallow clone. If you have a simple state that is made up of primitives, then it is fine to use a shallow clone. Once you introduce nested objects that’s when you need to consider using structuredClone to create a deep clone and avoid just copying references.
chess.js
chess.js is a TypeScript chess library used for chess move generation/validation, piece placement/movement, and check/checkmate/stalemate detection - basically everything but the AI.
chess.js has been extensively tested in node.js and most modern browsers.
Sharing a Variable Across HTML, CSS, and JavaScript
It turns out it’s useful to have this variable in all three of the important front-end technologies at play: the HTML, CSS, and JavaScript.
iframes and when JavaScript worlds collide
Every iframe gets a complete copy of the JS web environment, down to every prototype chain. Let’s see what horrifying things can happen when we interact with it.
Revealed: React's experimental animations API
Since its inception over 12(!) years ago, there's been a glaring animation-sized hole in React's API.
Over the year its closest competitors like Vue and Svelte have introduced APIs that, while not extensive, still make animations a little easier. Whereas React developers have had to rely on third-party libraries like Motion for React, React Spring or others.
Until now.
Yes, React is getting its first animations API.
Hexagonal Grids
This guide will cover various ways to make hexagonal grids, the relationships between different approaches, and common formulas and algorithms. I've been collecting hex grid resources for over 25 years. I wrote this guide to the most elegant approaches that lead to the simplest code, starting from the guides by Charles Fu and Clark Verbrugge.
The code samples on this page are written in pseudo-code; they're meant to be easy to read and understand. The implementation guide has code in C++, Javascript, C#, Python, Java, Typescript, and more.
Boosting Multithreaded Performance with Atomics.pause in JavaScript
Now, let's examine another exciting development: the Atomics.pause proposal—a feature designed to optimize concurrent and multithreaded JavaScript applications.
Move elements around the DOM while preserving their state with moveBefore
New in Chrome 133 (which goes stable on Feb 4) is a new method to move an element around the DOM: Node.prototype.moveBefore. While small in size, this method is a very huge deal because it preserves the element’s state when moving it around. For example:
- Iframes remain loaded
- Active element remains focus
- Popovers, fullscreen, modal dialogs remain open
- CSS transitions and animations carry on
targetjs: A Novel JavaScript UI framework designed to simplify development and enhance animations
TargetJS distinguishes itself by introducing a novel concept known as 'targets,' which forms its core. Targets give methods and variable assignments life cycles and the autonomy to operate independently, with various callbacks to adapt to changes, mimicking the behavior of living cells. This opens a new paradigm in programming.
Repo here.
UX
Psychology and UX: Decoding the Science Behind User Clicks
Explore the relationship between psychology and UX design, including the impact of psychological principles on shaping user behavior.
Jakob’s Law | Laws of UX
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
Miscellaneous
Beyond Technical Skills - Getting to the Next Level
Moving ahead in your career depends on how well you can acquire certain non-technical skills.
The problem with design tokens
As design systems evolve, managing tokens across tools, code, and documentation has become routine. However, relying solely on tokens as the ultimate source of truth introduces unnecessary complexity and constraints. This post highlights common limitations of design tokens and highlights the importance of modeling design contexts.
You have two jobs
You were hired to write code. Many developers make the mistake and think that their job stops there. That’s not true. In fact, you have two jobs:
- Write good code
- Be easy to work with
The first part tends to be the easy part. Coding can be challenging at times, but you’ve made it this far in your career so clearly you know this bit. The bit that many engineers struggle with is the second part, but it’s that second bit that tends to be most critical to success.