DEV Community: Mushfiqur Rahman Shishir

[Boost]

Mushfiqur Rahman Shishir — Wed, 11 Jun 2025 15:56:00 +0000

Anthony Max

Jun 9 '25

12 Open Source Tools Every Developer Should Know🔥

#webdev #javascript #programming #opensource

242

Comments 32

6 min read

A Short Handbook for TypeScript

Mushfiqur Rahman Shishir — Tue, 07 Mar 2023 09:59:55 +0000

TypeScript is a programming language that extends JavaScript by adding types. Types are annotations that describe the kind of data that a variable can hold, such as numbers, strings, booleans, arrays, objects, functions, etc.

In this post let’s explore the noteworthy ways to declare and use types, functions, interfaces, generics, and classes in TypeScript.

BENIFITS OF USING TYPES

You might be wondering why bother with types if JavaScript works fine without them, after all!

With TypeScript, you can avoid common errors like typos, null pointer exceptions, or incorrect function calls. You can also refactor your code with confidence, knowing that any changes will be checked by the compiler and flagged if they break something. TypeScript also helps you write more expressive and concise code by providing features like interfaces, generics, unions, intersections, and more. These features allow you to define and manipulate types in powerful ways that are not possible in plain JavaScript. In short, TypeScript makes your life easier as a developer by making your code safer, cleaner, and smarter.

HOW TO USE BASIC TYPES

For TypeScript, there are several built-in types that you can use to define variables, functions, and objects. Here are some examples of TypeScript types and how to use them:

// boolean type
let isDone: boolean = false;

// number types (integer and floating-point)
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// string type
let color: string = "blue";
let fullName: string = `Bob Bobbington`;
let sentence: string = `Hello, my name is ${fullName}.`;

// array type
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

// tuple type
let x: [string, number];
x = ["hello", 10];

// enum type
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

// any type
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

// void type (function that returns no value)
function warnUser(): void {
  console.log("This is my warning message");
}

// null and undefined types
let u: undefined = undefined;
let n: null = null;

Read the complete post on my blog.

LET’S EXPLORE THE IMPROVED ROUTING, LAYOUTS & RENDERING IN NEXTJS 13

Mushfiqur Rahman Shishir — Tue, 20 Dec 2022 23:06:27 +0000

Next.js 13 was recently released at the Next.js conference. Many new features are included, including new routing, a new way to fetch data (React suspense), Vercel fonts, og image generation, layouts, and more.

These new features have the potential to be game changers, and they promise to be extremely fast. But not without consequences.

Let’s go into more detail about them.

Turbopack: The successor to Webpack.

Turbopack, the brand new build tool led by the creator of Webpack, Tobias Koppers, will be the Web’s next-generation bundler. Rust was used to construct it from the ground up. It incorporates turbo repo in order to cache duplicate operations. Turbopack is extremely fast.

It updates large applications 10x faster than Vite and 700x faster than Webpack. On larger applications, the difference is even greater — Vite is frequently 20x faster. It has built-in support for Server Components, TypeScript, JSX, CSS, and other technologies.

However, it is currently in alpha, which may make migration difficult for existing apps due to webpack’s vast ecosystem of plugins.

A NEW NESTED ROUTING SYSTEM

Next.js 13 includes a new file-system-based router built on React Server Components, which supports layouts, nested routing, loading states, error handling, and other features. This opens up new possibilities and improves the framework’s overall performance.

The /app directory (currently beta – at the time of writing) includes support for the following:

Layouts: Easily share UI while preserving state and avoiding re-renders.
Server Components: Making server-first the default for the most dynamic applications.
Streaming: Display instant loading states and stream in updates.
Suspense for Data Fetching: The new use hook enables component-level fetching.

The /app directory can coexist with your existing pages directory for incremental adoption.

The new app directory retains file system-based routing, but it is now entirely directory-based, with a variety of naming conventions for different use cases. To make a page, you give the route’s direct name. js file to it, which exports the component you want to display there in a nice and simple way.

