DEV Community: kaustav karmakar

Disable inspect element in Chrome

kaustav karmakar — Mon, 27 Nov 2023 05:16:57 +0000

Disable inspect element - DevTools in your Website

devtools

javascript

html

chrome
A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser.

What is DevTools?
DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

View and change the DOM
View and style CSS
Debug Javascript
Watch network activity
Show Local Storage, Session Storage,...
Optimize website performance
etc...
You can discover that the DevTools can be a serious boost to your productivity. But...

With great power comes great responsibility
— Tom Precious

Why need disable Devtools?
DevTools is powerful for Development, but is dangerous on production environment.
Anyone can see your source code, which means it's not secure. With DevTools, hacker easily inspect, edit, modify your code.

I was access to admin of website by change is_admin variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

Solution
DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

Right-click -> Inspect
Ctrl + Shift + I (DevTools shortcut)
F12 (DevTools shortcut)
Ctrl + Shift + J (Open the Console panel)
Ctrl + Shift + C (Open the Elements panel)
Ctrl + U (View Source-code)

// Disable Disable inspect element - DevTools in your Website

devtools

javascript

html

chrome
A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser.

What is DevTools?
DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

With great power comes great responsibility
— Tom Precious

I was access to admin of website by change is_admin variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

Solution
DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

Right-click -> Inspect
Ctrl + Shift + I (DevTools shortcut)
F12 (DevTools shortcut)
Ctrl + Shift + J (Open the Console panel)
Ctrl + Shift + C (Open the Elements panel)
Ctrl + U (View Source-code)

// Disable right-click
docum Disable inspect element - DevTools in your Website

devtools

javascript

html

chrome
A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser.

What is DevTools?
DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

With great power comes great responsibility
— Tom Precious

I was access to admin of website by change is_admin variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

Solution
DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

Right-click -> Inspect
Ctrl + Shift + I (DevTools shortcut)
F12 (DevTools shortcut)
Ctrl + Shift + J (Open the Console panel)
Ctrl + Shift + C (Open the Elements panel)
Ctrl + U (View Source-code)

// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
}; right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};

Learn and programming mind of developer

kaustav karmakar — Tue, 28 Feb 2023 18:49:00 +0000

Learning oops principles.
Learning basic sysntax of any language.
Understanding the basics principles of the language you skilled at and worked mostly.
Understanding the principles of architecture and coding principles of SOLID principles.
Understanding the naming of variables and structures the code in smaller reusable blocks.
Basic understanding of data structures such as sorting,arrays ,objects and binary search, linked list .Pick one language and worked for years in one language you picked . Core principles of writing clean code and naming variables naming should be prority . Playing of arrays and objects and solving problems will improve your understanding of how coding principles works. Deep understanding of private and public methods of class or functions .
Developing a understanding of principles of OOPS concepts.
Learn to google if you are stuck in something and take help from stack overflow or join free communities in facebook . Understanding the basics of es6 syntax and why it is introduced instead of regular javascript.Concept of local and global variables and also the problems solved with the help of closures. Debugging issues more than writing code so that it can help your understand of basic structure of the system which you are building.
Solving puzzles and solving complex problems which can make you think like what you are building for so long.
Reading principles of solving problems of senerios which can give you abilities to solve problems.
Reading principles of javascript and clear all the possible solutions to solve the problem.
Writing reusable code to maintain and manage for long run.
Make a habit of learning for at least 1 hour a day.
Learning from past mistakes and experiences will be the best thing to learn from,yet i preferred reading books instead of traditional courses in online.
Well it all depends on the person to person,resources can be anywhere but understanding the process of learning is very important for one’s life.
Cheers,live long and stay healthy and strong.

Reducing time complexity using a map

kaustav karmakar — Fri, 06 Jan 2023 17:17:13 +0000

Reducing time
complexity using a Map.

Map in JavaScript
In this article, we would be discussing Map object provided by ES6. Map is a collection of elements where each element is stored as a Key, value pair. Map object can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.

Map (using Binary Search Tree)

