DEV Community: Asidipta

Redux: The Concept

Asidipta — Sun, 18 Jun 2023 15:54:25 +0000

You probably heard of Redux while learning React. It has been a buzz word really with the huge growth in popularity of React.js There are so many tutorials out there that explain redux with react and there is nothing wrong with that.

The point I am trying to put forward is that Redux is not a mere javascript library that you can use with React. It is more of a state management concept that you can use anywhere to manage states in your applications.

TLDR;

In short, redux is based on the following principles:

Maintain a global data structure which is the single source of truth for your entire application. We call this the store.
The store is immutable.
Any event that can update store needs to fire an action with/without data.
Actions are sent to the store through pure functions known as reducers that take inputs from actions and send new state to the store.
Store will notify all the components of your application if anything has changed.

Let's start from the start

Okay, so I will try to keep this as simple as possible without using any react state management keywords for you to grasp the power of redux as a concept.
Why do we need to understand state management? State management is a crucial part of building any application whether it is frontend or backend.
You might say with REST APIs we do not need to manage state in our server anymore. Well you would be partially correct since that statement is only true for user data. You might have to keep certain states of variables in memory since database calls are expensive.

Redux concepts

Moving along, let us understand what we need to know to grasp this concept.

1. Store

The store is a data structure that is maintained globally. In other words, it is stored in a location that is accessible to all parts of your application.
It is the single source of truth for your application, which is just a complicated way of saying that if you face any conflict in state, the store's state prevails.
The store is immutable. You need to ensure that neither of your functions directly accesses or writes over the state maintained in the store.
The store will provide accessor functions to read the state from.

2. Action

Action is a function that is triggered whenever you want to change a state. So, lets say component A wants to increase global counter to 5. It will call the suitable action and pass along 5. Action is responsible for triggering a state change request from user.
Actions can even handle any side effects you want to include like something from a database,

3. Reducer

A reducer is a pure function which means a reducer is not affected by anything happening in the application. It reads the store and copies the state. It gets details of what to do from the action and might also receive some data parameters from the action that user has called. It will process these data and perform certain operations on it's copy of the state and return the new state.

These 3 parts make the fundamentals of redux. Really! I promise. All other nitty-gritties you might have heard are all implementation details that keeps on changing as various libraries evolve.
So, how does these components all work together? Here is a schematic diagram to explain just that.

Want to see how these simple concepts in redux come together to form great applications?
Here is a simple web app to show it in action
Windbnb
Code

If you liked this approach of looking at things, please follow me and share this with other developers as well.

New Array Methods in JS

Asidipta — Fri, 09 Jun 2023 19:17:11 +0000

If you are a javascript developer like me, you probably have used array methods quite a lot. While the array methods in javascript are performant, in terms of immutability we did face a shortage of methods. Let me make it clear with an example:

// Define an array
const arr = [1, 2, 5, 8];

// Replace the second element with 7

Now, you might say, it's easy, just do this: arr[1] = 7 and you won't be wrong. It definitely works. But in doing so, you have mutated(changed) the original array. If you now print the array, it will be something like this.

console.log(arr); //Prints [1, 7, 5, 8]

So, what is the alternative?

Upto this point, the easiest way is to make a copy and apply the transformations.

const arr = [1, 2, 5, 8];
const copyArr = [...arr];
copyArr[1] = 7;
console.log(copyArr); // Prints [1, 7, 5, 8]
console.log(arr); // Prints [1, 2, 5, 8]

But now we have a few extra methods that make our life easier and makes the code more understandable.

with method

The with method essentially makes a copy of the array and changes the value at a given index in the array. So, now instead of doing something like this: const copyArr = [...arr] and copyArr[1] = 7, we can copy the array and change the value at index 1 with this snippet:

const arr = [1, 7, 5, 8];
const copyArr = arr.with(1, 70);
console.log(copyArr); // Prints [1, 70, 5, 8]
console.log(arr); // Prints [1, 7, 5, 8]

toSorted method

The sort method, as you might be familiar with already, sorts the array in-place. To ensure immutability, we first have to copy the array and then apply the sort method. Which means there's at least 2 passes on the array, thus giving O(2n) time complexity at best.
However, with toSorted javascript only does one pass over the array to copy and sort it.

