
Local storage allows us to store the data in the user's browser. The data stored will not be deleted even after the browser is closed.

The data will be stored in the form of key/value pairs. Both keys and values are always strings.

### Storing the data

For example, we have a user whose preferences/settings needs to be stored in the `localStorage`. Let's create a `userPreferences` object with the user settings.

```javascript
const userPreferences = {
  darkMode: true,
  accentColor: 'red',
};
```

Now, we'll store it in the browser using `localStorage.setItem` method

```js
localStorage.setItem('userData', JSON.stringfy(userPreferences));
```

Here `userData` is key and `userPreferences` is the value. The reason we are using `JSON.stringfy` method is to convert the `userPreferences` object to a string.

### Retrieving the data

When we need to use the data, we can retrieve it using `localStorage.getItem` method by passing the key as the argument. The data returned will be in the form of a string, so we need to use `JSON.parse` method to convert it into an object.

```js
let userData = localStorage.getItem('userData'); //"{ darkMode: true, accentColor:'red'}"

//convert the string to an object
userData = JSON.parse(userData);

console.log(userData); // { darkMode: true, accentColor: 'red'}
```

### Clearing the data

If you want to clear all the data stored in the local storage, we need to use `localStorage.clear` method.

```js
localStorage.clear();
```

### Removing the particular data

If you want to remove data for a particular key, we need to use `localStorage.removeItem` method by passing key as the argument.

```js
localStorage.removeItem("userData").
```

### Session Storage

`sessionStorage` is same as `localStorage` . But the main difference is, the data stored will be cleared automatically when the user closes the web page. All the methods are also same.

### Limitations

Do not store any sensitive data in the local storage as it can be accessed by any one browsing the page. And there is no form of data protection.

### Example

If you're reading this on _[Dev.to](https://dev.to)_, Open the developer tools by pressing `ctrl(cmd) + shift + I` and go to **Application &rightarrow; Local Storage**. There you'll find how _[Dev.to](dev.to)_ using local storage for storing user details with the key `current_user`.

If you're reading this on my blog, repeat the above steps and you'll see how I'm using local storage for persisting the dark mode using the key `darkMode`.

Thank You.

### Reference