However, because it is a directory, we can co-locate additional components here rather than creating a separate components directory or following some other convention.

Check the whole article here

Why We Should Use Context API Instead of Redux For New React Apps

Mushfiqur Rahman Shishir — Fri, 18 Mar 2022 11:13:56 +0000

When creating a new React application, we think about redux as a state management solution as a default choice. Let’s have a look at the Context API as a possible replacement.

If you’re building a new React app today, your instincts may urge you to choose Redux. But should you start with Redux? That has turned into a legitimate question these days. The state management capabilities of React have vastly increased in recent versions. I’d want to discuss a more straightforward technique that relies on the Context API in this post.

LET’S TAKE A LOOK BACK

WHY DID WE ADOPT REDUX?

It wasn’t always the case that frontend apps used an organized approach to state transitions. When we were still using jQuery, I recall changing many locations in an application. That was not a pleasant encounter.

Here comes Redux to rescue, and in comparison, Redux was an outstanding solution:

An object represents the whole state of the User Interface (UI).
Any action that may change the state is a data-contained object.
To change the state, those acts are ingested by pure functions (reducers)
We structure the data in the state using selectors so that our components may consume it quickly.

It now appears self-evident. It was, nevertheless, excellent at the time.

All of the factors that got us here remain valid. However, the situation has altered nowadays.

The ecosystem of React has changed a lot recently. Two other additions have altered the terrain and created new opportunities:

Hooks
Context

It’s easier than ever to manage state across a hierarchical tree and trigger side effects using those two. So simple that I believe Redux is no longer required in many circumstances.

Most frontend apps lack the rich data flow that supports the use of Redux. If all you’re doing is getting data from an API and performing some simple interactions, Redux is overkill now.

OVER-ABSTRACTION IS A PITFALL THAT MANY PEOPLE FALL INTO
Forms are a fair instance of something close to elaborating this scenario. I’ve used Redux to create sophisticated forms with the aid of various supporting frameworks. Things become more complicated as they become more complex. And for what purpose? Finally, the state conveyed in a form is usually somewhat local.

Using Redux to model something like a form may be a painful experience. Is the state genuinely global? Frequently, a specialist library will do the job done. For this situation, Formik comes to the rescue. It’s designed specifically for that purpose and will meet almost any criteria you can think of.

USE CONTEXT API AS AN ALTERNATIVE

Read the rest of the article here: https://www.mushfiqweb.com/why-should-we-use-context-api-instead-of-redux-for-new-react-apps/

A Contemporary Guide on React State Patterns in 2021

Mushfiqur Rahman Shishir — Wed, 09 Jun 2021 22:38:34 +0000

Since the initial release of React in 2013, Facebook has rolled out a robust collection of tools to help developers with some of the minutiae of the web application development process, allowing them to focus on what matters most.

Despite React’s many capabilities and widespread adoption among developers, I’ve discovered that many of us face the same question: How can we handle complicated states with React?

This post will look at what state is, how to arrange it, and alternative patterns to use as our applications become more complicated.

UNDERSTANDING REACT STATE

React may be thought of as a blueprint in its most basic form. Your application will appear in a specific way depending on the status. React prefers declarative over imperative programming, a fancy way of stating that you express what you want to happen rather than the processes to get there. As a result, appropriately managing the state becomes critical, as the state determines how your program will act.

Read the full article A Contemporary Guide on React State Patterns in 2021

Best Practices for Checking PropTypes in React Components using TypeScript

Mushfiqur Rahman Shishir — Wed, 09 Jun 2021 22:35:55 +0000

JavaScript functions that return React elements are known as React components. These are the parameters that govern what will be added to the DOM. In addition, react components, like functions, may receive props as arguments, resulting in dynamically returned items.

