The usual methods of copying an object or array only make a shallow copy, so deeply-nested references are a problem. You need a deep copy if a JavaScript object contains other objects.

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…


Why they switched, how they migrated—and why they wouldn’t do it today

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…


WEB PERFORMANCE

Google’s about to penalize slow websites. If you care about search engine optimization (SEO) and your ranking on Google, you should pay attention to this change in their search algorithm

Image: LCP (2.5–4sec) vs. FID (100–300ms) vs. CLS (0.1–0.25)
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…


How I went from physical therapist to front-end software engineer and developer advocate.

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

Either method can work. Array.prototype.filter() is infinitely more powerful than Array.prototype.includes(), while the .includes() method is easier to read and offers much better performance.

Photo by Athena Lam on Unsplash

If you need to know if a JavaScript array contains an item, you have a couple of options other than just writing a for loop.

The most obvious alternative is Array.prototype.includes(), but using Array.prototype.filter() might save you future refactoring.

“The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.”
MDN Docs

If you need to return the first matching item, you’d use Array.prototype.find() instead of .includes().

The more powerful .filter() method lets you test the entire array with an arbitrary criteria, and it returns a new array of all…


Medium members can now access a lot more content about software engineering than ever before, thanks to The Pragmatic Programmers in a partnership with Better Programming.

Photo by Ben White on Unsplash

The Pragmatic Programmers put their entire collection of textbooks about software development and web development on Medium this week.

Is this a good thing or a bad thing for web developers?

My favorite titles from the list:

  • Your Code as a Crime Scene
  • Mazes for Programmers
  • Real-Time Phoenix
  • Real-World Kanban
  • React for Real

I counted 142 books in the collection. That’s a ton of content.

As I commented on HackerNews, I think this is a great opportunity for programmers to be able to find a lot more answers through organic search.

Previously you’d have to know that the topic was…


If you need all array items converted into a single string without commas separating the elements, then you need to pass the empty string "" as an argument to the array .join() method.

Photo by Brett Jordan on Unsplash

Turn an Array into a String Without Commas

When you call JavaScript’s .join() (Array.prototype.join()) method with no argument, you’re actually using a comma.

The default behavior of .join() is to convert an array to a string with commas, so it’s the same as calling .join(",") explicitly.

When you call .join(",") you specify that you want a string literal "," to be the separator character, which will occur between each element. But it’s the same as .join() with no argument at all.

If you call .join("") with the empty string "" instead, then all of the elements will be joined together without commas.

We can demonstrate this behavior with…


Would you pay for the new Stackbit service? Do you like to use themes from sites like Jamstack Themes in your projects, or do you always start from scratch? Is it better to always build your own design library? When is paying for convenience worth it?

Screenshot of Stackbit by Dr. Derek Austin 🥳 | This post contains no affiliate links.

Stackbit just released their pricing plans for their Jamstack “instant site” service, which I love and have written about before:

My initial impression is that there’s a lot of value for anyone making websites in a small team. Is it enough to make the $29 and $149 price points attractive for teams of 4 users and 10 users respectively?

I’ll still use Stackbit’s free tier any time. I mean there’s literally a Create Site button on the excellent Jamstack Themes site:


ES6 introduced let and const as alternatives to var for declaring variables in JavaScript. Because const is not hoisted to the top of the execution context in the same way var is, const should be faster, right?

Photo by Mg Cthu on Unsplash | There are no affiliate links in this article.

Execution context and hoisting

The first lecture in Tyler McGinnis’s Advanced JavaScript course covers execution context and hoisting, and it got me wondering about instantiating variables using var and const in JavaScript.

After the lecture, I was left thinking that the JavaScript keyword var might be slower than the keyword const, because var needs to be hoisted.

Perhaps that extra step in the execution context hurts performance. If so, we would also expect to find that let is slower than var.

(If you’re not sure about the difference between each of these keywords for declaring variables, I’ve previously compared let, var, and const).

There’s…


You can access object properties in JavaScript in one of two ways: . dot syntax or [] bracket notation. Here’s why there are two property accessors and what the difference is between them.

Photo by Alejandro Barba on Unsplash

One of the first things JavaScript developers learn is that there is a difference between primitive types (like numbers and booleans) and objects (like arrays and Dates).

You typically recognize objects because they are invoked with the object literal syntax ({}, curly brackets) and then accessed using a single period character, the . dot syntax.

Calling the . dot syntax is what is called an object property accessor, as it allows you to access the specified property.

“Property accessors provide access to an object’s properties by using the dot notation or the bracket notation.” — MDN Docs

Object properties are…

Dr. Derek Austin 🥳

Developer Advocate ♦ Frontend Software Engineer ♦ 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