Accessibility
Your accessibility score is lying to you
Automated accessibility testing tools, such as axe-core by Deque, WAVE, Lighthouse are bit like a spellcheck for web accessibility. They are really useful for identifying and resolving many common accessibility issues quickly.
The problem is the way their reporting gives a score of out 100%. It gives the impression to the uneducated that an automated scoring once it reaches 80 or 90% is pretty good. However, these scores can be deeply misleading.
InclusiveColors: WCAG accessible color palette creator for Tailwind/CSS/Figma/Adobe
A tool for making custom branded color palettes for web and UI design that are built from the ground up to meet accessible contrast requirements for WCAG, ADA and Section 508.
Why Headings Are Important in HTML: Structure, Accessibility, and SEO
Headings are not a styling tool in HTML – they’re a semantic tool. You should use headings to define the hierarchy of the page’s content, help users navigate, make content accessible, and improve SEO. Proper headings make your HTML meaningful for both humans and machines.
How to Test WCAG 1.4.10: Reflow (Level AA) - Easy Website Accessibility Test You Can Do
This video demonstrates how to test Web Content Accessibility Guidelines success criterion 1.4.10: Reflow (Level AA) and shows a failure due to sticky components covering the content, making it unreadable.
5 Reasons Accessibility Has Shifted From Nice-To-Have to Compliance Essential
People often consider accessibility as a matter of good UX design. But now, it’s also increasingly a matter of law. Around the world, governments are introducing or expanding legislation that requires digital products and services to meet established UX accessibility standards.
CSS
pathLength makes makes SVG path animations easier to manage
Use the pathLength attribute to make animating stroke-dasharray and stroke-dashoffset easier.
CSS Length Units
A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.
Perfectly Pointed Tooltips: All Four Sides
Time for part two. We’ve got really nice functional positioned tooltips already, but they were mostly concerned with “pointing” up or down and shifting at the edges to avoid overflow. Now we’re going to take it further, considering four positions without shifts.
Perfectly Pointed Tooltips: To The Corners
Time for Part three. We are still creating tooltips that follow their anchors, and this time we will work with new positions and learn new tricks. I will assume you have read and understood the first two parts, as I will skip the things I already explained there. Fair warning, if you haven’t read those first two you might get a little lost.
The Weird Parts of position: sticky;
Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.
We’ll cover a brief introduction to sticky positioning. We’ll see how it works, and then we’ll look at some common, frustrating ways it can fail. Then we’ll learn exactly how to fix it.
SASS: The CSS Preprocessor That Survived the Apocalypse
That SASS isn't mainstream doesn't mean it's bad or dead. In a world where the new is often confused with the best, SASS represents maturity and reliability. It's a tool that has proven its value over time and continues to evolve to remain relevant.
For developers working on medium to large-scale projects, SASS remains an excellent choice that brings structure, power, and elegance to style development. It's not a passing fad, but a consolidated tool that has found its place in the modern web development ecosystem.
The Universal Focus Ring
Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard.
::details-content: style expandable content without wrapper divs
The ::details-content pseudo-element lets you style the expandable content of details elements separately from the summary, no divs needed.
Animating CSS width or height no longer forces a Main Thread animation (in Chrome, under the right conditions)
Chrome no longer forces width/height animations to run on the Main Thread, in case those values don’t actually change throughout the animation.
The modern way to draw squircles using corner-shape in CSS
For years, we’ve faked “characterful” corners with SVG masks, pseudo-elements, and more than a few headaches. The problem? Border-radius only controls size, not shape.
The experimental (and fairly new) corner-shape property changes all that by letting us define the actual shape of an element’s corners directly in CSS.
JavaScript
Create a Modern, Accessible Before/After Slider with React
Upgrade a before/after image comparison slider in React with Pointer Events, full keyboard support, A11Y (role="slider"), and resize-safe math.
AnimateIcons – Modern Animated React Icon Library
Seamless, animated icons for React—make your interface stand out with beautifully smooth motion and easy customization. Built to help you create engaging experiences without the hassle.
How To Throttle Specific Requests In Chrome DevTools
Learn how to delay individual requests in Chrome DevTools. Debug performance issues or bugs that happen when specific resources are delayed.
Error chaining in JavaScript: cleaner debugging with Error.cause
Error handling in JavaScript has always felt a bit chaotic. Throwing errors is easy, but tracing them back to the root cause? Not so much. That’s where the cause property comes in.
Diving Into Reactive Programming in Node.js
While Node.js wasn’t built with reactive programming in mind, libraries like RxJS and Bacon.js support that approach. When used right, they can improve your event-driven architecture and power more responsive microservices.
In this guide, you'll learn what reactive programming is all about, explore how it fits into the Node.js ecosystem, and we'll walk through practical examples to see it in action.
React Source Lens
Instantly locate any React component's source code with a single keystroke. Hover + Cmd+Shift+O = your editor opens the exact file and line.
Autumn.js — The Last Frontend Engine You’ll Ever Need
Forget React. Forget Solid. Forget every other framework. Autumn.js isn’t just a framework — it’s a reactive, deterministic, GPU-aware, ultra-low-latency frontend engine built to annihilate every bottleneck in the DOM.
Designed for 10M+ row grids, real-time dashboards, and interactive UIs — every frame is accounted for, every interaction is instantaneous.
Node.js — Security Best Practices
This document intends to extend the current threat model and provide extensive guidelines on how to secure a Node.js application.
UX
A friendly guide to front-end date pickers
Who needs a JavaScript date picker?
The answer, in most cases, is nobody! Complex UI leads to more errors and abandoned forms. There can be easier ways to pick a date than a calendar widget. This guide provides alternate ideas and aims to send developers on a path towards user-friendly interfaces.
Miscellaneous
A (kind of) farewell to the web
Front-end engineering is at a crossroads, and right now I’m not optimistic about it.
Technologically, for well-funded web application development, whether in the Enerprise, Government, or startup land, we’re increasingly all in around frameworks, and particularly React and its entire ecosystem.
Why is that particularly problematic? Because this is a layer of abstraction that obfuscates and keeps us at arm’s length from the increasingly capable and sophisticated underlying web platform that we should be leveraging to build new and extraordinary things.
Half-life of Frameworks
Recent popular frameworks are also not aging well. Look at the current state of React. jQuery's success arc is predictive of React's success arc. Is data binding really an issue today? Web Components are widely supported an address the UI binding issues. Even if you chose React with its limitations it will block your progress towards a better UI. That's the focus of the article sighted at the start of the post. React has reached problem state. Like jQuery, it'll still be listed on job requirements or in promotion justifications. It is often recommended when you use a large language model to generate JavaScript and CSS source code. React is beyond it's half-life.
Today lots of people know React. But does anyone remember MooTools, Prototype or YUI? Anyone remember Jaxer from Aptana? They were the React of their era. The rise and fall of successful third party frameworks is a cautionary tale.
How We Catch UI Bugs Early with Visual Regression Testing
Visual regression testing is a powerful technique to ensure our web application looks as expected, even as code changes over time. In this article, we walk through what a visual regression testing tool is, why it’s important, and how we implemented it in our CI/CD pipeline using Playwright, GitHub Actions, and Git LFS at subito.it.
Programming principles for self taught front-end developers
The majority of us are a bunch of self taught people with rather spotty knowledge and that's fine. Kilian (also self taught) is here to share some of the computer science fundamentals you probably are missing with the aim to improve your code in the long term.