[LocalStorage - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

[Session Storage - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)


Local storage allows us to store the data in the user's browser. The data stored will not be deleted even after the browser is closed.

How to use Local Storage in JavaScript?

I always had a slight confusion between `null` and `undefined` in JavaScript.

Now, Let's dive into the topic.

When we declare a variable without assigning any value to it, **its value will be `undefined` by default.**

```js
let color;
console.log(color); //undefined
```

> When we assign `null` to a variable, we are explicitly assigning a "nothing" or "empty" value to it.

For example, we have a `userDetails` the variable that stores the details of a user. At first, it doesn't have any data, so we are assigning `null` to it.

```js
let userDetails = null;
```

Later we assign the `userDetails` variable with the response from our function `getUserDetails`. The function may be a call to an API or accessing `localStorage` for details etc. Here it's just a simple function that returns an object.

```js
function getUserDetails() {
  return {
    userName: 'gk',
    id: '1',
  };
}

userDetails = getUserDetails();
console.log(userDetails); // {userName:"gk", id:"1"}
```

If the value is unknown at the time of variable definition, it's always best to use `null`.

Thank you.

### Reference

* [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) - MDN
* [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) - MDN
* [Javascript Grammer](https://twitter.com/js_tut)

I always had a small confusion between null and undefined in JavaScript.

Null vs Undefined in JavaScript in 1 min

## What is IndexedDB?

IndexedDB is a client-side, NoSQL database that allows web apps to store and retrieve data. As the data is stored locally in the browser, it's available even offline.

The main advantage of indexedDB over local storage was we could even store files and blobs (like images, videos, etc.) along with objects.

## Dexie.js

Working with low-level indexedDB API directly is a lot of work. You can check out this [article](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB) on MDN about using indexedDB API directly.

To make things easier, [Dexie.js](https://dexie.org/) provides a straightforward and simplified process of creating databases, storing data, updating data and database migrations, etc., over the top of indexedDB.

## Using Dexie.js

We will build a simple to-do app to understand the basics of dexie.js, like creating a database and performing CRUD operations.

### Setting up the app

Let's create an `index.html` file with the following contents.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
    <div class="content">
        <ul id="todoList">
        </ul>
    </div>
    <div>
        <form id="addTodoForm" class="column form">
            <div class="field">
                <label class="label" for="todo">Todo</label>
                <div class="control">
                    <input required class="input" name="todo" id="todo" type="text" placeholder="Todo">
                </div>
            </div>
            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-link">Create todo</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
```

Now open the html file using an HTTP server of your choice. I'm using the [Live Server](https://github.com/ritwickdey/vscode-live-server) VS Code extension. You will see something like this.

![HTML boiler plate](/uploads/dexiejs-boilerplate-html.png)

For styling, we are using [Bulma](https://bulma.io/) CSS. Todos will be added by typing in the input box. Nothing works now, as we still need to add the javascript.

### Adding Dexie.js

Create a javascript file named `main.js,` where we will write the business logic for the app. We will not use a module bundler like webpack or parcel.js to keep things simple. Instead, we are going to use `Dexie` directly from the CDN.

Now include both of them in the html file.

```html {33-34}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>

<body>
    <div class="content">
        <ul id="todoList">
        </ul>
    </div>

    <div>
        <form id="addTodoForm" class="column form">
            <div class="field">
                <label class="label" for="todo">Todo</label>
                <div class="control">
                    <input required class="input" name="todo" id="todo" type="text" placeholder="Todo">
                </div>
            </div>
            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-link">Create todo</button>
                </div>
            </div>
        </form>
    </div>
    <script src="https://unpkg.com/dexie/dist/dexie.js"></script>
    <script src="./main.js"></script>
</body>

</html>
```

### Capturing the user input

In `main.js,` we will add event listeners to capture the user input.

```javascript
const formElement = document.getElementById('addTodoForm');
const todoInput = document.getElementById('todo');
const todoList = document.getElementById('todoList');

formElement.addEventListener('submit', (e) => {
  e.preventDefault();
  const todoName = todoInput.value;    
  
  console.log('Todo to be created', todoName)
  
  todoInput.value = ''   // reset input
});
```

* `formElement` - Form where we receive user inputs to create a todo
* `todoInput` - Input where the user enters the todo
* `todoList` - Element where we are going to list all the todos

Currently, on submitting the form, we are logging the to-do to the console. But ideally, what we want is to create the to-do in the database and show it on the UI. We are going to use Dexie.js for that.

### Creating a database and tables

We can create an indexedDB database with dexie.js using.

```javascript
const db = new Dexie('databaseName')
```

You can add tables using the `db` instance `stores` method by passing an object where the table name is the key and values are the columns that are comma separated.

```javascript
db.version(1).stores({
  tableOne: `++id, col3, col3`,
  tableTwo: `++id, col3, col3`,
});
```

You can maintain multiple versions of the database with the version number. It is similar to the [indexedDB version](https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/version).

When declaring columns

* The first item will be the primary key.
* `++` prefix makes it an auto-incremented primary key
* `&`  prefix makes it a unique column

Let's create a database called `TodoDatabase`

We will store the todos in the `todo` table with the following columns.

* `id` - Primary key
* `name` - Name of the todo
* `completed` - Todo status

```javascript {1-5}
const db = new Dexie('TodoDatabase');

db.version(1).stores({
  todo: `++id, name, completed`,
});

const formElement = document.getElementById('addTodoForm');
const todoInput = document.getElementById('todo');
const todoList = document.getElementById('todoList');

formElement.addEventListener('submit', (e) => {
  e.preventDefault();

  const todoName = todoInput.value;
    
  console.log('Todo to be created', todoName)

  // reset input
  todoInput.value = ''
});
```

### Inserting into database

Let's insert the todos into the `todo` table. Insert the objects into the table using [Table.add()](https://dexie.org/docs/Table/Table.add()).

```javascript {12-21, 28}
const db = new Dexie('TodoDatabase');

db.version(1).stores({
  todo: `++id, name, completed`,
});

const formElement = document.getElementById('addTodoForm');
const todoInput = document.getElementById('todo');
const todoList = document.getElementById('todoList');


async function createTodo(todoName) {
  try {
    await db.todo.add({
      name: todoName,
      completed: false,
    });
  } catch (error) {
    console.error(error)
  }
}

formElement.addEventListener('submit', (e) => {
  e.preventDefault();

  const todoName = todoInput.value;
    
  createTodo(todoName);

  // reset input
  todoInput.value = ''
});
```

On submitting the form, we pass the todo to the `createTodo` function.

`createTodo` function inserts the new todo using `Table.add()` method. We don't need to pass the `id` as it's auto-incremented.

Now if you add the todos, the new todos will be inserted into the `todo` table. You can check them in the dev tools.

![IndexedDB using dexie js in developer tools](/uploads/screenshot-2023-01-31-at-10-17-54-pm.png)

### Showing created todos on the UI

Even though the todos are being created, they are not visible on the UI. To track the changes when they are being added, updated, or deleted and show them on the UI, we will use [liveQuery](https://dexie.org/docs/liveQuery()).

If you pass `liveQuery`,  a database query callback like `Table.where` or `Table.toArray` . Whenever database changes like creation, updation, or deletion affect the result of your query, the passed callback will be called, and the result (the return value) is emitted by observable.

Think of this like an event listener.

Creating a to-do observable to which we can subscribe and update the UI whenever todos are added or updated.

```javascript
const todoObservable = Dexie.liveQuery(() => db.todo.toArray());
```

Subscribing to the observable

```javascript {23, 25-41}
const db = new Dexie('TodoDatabase');

db.version(1).stores({
  todo: `++id, name, completed`,
});

const formElement = document.getElementById('addTodoForm');
const todoInput = document.getElementById('todo');
const todoList = document.getElementById('todoList');


async function createTodo(todoName) {
  try {
    await db.todo.add({
      name: todoName,
      completed: false,
    });
  } catch (error) {
    console.error(error)
  }
}

const todoObservable = Dexie.liveQuery(() => db.todo.toArray());

todoObservable.subscribe({
  next: (result) => {
    // first remove existing items
    todoList.innerHTML = ''
    
    result.forEach((todo) => {
      let newTodo = document.createElement('li');
      newTodo.dataset.id = todo.id;
      newTodo.dataset.completed = todo.completed;
      newTodo.innerText = todo.name;

      console.log(newTodo);
      todoList.appendChild(newTodo);
    });
  },
  error: (error) => console.error(error),
});


formElement.addEventListener('submit', (e) => {
  e.preventDefault();

  const todoName = todoInput.value;
    
  createTodo(todoName);

  // reset input
  todoInput.value = ''
});
```

When subscribing to the observable, we need to pass the `next` and `error` callback.

* `next` - whenever the callback is executed from `liveQuery` the result will be passed to `next`
* `error` - To handle errors for callbacks etc.

In our case, we are looping over all todos and rendering them in the UI using `Array.forEach`. Now whenever you try to add the new todo, it will be rendered in the UI

### Updating the data in the database

To mark the to-do as complete, the user clicks on the to-do item, and then the completed status will be changed to `true` and vice versa. We can update the `completed` column for the to-do using [Table.update()](https://dexie.org/docs/Table/Table.update()). `Table.update()` accepts the primary key value as the first argument and the data to be updated as the second.

```javascript
 db.todo.update(primaryKeyValue, dataToBeUpdated)
```

Let's create a function called `toggleTodoCompleteStatus` which toggles the completed to-do status.

```javascript {26-39, 51}
const db = new Dexie('TodoDatabase');

db.version(1).stores({
  todo: `++id, name, completed`,
});

const formElement = document.getElementById('addTodoForm');
const todoInput = document.getElementById('todo');
const todoList = document.getElementById('todoList');


async function createTodo(todoName) {
  try {
    await db.todo.add({
      name: todoName,
      completed: false,
    });
  } catch (error) {
    console.error(error)
  }
}

const todoObservable = Dexie.liveQuery(() => db.todo.toArray());


async function toggleTodoCompleteStatus(event) {
  const { id, completed } = event.target.dataset;
  try {
    const isUpdated = await db.todo.update(parseInt(id), {
      completed: !JSON.parse(completed), // to convert 'false` -> false etc
    });

    if (!isUpdated) {
      throw new Error('Error updating');
    }
  } catch (error) {
    console.error(error)
  }
}

todoObservable.subscribe({
  next: (result) => {
    // first remove existing items
    todoList.innerHTML = ''
    
    result.forEach((todo) => {
      let newTodo = document.createElement('li');
      newTodo.dataset.id = todo.id;
      newTodo.dataset.completed = todo.completed;
      newTodo.innerText = todo.name;
      newTodo.onclick = toggleTodoCompleteStatus;

      console.log(newTodo);
      todoList.appendChild(newTodo);
    });
  },
  error: (error) => console.error(error),
});


formElement.addEventListener('submit', (e) => {
  e.preventDefault();

  const todoName = todoInput.value;
    
  createTodo(todoName);

  // reset input
  todoInput.value = ''
});
```

We also attached this to the `onclick` method directly. The `toggleTodoCompleteStatus`  will take the to-do list HTML element and the completed status from the [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property of the HTML element.

All the changes are immediately reflected in the UI, as we have already subscribed to `todoObservable`

### Exercise

Till now, we learned how to create a database, create a table, add data, and update data. As a small exercise, add delete todo functionality which deletes the todo item from the database by finding the proper methods from [dexiejs docs](https://dexie.org/docs/).

### Final Code

<iframe src="https://replit.com/@bgopikrishna/DexieJS-Tutorial?embed=true" width="100%" height="400" />

Dexie.js provides a straightforward and simplified process of creating databases, storing data, updating data and database migrations, etc., over the top of indexDB.

IndexedDB on steroids using Dexie.js

## Introduction

You might have used create react app or angular-cli to generate the boilerplate for your application. Even though these tools use webpack under the hood, they abstract most of the configuration for you.

But sometimes, depending on the requirements, you might have to create a custom configuration from scratch or customize the existing configuration. This is where understanding webpack or any other similar tool helps. So let's try to create a webpack application and understand its concepts.

This article is part one of the webpack series. In this, we go over basic webpack concepts. In the next one, we will go over some advanced concepts like code-splitting, multiple configurations, source map configurations, etc.

The first part of this article covers basic webpack concepts. In the second part, we'll build a simple application with everything we learned.

## What is webpack?

Webpack is a module bundler for JavaScript applications. In plain English, webpack creates a dependency graph of all files (using imports/require statements, plugins, loaders, etc.). Using the dependency graph generated, webpack outputs the bundled code.

![Webpack key steps illustation - webpack for beginners](/uploads/webpackbundle.png "Webpack illustration")

Webpack treats every file or asset as a module. Out of the box, webpack only supports JavaScript files (ES Modules, CommonJS modules, AMD Modules).

But we can extend it to other file types like CSS, images, etc., with the help of loaders and plugins. Which we will be looking at later in this article.

## Core Concepts

Key concepts which are helpful when building applications with webpack are

1. Entry
2. Output
3. Loaders
4. Plugins
5. Mode

### Entry

An entry point is a JavaScript file that serves as a starting point for webpack to collect all the dependencies used by your application to build a dependency graph. Dependencies are libraries like React, jQuery, etc., OR static assets like images, CSS files, etc.

From webpack >= 4, Out of the box, `src/index.js` serves as the entry point.

But you can configure the entry point using the `entry` property in the config file and have multiple entry points.

```javascript
    module.exports = {
      entry: 'src/app.js', //Custom entry point
    };
```

### Output

Output is the path where webpack will bundle all the dependencies and your app code into single or multiple files.

From webpack >= 4, Out of box `dist/main.js` serves as the output path.

You can also configure output using the output property like an entry point.

```javascript
    module.exports = {
      entry: 'src/app.js', //Custom entry point,
      output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'build'), //custom output point
      },
    };
```

### Loaders

Loaders are extensions that help webpack process other types of files like CSS, images, markdown files, etc.

Loaders convert these files into JavaScript modules. These converted modules will be used by webpack.

For example, with the help of [ts-loader](https://webpack.js.org/guides/typescript/), you can transpile typescript files.

```javascript
     module: {
        rules: [
          {
            test: /\.ts$/i,
            use: ["ts-loader"],
          },
        ],
      },
```

Loaders have two properties:

1. `test` - Used to identify the file types which need to be transformed to javascript modules.
2. `Use` - Used to determine what loader to use on this file type.

> If you want to use multiple loaders on a single file type, you can pass the `use` property an array `['loader-1', 'loader-2']`.

But keep in mind that loaders will be applied from **right to left** so that loader-2 will be applied first, then loader-1.

```javascript
     module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
        ],
      },
