Forem: Gopi Krishna

How I Use AI in My Day-to-Day Work

Gopi Krishna — Wed, 27 Aug 2025 08:30:00 +0000

I’ve been using AI tools daily in my workflow, and over time I figured out a pattern that works for me. It’s not about letting AI do everything, but about using it to save time and stay focused on the important parts.

General Research with ChatGPT

For research, I mostly use ChatGPT. Things like:

Finding the right docs or examples
Summarizing long documentation
Comparing different approaches before picking one

It saves me from digging through multiple tabs and StackOverflow threads.

Implementing Changes with Cursor

When it comes to building features or making any major changes, I rely on Cursor. My flow usually looks like this:

Understand the codebase – If I’m new to a flow, I first use Cursor’s research mode to go through the code and figure out what’s happening.
Write it down – I’ll create some notes, update docs, and usually make flow diagrams so I (and others) understand what’s going on.
Technical Decision Doc – Before coding, I prepare a short doc about what I’m going to build, options considered, and why I picked one approach.
Review with peers – Share the doc, get feedback, tweak it.
Agent mode – Once the doc is final, I use Cursor’s agent mode to start implementing. But this part needs hand holding, you can’t just let AI write the whole thing. I keep checking, correcting, and adjusting the code. AI helps, but you still need to get your hands dirty.

PR Review with CodeRabbit

After raising a PR, I usually run an L1 review with CodeRabbit. Since it has Jira context, it actually knows what feature I was working on, which makes the feedback more relevant. After that, it goes to peers for final review.

Lessons Learned so far

AI speeds things up, but only if you drive the process.
You can’t trust AI blindly, it will hallucinate sometimes.
Writing down technical decisions upfront makes everything smoother.
AI + peer reviews together work better than just one of them.
At the end of the day, you’re still responsible for correctness and code quality.

This is the way I use AI day to day. It’s not “AI building stuff for me”, it’s more like having an assistant who helps me think faster, write docs quicker, and code with fewer blockers.

💡 Even this blog post started as rough notes, and I used AI to make it more readable while keeping my original thoughts intact.

Trusting the process

Gopi Krishna — Tue, 25 Mar 2025 15:30:00 +0000

Lately, I’ve been thinking about how life never quite goes as planned. You set goals, map things out, and then boom, everything shifts. It’s not necessarily a bad thing, just a reminder that control is often an illusion. But that doesn’t mean we’re powerless.

I came across a line in The Stormlight Archive that really stuck with me

The first step to being in control was to see yourself as capable of being in control - Jasnah Kholin (Stromlight Archive #3)

That shift in mindset changes everything. Uncertainty isn’t about being lost, I think it’s about adopting to changes. Things won’t always go the way you expect, but that doesn’t mean you can’t shape your own path.

And when things feel unfair, there’s another perspective, just because you don’t see balance right away doesn’t mean it’s not there. Doing the right thing might not always make life easier, but that’s not the point. Often, that struggle and hard work will lead you to something greater, and we just might not see it yet.

So here’s to trusting the process. To taking small steps even when the destination isn’t clear. Journey before destination, IFKYK ;)

I wrote this post as a reminder to myself, if it doesn't make sense, ignore it :)

IndexedDB on steroids using Dexie.js

Gopi Krishna — Mon, 27 Feb 2023 16:30:12 +0000

This article originally published on my blog with code snippet line highlights etc. Feel free to check it out.

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 on MDN about using indexedDB API directly.

To make things easier, Dexie.js 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.

<!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 VS Code extension. You will see something like this.

For styling, we are using Bulma 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.

<!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.

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.

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.

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.

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

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().

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.

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.

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.

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

Subscribing to the observable

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(). Table.update() accepts the primary key value as the first argument and the data to be updated as the second.

 db.todo.update(primaryKeyValue, dataToBeUpdated)

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

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 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.

Final Code

Getting started with webpack - Tutorial for absolute beginners

Gopi Krishna — Mon, 21 Nov 2022 17:30:00 +0000

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 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

Entry
Output
Loaders
Plugins
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.

    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.

    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, you can transpile typescript files.

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

Loaders have two properties:

test - Used to identify the file types which need to be transformed to javascript modules.
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.

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

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

