design tips

A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them.

const buttons = document.querySelectorAll(".js-do-thing");
// There could be any number of these!
// I need to loop over them and attach a click handler.

There are SO MANY ways to go about it. Let’s go through them.

forEach

forEach is normally for arrays, and interestingly, …

The post A Bunch of Options for Looping Over querySelectorAll NodeLists appeared first on CSS-Tricks.

Say you have a stylesheet linked up like this:

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

But as the page loads, you’re on a desktop browser where the screen is 1753px wide. The browser should just skip loading that stylesheet entirely, right? It doesn’t. Thomas Steiner explains:

it turns out that the CSS spec writers and browser implementors are actually pretty darn smart about this:

The thing is, the user could always decide to resize their window (impacting width, height, …

The post Why Browsers Download Stylesheets with Non-Matching Media Queries appeared first on CSS-Tricks.

This resonated with me:

It’s ironic to me that the numeronym “a11y” lacks accessibility: it’s not immediately decipherable by humans who aren’t “in the club”; and, in some fonts, it’s visually indistinguishable from the word “ally” (with lowercase L’s), which can foil searches for clarity.

— Eric Meyer (@meyerweb) November 5, 2018

Because I bet it took me a year after seeing that acronym (“numeronym”, I guess) for the first time to know that was just a stand-in for the …

The post The ironic inaccessibility of a11y appeared first on CSS-Tricks.

In the grand tradition of every single poll question I’ve ever posted, the poll below has a has a fundamental flaw. In this case, there is no option between “In the last month” and “Never” but, alas, the results are interesting:

When’s the last time you SFTP’d (or the equiv) into a server and changed a file directly?

— Chris Coyier (@chriscoyier) October 9, 2018

What I was trying to get at with this poll is how many people do …

The post When’s the last time you SFTP’d (or the like) into a server and changed a file directly? appeared first on CSS-Tricks.