Forem: Manas

Liskov Substitution Principle Made Easy: Practical Examples

Manas — Sun, 06 Apr 2025 10:33:31 +0000

The Liskov Substitution Principle says that objects of a superclass shall be replaceable with objects of its subclasses without breaking the application. That requires the objects of your subclasses to behave in the same way as the objects of your superclass.

Liskov Substitution Principle is extension of Open/Close Principle

In simple words

Objects of a superclass should be able to be replaced with objects of a subclass without affecting the program.
Object of subclass should be able to access the all the methods and properties of the superclass.

Lets take an example to understand this :-(Since this is extension of Opne/Close Principle lets use the same example)

As we have seen now that if we have different types of bank account, we can simply create a new bankAccount by extending the class bankAccount

Now suppose we have a new BankAccount type now, for Fixed Deposit. From the Open/Close Principle we can simply implement this as

class FixedDepositAccount extends BankAccount{
      withdrawAmount(newAmount: number): void {
          throw new Error("Cannot withdraw from Fixed Deposit when in locing period.");
      }
      depositAmount(newAmount: number): void {
        this.setAmount = this.getAmount + newAmount;
      }

  }

const fixedAccount = new FixedDepositAccount("Manas", "123");
fixedAccount.depositAmount(1234567);

Since we cannot withdraw from FixedDepositAccount we throw an error for that

Lets assume we have a BankWithdrawlService and we wish to withdraw amount from different accounts.

class BankWithdrawService {
    private _bankAccount:BankAccount

    constructor(bankAccount:BankAccount){
        this._bankAccount=bankAccount
    }

    withdrawAmount(amount:number){
        this._bankAccount.withdrawAmount(amount)
    }
}

Now Liskov Principle says that any subclass of a class should be able to replace it. So now if we try to withdraw amount from fixedDeposit class(Subclass of BankAccount), we will get an error which violates the Liskov Principle

const bankWithdrawlService = new BankWithdrawService(fixedAccount)
bankWithdrawlService.withdrawAmount(123)

Error: Cannot withdraw from Fixed Deposit when in locking period.

So to improve this code and align with Liskov principle, first we need to separate out the withdraw method. Since all accounts will always have deposit method so lets create interfaces to refactor the code and optimise it.

Steps to approach :-

We create an interface for deposit method, since all bank accounts currently that we have serve deposit
Then we create another interface for withdraw method for withdrawable accounts
Now we create a main BankAccount abstract class which implements the deposit interface
Then we create a withdrawable abstract class which extends the BankAccount class and also implements the withdrawable interface
Now we simple use withdrawable abstract class for Savings and Current Account
And the BankAccount abstract class for FixedDeposit account

interface IDepositAmount {
  depositAmount(amount: number): void;
}

interface IWithdrawAmount {
  withdrawAmount(amount: number): void;
}
abstract class BankAccount implements IDepositAmount {
  private _customerName: string;
  private _customerId: string;
  private _amount: number = 10000;

  constructor(customerName: string, customerId: string) {
    this._customerName = customerName;
    this._customerId = customerId;
  }
  abstract depositAmount(amount: number): void;

  public get getAmount(): number {
    return this._amount;
  }

  public set setAmount(amount: number) {
    this._amount = amount;
  }
}

abstract class WithdrawableAccount
  extends BankAccount
  implements IWithdrawAmount
{
  constructor(customerName: string, customerId: string) {
    super(customerName, customerId);
  }
  abstract withdrawAmount(amount: number): void;
}

class SavingsAccount extends WithdrawableAccount {
  constructor(customerName: string, customerId: string) {
    super(customerName, customerId);
  }

  withdrawAmount(newAmount: number): void {
    this.setAmount = this.getAmount - this.getAmount * 0.005 - newAmount;
  }

  depositAmount(newAmount: number): void {
    this.setAmount = this.getAmount + this.getAmount * 0.005 + newAmount;
  }
}

class CurrentAccount extends WithdrawableAccount {
  constructor(customerName: string, customerId: string) {
    super(customerName, customerId);
  }

  withdrawAmount(newAmount: number): void {
    this.setAmount = this.getAmount - this.getAmount * 0.005 - newAmount;
  }

  depositAmount(newAmount: number): void {
    this.setAmount = this.getAmount + this.getAmount * 0.005 + newAmount;
  }
}

class FixedDepositAccount extends BankAccount {
  depositAmount(amount: number): void {
    this.setAmount = this.getAmount + amount;
  }
}
const fixedAccount = new FixedDepositAccount("Manas", "123");
fixedAccount.depositAmount(1234567);

class BankWithdrawService {
  private _withdrawableAccount: WithdrawableAccount;

  constructor(withdrawableAccount: WithdrawableAccount) {
    this._withdrawableAccount = withdrawableAccount;
  }

  withdrawAmount(amount: number) {
    this._withdrawableAccount.withdrawAmount(amount);
  }
}

const withdrawableAccount = new SavingsAccount("Manas","123")

const bankWithdrawlService = new BankWithdrawService(withdrawableAccount);
bankWithdrawlService.withdrawAmount(123);

Benefits:
The benefit of following LSP is that it leads to more modular, extensible, and maintainable code. Here are some specific benefits:

Code reusability: When LSP is followed, the code can be reused easily because it allows for the use of generic interfaces or base classes that can be implemented or extended by different subclasses.
Improved code quality: By following LSP, the code becomes more understandable and easier to maintain.

Applying the Open/Closed Principle in TypeScript: A Concise Overview

