A directory of brand guidelines: logosearch.link

The end of annoying JavaScript imports

Dom Habersack
Dom HabersackMarch 3, 2021
A bunch of balloons with either happy or sad faces drawn on them.
We’re going up, and we don’t even have to worry about how high we need to go.

This week, I want to share a quick JavaScript tooling tip before I put the finishing touches on my business plan. If you ever randomly added or removed ../s from import statements until they worked, this one is for you.

When most websites had very little JavaScript, it was fine to keep it in a single file. With their explosive growth, splitting code up into several smaller files became necessary. Today, we can import code from other files thanks to the import statement.

We usually spread files across many directories to give our projects more structure. We can then import them with relative paths, like so:

import Header from '../../components/header'
import { getAllPosts } from '../../lib/api/posts'

A ../ in a path tells your code to go up a level. By chaining them, we can instruct it to “go this many directories up from here, then down this other path”. This allows us to put code in complex directory structures in a way that makes sense for our projects.

As projects grow, these imports become painful to maintain. It is never very obvious how many ../ we need when referencing another file. Counting directory levels is difficult and annoying. I often kept adding and removing levels until my imports worked.

I came across a configuration file called jsconfig.json in the [Next.js documentation]. The existence of this file declares the directory this file is in the root of a JavaScript project. As one of its features, we can define path aliases in it.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"]
    }
  }
}

We can then refer to these directories with the @/ prefix instead of using relative imports:

import Header from '@/components/header'
import { getAllPosts } from '@/lib/api/posts'

This works in any directory or file you’re in. You could be many layers removed, or even in entirely different parts of your project. We no longer have to count directories and have long repetitions of ../ in our import statements. It instantly cleans up imports like nothing else.

Tools like Next.js and Nuxt.js support this configuration out of the box. VS Code seems to do the same. If you’re chaining ../s until your imports work, check out this configuration. It’s totally my new favorite thing this week.

– Dom

Continue reading

Lines of candies.
#45July 15, 2020

JavaScript sorts arrays weird

By default, an array of numbers will not be sorted numerically. To avoid unexpected results, we can tell it how to sort an array.

A bird sitting on a branch.
#12November 27, 2019

CSS that has a tail wind

In utility-first CSS, we do not limit ourselves to single classes. Instead, we use many small classes that each add small pieces of styling.

An assortment of metalcast letters used in a printing press.
#8October 30, 2019

The Inter typeface family

Variable fonts are about to fix some of the performance issues caused by adding many custom fonts to our sites.

Read all issues →