O(log(n)) **** Implemented using Binary Search Tree**** For more reference

I sometimes see this kind situation:
We are looping through an array, and for each element of this array, we are looking into another array to find some data related to this element (or sometimes several other arrays to find more data).
Example
Let’s say we have an array of animals, and an array of cat.
Each animals has a favourite cat. For each animals , we know his favourite cat because each animals has an attribute which is the id of his favourite cat.
Let’s say we want to print in the console, for each animals , his name and the name of his favourite cat.
The common implementation
Usually, common implementations for this problem looks something like that.
Using the method find on the cats array, or an alternative, in order to loop for each animals through the cat array to find the cat we are looking for.
It’s clear, simple, and it works. So that’s nice.
But if we check at the time complexity, it’s not that nice:
we loop through the N animals
and for each animals we loop through the M cats to find his favourite cat
So the time complexity is O(N*M).
And the space complexity is O(N+M) because we have N+M elements to store in memory.
We can do better
By using a Map instead of an array to store the cats, we are going to reduce the time complexity to O(N), without increasing the space complexity. Why ? Because accessing a value with the get method of a Map (in practice) is constant in time (O(1)).
First, we create a Map from the cats array, by setting the id as key and the cat as value.
Then, we replace the find on the cats array by a get on catsMap, and we are good to go.
Conclusion
Using javascript in built function is always a better choice since it is a higher order function. Instead of using for loop for iteration.

Destructuring Assignment is a Typescript

kaustav karmakar — Thu, 15 Dec 2022 16:36:25 +0000

Destructuring
TypeScript supports the following forms of Destructuring (literally named after de-structuring i.e. breaking up the structure):
1.
Object Destructuring
2.
Array Destructuring
It is easy to think of destructuring as an inverse of structuring. The method of structuring in JavaScript is the object literal:

var foo = {
    bar: {
        ba
s: 123
    }
};

Without the awesome structuring support built into JavaScript, creating new objects on the fly would indeed be very cumbersome. Destructuring brings the same level of convenience to getting data out of a structure.
Object Destructuring
Destructuring is useful because it allows you to do in a single line, what would otherwise require multiple lines. Consider the following case:

var rect = { x: 0, y: 10, width: 15, height: 20 };

// Destructuring assignment

var {x, y, width, height} = rect;
console.log(x, y, width, height); // 0,10,15,20

rect.x = 10;
({x, y, width, height} = rect); // assign to existing variables using outer parentheses
console.log(x, y, width, height); // 10,10,15,20

Here in the absence of destructuring you would have to pick off x,y,width,height one by one from rect.
To assign an extracted variable to a new variable name you can do the following:
// structure

const obj = {"some property": "some value"};

// destructure

const {"some property": someProperty} = obj;
console.log(someProperty === "some value"); // true

Additionally you can get deep data out of a structure using destructuring. This is shown in the following example:

var foo = { bar: { bas: 123 } };
var {bar: {bas}} = foo; //

Effectively

var bas = foo.bar.bas;

Object Destructuring with rest
You can pick up any number of elements from an object and get an object of the remaining elements using object destructuring with rest.

var {w, x, ...remaining} = {w: 1, x: 2, y: 3, z: 4};
console.log(w, x, remaining); // 1, 2, {y:3,z:4}

A common use case is also to ignore certain properties. For example:
// Example function

function goto(point2D: {x: number, y: number}) {

// Imagine some code that might break
// if you pass in an object
// with more items than desired
}
// Some point you get from somewhere

const point3D = {x: 1, y: 2, z: 3};

/** A nifty use of rest to remove extra properties */

const { z, ...point2D } = point3D;
goto(point2D);

Array Destructuring
A common programming question: "How to swap two variables without using a third one?". The TypeScript solution:

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

Note that array destructuring is effectively the compiler doing the [0], [1], ... and so on for you. There is no guarantee that these values will exist.
Array Destructuring with rest
You can pick up any number of elements from an array and get an array of the remaining elements using array destructuring with rest.

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1, 2, [3,4]