Manas — Sat, 31 Aug 2024 06:35:09 +0000

The basic definition of the principle is that software entities such as classes, modules, functions etc should be open for extension but closed for modification.
Let's break down this statement to understand it in detail.

The statement says that whenever there is a new requirement for a class, we should not be modifying the class but rather extending an abstraction of the class and utilizing it.

Let's take an example to better understand:-

Suppose we create a class for bank accounts where we have two methods to withdraw and deposit the amount.

class BankAccount {
  private _customerName: string;
  private _customerId: string;
  private _amount: number = 10000;

  constructor(customerName: string, customerId: string) {
    this._customerName = customerName;
    this._customerId = customerId;
  }

  withdrawAmount(newAmount: number) {
    this._amount = this._amount - newAmount;
  }

  depositAmount(newAmount: number) {
    this._amount = this._amount + newAmount;
  }
}

Now we have a new requirement for another kind of bank account, and for this account, there is some additional fees for withdrawing and depositing amounts.Lets change the code accordingly.

class BankAccount {
  private _customerName: string;
  private _customerId: string;
  private _bankType: string;
  private _amount: number = 10000;

  constructor(customerName: string, customerId: string, bankType: string) {
    this._customerName = customerName;
    this._customerId = customerId;
    this._bankType = bankType;
  }

  public get amount(): number {
    return this._amount;
  }

  withdrawAmount(newAmount: number) {
    if (this._bankType === "savings") this._amount = this._amount - newAmount;
    else if (this._bankType === "current")
      this._amount = this._amount - this._amount * 0.005 - newAmount;
  }

  depositAmount(newAmount: number) {
    if (this._bankType === "savings") this._amount = this._amount + newAmount;
    else if (this._bankType === "current")
      this._amount = this._amount + this._amount * 0.005 + newAmount;
  }
}
const savingsAccount = new BankAccount("Manas", "123", "savings");
const currentAccount = new BankAccount("Manas", "123", "current");

savingsAccount.depositAmount(100000);
savingsAccount.withdrawAmount(1212);

console.log("Amount in savings account is ", savingsAccount.amount);

currentAccount.depositAmount(100000);
currentAccount.withdrawAmount(1212);

console.log("Amount in current account is ", currentAccount.amount);

This code works, but can you find the issue with this approach?

Why Open Closed Principle

The above approach has a few issues.

We will end up testing the whole functionality again since we introduced new code in an already existing feature
This in turn can end up being a costly process for the organization
Since our class or method might end up doing multiple things, this also breaks our Single Responsibility Principle
With the addition of new code, the maintenance overhead for the classes increases.

To get rid of the above issues we use the Open Closed Principle

We create an abstract class for bankAccount and then make the withdraw() and deposit() method as abstract.
We then consume this abstract class for our respective bank accounts.
Accordingly we also change the calculation for deposit and withdraw directly for the account type classes

abstract class BankAccount {
  private _customerName: string;
  private _customerId: string;
  private _bankType: string;
  private _amount: number = 10000;

  constructor(customerName: string, customerId: string, bankType: string) {
    this._customerName = customerName;
    this._customerId = customerId;
    this._bankType = bankType;
  }

  public get getAmount(): number {
    return this._amount;
  }

  public set setAmount(amount: number) {
    this._amount = amount;
  }

  abstract withdrawAmount(newAmount: number): void;

  abstract depositAmount(newAmount: number): void;
}

class SavingsAccount extends BankAccount {
  constructor(customerName: string, customerId: string, bankType: string) {
    super(customerName, customerId, bankType);
  }

  withdrawAmount(newAmount: number): void {
    this.setAmount = this.getAmount - newAmount;
  }

  depositAmount(newAmount: number): void {
    this.setAmount = this.getAmount + newAmount;
  }
}

class CurrentAccount extends BankAccount {
  constructor(customerName: string, customerId: string, bankType: string) {
    super(customerName, customerId, bankType);
  }

  withdrawAmount(newAmount: number): void {
    this.setAmount = this.getAmount - this.getAmount * 0.005 - newAmount;
  }

  depositAmount(newAmount: number): void {
    this.setAmount = this.getAmount + this.getAmount * 0.005 + newAmount;
  }
}

const savingsAccount = new SavingsAccount("Manas", "123", "savings");
const currentAccount = new CurrentAccount("Manas", "123", "current");

savingsAccount.depositAmount(100000);
savingsAccount.withdrawAmount(1212);

console.log("Amount in savings account is ", savingsAccount.getAmount);

currentAccount.depositAmount(100000);
currentAccount.withdrawAmount(1212);

console.log("Amount in current account is ", currentAccount.getAmount);

From the refactored code we can see that we created new classes based on the accountType and we ended up updating the withdraw() and deposit() functions accordingly. Now if in future we get a new requirement for third type of account we can simply extend the BankAccount abstract class

Understanding Single Responsibility Principle in TypeScript: A Quick Guide

Manas — Mon, 26 Aug 2024 05:57:51 +0000

The main definition of Single Responsibility principle says that A class should have only one reason to change. Lets break down this statement for better understanding.

Suppose we have a class that manipulates the text that we pass to it, the single responsibility principle states that the class we create should only be responsible for manipulating the text, and any other action that it performs should not be the part of the class.

Lets take an example of such a class and see how we can refactor it :

class TextManipulator {
  text: string;

  constructor(text: string) {
    this.text = text;
  }

  appendText(newText: string) {
    return this.text.concat(newText);
  }