Props can be of any data type, although component data types may differ. Component A, for example, may anticipate a name argument with a text data type, but component B may anticipate an age argument with a numeric data type. Likewise, D may anticipate an onClick argument with a Function data type, but C may expect a post parameter with an object data type with characteristics like title and date.

How can we tell our component what kind of data it should expect?

This may be done in various methods, but this post will focus on PropTypes and TypeScript. Despite holding identical goals, these two techniques operate in different ways. So we’ll go through what these tools are, how to use them, and tell them apart before trying more advanced techniques.

Prior knowledge of PropTypes and TypeScript is necessary for a thorough understanding of this article. You’ll also require an integrated development environment (IDE), such as Visual Studio Code.

PROPTYPES

PropTypes is a type-checking tool for props in React apps that can be used at runtime. The PropTypes efficiency has been provided through the prop-types package since React 15.5. PropTypes let you specify the props that are expected in a component, such as whether they are mandatory or optional. You’ll get a warning in the browser’s JavaScript console if you provide a different type to an element or miss a required prop:

Read the full article Best Practices for Checking PropTypes in React Components using TypeScript:

Make Windows PowerShell Work Like a Linux Terminal

Mushfiqur Rahman Shishir — Thu, 17 Sep 2020 05:42:58 +0000

Windows PowerShell doesn’t come with any git command utilities. But we can extend it to a new level where we can utilize git commands efficiently. In this post, we are going to see how to add auto command suggestions on TAB, branch information, and a working directory in Windows PowerShell.

The following will be the outcome after following this guide.

NEED POWERSHELL GALLERY

To get that look at our default PowerShell, we will install two packages from PowerShell Gallery. To check what that Gallery is about click here. We will install posh-git and oh-my-posh packages as modules. The posh-git will provide prompt with Git status summary information and TAB completion for Git commands, parameters, remotes, and branch names. On the other hand, oh-my-posh will enable us to theme our terminal as our own.

By default, windows don’t have any package provider for PowerShell modules. If we run the following command, the package provider will automatically get installed. So let’s open the PowerShell and run those commands one after another. It will ask for our confirmation to install the packages. Type Y for affirmation and type A to make all upcoming prompt affirmative.

Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

FIND A FONT WITH LIGATURES

Next, we need a typographic ligature supported font for our terminal. We will set that font from VSCode settings. Why do we need that? We need that to show the current branch, current changes status, etc. related symbols in the terminal. In this case, the Fira Code will be our best option. March ahead and download Fira Code from here. We need the TTF types so open the TTF folder and install all the fonts.

Find the rest of the article on my blog!

My Other Posts on My Blog

CRUD USING REACT HOOKS AND CONTEXT API

REST API DESIGN GOOD PRACTICES

MAKE WINDOWS POWERSHELL WORK LIKE A LINUX TERMINAL

WINDOWS SANDBOX – TEST BEFORE YOU INSTALL ANYTHING ON YOUR WINDOWS SYSTEM

CREATE A CUSTOM PROGRESS BAR USING HTML5

HOW TO CREATE ICON INPUT ELEMENT USING HTML AND CSS

ENABLE FILE TRANSFER TO GOOGLE CLOUD COMPUTE ENGINE

INSTALL WORDPRESS ON GOOGLE CLOUD COMPUTE ENGINE

CUSTOMIZE FILE INPUT ELEMENT USING JAVASCRIPT & CSS

Customize File Input Element Using JavaScript & CSS

Mushfiqur Rahman Shishir — Thu, 27 Aug 2020 01:48:02 +0000

There are numerous ways to customize the file input element in HTML. In this post, we are going to make the file input element more attractive using JavaScript and CSS.

HTML

We are going to use one element to show an icon and one to show selection text inside a along with to design the input element. So the label is the container for SVG icon and span text. This is how our HTML code looks like:

<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
<label for="file-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
        <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
    </svg> 
    <span>Choose a file...</span>
</label>

Final Output

Read full article: Customize File Input Element Using JavaScript & CSS.