```

In the above code, `css-loader` will be applied first and then `style-loader`.

1. `css-loader` - Adds support to import CSS files directly into a javascript file.
2. `style-loader` - Used to inject the styles generated from \`CSS-loader into the DOM.

### Plugins

While loaders can transform specific modules other than JS, plugins can perform various tasks like bundle optimization, asset management, etc.

> Webpack itself is made-up of plugins.

To keep things simple, let's have a look at [HtmlWebpackPlugin.](https://webpack.js.org/plugins/html-webpack-plugin/)

HtmlWebpackPlugin will create an HTML template and add the script tags, which point to bundled JS.

![](/uploads/htmlwebpack-plugin.png)

You can install it with npm.

```shell
     npm install html-webpack-plugin --save-dev
```

And add it config using the `plugins` property.

```javascript
{
	...,
      plugins: [
          new HtmlWebpackPlugin({
            title: 'My App',
            template: path.resolve(__dirname, 'src', 'index.html'),
          }),
  		],   
    ...,
}
```

### Mode

Mode allows webpack to use built-in optimizations based on the environment. For example, if you set the mode to `production` it minifies the output code. You can set the mode as

1. production (default)
2. development
3. none

```javascript
{
	...,
   		mode: "development"   
    ...,
}
```

## Example App

Let's build a simple app that calculates the age.

Create a folder with whatever name you want. Here, I'm calling it **age-calculator-webpack**.

```sh
    mkdir age-calculator-webpack
    cd age-calculator-webpack
