Photo by Yousef Espanioly on Unsplash

I wanted to share a trick I picked up a few years ago from señor Kent C. Dodds, the “Epic React” and “Testing JavaScript” guy.

Did you find that example kind of convoluted? No worries, let’s break it down real quick, and then I’ll share why I filter Boolean values.


Since I’m now a freelancer, I’ve been quarantining in Puerto Morelos, Mexico. Photo by Dr. Derek Austin 🥳

My Journey from Physical Therapy to Engineering

You may be curious as to why a physical therapist, massage therapist, and strength coach is also an SEO & web performance expert.

Having spent the last decade in sports medicine, including several years as a full-time physical therapist (and Airbnb SuperHost who got over 500 reviews in 3 years), it was time for a change — so I started blogging on Medium to refresh my web development skills.

You see, I started building websites professionally back in 2001, and I even built a PHP app for LiveJournal that earned a few hundred dollars in advertising income. …


WEB PERFORMANCE

Image: LCP (2.5–4sec) vs. FID (100–300ms) vs. CLS (0.1–0.25)
All images by Philip Walton and Ilya Grigorik (CC-BY 3.0, source)

I was cussing on the toilet, again, because I’d accidentally clicked a link on my phone while reading The Ringer’s NBA coverage.

My mom would be embarrassed, I’m sure.

You see, I prefer to open links from their website in a new tab, because I don’t want to hit the Back button. Why would such a minor thing cause me to start cussing in such a compromising position?

It’s because their website is slow. If I hit the Back button, I have to wait for their site to load again, and it almost always loses my place as dozens of…


Photo by João Silas on Unsplash

What is a shallow copy?

Making a shallow copy of an array or object means creating new references to the primitive values inside the object, copying them.

That means that changes to the original array will not affect the copied array, which is what would happen if only the reference to the array had been copied (such as would occur with the assignment operator =).

A shallow copy refers to the fact that only one level is copied, and that will work fine for an array or object containing only primitive values.

For objects and arrays containing other objects or arrays, copying these objects requires…


Photo by Jordi Fernandez on Unsplash

In early 2018, The Guardian, a British newspaper and online publication, switched its 2.3m content items from MongoDB to PostgreSQL.

Why did they switch? What would they do differently today?

The Day the London Servers Baked

In July 2015, a massive heatwave struck London, with the unusual consequence of The Guardian switching from MongoDB to PostgreSQL just three years later.

At the time, The Guardian’s data was in a standard NoSQL database; MongoDB stored locally at Guardian Cloud, the data center in the basement of The Guardian’s office near Kings Cross.

While writers for The Guardian were live-blogging about the heat, developers at The Guardian…


Welcome to a brand-new perspective on stress. Photo courtesy of the author.

There’s something they never tell you about moving to paradise: it’s stressful. And this is the story of how I permanently changed my body’s response to stress, using cutting-edge research, and am now happier than ever. But the journey to get here was more than a little bumpy, and it required me to undertake radical self-experimentation.

You see, I realized I had lost my wallet the exact moment I arrived at Richmond International Airport on the morning of September 30, 2020. I had been up all night cleaning and moving out of my apartment, and somehow my wallet had disappeared…


Photo by Nick Seagrave on Unsplash

Whether or not you’ve memorized a bunch of sorting algorithms for your next technical interview, you’re going to end up sorting data in JavaScript.

Sorting is inevitable, and every JavaScript developer eventually learns about the array .sort() method (Array.prototype.sort()).

Once you figure out how to sort an array numerically — which is not the least bit obvious in JavaScript — it’s easy to feel you understand sorting.

However, you may have been stymied by the fact that while you can .sort() an array, you can’t sort a regular JavaScript object.

In fact, JavaScript objects don’t have a fixed order at…


Sheep asking why is their a horizontal scrollbar?
Screenshot of a CodePen by Dr. Derek Austin 🥳 (SVG Icon by FreePik and the Flat Icon Team, FlatIcon.com)

Horizontal scrollbars are a sign of “horizontal overflow” on your sites and apps. Let’s fix it.

Here’s a CSS Riddle for You

If the visible portion of a document (its “viewport”) is 100 “vw” units wide, what’s the width of 100vw?

To put it in CSS, width: 100vw should be full-screen, equivalent to width: 100%, right?

Wrong.

There’s an odd bug with CSS’s “box-sizing model” that actually isn’t a bug at all, but it’s an important thing to be aware of.

The viewport units include the space taken up by scrollbars, when present. …


Photo by Paul Teysen on Unsplash

Have you ever thought about how there is no correct or fixed order to use for the import statements in your JavaScript files?

Should you stick the CSS-in-JS module import at the top, or is that where your React imports go? What about internal dependencies?

I’ve been using the great Headwind extension for VS Code to sort my Tailwind CSS class names for a while already, so I was glad to find something similar to handle my import statements in sprawling TypeScript projects.

It’s called the (wait for it) TypeScript Import Sorter and is developed by the great Michael, who…


Photo by Jill Heyer on Unsplash

Can you spot the bug in this React .jsx code using Tailwind CSS? 🐞

Dr. Derek Austin 🥳

Frontend Software Engineer ♦ Developer Advocate ♦ SEO & Web Performance Expert ♦ Content Writer ♦ My Favorite Tech Stack: React / Next.js at Vercel

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