  findAndReplace(word: string, replacementWord: string) {
    if (this.text.includes(word)) {
      this.text.replace(word, replacementWord);
    }
    return this.text;
  }

  printText() {
    console.log("The text is ", this.text);
  }
}

In the above code one can see that the class is also performing the print action. This breaks the Single Responsibility principle. We can refactor the code by creating two new classes

class TextManipulator {
  private text: string;

  constructor(text: string) {
    this.text = text;
  }

  appendText(newText: string) {
    return this.text.concat(newText);
  }

  findAndReplace(word: string, replacementWord: string) {
    if (this.text.includes(word)) {
      this.text.replace(word, replacementWord);
    }
    return this.text;
  }

  getText() {
    return this.text;
  }
}

class PrintText {
  formattedText: TextManipulator;

  constructor(formattedText: TextManipulator) {
    this.formattedText = formattedText;
  }

  printText() {
    console.log("The text is ", this.formattedText.getText());
  }
}

In the refactored code we have two separate classes that are performing separate action.

Why Single Responsibility Principle

With Single Responsibility Principle in place we can achieve the following :-

Better code organization and maintainability
Higher code reusability
Improved readability
Easier debugging and testing

Things to take in account

The trick to implement single responsibility principle is to know what is the single responsibility of our class. However every developer has his/her vision for class responsibility, and since we don't have any instructions on how to implement, we are only left with our own interpretation.

There can be instances when we separate two classes that are in fact doing the same thing with business or architecture perspective. This can create a more complicated code with both the classes tightly coupled to each other, and thus reducing the sole purpose of SOLID principles

The key is not to overthink when creating new classes

Master Infinite Scrolling in 20 Easy Steps

Manas — Sat, 17 Aug 2024 17:09:01 +0000

Infinite Scrolling

We can implement infinite scrolling using the IntersectionObserver API given by browser.
To implement we can simply follow these steps :-

We can use a mock API for our infinite scrolling and then create a custom hook
This custom hook with take the parameters of the API as its own parameter of function.
Then we can implement simply the API call, using useEffect and axios, passing in the parameters from the functional parameters.
We can have loading, error, hasMore and data as state
We can then also use setTimeout so that we can properly check for loading as well as infinte scrolling
hasMore will be equivalent to the length of array of data we are showing currently in page compared with what we get from api call
This hasmore is there to avoid calls even when we reached end of our data.
Once the custom hook is present in our main page we will create state of the parameters that we were passing
Then we will pass the parameters to our custom hooks and reterieve the data
The list of data that we get we will render it using map and then display it
Now we need to apply infinte scroll once we reach end so for the last element data of the array we receive we will simply add a ref
This ref will be equivalent to a useCallback function, whose parameter will be this last element.
Next we will create a useRef whose value will be by default null
Now we will check if we are in loading state or not. If yes we will simply return
Next we will check if this useRef current value is null or not. If not null we will simply disconnect this observer. The idea here being that the observer should be new each time,since each time we will have new data
Now we will assign this new observer.current value of callback function by new IntersectionObserver.The IntersectionObserver API will return a callback function, with entries as parameter.
These entries are basically the value of our last element when it is in the page.We want the condition when we will interact with these entries in page
So we have a boolean value for each entries. isIntersecting
When this is true we will make the parameters of the custom hook to change. This will inturn call the api again and render also again
Lastly we need to observe the element we have passed in callback, so if we have the element we will simply observe it.

Code

CustomHook.jsx

import axios from "axios";
import { useEffect, useState } from "react";
import { API_URL } from "../common/constants";

export const useAuthorList = (limit, page) => {
  const [isLoading, setIsLoading] = useState(false);
  const [authorList, setAuthorList] = useState([]);
  const [error, setError] = useState("");
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      axios({
        method: "GET",
        url: API_URL,
        params: { limit: limit, page: page },
      })
        .then((res) => {
          setAuthorList(res.data.data);
          setHasMore(res.data.data.length === limit);
          setIsLoading(false);
        })
        .catch((e) => setError(e));
    }, 500);
  }, [limit, page]);

  return [isLoading, authorList, error, hasMore];
};

App.jsx

import React, { useCallback, useRef, useState } from "react";
import { useAuthorList } from "./hooks/useAuthorList";
import { AuthorQuotes } from "./components/AuthorQuotes";

const App = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);
  const [isLoading, authorList, error, hasMore] = useAuthorList(limit, page);

  const observer = useRef(null);
  const infiniteReference = useCallback(
    (element) => {
      if (isLoading) return;
      if (observer.current) {
        observer.current.disconnect();
      }

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setLimit((prev) => prev + 10);
        }
      });

      if (element) {
        observer.current.observe(element);
      }
    },
    [isLoading, hasMore]
  );

  return (
    <div className="author-quotes-list">
      {authorList.length > 0 &&
        authorList.map((authorQuotes, index) => {
          if (index + 1 === authorList.length) {
            return (
              <AuthorQuotes
                authorQuotes={authorQuotes}
                hasReference
                infiniteReference={infiniteReference}
              />
            );
          }
          return <AuthorQuotes authorQuotes={authorQuotes} />;
        })}
      {isLoading && <>Loading...</>}
    </div>
  );
};

export default App;

constants.js

export const API_URL = "https://api.javascripttutorial.net/v1/quotes/"

DESIGN PATTERNS JavaScript

Manas — Sun, 04 Aug 2024 05:53:53 +0000

Module Pattern

Using Module as a design pattern is very commmon. There are various reasons to go for modules. Few of them are follows

