tutorial

How to quickly toggle (enable/disable) autosave in VS Code

By / Last updated on October 4, 2023

To enable or disable autosave in VS Code, use the File > Auto Save option from the menu bar.

The `File > Auto Save` option in Visual Studio Code enables/disables autosave.

After this, the “dirty” indicator will no longer show up when you modify a saved file.

Before:

Visual Studio Code without autosave.
No autosave.

After:

Visual Studio Code with autosave.
Autosave enabled – the unsaved indicator no longer shows.

Why do we need autosave?

So we can stop mindlessly pressing Ctrl + S.

So we can save time, increase productivity, and be much more certain that we’re working with the latest changes.

Autosave is not perfect though; it’s up to you to weigh the pros and cons – which we comprehensively cover here.

Stop autosaving your code

What’s not to like about autosave?

Some of the cons we talk about in that autosave article:

  1. It wastes resources because it saves even when you’re not ready to view the results of your changes.
  2. It makes it harder to recover from unexpected errors, for example, making a buggy file change and accidentally closing the file.
  3. There’s no auto-formatting with auto-save.

Enable/disable autosave in VS Code Settings

Alternatively, we can disable autosave in Visual Studio Code using the Files: Auto Save setting in the Settings page.

You can easily navigate to this page with the gear icon at the top-left of the code editor:

You can open Settings with the bottom-left gear icon.

Once you get there, you can use the search bar to find the setting.

Using the `Files: Auto Save` option in VS Code Settings.

As you can see, Files: Auto Save can be one of four possible values, namely:

  1. off – self-explanatory: disable autosave.
  2. afterDelay: – the new value enables autosave with the File > Auto Save setting. autosaves the file sometime after your changes.
  3. onFocusDelay – autosaves the dirty file when you switch windows or tabs.
  4. onWindowChange – as the name implies, autosaves the unsaved file when you switch windows in the operating system.

So there are more customization options in the Settings page than in the menu bar.

Change autosave delay in VS Code

When Files: Auto Save is set to afterDelay, you can modify the autosave delay in Visual Studio Code with the Files: Auto Save Delay setting.

Modifying the autosave delay in VS Code.

You may be better off increasing the autosave delay instead of disabling autosave entirely, so VS Code still saves your work automatically, while minimizing the impact on system resources.

Enable/disable autosave in VS Code with Command Palette

To turn autosave on or off in Visual Studio Code, you can also use the File: Toggle Auto Save command, accessible from the Command Palette:

Toggling auto save in VS Code with the Command Palette.

How to quickly listen for a route/page change in Next.js

By / Last updated on September 30, 2023

To detect a route change in Next.js:

  • app directory: use useEffect and usePathname.
  • pages directory: use useEffect and useRouter.

Listen for route/page change in Next.js app directory

To listen for a route change in Next.js 13 app directory, use the useEffect and the usePathname hooks. The action in useEffect will run anytime the pathname from usePathname changes.

src/app/route-change-listener.tsx
'use client';

import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

export function RouteChangeListener() {
  const pathname = usePathname();
  const [changes, setChanges] = useState(0);

  useEffect(() => {
    console.log(`Route changed to: ${pathname}`);
    setChanges((prev) => prev + 1);
  }, [pathname]);

  return <></>;
}

Here we log to the console and change the state of the component when the route changes.

The URL change listener logs to the console when the route changes.
The URL change listener logs to the console when the route changes.

Page change listener must persist with client-side routing

For this detection to work, the component containing this useEffect needs to be somewhere in the DOM where it will not get unmounted with client-side navigation.

In the Next.js 13 app directory, this could be the layout.tsx file:

src/app/layout.tsx
import { Metadata } from 'next';
import '@/styles/globals.css';
import { RouteChangeListener } from './route-change-listener';

export const metadata: Metadata = {
  title: 'Coding Beauty',
  description: 'The official Coding Beauty home page.',
  icons: {
    icon: '/favicon.png',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      {/* 👇 Persists with client-side navigation */}
      <RouteChangeListener />
      <body>{children}</body>
    </html>
  );
}

useEffect needs 'use client'

Also, since server components are the default in Next.js 13, you’ll need to add the 'use client' directive at the top of the component file.

Otherwise, you won’t be able to use interactive client-side features like React hooks, including useEffect.

The useEffect React hook can't work without the 'use client' directive in Next.js.
useEffect can’t work without ‘use client’ in Next.js.

Listen for route/page change in Next.js pages directory

To handle a URL or location change in Next.js pages directory, combine the useEffect and the useRouter hooks:

src/pages/url-change-listener.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export function UrlChangeListener() {
  const router = useRouter();

  useEffect(() => {
    console.log(`The page is now: ${router.pathname}`);
  }, [router]);

  return <></>;
}

Route change detector must persist with client-side routing

Just like with the app directory, the component that listens for the URL change with useEffect needs to be somewhere in the DOM where it will not get unmounted with client-side navigation.

In the pages directory, this could be the _app.tsx or _app.js file:

src/pages/_app.tsx
import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { UrlChangeListener } from './url-change-listener';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <UrlChangeListener />
      <Component {...pageProps} />
    </>
  );
}

Detect route/page with useRouter() events

Alternatively, we can detect a client-side URL change in the Next.js pages directory with events that the useRouter() object emits. For example:

src/pages/url-change-listener.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export function UrlChangeListener() {
  const router = useRouter();

  useEffect(() => {
    const startHandler = () => {
      console.log('Router change started');
    };

    const completeHandler = () => {
      console.log('Router change completed');
    };

    router.events.on('routeChangeStart', startHandler);
    router.events.on('routeChangeComplete', completeHandler);

    return () => {
      router.events.off('routeChangeStart', startHandler);
      router.events.off('routeChangeComplete', completeHandler);
    };
  }, []);

  // 👇 You can put a progress bar or something here
  return <></>;
}

Here we used two important router events:

  • routeChangeStart – fires when the route is about to change.
  • routerChangeComplete – fires when the router has changed completely.

There’s more too, and their names are just as self-explanatory as these two.

The `useRouter()` object has other properties apart from routeChangeStart and routeChangeComplete.

Key takeaways

  • To listen for a route or page change in Next.js app directory, combine the useEffect and usePathname hooks.
  • Detect a URL change in the pages directory with the useEffect and useRouter hooks.
  • You can also use the routeChangeStart and routeChangeComplete events from the useRouter() object to handle a location change.

How to quickly fix the “Cannot read property ‘then’ of undefined” error in JavaScript

By / Last updated on September 29, 2023

The “Cannot read property ‘then’ of undefined” error occurs in JavaScript when you call try then() on a value – typically a function’s return value – but this value is undefined.

The "Cannot read property 'then' of undefined" error occurring in the VS Code terminal.
The “Cannot read property ‘then’ of undefined” error occurring in the VS Code terminal.

This could happen for one of the following reasons:

  1. Not returning the Promise in the function with return.
  2. Not returning a value in an async function.
  3. Not chaining Promises properly.

To fix it, ensure the function returns actually returns a Promise.

Now let’s look at some specific cases of the error and learn how to fix it in a few easy steps.

Fix: Promise not returned

The “Cannot read property ‘then’ of undefined” happens when you forget to use the return keyword return the Promise from the function.

JavaScript
function fetchData(apiUrl) {
  // 👇 `return` keyword missing
  fetch(apiUrl).then((response) => {
    return response.json();
  });
}

// ❌ Cannot read property 'then' of undefined
fetchData('/api/data')
  .then((data) => console.log(data))

To fix it, simply return the Promise with return:

JavaScript
function fetchData(apiUrl) {
  // we return the Promise
  return fetch(apiUrl).then((response) => {
    return response.json();
  });
}

// ✅ Runs successfully
fetchData('/api/data')
  .then((data) => console.log(data))

Fix: Asynchronous function doesn’t return a value

The “Cannot read property ‘then’ of undefined” error happens in JavaScript when an async function doesn’t return a value, for example, due to an oversight on our part when writing conditional control flow.