Array Destructuring with ignores
You can ignore any index by simply leaving its location empty i.e. , , in the left hand side of the assignment. For example:

var [x, , ...remaining] = [1, 2, 3, 4];
console.log(x, remaining); // 1, [3,4]

JS Generation
The JavaScript generation for non ES6 targets simply involves creating temporary variables, just like you would have to do yourself without native language support for destructuring e.g.

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

// becomes //

var x = 1, y = 2;
_a = [y,x], x = _a[0], y = _a[1];
console.log(x, y);
var _a;

Summary
Destructuring can make your code more readable and maintainable by reducing the line count and making the intent clear. Array destructuring can allow you to use arrays as though they were tuples
Please give a like and follow,if you like my work

Taking Interviewing candidates

kaustav karmakar — Tue, 09 Aug 2022 10:07:00 +0000

When interviewing for a certain position. I found it a little like this.

For a leader to succeed, they have to be able to hire the right people for their team. Nothing is more important.
And while leaders are told to recruit the right people, they have never been taught how to recruit the right people. That is why most leaders spend 10% of their time recruiting, and 90% of their time making up for recruiting mistakes.
The result of this is huge inefficiencies, unhappy people, and results below what is possible for leaders to achieve, not to mention very expensive and disruptive processes for the organization when the wrong people are hired.

Billionaire John Caldwell once said, “If I’m lucky, I only get recruiting wrong 70% of the time”. But how is it that we accept being wrong so much of the time?
When your job hinges on how well you talk to people, you learn a lot about how to have great conversations – and most of us don’t converse very well. A great conversation requires a balance between talking and listening. This balance is important because bad communication leads to bad relationships, at home, at work, and everywhere.
Try learning more about your jobs learn from youtube,udemy, and Udacity.
When we look over a resume it is only qualified to do not what your job is.
Happiness in a job is what you do to be you become.
Chase your dreams not to be what to do it for your leaving.
"Career satisfaction doesn't come from what you do. It comes from who you get to be while doing it"
*- Key points to success *

Reduce Stress
Prepare more
Practise online practice interview
All the best Prepare the best and land your dream job.

Web3.js with javascript

kaustav karmakar — Tue, 19 Apr 2022 14:41:37 +0000

The Support of my programm is done from Web3.js documentations
Course Overview

Web3.js ** web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.** 2.** Modules**
Uses we can transfer ether in the wallet
We can fetch the account balance 3.Web3.js in chrome console 4.We generate ABI and ByteCode using Web3.js in our smart contract 5.Compilation of Web3.js 6.Deployement of Smart Contract *Web3.js Prerequisites *
Blockchain
Basic understanding of Blockchain
Ethereum
Basic understanding of Ethereum
Solidity
Basic idea about Solidity
JavaScript
Basic understanding of JavaScript Software Requirement
Node js
Ganache
Vs Code

What is Web3.js?

Suppose we have a application and we want to connect our application with blockchain(Smart Contract),then we can use Web3.js in our applications to connect to the blockchain(Smart Contract).
It acts as a interface between your peer world(application) and blockchain (Smart Contract).
Web3.js is nothing but the interactions between our application and Smart Contract in Blockchain Web3.js
Installation of Web3.js
Import of Web3.js
To connect with Ganache
To get the balance of an account
to convert wei into ether
to transfer ether from one account to another account
Steps to proceed
node --v
npm init -y
npm install --save web3

let Web3 = require('web3');
//to check web3 is import or not 
console.log(" Web3", Web3);
//Now we will create a object named web3
let web3=new Web3(new Web3.providers.HttpProvider("Please give ganache url");

Now we can control the Ganache

Now we will check how we can fetch the balance of Ganache of our account

web3.eth.getBalance("id of account").then(console.log);
//you will get the balance of the account 
//you need to have a little understanding of javascript
//then can also acts as a Promise
//if we want to get the balance 
web3.eth.getBalance("id of account").then(function(result){
console.log(web3.utils.fromWei(reults,"ether"));});
});