CRUD USING REACT HOOKS AND CONTEXT API

Mushfiqur Rahman Shishir — Sun, 23 Aug 2020 21:06:13 +0000

React Hooks and Context API are two relatively new features that have been added to React from v16.8 and v16.3 respectively. In this post, I’m going to create an app that can perform CREATE, READ, UPDATE and DELETE utilizing Hooks and Context API together.

REACT HOOKS

This new concept was introduced in v16.8 which is an alternative to classes. The Devs who used React before are familiar with functional components and class components. Many of these features available to classes – such as lifecycle methods and state weren’t available to React until Hooks were introduced. The new Hooks add those class component’s features to functional components. Let’s see an example of functional component and class component.

Functional Components

const ExampleComponent = () => {
  return <div>I'm a simple functional component</div>
}

Class Components

class ExampleComponent extends Component {
  render() {
    return <div>I'm a class component</div>
  }
}

REACT CONTEXT API

The inception of the Context API resolves one of the most talked issues of React – prop drilling which was introduced in v16.3. This is a process of manipulating data from one component to another through layers of nested components.

Now it’s the time to start coding.

Please to be noted, I’m going to use Tailwind CSS to style our app. Let’s bootstrap our project using Create-React-App with the following command:
npx create-react-app hooks_and_context

Make sure you have the latest Node version is installed. This will create a folder hooks_and_context and bootstrap our project. If we have a close look at the package.json and we will see the following:

{
  "name": "hooks_and_context",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Before going into more coding thing we are going to enhance our development environment by installing a few packages.

ESLINT AND PRETTIER

It’s the time we are going to add ESLint and Prettier to make our development environment more friendly. ESLint is a JavaScript linter that will help us find syntax or other errors while we do our code. ESLint can be extended by plugging in pre-defined configs or we can completely configure it by ourselves. Regardless of the OS, I’ll recommend anyone to use VSCode as editor. Going forward I’ll be assuming we are using VSCode.

INSTALL VSCODE PLUGINS

First of all, we need to install ESLint and Prettier – Code formatter plugins for VSCode. And we need to make sure they are enabled.

Now, we need to install the required dependencies for ESLint and Prettier into our project. To do so, please run the following command into the project root:

npm install eslint-config-prettier eslint-plugin-prettier prettier --save

Read the full article here

Enable File Transfer on Google Cloud Compute Engine

Mushfiqur Rahman Shishir — Sun, 19 Apr 2020 07:02:50 +0000

After installing WordPress on Google Compute Engine, you might need a way to transfer files to the VM. It’s great to have worked on the local machine and upload the changes via file transfer protocol. File transfer protocol needs to be activated first. Then you can use it via any FTP client.

The first obstacle you’ll face after setting up a VM instance is how to transfer files to your Google Cloud VM. It is very obvious because google cloud does not have any shiny option on their dashboard. The basic transfer option is hidden in the SSH section of your VM Instances.

Other than the basic option there are three ways which you can follow to transfer files to Google Cloud. First, using Google Cloud SDK Tools. But that said this option is worse than before, for a newbie. You have to execute the command to transfer a simple file.

Second, using FTP (File Transfer Protocol), but Google Cloud VM instance does not come with a pre-installed FTP server, so you have to set up an FTP server, in order to connect to Google Cloud using FTP.

Third, using SFTP (SSH File Transfer Protocol) which we are going to discuss in the blog. SFTP is more secure than FTP and because Google Cloud instance came with SSH, you don’t need to install anything on your VM instance to transfer files using SFTP.

WHAT IS DIFFERENT BETWEEN FTP AND SFTP?

FTP stands for “File Transfer Protocol”. And SFTP stands for “SSH File Transfer Protocol” OR “Secure File Transfer Protocol”.

The main disadvantage of using FTP protocol is security. FTP uses two separate channels, both of which are unencrypted, this means that the information from either of the channel can be intercepted and accessed.

SFTP ensures that data is securely transferred using a private and safe data stream.

It is wise to not have a huge security loophole in your server, that is why you should use only SFTP rather than Ftp. And by the way, Google Cloud does give a click ready FTP setup option.

WHAT IS PUBLIC AND PRIVATE KEYS.

To set up Sftp you need to generate SSH keys pair. These keys pair will help you to encrypt and decrypt data.

Public key: You will add or copy this key to your Google Cloud Metadata. This key will encrypt data which can then only be read by the person who holds the corresponding private key.

Private key: This key file should only remain within your PC. Only a user in possession of a private key that corresponds to the public key at the server will be able to authenticate successfully.

WHAT IS FILEZILLA?

FileZilla is free software, cross-platform FTP / SFTP application, Two different versions of it is available one is Filezilla client and another Filezilla server. You will be using Filezilla client in this tutorial. Filezilla client is available for Windows and macOS.

FOR WINDOWS PC: If you are a windows user then the easiest way to generate RSA keys is through PuttyGen. Yes, you can generate a public and private key with other application e.g.. Google SDK etc.

GENERATE PUBLIC AND PRIVATE KEYS

To generate Public and private RSA key follow these steps below:

Download and install PuTTy.
Generate Public and private keys using Puttygen.
Add Public key to Google Cloud. Use one public key for only one VM Instances or use one public key for all the VM Instances.

Read the full article here.

Thanks for reading and please do share if you like it.

Install WordPress on Google Cloud Compute Engine

Mushfiqur Rahman Shishir — Sat, 18 Apr 2020 22:17:36 +0000

Probably Google Cloud is the third most popular provider for cloud infrastructure after AWS and Azure. As its name suggests, Google Cloud is provided by Google. In this article, we will learn how to install WordPress on Google Cloud Compute Engine. Before going into the details, there are few things to look.

SOME TECHNICAL SUGAR

There are a few basic terms we need to learn before we get with the tutorial. The idea behind this is to inform you of all the various products Google Cloud has to offer. Once you develop and interest in something you see, you can start building your own apps in them!

BILLING ACCOUNTS

Each project that you create must be linked to a billing account. Google Cloud allows you the flexibility of having multiple billing accounts – each of which can use a different credit/debit card. The idea behind this is to implement the pay-as-you-go policy of the cloud computing environment.

NOTE 1: You cannot use a prepaid credit/cash card in your billing account. I’ve tried this and my account along with all projects linked it was temporarily blocked. I immediately removed the prepaid card and changed it to a valid credit card. The account was re-enabled after a few working days.

NOTE 2: Google is currently offering a $300 USD trial to anyone who signs-up for Google Cloud. Now you’ve got no excuse to not try Google Cloud haha!

GOOGLE APP ENGINE

Most software is built using a particular language and (optionally) based on a framework. A classic example would be a to-do list app, which is built on JavaScript and based on the jQuery framework. jQuery, as you can guess, is a framework for JavaScript, which is the language.

Similarly, loads of apps are written in popular languages like Python, Java and PHP. Each of these languages requires an initial setup on the host system, in order to run the apps written in that particular language. For example, apps written in Java requires the Java Virtual Machine (JVM) to be installed in the target system.

Google App Engine takes care of this very task. It installs and configures these languages in its cloud infrastructure, so you can simply upload your code and get on with the development process. You don’t have to worry about setting up the language or scaling the host system for your app. Google Cloud’s load balancing algorithms automatically take care of it. With Google App Engine, you simply need to select which language you need and deploy your app in it.

GOOGLE COMPUTE ENGINE

Google Compute Engine (GCE) is another name for virtual machines in the cloud. Each VM is treated as an instance of a GCE. VMs can run almost any software you want it to. It offers more flexibility than App Engine and is intended for personalized environments.

GOOGLE API

Google has over 100 APIs for its multitude of products. This cloud feature allows you to access these APIs.

CLOUD STORAGE

As the name suggests, Cloud Storage allows you to save large volumes of unstructured and semi-structured data, called datasets, with high-availability (basically geeky terms for Big Data applications).

BIGQUERY

BigQuery is Google’s own implementation of a language suitable for handling big data. Although this is not even remotely related to our tutorial, it is a fascinating thing to experiment with!

PRE-BUILT SOFTWARE PACKAGES

This is where the fun begins! Forget all those complicated terms. Google has compiled a list of the most popular software, frameworks and languages and offered them as pre-built software packages. Guess what?

Remember we discussed that each of these languages is installed in a virtual machine (or an instance of Compute Engine)? Well, the same holds here as well. When you create or a WordPress software package, you’ll first have to select a virtual machine, its size and region in order to proceed with the installation. The software package is essentially a set of instructions that installs the respective software in a newly created virtual machine.

AND WORDPRESS IS ONE OF THEM!

INSTALL WORDPRESS ON GOOGLE CLOUD

Learning how to install WordPress on Google Cloud is a bit more involved than with other web hosts. However, it’s not as intimidating as it might seem. Let’s jump right in!

Read the full article here.

Thanks for reading and please do share if you like it.

Top New JavaScript Features Introduced in ES2020

Mushfiqur Rahman Shishir — Sat, 18 Apr 2020 16:11:01 +0000

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those.

LET’S DIVE INTO THE NEW JAVASCRIPT FEATURES

`String.prototype.matchAll()`

Though this function isn’t exactly a brand new one, since the new update in ES11, we are having a very good time when matching string against a regular expression. Let’s look at the following example:

const regexp = RegExp('foo[a-z]*','g');
const str = 'table football, foosball';
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(`Found ${match[0]} 
           start=>${match.index} end=>${match.index + match[0].length}.`);
}
// expected output: "Found football start=>6 end=>14."
// expected output: "Found foosball start=>16 end=>24."