css-loader - Adds support to import CSS files directly into a javascript file.
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.

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

You can install it with npm.

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

And add it config using the plugins property.

{
    ...,
      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

production (default)
development
none

{
    ...,
        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.

    mkdir age-calculator-webpack
    cd age-calculator-webpack

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

Now let's install webpack.

npm install webpack  webpack-cli --save-dev

Also, install plugins for CSS and HTML

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

Let's create the files.

touch webpack.config.js

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

The directory structure looks like this


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

Basic setup

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


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.

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

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

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.

<!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.


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.

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

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

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. The Webpack dev server is a static server (based on express.js) and supports live reloading.

Installing the webpack dev server by running

npm install webpack-dev-server --save-dev

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

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)

{
  "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.

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

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

Add them to the webpack.config.js

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,

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

Now import the CSS file in src/app.js

import './styles.css'

console.log('Hello from webpack')

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

Final app

Add the age calculation logic to the app.

In src/app.js

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.

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.

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

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 library. To install it, run.

npm run install date-fns --save

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

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.

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

How to use error boundaries in react?

Gopi Krishna — Tue, 25 Oct 2022 11:30:00 +0000

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.

Enough talk, Let's get our hands dirty.

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

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.

    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

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.

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

fallback - Fallback UI to show when the component crashes
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

    <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.

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

Using the Node JS Cluster Module

Gopi Krishna — Sat, 11 Jul 2020 17:15:09 +0000

Introduction

As we know Node JS is single-threaded. Usually, most of the processors we use are 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.

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

$ npm init -y

It creates the package.json file.

Now install express using

$ npm install express

Without Cluster Module

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

//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

$ node without-cluster.js

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

{"data":832040}

With Cluster Module

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

//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 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)

$ node with-cluster.js

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

{"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.

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

$ 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

$ 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.

$ 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 😁

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

$ node with-cluster.js

Run the apache bench(ab) tool.

$ 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.

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)	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 which provides some extra features over the cluster module.

Thank You.

References

Cluster Module - Node JS Docs

Useful Tools: ApacheBench (ab) By Matthias

Getting started with CSS variables

Gopi Krishna — Wed, 13 Nov 2019 17:07:04 +0000

This article was originally published on my blog. Feel free to check it out

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

CSS variables need to be declared with -- prefix to the name.

: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 the name of the variable. If the variable is invalid, we can pass the fallback value as the second argument.

.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, let's 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 the scope of --btn-danger-color is only in btn class

.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

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.

  element.style.setProperty("--variable-name", value)

Let's write a small function to change the Button background colour to purple by using setProperty method.

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

Don't forget to link it with HTML.

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

Demo

I'm adding an embedded repl for the above code So that you can play with it.

Thank You.

Reference

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/)

How to use Local Storage in JavaScript?

Gopi Krishna — Sun, 04 Aug 2019 17:19:15 +0000

This article was originally published on my blog. Feel free to check it out

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.

const userPreferences = {
    darkMode: true,
    accentColor: 'red',
}

Now, we'll store it in the browser using localStorage.setItem method

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.

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.

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.

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 the same.

Limitations

Do not store any sensitive data in the local storage as it can be accessed by anyone browsing the page. And there is no form of data protection.

Example

If you're reading this on Dev.to, Open the developer tools by pressing ctrl(cmd) + shift + I and go to Application → Local Storage. There you'll find how 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

Session Storage - MDN

Null vs Undefined in JavaScript in 1 min

Gopi Krishna — Tue, 23 Jul 2019 07:56:52 +0000

Note: It's my first blog post, constructive criticism would be welcome 🙂

I always had a small 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.

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

But when we assign null to a variable, we are explicitly assigning a "nothing" or "empty" value to it.

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

let userDetails = null;

Later we fill 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 which returns an object.

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.

This article was originally published on my blog.

Thank you.

Reference

undefined - MDN
null - MDN
Javascript Grammer

Need Feedback on a React Project

Gopi Krishna — Wed, 05 Jun 2019 14:41:45 +0000

I did a project called movie-base using React JS and Firebase. Please give me your suggestions, tips and constructive feedback. Thanks in advance 🙂️. Here's the link movie-base.

Edit: From the feedback I received, As this is a test application you can even sign-up with a fake email to test the App.