const arr = [1, 7, 5, 8];
const copyArr = arr.toSorted();
console.log(copyArr); // Prints [1, 5, 7, 8]
console.log(arr); // Prints [1, 7, 5, 8]

toReversed method

This method is similar to the toSorted method. It replaces the already existing reverse method for immutability.

const arr = [1, 7, 5, 8];
const copyArr = arr.toReversed();
console.log(copyArr); // Prints [8, 5, 7, 1]
console.log(arr); // Prints [1, 7, 5, 8]

toSpliced method

This method is the copying instance version of the popular splice method which provides many overloads to delete from an index, insert into an index, delete all entries after an index. So, it goes without saying that it helps us a lot in performing immutable array operations.

const arr = [1, 7, 5, 8];
const copyArr = arr.toSpliced(0, 3, 44);
console.log(copyArr); // Prints [44, 8]
console.log(arr); // Prints [1, 7, 5, 8]

Conclusion

These new array methods are all available in prototype of Array. However, these are new features and might not be supported by all browsers. As of the writing of this blog, these are not yet supported in any version of Firefox browser and only recent versions of Chrome browser supports these new methods. Safari, Edge and Opera also support these methods in newer versions (Ref: https://caniuse.com)

Setup SSH on windows

Asidipta — Sat, 18 Mar 2023 16:36:44 +0000

How do you generally connect to your windows machine remotely?

I bet you use some 3rd party software or use Remote Desktop connection (uses RDP) to connect.

Now RDP is a SOAP based connection protocol and it is not that great either is it? I mean you can not easily use RDP from any other platform such as macOS or linux can you? Situation is even worse if you need to do it programmatically.

But hey! Did you know you could very easily use SSH? Well I did not!

It turns out our old faithful PCs can connect quite easily over SSH. We just have to enable a few settings and what better way to do this than firing up the Powershell?

First, let's clarify the terminology. The system that we will connect to is referred to as server (This has got to be a windows machine). The system that we will use to connect is referred to as the client (This can be running any desktop OS).

Open Powershell on the server as Administrator and check if openssh services are available.

Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'

It can be that neither of the services are available. But mostly on newer windows installations, open-ssh clients are available. So, I will show how to install the server. Client can be installed similarly.

Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0

Now start the open ssh server

Start-Service sshd

Check if the services are running. Open SSH server needs to be running in order to make the device act as a server.

Get-Service sshd

(Optional) Set the services to startup automatically on windows boot.

Set-Service -Name sshd -StartupType 'Automatic'

That's it! You can now ssh directly from your client terminal into this windows machine (server).

Set up docker and kubernetes in ubuntu 22.04

Asidipta — Sat, 18 Mar 2023 15:54:03 +0000

There are a lot of resources on the official websites for this topic. Then why am I writing this blog?
This blog is for someone who is trying to set up docker and kubernetes in a ubuntu machine, but has no experience in dev-ops whatsoever and wants to setup the environment quickly for running some piece of code from a developer bootcamp or any tutorial.
So let's dive into it without further ado.

We will be using docker and microk8s from Canonical.
For running our software during development, we will be using skaffold which is a great tool developed by Google.

PART 1: Docker

Docker makes development easier, more efficient and predictable. It solves the age old issue of developers (it worked fine on my device) by running the code in small instances (containers) of popular server OSes. Multiple containers can be run in a simple laptop machine hardware without needing any special tools or expertise in setting up OS.

Installation Guide

Go to docker docs for ubuntu.
Follow the steps provided in this site. These steps are very comprehensive and easy to follow. So we will not be discussing further steps here.

Just follow the steps on the site and you are good to go!

PART 2: Kubernetes

Kubernetes is a tool for automating certain aspects of operations part of IT. It is popularly used to manage deployments, roll out changes to deployed applications, scaling applications horizontally, monitoring and much more.

We will be using kubernetes (hereafter referred to as k8s) for creating an orchestration of all our different services. In other words, the kubernetes environment will contain all the logic for inter-service connection and exposing the functionalities of the overall application, i.e., it will create a black-box environment for the outside world and only expose a few API endpoints for the functionality.

Installation Guide

Use snap to install the microk8s module. We will go with channel 1.26 which is a stable channel as of the writing of this blog.

sudo snap install microk8s --classic --channel=1.26

Join the group, so that the user does not need root access to run any command from microk8s

sudo usermod -a -G microk8s $USER
sudo chown -f -R $USER ~/.kube

su - $USER

Check status of microk8s. We have completed installation of microk8s by this point. Sadly, many more steps to come.

microk8s status
# Wait till the microk8s cluster is ready
microk8s status --wait-ready

Deploy an application (say nginx) and test

microk8s kubectl create deployment nginx --image=nginx

Here the application name is nginx and we are using the docker image nginx which is the official image provided by nginx team.

Check if the application was deployed properly.

microk8s kubectl get pods

The pod(s) should have STATUS as Running and READY as 1/1 or 2/2 and not like 0/1

Now, we want to be able to use kubectl command in the microk8s context without having to type microk8s kubectl. We want to type only kubectl and that should be enough to process our request inside the microk8s cluster. For this, follow the below steps: a. sudo snap unalias kubectl in case kubectl is already aliased somewhere in your environment. b. sudo snap install kubectl --classic c. microk8s.kubectl config view --raw > $HOME/.kube/config will copy the microk8s kubectl configs into our user's HOME, so that they can be directly accessed by the user using the kubectl command.
At this point, we can use microk8s normally and deploy applications. Further steps are specific to our use-cases.
Install ingress-nginx

microk8s enable ingress

Install skaffold for development in k8s
a. Get the stable binaries only. Installation Guide. Go to the Linux tab and follow the instructions to get the stable binaries

# For Linux x86_64 (amd64)
curl -Lo skaffold https://storage.googleapis.com/skaffold/releases/latest/skaffold-linux-amd64 && \
sudo install skaffold /usr/local/bin/
------------------------------------------------------------------------------
# For Linux ARMv8 (arm64)
curl -Lo skaffold https://storage.googleapis.com/skaffold/releases/latest/skaffold-linux-arm64 && \
sudo install skaffold /usr/local/bin/

Now if you run skaffold dev in your project that contains a skaffold.yaml file, you will get some error related to the build process. So, basically skaffold will complain that it can not find the tags that it itself associated with the images present in the yaml file during build. Please note, that this error is specific to microk8s. It does not occur with Docker Desktop kubernetes implementations for Mac/Windows OS.
We will have to therefore, use private registry in the local environment to build the containers from images during development. Please note that skaffold and microk8s kubectl can still pull images from docker registry during production CI/CD deployments.
a. Go to /etc/docker folder.
b. Create a daemon.json file in this location. sudo nano daemon.json. This will open up nano editor with this new file.
c. Put the following entry inside the file.
```
{
"insecure-registries" : ["localhost:32000"]
}
```
d. Press Ctrl + O then press Enter. This will save the file.
e. Now press Ctrl + X. This will exit the editor.
f. Now we have to restart docker to make sure the changes are accepted. For this, run the following command:
```
sudo systemctl restart docker
```
g. After you run this command, wait for a few moments and then check if the docker engine has restarted with the command:
```
sudo systemctl status docker
```
Check if the Active state is in green and it says '(running)'. Then proceed further.
Change the image value in skaffold.yaml file like so:

username/image-name -> localhost:32000/image-name
Run skaffold dev command now. It will take a few minutes for the pods to be created and stabilized.

That's it! I promise there is nothing left to do to start running microservices codes on your ubuntu machine, be it during development or during deployment.

Demystifying 'this' keyword in JS

Asidipta — Sun, 22 May 2022 13:55:02 +0000

Intro

This keyword holds a special place in any object-oriented programming language and has been a mind-bender in Javascript. Needless to say, it has thus been a favourite topic of interviewers everywhere.
So, let's dive into what this signifies and what its value is in different contexts.

This keyword returns the execution context of the function or code block in which this has been used.
For example, if we perform the following operations in global context (outside of any functions), irrespective of 'strict' mode or not, we will get the results as such:

const name = "XYZ";
console.log(window.name); // Prints XYZ
console.log(this === window) // Prints true

Function Context

In this case, the value of this depends upon how the function is called.
When not in 'strict' mode:

function f() {
  console.log(this === window)
}

f(); // prints true

In 'strict' mode, if this is not set when entering an execution context, this remains undefined:

function f() {
  'use strict';
  console.log(this===undefined);
}

f();  // prints true

Note: You can set this using apply() or call() functions

const x = {val: 'x-val'};
const val = 'global-val';

function f() {
  console.log(this.val);
}

f() // prints 'global-val'
f.call(x) // prints 'x-val'
f.apply(x) // prints 'x-val'

In non-strict mode, if the value of this (first argument to call() and apply()) is not an object, attempt is made to convert it into an object. 'null' or 'undefined' becomes the global object. Primitives like 1 or 'text' becomes object using respective constructors, Number and String in this example.

Class Context

The behaviour of this is similar in class and function contexts as class in javascript is just syntactical sugar. Basically, it is just a function.

Within the constructor function of a class, the this is just an ordinary object. All non-static methods of the class are added to the prototype of this object.

In derived classes, there is no this binding. One has to call super() function from the derived class. What this does is call the constructor of the base class and assign the this object from that constructor.

this = new Base()

Note: Derived classes cannot return without calling super() or returning an object, because that will cause ReferenceError.

Bind method

ES5 introduced the bind method on functions. Calling f.bind() creates a new function with same body and scope as f. The this however is bound to the first argument passed to the bind() function. Once this is bound by using bind(), it cannot be changed.

function f() {
  console.log(this.val);
}

x = f.bind({val: 'new val'});
x(); // prints 'new val'

y = x.bind({val: 'change val'})
y(); // prints 'new val'

const obj = {val: 1, f:f, x: x, y: y};
obj.f(); // prints 1
obj.x(); // prints 'new val'
obj.y(); // prints 'new val'

Arrow functions

In arrow functions, this retains the value of the enclosing context's this. In global context, that would mean the global object. In function context, it will be determined as like we discussed in the sections above.

For example,

const obj= {
  x: function() {
    const y = () => this;
    return y;
  }
};

// calling x with obj context and setting its reference to f
const f = obj.x();

// Calling f would normally return window or global object or //undefined in strict mode
console.log(f() === obj) // true

// However, in this case above behaviour will not be true
const f = obj.x; // we are just taking the function

// Calling f from global context
console.log(f()() === obj) // false, this will equal global

React.js Lifecycle Methods

Asidipta — Tue, 17 May 2022 19:19:49 +0000

React.js uses a declarative approach of programming. In other words, the developer only needs to declare the changes as per different states of the application.
For this, React uses the Virtual DOM. The actual visual changes are performed using some lifecycle methods which provide the developer additional control over what should mount or what should update or what are the cleanups to perform before unmounting a component.

Today, we are going to discuss these lifecycle methods.

Lifecycle methods while mounting

In this section, we will discuss the life cycle methods that are invoked when a component is initialized or mounted to the DOM.

1. constructor(): The constructor method initializes the state and any other variables for the component. This is the first method that is called when initializing a component.

2. static getDerivedStateFromProps(): This method is called just after the constructor initializes the component. It can update the state of the component based on the props as required.

If state is to be updated, return the updated state from this function. Otherwise, return null.

static getDerivedStateFromProps(props, state) {
  // some logic for syncing state and props
  // if updates --> return updated state
  // else --> return null
}

3. render(): Render method is called for mounting the JSX to the DOM after the getDerivedStateFromProps method.

This is the only method required in a component.

This method returns the JSX for the component that is to be mounted to the DOM. We can also return arrays and React Fragments from render method.

If nothing is to be mounted we can return null from this method.

render() {
  if(// some condition) {
    return null; // will not render anything
  } else {
    return (//JSX or array or React.Fragment)
  }
}

4. componentDidMount(): Immediately after the render method returns and the component is mounted to the DOM, this method is called.

Typical usecase for this method is to select any element from the component that was just mounted. This can then further be used to perform any subscription or make any network requests for the component just mounted to the DOM.

componentDidMount() {
  const x = document.getElementById('abc');
  // perform any operation on x here
  x.addEventListener() // This is also possible
  // fetch('https://google.com').then(); is also possible here
}

Lifecycle methods while updating

In this section we will discuss the lifecycle methods called when updating a component which is already mounted to the DOM.

1. static getDerivedStateFromProps(): This method runs first whenever any component is to be updated. This has been discussed earlier, so, I am skipping this here.

2. shouldComponentUpdate(): This method is called after the getDerivedStateFromProps() method. This method returns True or False.

This method is used to control whether this component should be updated in the DOM based on the changes to state or props. If True is returned, it will proceed to update else no update will take place in the DOM.

3. render(): ** This runs after the shouldComponentUpdate() method, **if and only if shouldComponentUpdate() returns True.
This method has already been discussed above, so skipping.

*4. getSnapshotBeforeUpdate(): * This method is invoked immediately after render() method runs to update the DOM. This takes a snapshot of the DOM before the update while the visual DOM is still being updated asynchronously.

This method gets argument the previousProps and previousState which were the props and state before the update.

getSnapshotBeforeUpdate(prevProps, prevState) {
  return value || null; // value can be any valid javascript value
}

The value returned from this method is further passed to the next lifecycle method, componentDidUpdate().

5. componentDidUpdate(): This lifecycle method is called after getSnapshotBeforeUpdate() method.

This method receives previousProps, previousState and snapshot as argument, where snapshot is the value passed from the getSnapshotBeforeUpdate() method.

Lifecycle methods while unmounting

In this section, we will discuss the lifecycle method called for unmounting or removing the component from the DOM.

*1. componentWillUnmount(): * This method is called immediately before the component is unmounted from the DOM. This function is suitable for performing any cleanup(s) before the component is removed from the DOM.

componentWillUnmount() {
  // remove any subscriptions or timers or unresolved network requests
  x.removeEventListener()
}

Advantages and Disadvantages of React.js

Asidipta — Tue, 17 May 2022 14:52:23 +0000

React.js is a Javascript library created by Facebook. In recent years, it has become very popular over the likes of other javascript frameworks or libraries. So, in this post, I will try to discuss the benefits of using this library and why this has become the de-facto js library in web development.

Advantages of React.js

1. Flexibility: Since React.js is a _library _and not a framework, it offers control to the developer to use any style or pattern for development. The developer is not fixed to a particular pattern. However, there are certain best practices that one can follow while creating SPAs using react.js

2. Performance: React.js uses a declarative style of programming and at its core uses a Virtual DOM to track changes and render the DOM to the browser. It also supports Server-Side Rendering, which enables webpages to be quickly and seamlessly sent to the user. This all means web apps created using React.js are fast as well as resource efficient.

3. Reusability: React.js best practices include dividing the code into components, thereby creating component trees. State can be managed as per the granularity required and only components below in the tree would update. But, components also mean developer has to write less code and can reuse the code for similar components in different sections of the SPA. HOC pattern also exists so that different components can be processed in a similar way thus increasing reusability.

4. Speed of development: Owing to the reusability of components and various patterns along with vast and rich libraries available reduce the time required for developing apps using React.js very less. The developer community is also very active in this library.

5. Ease of learning: The learning curve for someone new to React.js is not very steep. Good knowledge of javascript is sufficient to be successful at developing apps using React. However, some may face challenges initially in using JSX which is the basis of the library. But knowing HTML5 and some basic knowledge of XML can prove really helpful in that case.

6. Testing is easier: React comes with Jest, a testing library made especially for React. Along with that, there are many other javascript test tools which can easily be used to test react apps. The declarative code is also easier to test from the user's perspective rather than testing implementation details.

Disadvantages of React.js

1. Rapid pace of development of React: React.js is a library which is still evolving. Every few years a major change is expected that changes the way of development. So developers need to be up to date with their knowledge. For example, in React 16.8 and above, they introduced the hooks and deprecated the use of class components and lifecycle methods.

2. Documentation: With such a rapid pace of development, the documentation does not always remain updated. Although this has improved recently and we get updated documents very quickly.

3. Only caters to the View part: Using React.js has been debated as being an overkill in many cases where developers have argued that in MVC pattern of developing web apps, React only creates the View part. So such complex logic handling capabilities are a waste. This is not very credible however, as handling some view logic using client side javascript libraries reduces network calls and seperates view logic from business logic. Using React reduces the use of the DOM and rather uses the client side memory to perform javascript operations only.

4. Extensive use of JSX: This is seen as one of the largest drawback of the library. It can be daunting for someone trying to learn React.js. But this can be overcome quite easily and the learning curve becomes flatter with some exposure.

Conclusion

So that was my take on the very popular library that is React.js. Personally, I have found React.js to be very easy to learn and stay updated with the extensive community support from so many talented developers across the world. I have been using React for 2 years now and I have not faced any major difficulty or setbacks in this time.

LeetCode Daily Challenge Series #1

Asidipta — Thu, 05 May 2022 17:32:40 +0000

Problem Statement

Implement a last-in-first-out (LIFO) stack using only two queues. The implemented stack should support all the functions of a normal stack (push, top, pop, and empty).

Solution

Before implementing any code, let's think about how to proceed. There are 2 ways to solve this problem:

#### Using 2 queues: We can use 2 queues to implement a stack. We can process this in 2 ways -
1. Making push method expensive
2. Making the pop method expensive

The decision is based on the application. In our case, either one is fine.

Expensive Push method:

Push the element into Queue2 while rest of the elements are stored in Queue1. After this, pop elements from Queue1 and push into Queue2. Swap the names of Queue1 and Queue2.
If we repeat this process each time a new element is added, we will have the elements in the order we would expect to pop from a stack. Thus, we have achieved our stack.

Expensive Pop method:

Each time we have to pop - Dequeue all elements from Queue1 except the last element and enqueue into Queue2. Dequeue the last element from Queue1 and store it (this is the result that we will return). Swap the names of Queue1 and Queue2. Return the stored element. Thus, we will have the LIFO order while popping.

#### Using 1 queue: It is possible to achieve the above behaviour using just 1 queue.
1. Take the length of the queue, say n
2. Enqueue the element
3. Run a loop till n. Dequeue the element from the queue and enqueue it. This will make the new element the first element in the queue. If we keep following this every time we push a new element in the queue, we will have the elements in the proper order as we expect from a queue.
4. Since, we have corrected the ordering of the elements in the queue, pop operation should be as simple as dequeue and return the element.

Code

Here is python implementation of class handling the stack using a single queue.

from collections import deque

class MyStack:

    def __init__(self):
        self.q1 = deque()


    def push(self, x: int) -> None:
        size = len(self.q1)
        self.q1.append(x)
        for i in range(size):
            el = self.q1.popleft()
            self.q1.append(el)

    def pop(self) -> int:
        return self.q1.popleft()


    def top(self) -> int:
        return self.q1[0]

    def empty(self) -> bool:
        return len(self.q1) == 0

Note: Here we are using deque collection from python, but we are using it as a normal queue only. We have not used any of the double-ended properties of deque

A Beginner's Guide to Authentication

Asidipta — Mon, 19 Apr 2021 02:46:41 +0000

What is Authentication?

Authentication is the process of verifying requests to the server to find out if the user/client sending the request is a valid user. This can further be used to restrict user activities (authorization) or the resources that can be used by the particular user.

Types of Authentication

Server Sessions
Authentication Tokens

Server Sessions

As the name suggests, in this method we create a session on the server for each incoming authentication request. In other words, when a user logs in to his/her account, we create a separate state on the server that only serves responses for that particular user.
When an authentication request is received by the server, it validates the user credentials provided and creates a state on the server and provides a response to the client with a unique identifier for that state or session (usually in form of cookies). This identifier is sent by client along with every request.
This method of authentication is popular with MVC pattern of web development where the server serves the pages as response for user requests.

Authentication Tokens

In this method, whenever the server receives an authentication request, it validates the user credentials, generates a unique id with some hashing algorithm and sends the id back to the client. The client will use this id with every request sent to the server.
This "id" is not encrypted. It is just hashed to include some data that only makes sense to the server that has to validate the request using this id.
In this case, the server does not create or store a session. It is the client's responsibility to provide the proper id along with each and every request. Therefore, the server remains stateless.
This form of authentication is very popular in Single Page Applications (SPAs) and more generally with REST APIs, since these APIs donot store state.

I will discuss about how to use authentication in SPAs in my next post.
Stay tuned. Happy Coding!!