// matches iterator is exhausted after the for..of iteration
// Call matchAll again to create a new iterator
Array.from(str.matchAll(regexp), m => m[0]);
// Array [ "football", "foosball" ]

`Dynamic Imports with import()`

Dynamic imports in JavaScript natively give you the option to import JavaScript files dynamically as modules in your application. This is just like how you do it with Webpack and Babel at the moment. This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of Webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

The good thing is that you actually import a module, and so it never pollutes the global namespace.

const doMath = async (num1, num2) => {
  if (num1 &amp;&amp; num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};
doMath(4, 2);

`BigInt`

BigInt is one of the most anticipated features in JavaScript which is now finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1. But BigInt actually allows you to go even beyond that.

let oldNum = Number.MAX_SAFE_INTEGER; 
console.log(oldNum);
//output => 9007199254740991

let newNum = 9007199254740992n;
console.log(newNum);
//output => 9007199254740992n

++oldNum
console.log(oldNum);
//output => 9007199254740992

++oldNum
console.log(oldNum);
//output => 9007199254740992

++newNum
console.log(newNum);
//output => 9007199254740993n

++newNum
console.log(newNum);
//output => 9007199254740994n

++newNum
console.log(newNum);
//output => 9007199254740995n

`Nullish Coalescing`

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask? In JavaScript, a lot of values are falsey, like: empty strings, the number 0, undefined, null, false, NaN, etc.

Probably, there’s a lot of times you might want to check if a variable is nullish, that is if it is either undefined or null, like when it’s okay for a variable to have an empty string, or even a false value.

In that case, you’ll use the new nullish coalescing operator -> ??

false ?? 'Something truthy'
false

undefined ?? 'Something truthy'
"Something truthy"

null ?? 'Something truthy'
"Something truthy"

false || 'Something truthy'
"Something truthy"

undefined || 'Something truthy'
"Something truthy"

null || 'Something truthy'
"Something truthy"

NaN ?? 'Something truthy'
NaN

NaN || 'Something truthy'
"Something truthy"