How can we transfer ether from one account to another account?

web3.eth.sendTransactions({from:" id of account where money need to be transfer",to:"id of account where money need to be sent",value:web3.utils.toWei("Amount to be transfer","ether")});

Main Source all the resources is click here
Thank You for Reading

Some concept in javascript .

kaustav karmakar — Tue, 19 Apr 2022 09:57:36 +0000

1)What is deep copy and shallow copy in javascript?
Shallow copy

When a refference variable is copied to new refference variable using the assignment operator,a shallow copy of the referenced object is created.
A reference variable mainly stores the address of the object it refers to.

``` SHALLOW COPY---------------------------------------
const a = { x: 0, y: { z: 0 } };
const b = {...a}; // or const b = Object.assign({}, a);

b.x = 1; // doesn't update a.x
b.y.z = 1; // also updates a.y.z```

Deep copy

Unlike the shallow copy, deep copy makes a copy of all the members of the old object, allocates separate memory location for the new object and then assigns the copied members to the new object.
In this way, both the objects are independent of each other and in case of any modification to either one the other is not affected.

```// DEEP COPY---------------------------------------
const a = { x: 0, y: { z: 0 } };
const b = JSON.parse(JSON.stringify(a));

b.y.z = 1; // doesn't update a.y.z```

2)Concept of spread and rest operators.
JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same.
Spread Syntax

```function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6```

Rest Syntax

```function sumAll(...args) { // args is the name for the array
let sum = 0;

for (let arg of args) sum += arg;

return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6```

3)Use of window object and document object.
Window Object

The window object is a global object that has the properties pertaining to the current DOM document, which is what's in the tab of a browser. window.open(); > Opens a new browser window window.scrollTo(); > Scrolls the document to the specified coordinates For more refference ,click here

Document object

The document object is the root node of the HTML document. 2.The document object is a property of the window object. 3.The document object is accessed with:

window.document or just document
For more refference ,click here
4)Find the set of unique element in the array?
For example [1,1,2,3,4,4,77] should be [1,2,3,4,77]
let arrayElement=[1,1,2,3,4,4,77] let uniqueElement=[...new Set(arrayElement)] console.log("_uniqueElement",uniqueElement)
5)What is IIFE(Immediately Invoked Function Expression)?
IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. The signature of it would be as below,
(function () { // logic here })();
6)What is the difference between == and === operators?
JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
Two numbers are strictly equal when they are numerically equal. i.e, Having the same number value. There are two special cases in this,
NaN is not equal to anything, including NaN.
Positive and negative zeros are equal to one another.
Two Boolean operands are strictly equal if both are true or both are false.
Two objects are strictly equal if they refer to the same Object.
Null and Undefined types are not equal with ===, but equal with ==. i.e, null===undefined --> false but null==undefined --> true
Some of the example which covers the above cases,

0 == false // true 0 === false // false 1 == "1" // true 1 === "1" // false null == undefined // true null === undefined // false '0' == false // true '0' === false // false []==[] or []===[] //false, refer different objects in memory {}=={} or {}==={} //false, refer different objects in memory

7)What is web storage?
**Web storage is an API that provides a mechanism by which browsers can store key/value pairs locally within the user's browser, in a much more intuitive fashion than using cookies. The web storage provides two mechanisms for storing data on the client.

Local storage: It stores data for current origin with no expiration date.
Session storage: It stores data for one session and the data is lost when the browser tab is closed.**
8)What is a Cookie?
**A cookie is a piece of data that is stored on your computer to be accessed by your browser. Cookies are saved as key/value pairs.
It can be deleted by setting the expire date in the cookie

document.cookie = "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";

**
9)Why do you need web storage?
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Also, the information is never transferred to the server. Hence this is a more recommended approach than Cookies.
10)What are Web Workers?
A web worker, as defined by the World Wide Web Consortium and the Web Hypertext Application Technology Working Group, is a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page.
const myWorker = new Worker("worker.js"); myWorker.postMessage() // sending data onmessage=(e)=>{e.data} // listenig to message event and capture data
11)What are the restrictions of web workers on DOM?
WebWorkers don't have access to below javascript objects since they are defined in an external files

