Why responsive and accessible websites don’t really need ‘em.

Photo by Sigmund on Unsplash

If you design or develop websites, do not use px units. Absolute units (px, in, mm, cm, pt, and pc) are as bad for accessibility and responsive design as using tables for layout. Of all the available absolute units, pixels (px) are the only ones stubbornly sticking around. We have collectively (and rightly!) abandoned all of the other units for styling digital content.

Designers and developers are able to see the absurdity of physical distance measurements being applied to digital content, but px just seem… “digital?” They’re not. Originally px was intended to represent a physical pixel on a device…

I have a proposal for a new feature for JavaScript: built-in memoization. (This proposal isn’t even at Stage 0 because no TC39 Champion has picked it up yet.)

const memoFn = Function.memoize(fn, {hash, compare, select})

To be clear, I am not advocating for automatic memoization of functions, as that is not something that the JS engine could or should do. JS engines should not memoize functions automatically, because they can’t tell whether or not a function is pure. …

Photo by Dmitry Ratushny on Unsplash

Accessibility is not just about Blind people using Screen Readers. It is about providing access to your content in any way that the user may want or need it. Browsers come with a lot of accessibility features built in: auto-translations, keyboard navigation, zooming, user-supplied CSS overrides, and so on. A commonly engaged feature is text-zooming. People who would never consider themselves disabled turn on this preference, especially on mobile devices with small screens.

Text-zooming supplies the browser with a new base font-size (most default to 16px) and websites that avoid absolute units (px, pt, in, mm) in favor of relative…

Everyone wants to rewrite their codebase. The current one has too much cruft. It’s legacy code. Ugh.

A pile of junk.
A pile of junk.
Photo by Ann Kathrin Bopp on Unsplash

At some point in every programmer’s experience, they interact with a codebase that is so frustrating that they dream of scrapping the whole thing and starting over. When is this a good idea? When is this a macabre fantasy that’s best left unrealized?

Code grows like an organism. Some evolutions stretch previously simple areas into monstrosities built to handle far more than originally intended. Some sections show unique characteristics of a trend or an experiment that didn’t carry over to the rest of the codebase, but they remain because they solved some problem and “if it ain’t broke, don’t fix…

Photo by Markus Spiske on Unsplash

The introduction of “use strict”; greatly cleaned up the language, but there’s still some pain points to eliminate. I think JavaScript is ready for “use stricter”;!

Disclaimer: This is not a real or upcoming feature of JavaScript, just my wishlist.

Stricter JavaScript

  • Optional chaining and function invocation by default. ?., ?[], and ?() are no longer necessary. Still want to blow up the whole app when traversing goes awry? Use the coalescing operator: uh.oh.spaghettio ?? throw new Error(‘burn it down’);.
  • null === undefined. Then you only have to check one value. Why the hell are there two “empty” values anyway?!
  • typeof null…

Photo by Volkan Olmez on Unsplash

One of my more common critiques on code reviews of CSS changes is the presence of magic numbers. I’ll see a property being added with a nonsensical measurement, like top: 13px, and I’ll ask to contributor why it exists. More often than not, the answer is, “because it works.” The problem with this answer is that it only works for you, now. For another user on a different device in the future, it probably won’t work. Let me explain…

What is a magic number?

First, let’s clarify what exactly a magic number is. A magic number is a measurement without context. It is a number…

CSS variables, officially called Custom Properties, are amazing. I want to use them, but I can’t. Because IE11 doesn’t support them. And it will never die.

Since Windows 10 is the “last version of Windows,” and Internet Explorer upgrades are tied to the Operating System version, IE11 is frozen in time and every user is frozen along with it. If you, as a web developer, care to reach the large number of users stuck on IE11, you are frozen too.

When it comes to using new CSS, there are two strategies: progressive enhancement, and graceful degradation. Progressive enhancement is for…

Photo by Jeremy Thomas on Unsplash

Among the many seeming oddities of JavaScript is the fact that NaN (Not-a-Number) is not equal to itself. Countless beginners have written conditionals checking if n === NaN, only to find that this is never true. The solution, of course, is to use the built-in checker, Number.isNaN(). Confusion over this inequality often boils over to agitation and unfair condescension at the JavaScript language.

I’m here to tell you that NaN !== NaN is a feature of JavaScript and not a bug.

Why shouldn’t NaN be equal to itself? Because that would lead to bad comparisons. NaN is coalescing, meaning that…

Photo by Sven Mieke on Unsplash

After years of writing and maintaining a couple of very large web projects and numerous smaller ones, I have developed some heuristics for writing maintainable CSS. I have used BEM, SMACSS, and CSS Modules for naming, though this article is not about naming, per se. (I tend to use a mix of atomic classes and BEM-ish naming.) This article is more about the properties and values I use or avoid.

My StyleLint config: https://github.com/NickGard/css-utils/blob/master/stylelint.config.json


A pet peeve of mine is an over-abundance of color values in a web project. A large, long-lived project I worked on a few years ago…

Photo by Anna Kolosyuk on Unsplash

I’ve been writing React applications and components for about 4 years now and I’ve used several styling “solutions”: CSS-Modules, Glamorous, Glamor, Emotion, Styled-Components, inline style attributes, and the out-of-the-box import './styles.css' method.

They all suck.

Debugging sucks

Where the hell did that hashed class name / data attribute come from? Some libraries have configurations or webpack plugins that (slightly) demystify these names but you’d better have it set up correctly so that this only happens in “dev” and not “prod” so you don’t ship the extra weight. You probably won’t ever need to debug production code, right?

DevTools interop sucks

Many, if not most, CSS-in-JS…

Nick Gard

Web Developer, Oregonian, husband

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store