Maintainiability: - Modules can be added and removed according to use case without disturbing the whole code
Readability: - Modules create a section for specific purpose thus making the code more readable.
Namespacing: - In JS we have the concept of global variables, and global variables are accessible for all, so if we don't have proper encapsulation(which is provided by modules) then we will end up sharing variables across different code where the variable might not be required causing namespace pollution.

Annonymus Closure

Using the annonymus closure method we hide the variables from global namespace and the function is executed as soon as it is invoked.What’s nice about this approach is that is that you can use local variables inside this function without accidentally overwriting existing global variables, yet still access the global variables, like so:

var global = "Hello World"
(function () {
  var myGrades = [93, 95, 88, 0, 55, 91];

  var average = function () {
    var total = myGrades.reduce(function (accumulator, item) {
      return accumulator + item;
    }, 0);

    return "Your average grade is " + total / myGrades.length + ".";
  };

  var failing = function () {
    var failingGrades = myGrades.filter(function (item) {
      return item < 70;
    });

    return "You failed " + failingGrades.length + " times.";
  };

  console.log(failing());
  console.log(global)
})();

Global Import

This method is used by libraries like jQuery. It is exactly similar to the previous method with the only difference that the global variable is passed as a parameter. This distinction helps the developer in readability of the code.

(function (globalVariable) {
  var privateFunction = function() {
    console.log('Shhhh, this is private!');
  }
    globalVariable.map = function(collection, iterator) {
    var mapped = [];
    globalUtils.each(collection, function(value, key, collection) {
      mapped.push(iterator(value));
    });
    return mapped;
  };

})(globalVariable);

Object Interface

In the object interface approach we return an object with different values that we want to expose outside and the things that we want to keep private we don't return them

const gradesCalculation = (function(){
  const grades = [100,98,87,67]

  return{
    passing: function(){
      console.log("You are passing")
    },
    failing: function(){
      console.log("You are failing")
    }
  }
})()

gradesCalculation.passing()

Revealing Module Pattern

It is exactly similar to object interface pattern but in this pattern we make everything private until specifically returned

const gradesCalculation = (function(){
  const grades = [98,97,92,87]

  const passing = ()=>{
    console.log("You are passing")
  }

  const failing = ()=>{
    console.log("You are failing")
  }

  return {
    passing:passing
  }
})()

gradesCalculation.passing()

All the above module pattern have something in common. First they make use of the global variable and secondly they are using functional closure. But there is a problem with this approach.
Firstly suppose we have two modules with same name, this can again result in namespace pollution
Secondly we need to be very sure of the dependencies of various module and according load in correct order

CommonJS

To deal with the above issues we have a new Module pattern that was developed by team of CommonJS and is referred as commonjs method of module export. CommonJS is a volunteer working group that designs and implements JavaScript APIs for declaring modules.
Basically in CommonJS what we do is we have a global variable as exports inside module and we assign the module that we want to export to this value.
Now in the file where we want to use this module we simply use require and the path of the file to reterieve all exports
With CommonJS, each JavaScript file stores modules in its own unique module context (just like wrapping it in a closure). In this scope, we use the module.exports object to expose modules, and require to import them.

function myModule() {
  this.hello = function() {
    return 'hello!';
  }

  this.goodbye = function() {
    return 'goodbye!';
  }
}

module.exports = myModule;

Issue With CommonJS
The main issue with commonJS approach is that it is synchronous, i.e. all the modules load in the order they are called.While that approach works when working in server(Node) but when working in browser it causes delay and increase in waitTime

AMD(Asynchronous Module Definition)

So to deal with the above issues with CommonJS we have AMD pattern. Here is a piece of code to understand AMD

 define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
  console.log(myModule.hello());
});

Whats happening here is the define method takes in two parameters :-

An array of dependencies. These dependencies are loaded in the background (in a non-blocking manner), and once loaded define calls the callback function it was given.
A callback function which calls these dependencies as its parameter and we can use the dependencies in our function.

Note The dependencies in turn needs to be also defined in the same way as the new function

For example myModule can look like

define([], function() {

  return {
    hello: function() {
      console.log('hello');
    },
    goodbye: function() {
      console.log('goodbye');
    }
  };
});

The issue with AMD is that code is more verbose to write

UMD (Universal Module Definition)

To make use of the best worlds of both i.e. CommonJS and AMD we have yet another module definition method, and that is known as UMD. In UMD according to the situation we have the type of module definition. A typical UMD code can be as :-

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
      // AMD
    define(['myModule', 'myOtherModule'], factory);
  } else if (typeof exports === 'object') {
      // CommonJS
    module.exports = factory(require('myModule'), require('myOtherModule'));
  } else {
    // Browser globals (Note: root is window)
    root.returnExports = factory(root.myModule, root.myOtherModule);
  }
}(this, function (myModule, myOtherModule) {
  // Methods
  function notHelloOrGoodbye(){}; // A private method
  function hello(){}; // A public method because it's returned (see below)
  function goodbye(){}; // A public method because it's returned (see below)

  // Exposed public methods
  return {
      hello: hello,
      goodbye: goodbye
  }
}));

ES6 Modules

With ES6 the concept of using modules was made very easy looking at the above methodologies that were being used the main reasoning was to make the code writing easy just like CommonJS while keeping the good points of UMD and AMD methods

In ES6 we simply use the export keyword to export a given module. The exporting of the module is also divided into two parts :-

Named Exports
Default Exports

Named Exports

In named exports we since start adding export keyword to each and every function or variable that needs to be exported and utilised in some other module or file.

Example

index.js file