JavaScript
async function getUserData(userId) {
  if (userId) {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
  // 😕 No return if userId is absent
}

// ❌ Cannot read property 'then' of undefined if userId is absent
getUserData().then(data => console.log(data));

To fix it, check all flow paths and make sure the async function always returns a value.

JavaScript
async function getUserData(userId) {
  if (userId) {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }

  // 👍 Return a resolved Promise even if userId is absent
  return Promise.resolve(null);
}

// ✅ Now, we can safely use 'then'
getUserData().then(data => console.log(data));

Fix: Promise is not properly chained

The “Cannot read property ‘then’ of undefined” error occurs in JavaScript when you don’t chain the Promises properly:

JavaScript
function fetchAndParseUser(apiUrl) {
  fetch(apiUrl)
    .then((response) => {
      console.log(response);
      // 😕 Forgot to return the 'json' Promise
    });
}

// ❌ Error: Cannot read property 'then' of undefined
fetchAndParseUser('/api/user')
  .then(data => console.log(data))

To fix it in this case, make sure that each then in the chain returns a Promise if we want to continue the chain.

JavaScript
function fetchAndParseUser(apiUrl) {
  // 👇 Here, we return the 'json' Promise
  return fetch(apiUrl)
    .then((response) => {
      console.log(response);
      return response.json();  // 👍 Return the Promise here
    });
}

// ✅ Now, we can safely use 'then'
fetchAndParseUser('/api/user')
  .then(data => console.log(data))

Key takeaways

  1. The error “Cannot read property ‘then’ of undefined” occurs when then() is called on an undefined value.
  2. Ensure the function returns a Promise to avoid this error.
  3. Always use the return keyword to return the Promise from the function.
  4. An async function should always return a value, even in all conditional control flows.
  5. Properly chain Promises by ensuring each then in the chain returns a Promise if you want to continue the chain.

How to quickly detect the hover event in Vue.js

By / Last updated on September 21, 2023

To detect mouse hover in Vue.js, use a hover state variable and the mouseenter & mouseleave events to detect when the mouse enters and leaves the element’s bounds.

App.vue
<template>
  <div @mouseenter="hover = true" @mouseleave="hover = false"></div>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script>

The mouseenter event runs when the mouse pointer enters the bounds of an element, while mouseleave runs when it leaves.

We could also listen to the mouseover event to detect hover, this event runs for an element and every single one of its ancestor elements in the DOM tree (i.e. it bubbles) and this could cause serious performance problems in deep hierarchies. mouseenter doesn’t bubble so we can use it without worrying about this.

Change style on hover in Vue.js

To change the style of an element on hover in Vue.js, we can combine the hover state variable and the :class directive:

App.vue
<template>
  <div
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    class="div"
    :class="{ 'div-hover': hover }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script>

<style>
.div {
  background-color: blue;
  width: 200px;
  height: 100px;
}

.div-hover {
  background-color: yellow;
}
</style>
Changing color on mouse hover in Vue.js.

Display another element on hover in Vue.js

We could also display another element in the UI when we detect hover. For example: a tooltip to display more info on a particular UI element.

To do this, you can pass the state variable to a v-if state directive you set on the element. This ensures that the element only displays when the hover state is true.

App.vue
<template>
  <button
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    class="div"
    :class="{ 'div-hover': hover }"
  >
    Button
  </button>
  <p v-if="hover">Tooltip</p>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script>
Displaying another element on hover.

Detect hover on Vue component

You can also use the mouseenter and mouseleave approach to detect hover on a custom Vue component.

components/StyledButton.vue
<template>
  <div>
    <button>Styled button</button>
  </div>
</template>

<style>
button {
  height: 30px;
  width: 100px;
  background-color: lightgreen;
}
</style>
App.vue
<template>
  <styled-button
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  ></styled-button>
  <p v-if="hover">Tooltip</p>
</template>

<script>
import StyledButton from './components/StyledButton.vue';

export default {
  components: {
    StyledButton,
  },
  data() {
    return {
      hover: false,
    };
  },
};
</script>
Detecting mouse hover on a Vue.js custom component.

If you’re using Vue 2.x, you’ll need to use the .native event modifier to listen for native DOM events on the Vue component:

Vue
<styled-button
  @mouseenter.native="hover = true"
  @mouseleave.native="hover = false"
></styled-button>

Key takeaways

  • Detect mouse hover in Vue.js using a hover state variable and mouseenter & mouseleave events.
  • mouseover event can cause performance issues in deep hierarchies, mouseenter is safer.
  • Use hover state to conditionally apply CSS classes, changing element appearance on hover.
  • Use hover state with v-if to conditionally display elements like tooltips on hover.
  • mouseenter and mouseleave can detect hover on custom Vue components. Use .native modifier in Vue 2.x.

Quickly open Markdown link in new tab (target _blank)

By / Last updated on September 19, 2023

To open a link in a new tab with target _blank in Markdown, use [link](url){:target="_blank"} or create an HTML <a> tag with target="blank".

But for GitHub README files, and on many other platforms that render Markdown, you simply can’t.

You can't open a link in a new tab in the GitHub README file Markdown editor.
You can’t open a link in a new tab in the GitHub README file Markdown editor.

What is Markdown?

Markdown is a lightweight markup language designed for simplicity and readability.

The original goal for Markdown was to enable people to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid HTML (or XHTML). In other words, Markdown is a text-to-HTML conversion tool for web writers. Many websites like Github.com, Notion.so, and Medium.com use Markdown in one way or another.

Why make a link open in a new tab in Markdown?

Opening a link in a new tab in Markdown can be beneficial for a number of reasons:

  1. User experience: By opening a link in a new tab, you keep your original page open, allowing the user to easily return to your content after they’ve finished going through the linked content.
  2. Decrease bounce rate: In web analytics, a bounce is when a user lands on your site and then leaves without any other interaction. When your site stays open in one tab while the linked content opens in another, it technically lowers your bounce rate which can be better for site metrics and SEO (Search Engine Optimization).
  3. Preserve context: If your content provides further reading or references via external links, opening these in a new tab helps to maintain the context for the user. The users will not have to go back and forth between pages to understand the context.

Why don’t many Markdown rendering tools allow links to open in a new tab?

  1. Simplicity: Markdown was designed to be as simple as possible, and this does not provide support for attributes in its link syntax. The target="_blank" attribute required to open links in a new tab in HTML is absent from basic Markdown.
  2. Security: Links that open in a new tab can be a vector for a phishing attack known as “tabnapping“. If the linked site is malicious, it can potentially alter the content of the original page and trick users into providing sensitive information.
  3. User control: There’s an argument that it should be up to the user to decide whether they want a link to open in a new window or tab. This can be as simple as Ctrl + Click or a right-click in most browsers.

Open link in new tab with HTML <a> tag

You can create a link that opens in a new tab in Markdown, create an HTML anchor <a> element, and set it’s target attribute to _blank, link in regular HTML:

Markdown
Visit <a href="https://codingbeautydev.com">Coding Beauty</a> for more educational and interesting content.

Open link in new tab with {:target="_blank"}

Alternatively, create a link that opens in a new tab in Markdown with the [link](url){:target="_blank"} syntax. For example:

Markdown
Visit [Coding Beauty](https://codingbeautydev.com) for articles on JavaScript, React, Next.js, and more.

This works in kramdown syntax and in the Jekyll framework.

Key takeaways

  • To open a link in a new tab in Markdown, use [link](url){:target="_blank"} or an HTML <a> tag with target="blank". However, not all platforms support this.
  • Markdown is a lightweight markup language for creating simple, readable text that can be converted to HTML.
  • Opening links in new tabs can enhance user experience, decrease bounce rates, and preserve context.
  • Many Markdown tools don’t support new tab links due to simplicity, security, and user control concerns.
  • Use an HTML <a> tag or [link](url){:target="_blank"} syntax to open links in new tabs.

How to quickly redirect to another page URL in Next.js

By / Last updated on September 17, 2023

To easily redirect to another page URL in Next.js:

  • Static redirect: use the redirects key in next.config.js.
  • In App Router server component: use redirect() from the next/navigation.
  • In pages Router: use useRouter() from next/navigation.
  • In middleware: use NextResponse.redirect() from next/server.
Redirecting to another page or URL in Next.js.
Redirecting to another page URL in Next.js.

To easily redirect to another page URL in Next.js, use the redirects key in your next.config.js file:

next.config.js
// ...
const nextConfig = {
  // ...
  async redirects() {
    return [
      {
        source: '/blog',
        destination: '/',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

redirects is an async function that returns an array with items that have source, destination, and permanent properties:

  • source: A pattern matching the path of the incoming request.
  • destination: The path you want to redirect to.
  • permanent: If true, Next sets a 308 status code in the redirection response, which tells clients like search engines to cache the redirect from that point onwards. If false, Next will set a 307 status code (temporary redirect) instead, making sure that redirect doesn’t get cached.

Note: While 301 and 302 are the popular status codes for permanent and temporary redirects, Next.js uses 307 and 308 because many browsers changed the request method to GET for the destination URL, regardless of the method the client set in the original request to the source. So if POST v1/posts returned a 302 with v2/posts, the next request to v2/posts may end up GET v2/posts instead of POST v2/posts. But with 307 and 308, the browsers are guaranteed to preserve the request method.

Redirect statically with path parameter to page URL

You can use a path parameter like :path to match any path in the source URL and pass it on to the destination URL.

Here, /news/:slug/ will match /news/codingbeauty and redirect to /blog/codingbeauty.

next.config.js
// ...
const nextConfig = {
  // ...
  async redirects() {
    return [
      {
        source: '/news/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

It doesn’t work for nested paths though.

Redirect statically with wildcard path to page URL

To match nested routes, query parameters, and anything else in the source path, use the * character after the path parameter.

next.config.js
// ...
const nextConfig = {
  // ...
  async redirects() {
    return [
      {
        source: '/articles/:slug*',
        destination: '/blog/:slug*',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

Redirect to another page URL dynamically in Next.js App Router server component

To redirect to another page URL dynamically in a Next.js 13 server component, use the redirect() function from the next/navigation module:

JavaScript
import React from 'react';
import { Metadata } from 'next';
import { redirect } from 'next/navigation';

export const metadata: Metadata = {
  title: 'Next.js - Coding Beauty',
  description: 'Tutorials by Coding Beauty',
};

export default function Page() {
  if (process.env.NEXT_PUBLIC_HOME) redirect('/home');

  return <main>Welcome to Coding Beauty.</main>;
}

The redirect() function redirects the browser to another URL; /home in this case.

Here this happens conditionally, but if the redirect is guaranteed to happen, it will surely prevent any JSX in the page from rendering, and editors like VS Code are smart enough to detect this:

Visual Studio Code can detect when the JSX in a page is unreachable due to a redirect.

Redirect to another page URL dynamically in App Router client component

To redirect to another page URL dynamically in a Next.js client component in the Next.js 13 app directory, use the push() method of the object returned by the useRouter hook from the next/navigation module:

Here we’re redirecting from from the /blog path to an external URL:

src/app/blog/page.tsx
'use client';

import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.push('https://codingbeautydev.com');
  }, []);

  return <main>Welcome to Coding Beauty.</main>;
}

The useRouter hook returns a Router object that we use to programmatically change the route, resulting in a client-side redirect.

Redirect to another page URL dynamically in Pages Router component

It’s like in the App router, but useRouter comes from next/router instead of next/navigation.

To redirect to another page URL dynamically in a Next.js client component in the Pages router, use the push() method of the object returned by the useRouter hook from the next/router module.

src/pages/amazing-url.tsx
import Head from 'next/head';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    router.push('/fantastic-url');
  }, []);

  return (
    <>
      <Head>
        <title>Amazing URL | Coding Beauty</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <main>
        <p>Coding Beauty</p>
        <h2>Amazing URL</h2>
      </main>
    </>
  );
}

The useRouter hook returns a Router object that we use to programmatically change the route to perform a redirect on the client side.

Next.js >= 12: Redirect to another page URL in middleware

To redirect to another page URL using middleware in Next.js 12.1 and above, use the NextResponse.redirect method from the next/server module in a middleware.ts file.

src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  if (url.pathname === '/old-blog') {
    url.pathname = '/new-blog';
    return NextResponse.redirect(url);
  }
}

Here we use request.nextUrl to get the current URL in the Next.js middleware.

You’ll place middleware.ts file in the same level as your pages directory – which could be the root directory, or src, if enabled.

middleware.ts is at the same level as the pages directory.
middleware.ts is at the same level as the pages directory.

The reason why this only works in Next.js 12.1 above is because starting from Next.js 12.1, relative URLs are not allowed in redirects with NextResponse.redirect() or NextResponse.rewrite().

Next.js 12: Redirect to another page URL in middleware

To redirect to another page URL dynamically using middleware in Next.js 12, use the NextResponse.redirect() method from the next/server module in a _middleware.js file inside the pages folder or a subfolder where you want the middleware to work:

pages/_middleware.js
import { NextResponse, NextRequest } from 'next/server';
export async function middleware(request, event) {
  const { pathname } = request.nextUrl;
  if (pathname == '/') {
    return NextResponse.redirect('/hello-nextjs');
  }
  return NextResponse.next();
}

Key takeaways

  • In Next.js, there are several ways to quickly redirect to another page URL.
  • For static redirects, you can use the redirects key in the next.config.js file. It allows you to define source and destination paths with options for temporary or permanent redirects.
  • Path parameters (e.g., /blog/:slug) and wildcard paths (e.g., /blog/:slug*) can be used to match and redirect nested routes or query parameters.
  • In a Next.js App Router server component, you can use the redirect() function from the next/navigation module to dynamically redirect to another URL.
  • In the Next.js client component, you can use the push() method from the useRouter hook in the next/navigation (Next.js 13) or next/router (Next.js 12 and below) module to programmatically change the route and perform a client-side redirect.
  • For middleware in Next.js 12.1 and above, you can use the NextResponse.redirect() method from the next/server module in a middleware.ts file.
  • In Next.js 12 middleware, you can use the NextResponse.redirect() method in a _middleware.js file inside the pages folder or a subfolder.

Why “Yarn 2” is actually Yarn 3

By / Last updated on September 30, 2023

What do we know as Yarn 2?

It’s the modern version of Yarn that comes with important upgrades to the package manager including PNMP-style symlinks, and an innovative new Plug ‘n’ Play module installation method for much-reduced project sizes and rapid installations.

But after migrating from Yarn 1, you’ll find something interesting, as I did – the thing widely known as Yarn 2 is actually… version 3?

After migrating to "Yarn 2" and checking the version, it was shown to be version 3.

Why is “Yarn 2” using version 3?

It’s because Yarn 1 served as the initial codebase which was completely overhauled in the Yarn v2.0 (the actual version 2), enhancing its efficiency and effectiveness, with its launch taking place in January 2020. As time moved on, the introduction of a fresh major, Yarn v3.0, happened, thankfully without the need for another codebase rewrite. The upcoming major update is expected to be Yarn v4.0, and so on.

Despite the historical tendency of releasing few major updates, there was a growing trend among some individuals to label everything that used the new codebase as “Yarn 2”, which includes Yarn 2.x versions and future ones such as 3.x. This, however, was a misinterpretation as “Yarn 2” strictly refers to the 2.x versions. A more accurate way to reference the new codebase would be “Yarn 2+” or “Yarn Berry” – a codename that the team selected for the new codebase when they started developing it.

As once stated by one of the maintainers in a related GitHub discussion:

Some people have started to colloquially call “Yarn 2” everything using this new codebase, so Yarn 2.x and beyond (including 3.x). This is incorrect though (“Yarn 2” is really just 2.x), and a better term to refer to the new codebase would be Yarn 2+, or Yarn Berry (which is the codename I picked for the new codebase when I started working on it).

arcanis, a Yarn maintainer

How to migrate from Yarn v1 to Yarn Berry

A Yarn Berry installation in progress.
A Yarn Berry installation in progress.

If you’re still using Yarn version 1 – or worse, NPM – you’re missing out.

The new Yarn is loaded with a sizable number of upgrades that will significantly improve your developer experience when you start using it. These range from notable improvements in stability, flexibility, and extensibility, to brand new features, like Constraints.

You can migrate from Yarn v1 to Yarn Berry in 7 easy steps:

  1. Make sure you’re using Node version 18+.
  2. Run corepack enable to activate Corepack.
  3. Navigate to your project directory.
  4. Run yarn set version berry.
  5. Convert your .npmrc and .yarnrc files into .yarnrc.yml (as explained here).
  6. Run yarn install to migrate the lockfile.
  7. Commit all changes.

In case you experience any issues due to breaking changes, this official Yarn Berry migration guide should help.

Final thoughts

The Yarn versioning saga teaches us an important lesson: terminology matters.

What many of us dub as “Yarn 2” is actually “Yarn 2+” or “Yarn Berry”, the game-changing codebase. This misnomer emphasizes our need to stay current, not just with evolving tools and features, but with their rightful names as well. After all, how we understand and converse about these improvements shapes our effectiveness and fluency as developers.

How to quickly get the height or width of an element in React

By / Last updated on September 4, 2023

To get the height or width of an element in React, use the useRef, useEffect, and useState hooks to access the element’s offsetWidth or offsetHeight property:

JavaScript
import React, { useEffect, useState, useRef } from 'react';

function ExampleComponent() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const elementRef = useRef(null);

  useEffect(() => {
    setWidth(elementRef.current.offsetWidth);
    setHeight(elementRef.current.offsetHeight);
  }, []);

  return (
    <div
      ref={elementRef}
      style={{ width: '50%', height: '50%', border: '1px solid black' }}
    >
      <p>Coding Beauty</p>
      <p>{`Element size: (${width}, ${height})`}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}
The height and width of the element is displayed with React.

useEffect() runs after the component mounts or re-renders, but useLayoutEffect() runs before. They both have a dependency array that triggers them when any of those dependencies change.

We create a ref for the target element with useRef(), and assign it to its ref prop, so we can access the HTMLElement object for this React element.

useRef returns a mutable ref object that doesn’t change its value when a component is updated. Also, modifying the value of this object’s current property does not cause a re-render. This is in contrast to the setState update function returned from useState.

We use useState() to create a state that we update when useEffect() gets called. This update makes the element’s width and height display on the page.

Get height and width of element with clientHeight and clientWidth

You can also get an element’s height and width in React with clientHeight and clientWidth. Unlike offsetWidth, it includes padding but excludes borders and scrollbars.

JavaScript
import React, { useRef, useState, useEffect } from 'react';

function ExampleComponent() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const elementRef = useRef(null);

  useEffect(() => {
    setWidth(elementRef.current.clientWidth);
    setHeight(elementRef.current.clientHeight);
  }, []);

  return (
    <div ref={elementRef} style={{ width: '50%', height: '50%' }}>
      <p>Coding Beauty</p>
      <p>
        <b>{`Element size: (${width}, ${height})`}</b>
      </p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}
Getting the size of an element in React with clientWidth and clientHeight.

Get height and width of element dynamically

You can get the height and width of an element dynamically, which means the height and width updates on window resize.

We do this with a resize event listener:

JavaScript
import React, { useEffect, useState, useRef } from 'react';

function ExampleComponent() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const elementRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      setWidth(elementRef.current.offsetWidth);
      setHeight(elementRef.current.offsetHeight);
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div ref={elementRef} style={{ width: '50%', height: '50%' }}>
      <p>Getting element width dynamically</p>
      <p><b>{`Element size: (${width}, ${height})`}</b></p>
    </div>
  );
}


export default function App() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}

We call addEventListener() in useEffect() to set the resize event listener on the element before it renders on the screen.

The resize event listener is called whenever the user resizes the window. In the listener, we update the state that stores the element’s width and height, and this causes a re-render.

We call removeEventListener() in useEffect‘s clean-up function to stop listening for resize events when the component is unmounted or when the dependencies change to prevent memory leaks and unintended side effects.

Get element height and width before render in React

To get the width and height of an element before render in React, we can combine two React hooks: useRef and useLayoutEffect.

JavaScript
import React, { useRef, useLayoutEffect, useState } from 'react';

function ExampleComponent() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const elementRef = useRef(null);

  useLayoutEffect(() => {
    setWidth(elementRef.current.offsetWidth);
    setHeight(elementRef.current.offsetHeight);
  }, []);

  return (
    <div style={{ width: '50%', height: '50%' }}>
      <p>Coding Beauty</p>
      <div ref={elementRef}>
        Element size: ({width}, {height})
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ExampleComponent />
    </div>
  );
}

So the difference between “before render” and “after render” is useLayoutEffect() and useEffect().

useLayoutEffect() works just like useEffect(), but the key difference is that it fires before the browser repaints the screen – before React renders the component.

We pass an empty dependencies array to useLayoutEffect() to make sure it only gets called once.

Here we create a ref for the target element with useRef(), and assign it to its ref prop, so we can access the HTMLElement object for this React element.

useRef returns a mutable ref object that doesn’t change its value when a component is updated. Also, modifying the value of this object’s current property does not cause a re-render. This is in contrast to the setState update function returned from useState.

We do use useState() though, to create a state that we update when useLayoutEffect() gets called. So calling setWidth() will cause the component to be re-rendered.

To get the actual width and height, we use the offsetWidth and offsetHeight properties, which include borders, padding, and any scrollbars.

Key takeaways

  1. To get the height or width of an element in React, combine the useRef, useEffect, and useState hooks to get the value of offsetWidth and offsetHeight.
  2. clientWidth and clientHeight are similar to offsetWidth and offsetHeight, but they include padding and exclude borders and scrollbars.
  3. To get the dimensions of the element dynamically, create a window resize event listener to automatically update the size when the user resizes the browser window.
  4. To get the size of the element before render, replace useEffect with useLayoutEffect.

How to easily fix the “error:0308010C:digital envelope routines::unsupported” error in Node.js

By / Last updated on September 2, 2023

The error:0308010C:digital envelope routines::unsupported error happens in Node.js when a JavaScript module still uses a flawed OpenSSL version that is incompatible with the version Node.js uses.

The "error:0308010C:digital envelope routines::unsupported" error occurring in Vue.js.
The error:0308010C:digital envelope routines::unsupported error occurring.

To fix it, downgrade to Node.js v16.13.0, or use the npm audit fix --force command to upgrade your packages to versions that use the updated OpenSSL version.

Why does the error:0308010C:digital envelope routines::unsupported error occur in Node.js?

In Node.js v17, the Node.js team patched an OpenSSL security vulnerability. This fix introduced a breaking change; if you try to use OpenSSL in Node.js v17 or later versions without also updating those modules that use previous OpenSSL versions, you’ll get this error.

And you’ll get it the next time Node.js is updated to use a newer OpenSSL version with breaking changes and you haven’t updated the OpenSSL-dependent libraries.

Fix: Upgrade NPM packages

To fix the error:0308010C:digital envelope routines::unsupported error, update the Node.js packages causing the error to the latest version.

Run npm audit fix to fix vulnerabilities

You can run the npm audit fix command to identify those packages using the outdated OpenSSL version and fix them automatically.

Shell
npm audit fix

npm audit fix reviews the project’s dependency tree to identify packages that have known vulnerabilities, and attempts to upgrade and/or fix the vulnerable dependencies to a safe version.

npm audit fix --force

If you want to install semver major updates to vulnerable packages, you can use the --force option. 

Shell
npm audit fix --force

Be cautious with this option: it could potentially break your project.

yarn-audit-fix

If you’re a Yarn user, you can use the yarn-audit-fix package to do what npm audit fix does.

Upgrade Webpack to v5

If you’re using Webpack directly to bundle your files, you can upgrade it to version v5 – specifically, v5.61.0 – to fix the error:0308010C:digital envelope routines::unsupported error.

Shell
npm i webpack@latest

# Yarn
yarn add webpack@latest

If instead, you’re using a tool like Create React App and the Vue CLI that uses Webpack internally, you’ll upgrade the tool to a version that doesn’t have this error.

Fix for Create React App: Upgrade react-scripts to v5

If you’re using Create React App then you can fix the error:0308010C:digital envelope routines::unsupported error by upgrading react-scripts to version 5, which comes with the newer Webpack version 5.

Install version 5 or later with this command:

Shell
npm i react-scripts@latest

# Yarn
yarn add react-scripts@latest

Fix for Vue CLI: Upgrade to v5

Similarly for the Vue CLI, you can fix the error:0308010C:digital envelope routines::unsupported error by upgrading the Vue CLI to version 5 which also comes with the newer Webpack version 5.

Install Vue CLI version 5 or later with this command:

Shell
npm update -g @vue/cli

# OR
yarn global upgrade --latest @vue/cli

More info on how to upgrade the Vue CLI here.

Fix: Use --openssl-legacy-provider option

To fix the error:0308010C:digital envelope routines::unsupported error in Node.js, you can also use the --openssl-legacy-provider option when running the script.

This solution is more of a hack though: it leaves your app open to security threats.

The --openssl-legacy-provider option is only available in Node version 17 or later.

Run with script

So for the start script, you’ll use this command:

Shell
export NODE_OPTIONS=--openssl-legacy-provider && npm run start

# Windows
set NODE_OPTIONS=--openssl-legacy-provider && npm run start

Modify script

You can also set this directly in the script to avoid needless repetition.

On Linux/Mac:

JSON
{
  ...
  "scripts": {
    "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve",
    "build": "webpack --mode production"
  }
  ...
}

On Windows:

JSON
{
  ...
  "scripts": {
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && node .",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && node build.js"
  }
  ...
}

Make sure the script is cross-platform

But now the scripts aren’t cross-platform.

They’ll obviously be problematic when collaborating and team members use other operating systems. What do we do? We install the cross-env NPM module and run the script with it.

Shell
npm i cross-env

# Yarn
yarn add cross-env
JSON
{
  ...
  "scripts": {
    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack .",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider node build.js"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
  ...
}

Now the script runs successfully on every platform.

Fix for Vue CLI

So to fix the error:0308010C:digital envelope routines::unsupported error when using Vue with the Vue CLI, install the cross-env module and set the --openssl-legacy-provider option:

JSON
{
  ...
  "scripts": {
    "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
    ...
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
    ...
  }
  ...
}

Fix for Create React App

And to fix the error:0308010C:digital envelope routines::unsupported error when using React with Create React App, install the cross-env module and set the --openssl-legacy-provider option.

JSON
{
  ...
  "scripts": {
    "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider ",
    ...
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
    ...
  }
  ...
}

Fix: Downgrade to Node.js v16.13.0

To fix the error:0308010C:digital envelope routines::unsupported error in Node.js, downgrade your Node.js version to 16.13.0.

This solution is more of a hack though, as it leaves your app open to security threats.

Install from the official website

Use this official link to download Node.js v16.13.0.

Install with Chocolatey

If you’re using Chocolatey, Node.js is available as the nodejs package, meaning you can easily install it in a terminal using the following command.

Shell
# Use current LTS version

choco install nodejs --version=18.5.0

Install with nvm

If you’re using nvm or nvm-windows, use these commands to quickly install and switch to Node.js v16.13.0.

Shell
nvm install 16.13.0

nvm use 16.13.0

Key takeaways

  • The error:0308010C:digital envelope routines::unsupported error in Node.js occurs when a JavaScript module uses an outdated OpenSSL version that is incompatible with the current Node version. This typically happens when Node.js v17 or later versions are used without updating the modules that use previous OpenSSL versions.
  • To fix this error, you can downgrade to Node.js v16.13.0, or use the npm audit fix --force or yarn-audit-fix command to upgrade your packages to versions that use the updated OpenSSL version.
  • If you’re using Webpack, you can upgrade it to version v5.61.0 to fix the error. For Create React App and Vue CLI, you can upgrade them to v5.
  • Another way to fix the error is to use the --openssl-legacy-provider option when running the script. However, this solution leaves your app open to security threats and is only available in Node version 17 or later.
  • Downgrading to Node.js v16.13.0 is another way to fix the error. However, this solution also leaves your app open to security threats. You can install this version from the official website, or use Chocolatey, nvm, or nvm-windows to install and switch to this version.

How to Quickly Reveal the Current File in Explorer in VS Code

By / Last updated on September 3, 2023

You either want to reveal the current file in the VS Code Explorer sidebar view or in your OS file manager. We cover both in this article.

Reveal current file in Explorer view in VS Code

To reveal the current file in the Explorer view of Visual Studio Code, use the Reveal Active File in Explorer View command, accessible from the Command Palette.

Revealing the active file in the VS Code Explorer view.

Why is it useful to reveal the current file in the VS Code Explorer view?

When working on a project with numerous files and directories, it can sometimes be challenging to remember the exact location of a specific file. Revealing the current file in the VS Code Explorer view allows you to quickly locate the file’s position within the project structure.

  1. Context: This is particularly useful when you want to gain a broader context of where the file is located in relation to other files and folders.
  2. Navigation: And you can easily navigate to these related files.
  3. File management: VS Code’s Explorer view provides file management capabilities, such as renaming, moving, and deleting files. If you’re currently editing a file and you want to perform a management action on it, revealing the file in the Explorer view makes it easier to perform these actions without having to manually navigate through the directory structure.
  4. Version control: If your project is under version control like Git, revealing the current file in the Explorer view can help you understand the file’s status in the context of version control. You can see if the file has been modified, staged, or is part of a particular branch, which can aid in your development workflow.
  5. Collaboration: When working on a project with others, revealing the current file can help your team members easily find and access the same file you’re working on. This is especially useful if you’re discussing a specific file in a conversation or during a code review.

Use the Reveal in File Explorer View command

To reveal the current file in the Explorer view in VS Code, run the Reveal Active File in Explorer View command.

Reveal the active file in the VS Code Explorer view.

In VS Code, we have commands – defined actions that carry our various operations in the editor.

We can easily run a command with the Command Palette, which we can access with these keyboard shortcuts:

  • Windows / Linux: Ctrl + Shit + P
  • Mac: Command + Shift + P

Reveal current file in Explorer with active editor context menu

You can also reveal the current file in the VS Code Explorer sidebar with the Reveal in Explorer View option in the context menu that shows up when you right-click the filename at the top.

Reveal the current file with the VS Code active editor context menu.

This item is also there in the context menu that shows when you right-click the file in the Source Control view.

This Reveal in Explorer View item is in the Source Control view context menu.

Reveal current file in Windows File Explorer / Mac Finder

To reveal the current file in your operating system’s file manager, use the Reveal in File Explorer command, accessible from the Command Palette.

The Reveal in File Explorer command in VS Code.

By the way, if you’re on Windows 11 and you’re dealing with File Explorer clutter, this tiny utility called WinENFET can help, by automatically opening File Explorer in a new tab, instead of a new window.

Why is it useful to reveal the current file in File Explorer/Finder?

When managing a project that includes many files and folders, it can occasionally become difficult to recall the precise location of a particular file. By displaying the current file in your operating system’s file manager, you can swiftly identify the file’s place within the project hierarchy.

This is useful for several reasons:

  1. Context: Helps you understand and navigate your project’s larger file hierarchy. This is especially helpful in large projects with complex file structures.
  2. External operations: You can perform actions not available in VS Code, like viewing file properties (creation date, size, etc.) or file permissions.
  3. Data transfer: Allows you to quickly locate the path for file transfers. If you need to send the file as an email attachment or upload it to a server, you can quickly find it in the operating system’s file manager.
  4. Easy access: If you’re working with a file in VS Code and you want to quickly open it in another application, revealing the file in the file manager makes this easy.
  5. Collaboration: If you’re working with a team, it’s easy to reveal the file in the file manager, zip it, and send it to team members as needed.

Use the Reveal in File Explorer command

To reveal the current file in your OS’s file manager in VS Code, run the Reveal in File Explorer command.

The Reveal in File Explorer command in VS Code.

In VS Code, we have commands: defined actions that carry out various operations in the editor.

We can easily run a command with the Command Palette, which we can access with these keyboard shortcuts:

  • Windows / Linux: Ctrl + Shit + P
  • Mac: Command + Shift + P

Reveal current file in File Explorer with active editor context menu

Alternatively, you can reveal the current file in your OS’s file manager with the Reveal in File Explorer option in the context menu that shows up when you right-click the filename at the top.

Revealing the current file in File Explorer/Finder from VS Code.

Set custom keyboard shortcuts for commands in VS Code

To set a custom keyboard shortcut for the Reveal in File Explorer or Reveal Active File in Explorer View command, change the keybinding for the command in the Keyboard Shortcuts page.

To get this page, you can click the Keyboard Shortcuts item on the Manage popup shown below or use the shortcut next to the text (Ctrl + K, Ctrl + S here).

Opening the Keyboard Shortcuts page from the Manage popup in VS Code.

Once you get there, search for the Reveal in File Explorer or Reveal Active File in Explorer View command in the search bar.

Searching for the Reveal in File Explorer keyboard shortcut.

Then double-click the command, type a new keyboard shortcut, and press the Enter key to carry out the change.

Changing the Reveal in File Explorer keyboard shortcut in VS Code.

Key takeaways

  • To reveal a file in the VS Code Explorer view, run the Reveal Active File in Explorer View command. You can do this with the Command Palette, or by setting a custom keyboard shortcut.
  • To reveal a file in your OS file manager (Windows File Explorer, Mac Finder, etc.), run the Reveal in File Explorer command. You can also do this with the Command Palette, or by setting a custom keyboard shortcut.
  • To set a keyboard shortcut for a command in VS Code, open the Keyboard Shortcuts page, select the command, type the new short, and confirm with Enter.