```

After that, run `npm init -y` to initialize the project.

Now let's install webpack.

```sh
npm install webpack  webpack-cli --save-dev
```

Also, install plugins for CSS and HTML

```sh
npm install css-loader style-loader html-webpack-plugin
```

Let's create the files.

```sh
touch webpack.config.js
```

```sh
mkdir src # creates the src folder
cd src
touch app.js
```

The directory structure looks like this

```sh

  ├── src
  │   ├── app.js
  ├── README.md
  ├── package-lock.json
  ├── package.json
  └── webpack.config.js
```

#### Basic setup

Now let's configure webpack using `webpack.config.js`

```javascript

const path = require('path');

module.exports = {
entry: path.resolve(__dirname, 'src/app.js'),
output: {
  filename: 'main.js',
  path: path.resolve(__dirname, 'build'),
},

mode: "development"
};
```

Add the `webpack` command in `package.json` for bundling the code.

```json
...
"scripts": {
    "build": "webpack",
  },
...
```

We can now test the configuration by adding a simple console statement in `src/app.js`

```javascript {1}
console.log('Hello from webpack!');
```

Now run `npm run build,` and you will see a folder named `build` created with `main.js` inside it.

#### Adding a plugin

Now create an html file `src/index.html` and paste the following contents.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age calculation with webpack</title>
</head>
<body>
    <h1>Age calculator</h1>
    <form id="form">
        <label for="dob">Your date of birth</label>
        <input type="date" name="dob" id="dob">
        <button type="submit" id="submit">Calculate my age</button>
    </form>
    <br>
    <br>

    <div id="result"></div>
</body>
</html>
```

Now add the `HtmlWebpackPlugin` plugin in the webpack config. Then we can go through the contents of the `src/index.html` file.

```javascript {2,3-4}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/app.js'),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  mode: "development"
};
```

We're passing two options to `HtmlWebpackPlugin.`

* `title` - Name of the template
* `template` - path to the template

Now rerun the npm run build. If you observe inside the `build` directory, two files are created.

```sh
build
├── index.html
└── main.js
```

Open the `build/index.html` file in your browser and open the console. You will see this message.

![hello world using webpack](/uploads/screenshot-2022-07-07-at-9-42-24-pm.png)

#### Adding a webpack dev server for faster development