import {add,multiply,num} from "./app"


const addedNumbers = add(3,5)
const product = multiply(5)
console.log("Number is ",num)

app.js file

export const num = 10;

export const add = (a,b)=>{
  return a+b
}

const secretNumber = 20;

export const multiply = (num)=>{
  return num*secretNumber;
}

For a given module we can have multiple named exports/imports

Default Exports

For a given module we can only have one default export/import. When using the default export/import along with the already export/import keywords we have default keyword

Example

index.js file

import multiply, { add, num } from "./app";


const addedNumbers = add(3,5)
const product = multiply(5)
console.log("Number is ",num)

app.js file

export const num = 10;

export const add = (a,b)=>{
  return a+b
}

const secretNumber = 20;

const multiply = (num)=>{
  return num*secretNumber;
}

export default multiply

Singleton Pattern

In singleton design pattern we restrict the instantiation of certain classes to one single instance. This single instance is unmodifiable and can be accessed globally throughout the application.

Problem Solved

To provide single instance to a class
Provide a global access point to that class

Implementation

Make default constructor private, to prevent other objects from using it
Create a static creation method that acts as a constructor

Using Classes

Creating a singleton with an ES15 classes can be done as follows

let instance;
class Counter {
  constructor(counter) {
    if (instance) {
      throw new Error("Instance already exists");
    }
    this.counter=counter;
    instance=this;
  }
  getCounter(){
    return this.counter;
  }

  increment(){
    return this.increment++;
  }

  decrement(){
    return this.increment--;
  }

}

const singletonClassCounter = Object.freeze(new Counter())
export default singletonClassCounter;

What is this Object.freeze()
The method object freeze is there to stop the mutation of any object that has been created. Like const is there to stop the re-declaration of a variable, but when we create an object the using const, reference cannot be changed, but we can still mutate the object, so to avoid that we have Object.freeze()

Using Objects

We can even use Objects to create singleton design pattern without using the classes.

let counter=0;
const counterObject = {
  getCount:()=>counter;
  increment:()=>counter++;
  decrement:()=>counter--;
}

const singletonCounter = Object.freeze(counterObject)
export default singletonCounter

Very Important
Unnecessary: ES2015 Modules are singletons by default. We no longer need to explicitly create singletons to achieve this global, non-modifiable behavior.

Real-World Example

The government is an excellent example of the Singleton Pattern. A country can have only one official government.

Proxy Pattern

The idea of the proxy pattern is very straight forward, we will not use directly the object, but rather an intermediate object, that in turn will return us the values.
For example sake its just like when we use proxy for our attendance, we use someone else on our behalf rather than being present ourselves.
We can simple use the Proxy inbuilt object of JS to use the proxy pattern.

Problem

When we have a massive object that we need to access time to time but not always, so for that we should only initialize this object when needed. But this can cause code duplication, so proxy pattern comes to rescue.

Implementation

The Proxy pattern suggests that you create a new proxy class with the same interface as an original service object. Then you update your app so that it passes the proxy object to all of the original object’s clients.

Using Target

Example

const person = {
  name:"Bruce",
  age: 34,
  email:"darkKnight@gotham.com",
  city:"Gotham",
  country:"USA"
}

const batmanProxy = new Proxy(person,{
  get:(target,prop)=>{
    console.log("Target is ",target)
    return target[prop]
  },
  set:(target,prop,value)=>{
    target[prop]=value
    console.log("Value is ",value)
    return true
  }
})

Using Reflect

We have another way of getting object value as well as setting it. This can be achieved using Reflect method.
Instead of accessing properties through obj[prop] or setting properties through obj[prop] = value, we can access or modify properties on the target object through Reflect.get() and Reflect.set().

Example

const person = {
  name:"Bruce",
  age: 34,
  email:"darkKnight@gotham.com",
  city:"Gotham",
  country:"USA"
}

const batmanProxy = new Proxy(person,{
  get:(target,prop)=>{
    console.log("Target is ",target)
    return Reflect.get(target,prop)
  },
  set:(target,prop,value)=>{
    Reflect.set(target,prop,value)
    console.log("Value is ",value)
    return true
  }
})

Real-World Example

A credit card is a proxy for a bank account, which is a proxy for a bundle of cash. Both implement the same interface: they can be used for making a payment.

Observer Pattern

The basic idea of observer pattern is that, a stream of events are currently happening and if the user is interested then they can get the information, if they have subscribed to the event.
If we take a basic analogy, suppose you want a new brand of phone, now you cannot go to the store everyday, rather its better if you get notified when the smartphone is available.
This is what followed in observer pattern.
The Observer pattern suggests that you add a subscription mechanism to the publisher class so individual objects can subscribe to or unsubscribe from a stream of events coming from that publisher.

What is this publisher class?
Basically, the object which emits all the events continuous as stream of data is called publisher, now all of the users may not want the data, so only those who subscribe to the data receives it, and those who subscribe are known as consumers.

Problem

If you are interested in some stream of data that continuosly notifies you but you don't want others to access the same, since they don't want the data, then in that case we use the observer pattern

Implementation

We can simply create an array of observers and create an object that has notify, subscribe and unsubscribe methods.

let observers=[]
export default Object.freeze({
  notify:(data)=>observers.forEach((observer)=>observer(data)),
  subscribe:(func)=>observers.push(func),
  unsubscribe:(func)=>{
    [...observers].forEach((observer,index)=>{
      if(observer===func){
        observers.splice(index,1)
      }
    })
  }
})

Real-World Example