Window object
Document object
Parent object
Last but not least collected all the information after https://www.w3schools.com/
and https://developer.mozilla.org/
Keep learning and keep following me.
Peace

Design Principles React

kaustav karmakar — Thu, 08 Apr 2021 08:16:53 +0000

Thinking in React

Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React
Step 3: Identify The Minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow

Composition

Components written by different people should work well together.
It is important to us that you can add functionality to a component without causing rippling changes throughout the codebase.
There is nothing “bad” about using state or lifecycle methods in components.
It may enable more functional patterns in the future, but both local state and lifecycle methods will be a part of that model.
Components are often described as “just functions” but in my view, they need to be more than that to be useful.
In React, components describe any composable behavior, and this includes rendering, lifecycle, and state.

Common Abstraction

Resist adding features
If React didn’t provide support for local state or lifecycle methods, people would create custom abstractions for them.
When there are multiple abstractions competing, React can’t enforce or take advantage of the properties of either of them. It has to work with the lowest common denominator.

Escape Hatches

React is pragmatic.
If some pattern that is useful for building apps is hard to express in a declarative way, it will provide an imperative API for it. such as Refs and the DOM.

Stability

Facebook has more than 50 thousand components using React. Many other companies, including Twitter and Airbnb, are also heavy users of React. This is why we are usually reluctant to change public APIs or behavior.
However I think stability in the sense of “nothing changes” is overrated. It quickly turns into stagnation. Instead, I prefer the stability in the sense of “It is heavily used in production, and when something changes, there is a clear (and preferably automated) migration path.”

Interoperability

React provides escape hatches to work with mutable models and tries to work well together with other UI libraries.
You can wrap an existing imperative UI into a declarative component, and vice versa. This is crucial for gradual adoption.

Scheduling

Even when your components are described as functions when you use React you don’t call them directly.
Every component returns a description of what needs to be rendered, and that description may include both user-written components like and platform-specific components like . It is up to React to “unroll” at some point in the future and actually apply changes to the UI tree according to the render results of the components recursively.

Debugging

When something goes wrong, it is important that you have breadcrumbs to trace the mistake to its source in the codebase. In React, props and state are those breadcrumbs.
If you see something wrong on the screen, you can open React DevTools, find the component responsible for rendering, and then see if the props and state are correct. If they are, you know that the problem is in the component’s render() function or some function that is called render(). The problem is isolated.
If the state is wrong, you know that the problem is caused by one of the setState() calls in this file. This, too, is relatively simple to locate and fix because usually there are only a few setState() calls in a single file.
If the props are wrong, you can traverse the tree up in the inspector, looking for the component that first “poisoned the well” bypassing bad props down.

Glossary of React Terms

Single-page Application
Compilers- Babel is the compiler most commonly used with React.
Bundlers-Some bundlers commonly used in React applications include Webpack and Browserify.
Package Managers-npm or yarn
CDN-CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe.
JSX-JSX is a syntax extension to JavaScript.JSX gets compiled to React.createElement() calls which return plain JavaScript objects called “React elements”. To get a basic introduction to JSX see the docs here and find a more in-depth tutorial on JSX here.
const name = 'Kaustav';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);
Elements-An element describes what you want to see on the screen. React elements are immutable.
const element = <h1>Hello, world</h1>;
Components

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
or Components can also be ES6 classes:
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
Controlled vs. Uncontrolled Components

React has two different approaches to dealing with form inputs.

An input form element whose value is controlled by React is called a controlled component. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
An uncontrolled component works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can’t force the field to have a certain value.

Keeping discussion about React community.

Microservices in node js

kaustav karmakar — Tue, 16 Mar 2021 14:52:18 +0000

1)What is microservices?
Microservices are an architectural approach based on building an application as a collection of small services.
2)Microservices architecture-Compared to its predecessor, the monolithic architecture, microservices are hands down more beneficial. You don’t need to stuff all software components and services in one big container and pack them tightly. With microservices, you can build an app with:

greater flexibility,
high scalability,
continuous development,
systematic data organization,
time optimization, and
reliability.

Building JavaScript applications on microservices help you focus on developing monofunctional modules with clearly defined operations and precise interfaces. The application development process becomes more agile, and the challenges of continuous testing are mitigated.
3)Key benefits of Node.js

Single-threaded: With event looping, the server uses a non-blocking mechanism to respond.
Super-fast: Codes are executed quickly on the V8 JavaScript Engine
Event-driven: ‘Events of Node.js’ is a notification system that enables the application server to capture the response of the previous API call.
Buffer-less: There is no buffering as data is simply released in chunks.
Asynchronous: The non-blocking, non-synchronous Node.js libraries move to the next API and do not await the return data of the previous API.
Highly-scalable: Servers can handle as many requests as coming their way
Licensed: The program is authorized under a software license.
4)The service registry
The service registry is a database populated with information on how to dispatch requests to microservice instances. Interactions between the registry and other components can be divided into two groups, each with two subgroups:

Interactions between microservices and the registry (registration)
Self-registration
Third-party registration
Interactions between clients and the registry (discovery)
Client-side discovery
Server-side discovery
Registration

Most microservice-based architectures are in constant evolution. Services go up and down as development teams split, improve, deprecate and do their work. Whenever a service endpoint changes, the registry needs to know about the change. This is what registration is all about: who publishes or updates the information on how to reach each service.

Self-registration forces microservices to interact with the registry by themselves. When a service goes up, it notifies the registry. The same thing happens when the service goes down. Whatever additional data is required by the registry must be provided by the service itself. If you have been following this series, you know that microservices are all about dealing with a single concern, so self-registration might seem like an anti-pattern. However, for simple architectures, self-registration might be the right choice.

-Third-party registration - is normally used in the industry. In this case, there is a process or service that manages all other services. This process polls or checks in some way which microservice instances are running and it automatically updates the service registry. Additional data might be provided in the form of per-service config files (or policy), which the registration process uses to update the database. Third-party registration is commonplace in architectures that use tools such as Apache ZooKeeper or Netflix Eureka and other service managers.

-Discovery-
As you can imagine, discovery is the counterpart to registration from the point of view of clients. When a client wants to access a service, it must find out where the service is located (and other relevant information to perform the request).
Client-side discovery forces clients to query a discovery service before performing the actual requests. As happens with self-registration, this requires clients to deal with additional concerns other than their main objective. The discovery service may or may not be located behind the API gateway. If it is not located behind the gateway, balancing, authentication and other cross-cutting concerns may need to be re-implemented for the discovery service. Additionally, each client needs to know the fixed endpoint (or endpoints) to contact the discovery service. These are all disadvantages. The one big advantage is not having to code the necessary logic in the gateway system. Study this carefully when picking your discovery method.
Server-side discovery makes the API gateway handle the discovery of the right endpoint (or endpoints) for a request. This is normally used in bigger architectures. As all requests are directly sent to the gateway, all the benefits discussed in relation to it apply. The gateway may also implement discovery caching, so that many requests may have lower latencies. The logic behind cache invalidation is specific to an implementation.

"Server-side discovery makes the API gateway handle the discovery of the right endpoint for a request."

A registration library
Here is the main logic of our library:

module.exports.register = function(service, callback) {    
    if(!validateService(service)) {
        callback(new Error("Invalid service"));
    }

    findExisting(service.name, function(err, found) {
        if(found) {
            callback(new Error("Existing service"));
            return;
        }

        var dbService = new Service({
            name: service.name,
            url: service.url,
            endpoints: service.endpoints,
            authorizedRoles: service.authorizedRoles
        });

        dbService.save(function(err) {
            callback(err);
        });
    });
}

module.exports.unregister = function(name, callback) {
    findExisting(name, function(err, found) {
        if(!found) {
            callback(new Error("Service not found"));
            return;
        }

        found.remove(function(err) {
            callback(err);
        });
    });
}