Running `npm run build` whenever the code changes would be very tedious. So to speed up the development, we can use the [webpack dev server](https://webpack.js.org/configuration/dev-server/). The Webpack dev server is a static server (based on express.js) and supports live reloading.

Installing the webpack dev server by running

```sh
npm install webpack-dev-server --save-dev
```

Now add webpack dev server config inside `webpack.config.js` with the `devServer` property.

```javascript {24-27}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/app.js'),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, 'build'),
    port: 3000,
  },
  mode: "development"
};
```

Here we're passing

* `static` - Path to the static files, i.e., bundled javascript, html, and other assets
* `port` - Port number for the dev server

Add command for stating dev server in `package.json`

`webpack serve` starts the dev server on port number 3000 (defined in the config)

```json {9}
{
  "name": "webpack-5-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bgopikrishna/webpack-5-tutorial.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bgopikrishna/webpack-5-tutorial/issues"
  },
  "homepage": "https://github.com/bgopikrishna/webpack-5-tutorial#readme",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.3"
  },
}
```

Now run `npm start` and go to `localhost:3000.`

#### Adding Loaders

Let's see loaders in action by adding some styling to the application.

Create a file name `styles.css` and paste the following contents.

```css
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: linear-gradient(to right bottom, #285de5 50%, #4a546f 50%);    min-height: 500px;
    min-height: 100vh;
    color: white;
}


input {
    border-radius: 8px;
    padding: 4px 8px;
}

button {
    background: #00d2ff;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
```

Now to import the CSS file into our application, we can use `style-loader`  and `css-loader`

Installing them by running

```shell
npm install --save-dev style-loader css-loader
```

Add them to the `webpack.config.js`

```javascript {16-23}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/app.js'),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, 'build'),
    port: 9000,
  },
  mode: "development"
};
```

As discussed earlier,

1. `css-loader` - Adds support to import CSS files directly into a javascript file.
2. `style-loader` - Used to inject the styles generated from `css-loader` into the DOM.

Now import the CSS file in `src/app.js`

```javascript {1}
import './styles.css'

console.log('Hello from webpack')
```

If you reload the application, it should look something like this with styles applied.

![Styling with css loader and style-loader in webpack](/uploads/screenshot-2022-10-10-at-10-34-28-pm.png)

#### Final app

Add the age calculation logic to the app.

In `src/app.js`

```javascript {3-23}
import './styles.css'

const dateInputEl = document.getElementById('dob');
const formEl = document.getElementById('form');
const resultEl = document.getElementById('result');

formEl.addEventListener('submit', (event) => {
    event.preventDefault();
    const dob = dateInputEl.value;
    const calculatedAge = calcAge(dob);
    resultEl.innerText = `Your age is ${calculatedAge}`;

})


function calcAge(dob) {
    const todayDate = new Date();
    const userDob = new Date(dob);
    const diffTime = Math.abs(todayDate - userDob);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    const result = `${diffDays} Days`
    return result;
}
```

We will not go over each function in detail to keep things simple.

We have a form with an event listener of the type `submit`. Whenever the user submits the form with his date of birth, we will calculate the age using `calcAge` the function. And render the result inside a `div` with id. `result`.

It looks something like this.

![Age calculator application using webpack 5 tutorial](/uploads/screenshot-2022-10-10-at-10-17-04-pm.png)

#### Using third-party libraries and modules

Now let's move the `calcAge` function into a new file called `src/utils.js` So that we can reuse it in other places.

```javascript
export function calcAge(dob) {
    const todayDate = new Date();
    const userDob = new Date(dob);
    const diffTime = Math.abs(todayDate - userDob);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
}
```

Import it inside `src/app.js`

```javascript {1}
import { calcAge } from './utils';
import './styles.css'

const dateInputEl = document.getElementById('dob');
const formEl = document.getElementById('form');
const resultEl = document.getElementById('result');

formEl.addEventListener('submit', (event) => {
    event.preventDefault();
    const dob = dateInputEl.value;
    const calculatedAge = calcAge(dob);
    resultEl.innerText = `Your age is ${calculatedAge}`;
})
```

Currently, we are showing age in the only number of days. For better readability, let's use a function from the [date-fns](https://date-fns.org/) library. To install it, run.

```shell
npm run install date-fns --save
```

Now in `src/utils.js,` replace the logic with functions imported from the `date-fns` library.

```javascript {1, 5-9}
import { formatDuration, intervalToDuration } from 'date-fns';


export function calcAge(dob) {
    const duration = intervalToDuration({
        start: new Date(dob),
        end: new Date()
    })
    return formatDuration(duration)
}
```

The result will look something like this now.

![Age calculator application using webpack 5 and date-fns library tutorial](/uploads/screenshot-2022-10-10-at-10-34-28-pm.png)

## Conclusion

So far, we have seen how to configure a basic webpack application with plugins, loaders, and third-party libraries. In upcoming articles, we will try to cover some advanced concepts and set up a react application using webpack.

GitHub Repo - [https://github.com/bgopikrishna/webpack-tutorial/tree/v5/part-1](https://github.com/bgopikrishna/webpack-tutorial/tree/v5/part-1 "https://github.com/bgopikrishna/webpack-tutorial/tree/v5/part-1")

Webpack is a module bundler for JavaScript applications. In plain English, webpack creates a dependency graph of all files (using imports/require statements, plugins, loaders, etc.). Using this dependency graph, webpack outputs the bundled code.

Getting started with webpack - Tutorial for absolute beginners

## What are error boundaries?

Error boundaries are unique react components that help us catch the errors in a React Application. Using Error Boundaries, we can also show a fallback UI if something goes wrong (Like an uncaught error).

In plain English, Error boundaries are like try-catch blocks for the UI with some limitations (We'll see them in the latter part of this article).

For example, if a component failed to render content due to some case not being handled or you are trying to access a key in the object which doesn't exist etc.

If it's wrapped with an Error boundary when the error happens, we can render a fallback UI instead of the application crashing.

We'll see this in action during the implementation of an example application.

## How to create and use error boundaries?

To create an Error Boundary component, it should be

* A Class Component
* It should implement either (or both) of the lifecycle methods.
  * `getDerivedStateFromError()` - This static lifecycle method allows us to update the state when an error happens. Using this, we can show the fallback UI.
  * `componentDidCatch()` - This is another life cycle method we can use to log the error information to application monitoring services like Prometheus or sentry.

## Example

We will build a simple application that shows a list of superheroes and their powers. On selecting a particular hero, we're going to show his superpowers.

It looks something like this. You will find the completed application at the end of this article.

![React Application](/uploads/screenshot-2022-04-13-at-9-56-28-am.png)

Enough talk, Let's get our hands dirty.

We are going to use `create-react-app`. Open your terminal and run.

```sh
npx create-react-app hero-powers
```

Now navigate to the folder. Using your code editor, replace the contents of `src/App.js` with the following code.

```javascript
    import { useState } from 'react';
    
    const HEROES = [
      { id: 11, name: 'Dr Nice', power: ['Laser Eyes', 'Wall Crawling'] },
      { id: 12, name: 'Narco', power: ['Portal Generation', 'Solar Form'] },
      { id: 13, name: 'Bombasto', power: null },
    ];
    
    const HeroDetails = ({ heroData }) => {
      const { name, power } = heroData;
      return (
        <div className='card is-shadowless'>
          <div className='card-content'>
            <div className='media'>
              <div className='media-content'>
                <p className='title is-4'>{name}</p>
              </div>
            </div>
    
            <div className='content'><strong>Powers</strong> - {power.join(', ')}</div>
          </div>
        </div>
      );
    };
    
    function App() {
      const [selectedHero, setSelectedHero] = useState(HEROES[0]);
    
      return (
        <div className='is-flex is-flex-direction-column'>
          <h1 className='title is-3'>Heros and their powers</h1>
          <div className='column has-background-grey-lighter'>
            <div className='panel is-shadowless'>
              {HEROES.map((heroData) => (
                <span
                  className={`panel-block is-clickable ${
                    heroData.id === selectedHero.id ? 'is-active' : ''
                  }`}
                  key={heroData.id}
                  role='button'
                  onClick={() => setSelectedHero(heroData)}
                >
                  {heroData.name}
                </span>
              ))}
            </div>
          </div>
          <div className='column has-background-grey-lighter'>
              <HeroDetails heroData={selectedHero} />
          </div>
        </div>
      );
    }
    
    export default App;
```

Start the application using

```sh
npm start
```

If you look at the code written, we have a `App` component and a `HeroDetails` component.

`App` the Component renders the list of superheroes and `HeroDetails`. `HeroDetails` The Component renders the powers of a selected superhero.

To keep things simple, we are storing the hero's data in a variable called `HEROES`. But in a real-world application, this data might be coming from an API or other external sources.

Now, if you observe, when selecting `Bambasto` , the application is getting crashed and going blank. If you look at the code, For  `Bambasto` the powers are `null` (check `HEROES` variable). We did that intentionally to simulate the error.

Create a file with the name `ErrorBoundary.js`

Please copy the following contents and paste them there.

```javascript
import { Component } from "react";
 
 export default class ErrorBoundary extends Component {
   state = {
     hasError: false
   };
 
   static getDerivedStateFromError(error) {
     return {
       hasError: true
     };
   }
 
   componentDidCatch(error, errorInfo) {
     this.logErrorToService(error, errorInfo);
   }
 	
 	// logger service can be your own application monitoring tool etc
   logErrorToService(error, errorInfo) {
     console.error(error, errorInfo);
   }
 
   render() {
     const { fallback, children } = this.props;
     const { hasError } = this.state;
 
     if (hasError) {
       return fallback;
     }
 
     return children;
   }
 }
```

If you look at the code, the error boundary we created has two props

1. `fallback` - Fallback UI to show when the component crashes
2. `children` - The component which needs to wrap with an error boundary

Whenever a crash happens in our application, it gets caught by the nearest error boundary, and the fallback UI is rendered

`getDerivedStateFromError`  lifecycle method allows us to update the state to `hasError: true`

Whereas with the `componentDidCatch` lifecycle method, we can log the error to the error service. Currently, we are just logging it into the console. But ideally, we should log errors to some application monitoring service.

We can also see the whole component stack from where the error originated using `errorInfo.componentStack` .

Now let's see that in action. Wrap the `HeroDetails` with an `ErrorBoundary`

```javascript
    <ErrorBoundary
      fallback={
        <div className='message is-danger'>
          <div className='message-body'>Something went wrong</div>
        </div>
      }
    >
      <HeroDetails heroData={selectedHero} />
    </ErrorBoundary>;
```

Now on selecting `Bambasto` again. Instead of the application getting crashed, we can see the fallback UI.

![Error boundary with fallback UI](/uploads/screenshot-2022-04-14-at-10-56-27-pm.png)

## Limitations

Remember, there are some limitations to Error Boundaries. The Error Boundaries won't catch errors that happen for the following reasons.

* In event handlers (e.g., `onClick`, `onChange`, `onBlur` etc.)
* In `setTimeout` , `setInterval` or `requestAnimationFrame` callbacks
* During Server-side rendering (SSR)
* And errors caused by the error boundary itself

## Codesandbox demo

<iframe
src="https://codesandbox.io/embed/react-error-boundaries-5nzju5?			fontsize=14&hidenavigation=1&theme=dark&view=preview"
height="600px" width="100%"
title="React Error Boundaries"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />

Error boundaries are the react components that help us to catch errors in the render phase. By using Error Boundaries we can also show a fallback UI if something goes wrong (Like an uncaught error).

How to use error boundaries in react?

## Introduction

As we know Node JS is single-threaded. Usually, most of the processors we use are of having multiple threads and multiple cores. So to take advantage of these multi-threaded/multi-core processors, we'll use the cluster module. 

According to Node JS docs 

> A single instance of Node.js runs in a single thread. To take advantage of multi-core systems, the user will sometimes want to launch a cluster of Node.js processes to handle the load. The cluster module allows easy creation of child processes that all share server ports.

In a nutshell with the help of cluster module, we can spin up multiple instances of a Node JS process which are called worker processes to handle the incoming requests.

![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggVEJcbmFbSW5jb21pbmcgcmVxdWVzdHNdIC0tPiBiW1wiQ2x1c3RlciBNYW5hZ2VyIChNYXN0ZXIgcHJvY2VzcylcIl1cbmIgLS0-IGNbXCJ3b3JrZXIgIzEgKENoaWxkIHByb2Nlc3MpXCJdXG5iIC0tPiBkW1wid29ya2VyICMyIChDaGlsZCBwcm9jZXNzKVwiXVxuYiAtLT4gZVtcIndvcmtlciAjMyAoQ2hpbGQgcHJvY2VzcylcIl1cbmIgLS0-IGZbXCJ3b3JrZXIgIzQgKENoaWxkIHByb2Nlc3MpXCJdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

Here,

* The cluster manager is the parent process, which manages the workers. 
* Cluster manager doesn't execute any application code.
* Cluster manager distributes the incoming requests to worker processes. 
* All the network requests (Like API calls) are handled by the workers.
* All the workers are independent processes, they can be killed re-spawned without affecting other workers.

## Using the Cluster Module

As an example let's create a simple express app which calculates Fibonacci number.

Let's start by creating a folder named `cluster-example`.

Open it inside your terminal and run the following commands

```bash
$ npm init -y
```

It creates the `package.json` file.

Now install express using

```bash
$ npm install express
```

#### Without Cluster Module

Let create two files, First one `without-cluster.js` which doesn't use the cluster module.

```javascript
//without-cluster.js

const express = require('express');
const app = express();
const port = 5000;

//Calculate Fibonacci Number
function fib(n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

app.get('/', (req, res) => {
  const result = fib(30);
  return res.send({ data: result });
});

app.listen(port, () => console.log(`App listening on port ${port}!`));
```

If you look at the above code, it's a simple express app which calculates the Fibonacci number and sends the result. To keep this post simple I'm not going to explain the Fibonacci number.

To start the app just run

```bash
$ node without-cluster.js
```

Now,  When you go to `localhost:5000/` you'll get the Fibonacci number as follows

```json
{"data":832040}
```

#### With Cluster Module

Let's create another file named `with-cluster.js` which uses cluster module.

```javascript
//with-cluster.js

const cluster = require("cluster");
const express = require("express");
const app = express();
const port = 5000;

//To check whether it's a cluster manager(Master Process)
if (cluster.isMaster) {
    //This method creates the worker processes
    cluster.fork();
    cluster.fork();
    cluster.fork();
    cluster.fork();  //Here we created four worker processes
} else {
   
    {/** Application Logic Starts **/}
    function fib(n) {
        if (n < 2) {
            return n;
        }

        return fib(n - 1) + fib(n - 2);
    }

    app.get("/", (req, res) => {
        const result = fib(30);
        return res.send({ data: result });
    });

    app.listen(port, () =>
        console.log(`App listening on port ${port} ${process.pid}!`)
    );
    {/** Application Logic Ends **/}

}
```

If you look at the above code, it's the same app which calculates the Fibonacci number but uses the cluster module. We're just wrapping our application code inside an if-else block. 

First, we're checking if it's a cluster manager(master process) or not by using the `cluster.isMaster` property. If it's a cluster manager, we're going spin up workers(child process) using `cluster.fork()` method. 

The number of workers created will be equal to how many times you called `cluster.fork` method. Ideally, for better performance, the number of workers should be created needs to be equal to the number of [logical cores](https://unix.stackexchange.com/questions/88283/so-what-are-logical-cpu-cores-as-opposed-to-physical-cpu-cores) of the processor (Mine has 8 logical cores, you can check that in your task manager or using `os` module by `os.cpus().length` ).

To start the app just run (Don't forget to kill the previous one)

```bash
$ node with-cluster.js
```

Now,  When you go to `localhost:5000/`  you'll get the exact Fibonacci number as the previous one.

```json
{"data":832040}
```

## Benchmarking Using Apache Bench (ab) tool

Now you might be thinking about what performance improvements we're getting by using cluster modules. To check that we'll be using [apache bench tool](https://httpd.apache.org/docs/2.4/programs/ab.html). 

As I'm using Ubuntu(WSL 2), I can install it by running

```bash
$ sudo apt-get install apache2-utils
```

### Benchmarking for the app which doesn't use cluster module

First, we'll check for the app which doesn't use cluster module.

To start the app

```bash
$ node without-cluster.js
```

Suppose we want to see how fast our server can handle 100 requests, with a maximum of 10 requests running concurrently. Now open another terminal and run the following command.

```bash
$ ab -n 100 -c 10 localhost:5000/ #Dont forget the trailing slash
```

Let's break down the above command.

* `-n`: Total number of requests to be made.
* `-c`: Maximum number of requests to run concurrently.

After running the above command I'm getting the following results on my machine. Note, it might be different on your machine. Results will be based on your processor, programs running on your machine etc.

Sorry for my poor editing skills 😁

![without-cluster.js results](/assets/inkedwith-out-cluster_li.jpg)

### Benchmarking for the app which uses cluster module

Now let's test for the app which uses the cluster module. Start the app by running

```bash
$ node with-cluster.js
```

Run the apache bench(ab)  tool.

```bash
$ ab -n 100 -c 10 localhost:5000/ #Dont forget the trailing slash
```

After running the apache bench tool again, I'm getting the following results.

![with cluster results](/assets/inkedwith-cluster_li.jpg)

### Comparison

Now let's compare both results (which are taken for this sample app on my machine)

|                                                                            | **With Out Cluster Module** | **With Cluster Module** |
| -------------------------------------------------------------------------- | --------------------------- | ----------------------- |
| Time Taken for tests to complete                                           | 1.589 seconds               | 0.644 seconds           |
| Requests per second                                                        | 62.95 req/sec               | 155.35 req/sec          |
| Time per request ([mean](https://www.purplemath.com/modules/meanmode.htm)) | 158.8 ms                    | 64.372 ms               |
| Time per request (mean, across all concurrent requests)                    | 15.887                      | 33.53                   |

Here we're talking only a few properties from the results. You can clearly see, how many more requests we can handle by in a second by using the cluster module. The more requests we're handling, the lesser time the users have to wait to process their requests.

Similarly, you can compare other properties as well. 

> Note: Generally,  For clustering we can use process managers like [pm2](https://pm2.keymetrics.io/) which provides some extra features over the cluster module.

Thank You.

## References

[Cluster Module](https://nodejs.org/dist/latest-v12.x/docs/api/cluster.html) - Node JS Docs

[Useful Tools: ApacheBench (ab)](https://dev.to/matthias/useful-tools-apachebench-ab-2lmo) By [**Matthias** ](https://dev.to/matthias)

Usually, most of the processors we use are of having multiple threads and multiple cores. So to take advantage of these multi-threaded/multi-core processors, we'll use the cluster module.

Using the Node JS Cluster Module


If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are native implementation of them in the browser.

CSS variables needs to be declared with `--` prefix to the name.

```css
:root {
  --primary-color: #eaefed;
  --text-color: #001100;
}
```

When we want to access them, we just need to use the `var` function. The first argument of the `var` function is name of the variable. If variable is invalid, we can pass the fallback value as the second argument.

```css
.link {
  border: 1px solid var(--primary-color);
  color: var(--text-color, #111000);
  /* if --text-color is invalid,fallback value #111000 is used */
}
```

### Scope of the Variable

The scope of the CSS variable is the scope of the selector it is defined. For global scope we can either declare them in `:root` or `body` selector.

For example, lets declare a variable named `--btn-danger-color` in a class `btn` . If you try to access the variable `--btn-danger-color` in another class out of its scope, it will be invalid. Because scope of `--btn-danger-color` is only in `btn` class

```css
.btn {
  --btn-danger-color: #ff4136;
  background-color: var(--btn-danger-color);
}
.link {
  background-color: var(--btn-danger-color, green);
  /* Background color is green because --btn-danger is invalid */
}
```

### Accessing and Modifying CSS Variables with JavaScript

To access or modify CSS variables via JavaScript, we can use two methods

- getPropertyValue
- setProperty

### Getting the CSS Variable Value

To get the value of the CSS variable, we can use `getPropertyValue` method

```js
const btn = document.querySelector('.btn');

let btnDangerBg = getComputedStyle(element).getPropertyValue(
  '--btn-danger-color'
);

console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS
```

To get the CSS variables declared in `:root`, you can use `document.querySelector(':root');`

### Changing the CSS Variable Value

To set the value of the CSS variable from JavaScript we can use `setProperty` method.

```javascript
element.style.setProperty('--variable-name', value);
```

Lets write a small function to change the `Button` background colour to purple by using `setProperty` method.

```javascript
function changeColorToPurple() {
  //Set the CSS variable value
  btn.style.setProperty('--btn-danger-color', 'purple');
}
```

Don't forget to link it with HTML.

```html
<button class="btn" onclick="changeColorToPurple()">Change Color</button>
```

### Demo

I'm adding an embedded [repl](https://repl.it/@bgopikrishna/CssVariables) for the above code, So that you can play with it.

<iframe height="600px" width="100%" src="https://repl.it/@bgopikrishna/CssVariables?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-poInter-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

Thank You.

### Reference

[CSS custom properties ](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - MDN

[Every thing you need to know about css variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)


If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are native implementation of them in the browser.

All Posts

How to use Local Storage in JavaScript?

Null vs Undefined in JavaScript in 1 min