If you subscribe to a newspaper or magazine, you no longer need to go to the store to check if the next issue is available.

Prototype Pattern

In a scenario when we have similar type of objects and we want to copy most of the data from that object to new object in that case we use prototype pattern. What we do basically is we create a generic object, since most of the things are going to be same, and then we derieve other objects from this object.

Problem

The Prototype pattern delegates the cloning process to the actual objects that are being cloned. The pattern declares a common interface for all objects that support cloning.

Implementation

class Dog {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  bark() {
    console.log(`${this.name} is barking!`);
  }
  wagTail() {
    console.log(`${this.name} is wagging their tail!`);
  }
}

const dog1 = new Dog("Max", 4);
const dog2 = new Dog("Sam", 2);

Real-World Example

In real life, prototypes are used for performing various tests before starting mass production of a product

Design Patterns in React

Container/Presentation Pattern

Container and Presentation pattern is basically a design pattern in React. In this pattern we just normally try to separate the code concerns. So basically we create a container that handles all the data related code, like code related to redux and state, while the presentation part takes care of how the data will look in UI.

Problem

If we want to keep both the data/api logic and UI logic we can use the design pattern. This helps in testing and debugging the issues properly

Implementation

import React from "react";
import { LoadingListings, Listing, ListingsGrid } from "../components";

function ListingsContainerComponent() {
  const [listings, setListings] = React.useState([]);

  React.useEffect(() => {
    fetch("https://my.cms.com/listings")
      .then((res) => res.json())
      .then((res) => setListings(res.listings));
  }, []);

  return <Listings listings={listings} />;
}

function ListingsPresentationalComponent(props) {
  if (props.listings.length === 0) {
    return <LoadingListings />;
  }

  return (
    <ListingsGrid>
      {listings.map((listing) => (
        <Listing listing={listing} />
      ))}
    </ListingsGrid>
  );
}

HOC(Higher-Order Components) Pattern

The basic idea of HOC pattern is that we create a component and then that component gets wrapped by another component. Based on some logic either we do some changes to this component or render the same component as it is. The component is passed as a prop to the higher order component

Implementation


function withLargerFontSize(Component){
  return (props)=>{
    const style = {
      fontSize:"1.5rem",
      ...props.style
    };
    return (<Component {...props} style={style}>)
  }
}

const Text = () => <p style={{ fontFamily: "Inter" }}>Hello world!</p>;
const StyledText = withLargerFontSize(Text);

Render Props Pattern

In this design pattern we basically pass a component as a prop and this component can receive props of the parent component as well. It is different from HOC method where we just pass component as prop and then wrap it around with some small changes

Implementation

import React, { useState } from "react";

function Input(props) {
  const [value, setValue] = useState(0);

  return (
    <>
      <input type="number" onChange={(e) => setValue(e.target.value)} />
      {props.renderKelvin({ value: Number(value) + 273 })}
      {props.renderFahrenheit({ value: (value * 9) / 5 + 32 })}
    </>
  );
}

function App() {
  const renderKelvin = ({value}) => <div>The value is {value}</div>;
  const renderFahrenheit = ({value}) => <div>The value is {value}</div>;

  return (
    <div className="App">
      <Input renderKelvin={renderKelvin} renderFahrenheit={renderFahrenheit} />
    </div>
  );
}

export default App;

Hooks Pattern

When we see the above two patterns, the concept of hooks pattern becomes more significant, since now using the hooks pattern we can simply avoid the above two patterns.
React Hooks are functions special types of functions that you can use in order to:

Add state to a functional component
Reuse stateful logic among multiple components throughout the app.
Manage a component's lifecycle

So what we can do is, wherever we find similar kind of logic(be it related to data) we can separate that out using our own custom hooks.

Implementation

export function useHover() {
  const [isHovering, setIsHovering] = React.useState(false);
  const ref = React.useRef(null);

  const handleMouseOver = () => setIsHovering(true);
  const handleMouseOut = () => setIsHovering(false);

  React.useEffect(() => {
    const node = ref.current;
    if (node) {
      node.addEventListener("mouseover", handleMouseOver);
      node.addEventListener("mouseout", handleMouseOut);
      return () => {
        node.removeEventListener("mouseover", handleMouseOver);
        node.removeEventListener("mouseout", handleMouseOut);
      };
    }
  }, [ref.current]);

  return [ref, isHovering];
}

import { useHover } from "../hooks/useHover";

export function Listing() {
  const [ref, isHovering] = useHover();

  React.useEffect(() => {
    if (isHovering) {
      console.log("Its hovering")
    }
  }, [isHovering]);

  return (
    <div ref={ref}>
      <ListingCard />
    </div>
  );
}

Demystifying Vim: A Beginner's Journey into Text Editing

Manas — Mon, 16 Oct 2023 18:23:24 +0000

In the world of text editors, Vim stands as a legendary figure, renowned for its efficiency, versatility, and a learning curve that can seem daunting at first. If you're a writer, programmer, or anyone who works extensively with text, understanding the basics of Vim is a valuable skill that can significantly enhance your productivity. Today with this blog I want to highlight the basics of VIM editor that are essential for any beginner developer.

What is VIM?

Vim, short for "Vi IMproved," is an advanced text editor that evolved from the Unix-based Vi editor, which was created by Bill Joy in the late 1970s. It is very popular in Linux-based systems.
What sets Vim apart from other text editors is instead of relying solely on your keyboard's arrow keys, Vim operates in different modes, each serving a specific purpose. VIM can get complicated because of the way it works, it largely differs from normal editors, where we are used to editing/writing as well as performing actions.

