Links
The Contrast Triangle
Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. This is so that colorblind users can tell what pieces of text are links. By not using underlines, a design has to rely on contrast alone to achieve this. Even the default blue link color in browsers doesn't meet this contrast level. Both the text and links have to have a contrast ratio of 4.5:1, or 3:1 if it's large scale text.
:root isn’t global
Most developers prefer to keep all their CSS custom properties in one place, and a pattern that has emerged in recent years is to put those on
:root, a pseudo-class that targets the topmost element in your document (so that's always<html>on web pages). But just because they're in one place and in the topmost element, it doesn't mean they're global.
The Potentially Dangerous Non-Accessibility Of Cookie Notices
Cookie consents — whatever your opinion is regarding them — are ubiquitous and possibly even a legal risk for your webpage. In addition to their privacy implications, they have the potential to violate web accessibility laws as well. In this piece, a Web Content Accessibility Guidelines (WCAG) auditor shares some cookie banner error patterns that can massively hurt a page’s overall conformance. Let’s explore what to look out for with this omnipresent piece of the web interface.
Detecting if an event was triggered by a user or by JavaScript
On a recent project, I finally found a solution to an issue I’ve run into several times: When listening for events in JavaScript, how can I tell whether an event was triggered directly by a user or by my code?
The “const” Deception
The “const” keyword in JavaScript is used to create constants, variables that can't change. Curiously, though, we do seem to be able to edit objects and arrays that are created using “const”. In this tutorial, we're going to dig into the incredibly-important distinction between “assignment” and “mutation” in JavaScript.
Videos
Autoexpanding textareas with CSS and JavaScript
Hey, today we're going to look at how to create auto-expanding text areas, so let's dig in!