How to learn React js to become a better developer

kaustav karmakar — Tue, 16 Mar 2021 14:27:12 +0000

1)What is React?

Component-Based
Virtual Dom
Runs on diffing algorithm
It is a library.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
2)What is virtual Dom?
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.

How to learn javascript to become a better developer.

kaustav karmakar — Tue, 09 Mar 2021 17:54:23 +0000

Prepare a bit of basic.

1)Staring with let, const, and var difference. What is a variable in javascript?
let, const is block scope where var is the global scope.
let and var can be reassigned where const can't.const is a signal that the identifier won't be reassigned.let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.var variables can be updated and re-declared within its scope.
Variable are of two types :

Local scope- Local variables have Function scope. They can only be accessed from within the function.
Global scope-A global variable has global scope. All scripts and functions on a web page can access it.

2)How to write a function in javascript?
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ()

by using function key word say

function sayHello(){console.log("hi")};sayHello();

by useing fat arrow function also called arrow function like:

const sayHello =()=>{console.log("hi")}; sayHello();

What are generators in javascript?
The function* declaration defines a generator function, which returns a Generator object.
like:

function* generatorSum(i){
      yield i;
      yield i+10
};
const gen = generatorSum(10);

console.log(gen.next().value);
// expected output: 10

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.

3)Concept of hoisting in javascript?
Hoisting is a property in which the variable is a move to the top of the current scope. Be careful that only declaration gets hoisted NOT the initializations.

4)Concept of closure in javascript?
A closure is a function having access to the parent scope, even after the parent is closed.

function closureExample(i){
 return function cloureInnerVariable(y){
        return i+y;
 }
}
const value1=closureExample(1);
const value2=value1(2);
console.log("value of closure",value2);

5)What is Curring in javascript?
It is similar to closure.Currying is a transform that makes f(a,b,c) callable as f(a)(b)(c).
like:

function curringExample(w) {
  return function(h) {
    return function(l) {
      return w * h* l;
    }
  }
}

curringExample(4)(6)(3); // 72

6)What are prototypes in javascript?

Ans: When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property that holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. It can be using class or function.
Like :

  function Animal (name, energy) {
    this.name = name
    this.energy = energy
  }

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
or by using the extent keyword in class.

7)Rest and spread operator in javascript?

A function can be called with any number of arguments, no matter how it is defined. It is called Rest operators.
Like:

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

Spread syntax to the rescue! It looks similar to rest parameters, also using ..., but does quite the opposite.

let arr = [3, 5, 1];
When ...arr is used in the function call, it “expands” an iterable object arr into the list of arguments.
let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

8)Destructuring in javascript?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables, such as

Array :
let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]
Object 
const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

9)Promise in javascript?
Promises in JavaScript represent processes that are already happening, which can be chained with callback functions.
Basically, promise is just an object, that gives us either success of async operation or failure of async operations
1

var promise = new Promise(function(resolve, reject) {
  // do some long-running async thingâ€¦

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//usage
promise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);

10)Callback in javascript?
A callback is a function passed as an argument to another function.

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

11) Callbackhell in javascript?
A promise is a returned object from any asynchronous function, to which callback methods can be added based on the previous function's result. Promises use. This is a big issue caused by coding with complex nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain. Also, if there is an error in one function, then all other functions get affected.
To avoid callbackhell by using the promise or event queue.
12)Follow a coding standard in javascript:
By using proper documentation such as >https://developers.google.com/apps-script/guides/docs

https://developers.google.com/apps-script/guides/sheets/functions
Name variable with a meaningful name. Use camel case All names start with a letter.
try to use higher-order function instead of a long function.Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.
Use of local scope and global scope should be taken care of when you are declaring a variable.
Use of proper documentation is important to understand the flow of a developer .Use proper comment in code if are using any function.
Code is the story with lots of operation and information about what you are doing.
It is better you understand the way of logic you are using as a developer.

Thanks for Reading and understanding me to become a better developer.
Kaustav Karmakar