Why VIM?

As mentioned earlier VIM is a popular editor in Linux-based systems, and it is generally the default editor for git. So having at least a basic knowledge regarding the editor could be helpful at times. That is why in this short blog I will cover the basic commands of VIM, post which one can easily use the editor for daily development work.

Extra Insights: The blog will just cover the basics of VIM it has many more features. For advanced concepts of VIM refer to https://thevaluable.dev/vim-advanced/

What is this Mode in VIM?

You may have come across terminologies like normal mode or insert mode for VIM. What does this mean? Let's find out.

VIM has three modes in which the editor state can be. The modes are:-

Normal Mode
Insert Mode
Visual Mode

Let's discuss each mode in detail

Normal Mode:- All actions that we can perform in VIM are done in normal mode. Actions like traversing, deleting words, deleting characters, new lines, finding a word, finding a letter, etc. All these actions are performed in normal mode. We will look into these actions later in detail. The editor is by default in normal mode, but if you have to come from insert mode to normal mode we use the escape key

Extra Insights: The reason why VIM feels complicated is that it has modes for individual work, while the other editors are independent of that, and we as developers or users are very much used to that fact.

Insert Mode:- By default the editor is in normal mode, to switch to insert mode, we can do that by pressing the i key. Once in insert mode, we can add our content. It is basically the write mode. We cannot perform any actions here

Visual Mode:- In the scope of what we are trying to cover in this blog, the visual mode is a bit out of scope. Still, I will try to cover some basic commands in visual mode. To enter a visual mode we press the key v

What are these actions we are talking about?

Basically, consider you have opened any editor of your choice. Actions are those things you perform apart from typing in the editor and creating your content. So actions can be, navigating, newline, backspace, find and replace, save and exit, etc. These actions are the ones that are performed in normal mode.
Now let's look at these actions. I have divided actions according to the common thing they do.
So let's dive ahead.

Common Actions:-

I have identified two actions as the most common actions in any text editor: deleting a character typically achieved using the backspace key in a standard editor, and creating a new line.
So in VI editor, these actions are achieved as follows:

O or o:- The command is equivalent to “enter” in our normal editor. In normal mode when we press “O” or “o”, it adds a newline and we are automatically in insert mode.
X or x:- The command is equivalent to “backspace” in our normal editor. Using “X” removes the character that is under the cursor.

Key Takeaways: To remember the association between o for Enter and x for Backspace, you can use a simple mnemonic phrase: Open, Exit.

o in Open reminds you of the Enter key, as you often press Enter to open or start a new line or paragraph.

x in Exit corresponds to the Backspace key, as you press Backspace to exit or remove characters.

Navigation

Navigation is the action where we want to go to a specific part of our editor. Following are the ways that can be used to navigate.

Navigating up, down, left, and right: (I have added a small trick to remember them)
J - down arrow (Since J stands for joker so lower in value)
K - up arrow (Since K stands for King so higher value)
L - right arrow (Life is unfair, so although L should be left it would be right)
H - left arrow (Last remaining)
So the arrow keys up, down, left, and right for VIM are K, J, H, and L respectively.

Example:- My name is Manas Pant.
My name is Manas Pant.
(Assuming cursor at n of name in the first line)
Pressing the l - Cursor moves to the a character of the name
Pressing the h - Cursor moves to the n character of the name
Pressing the j - Cursor moves to the next line over n
Pressing the k - Cursor comes back to n

Key Takeaways: The reason for not using the arrow keys directly for navigation is that when VIM was being created by Bram Moolenaar he used the keyboard Lear Siegler ADM-3A which looks like the image below. So as you can see from the image, for the keyboard we don’t have any arrow keys, and the arrow keys are (HJKL)

Let's get back to the navigation actions. We have already seen up, down, left and right. Let's see other navigation.

Navigating through Words:
To navigate through words the keys used are (w,e,b)
w:- forward jump to the start of the word (w for word)
b:- backward jump to the beginning of the word (b for beginning)
e:- forward jump to the end of the word (e for end)

Example:- My name is Manas Pant. (Assuming cursor at n of name)
Pressing the e - Cursor moves to the e character of name
Pressing the b - Cursor moves to the n character of name
Pressing the w - Cursor moves to the i character of is

Key Takeaways: The primary distinction between w, e, and b lies in the fact that with w, the cursor will jump to the start of the next word, regardless of its current position within the word. However, with e and b, the behavior depends on the cursor's location. For instance, if the cursor is at the start (or end in the case of e), and we press b, the cursor will jump to the previous (or next in the case of e) word. But if the cursor is within the same word, somewhere in between, it will remain in the same word.

Navigating to the beginning and end:-
To navigate to the beginning and end we have gg and G key presses respectively
gg:- beginning of file*(good game and lets start again)*
G:- beginning of the last line of the file (Good Go at last )
number+G:- jumps you to the specified line (it is similar to ctrl+G of VS Code)

To navigate to the beginning and end of the line where the cursor is we have 0 and $ respectively
0:- beginning of the line (since you are zero start again)
$:- end of that line (earned everything now(in dollar), nothing more to be done so lets end)

Example:- My name is Manas Pant.
My name is Manas Pant.
(Assuming cursor at n of name in the first line)
Pressing the gg - Cursor moves to the start of the file M
Pressing the 2G - Cursor moves to the last line over M
Pressing the $ - Cursor moves to the end of the last line over .
Pressing the 0 - Cursor comes back to the start of the last line M.

Key Takeaways:Navigating to the last of a line and navigating to the last of a file can get confusing so the trick to remember is we have g in the navigation to file, and g represents Go. So when we are about to go we refer to the file.

Navigation in a combination of numbers:-
The navigation specified above can also be used with a combination of numbers.
3w:- If we press this combination then we are kind of pressing w 3 times. So it will end up making the cursor to the the next third word.
Example:- My name is Manas Pant (Assuming cursor at n of name)
Here 3w will move the cursor to P

Similarly, we can have combinations for e, b, h, j, k, l, and G.

Extra Insights:For gg, 0, and $ we don’t have a number combination(I hope this part is self-explanatory).

Let's see some more examples of combination navigation
Example:- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
(Assuming cursor at o of of word)
Pressing 3w:- This will move the cursor to a of and
Pressing 3e:- This will now move the cursor from a of and to y of the industry.
Pressing 3b:- This will move the cursor to a of and.
Pressing 10l:- This will move the cursor 10 times to the right so from a we will go to the first t of typesetting in the middle
Pressing 12h:- This will move the cursor left side 12 times, so from t we will go to g of printing

Navigating through parenthesis:-
To navigate through parenthesis we use the key %. % navigates us to the closing parenthesis of the upcoming parenthesis pair.

Extra Insights: The parenthesis should be in pair, if not in pair % would skip that parenthesis.

Example:- (My) name is (Hello World !)
Pressed %:- It navigates to the closing bracket ) after World!
Again pressed %:- Navigates to the starting bracket ( that is followed by Hello

Find

The find actions are useful when we want to find any specific word or character.

The following are the ways to perform a search
f+ character: To find the next character that resembles the given character. (f for find)
F+ character: To find the previous character that resembles the given character (f for find)
*+ character: To find the next “word” occurrence which is under the cursor. (To find a star is a big thing so * will search for words and stars are to look forward)
#+ character: To find the previous occurrence of the word that is under the cursor. (Since for stars we look forward # will be backwards)
/ enter the text and then press n or N: To find a given text or a character or regex.(Forward slash means looking forward so searching)
/ with n:- Search the text and then look for the next occurrence in the forward jump (n for next word)
/ with N:- Search the text and then look for the next occurrence in the backward jump (n for next word)

Example:- My name is Manas Pant. Today I want to talk about VIM editor and its uses. This is going to be fun.
(Assuming cursor is at i of is that occurs first)
Pressing *:- Jumps to the next occurrence of is
Pressing #:- Jumps back to the previous and the first occurrence of is
Pressing f:- Jumps to the i in editor
Pressing f:- Jumps to the i of its
Pressing F:- Jumps to the i of editor
Pressing /going+n:- Jumps to the g of going

Key Takeaways:To find a character we use the f key while for words we have the / key. But to remember easily, I would suggest just remembering that we can use / for both words and characters thus eliminating the use of the f key.

Key Takeaways:In VIM for a few commands we have both the CAPS of a key and the key itself. So to remember this, just remember CAPS is back so N and F will search back. Similarly, we will see P later.

Replace

Replace actions can be used to replace a word or a character. The following are the ways to perform the replace
r character:- It replaces the character that is over the cursor with the character that is mentioned. The use here is we don’t need to change the mode to insert (r for replace)
:%s/old/new/g:- When we want to replace the old text/word/character with a new one.

Example:- My name is Manas Pant. Today I want to talk about the VIM editor and its uses.(Assuming cursor is at i of is that occurs first)
Pressing r+ I:- This will replace the word is with Is as we replaced the first character.
Pressing :%s/Manas/Someone/:- This will replace the word Manas with the word Someone

Key Takeaways: g here represents all the instances of that word in the file. If you don’t mention g then it will replace the first instance of that word from each line.

Deleting

You have already seen x as one viable solution to remove characters. But if we want to delete more than just a character, maybe a word or a sentence then we require the delete commands. We use the d key for that purpose.
d character:- To delete. We can combine d with navigation to perform delete. (d stands for delete)

Key Takeaways: d alone cannot be used to delete anything. It has to be used along with some navigation commands or other commands.

dw:- This deletes the character starting from the cursor till the start of the next word.
de:- delete the characters till the end of a new character is reached
db:- delete the characters till the beginning of the new character is reached
dl:- delete to the right
dh:- delete to the left
dd:- This deletes the whole line

Example:- My name is Manas Pant. (Assuming cursor at n of the name)
Pressing dw:- It deletes the characters from n till the start of the next word. So we will get “My is Manas Pant”

File Management

These commands and actions are used for file manipulation, including saving, not saving, exiting the editor, copying a line, and pasting content in the file. The corresponding commands for each action are as follows:
:w:- To save the file (Write and Secure)
:wq:- To save the file and quit the editor (Write and Quit)
yy:- Copy a line (Yank a Line)
p:- Paste the line after the cursor (Place Below)
P:- Paste the line before the cursor (Place Above)
S:- Clear the current line and then insert mode (Start Over)

Conclusion

In this comprehensive guide, I have tried to cover the basic commands in VI with tips and tricks, so that the learning could become more fun and interesting. The division of the content can be particularly helpful for memorization and for establishing connections to specific aspects of VI that may initially appear complex. I have focused primarily on the fundamental aspects of VI, providing an amount suitable for a beginner developer.

Your Feedback Matters

I hope this blog has been a valuable resource for you in your quest to master the VI editor. Your feedback and questions are essential for improving this guide and providing more useful content. If you have suggestions or additional topics you'd like to see covered, please feel free to reach out.