DEV Community: Sagar Medtiya

The Uses of DSA in Real Life🤓

Sagar Medtiya — Thu, 15 Sep 2022 12:56:42 +0000

Ever wondered why DSA is so much important in implementing software and as well as hiring process. Why the companies is primarily focused on taking DSA and not some specific language/framework questions?

Knowledge of DSA like Tree, graphs, array and various other algorithm goes a long way in solving problem efficiently with proper tool. Just like a car mechanic needs the right tool to fix a car and make it run properly, a programmer needs the right tool (algorithm and data structure) to make the software run properly. So the interviewer wants to find a candidate who can apply the right set of tools to solve the given problem.

In this blog I'll share some examples of DSA used in real life. So, lets' get started with array

Array

2D arrays, commonly known as, matrices, are used in image processing.
Arrays can be used in speech processing where every speech signal is an array.
In games like online chess, where the player can store his past moves as well as current moves. It indicates a hint of position.
It is also used in record management.
Contacts on a cell phone.
For CPU scheduling in computer.
Your viewing screen is also a multidimensional array of pixels.

String

Spam email detection.
Plagiarism detection.

Linked List

Linked lists are used to display image containers. Users can visit past, current, and next images.
They are used to store the history of the visited page.
They are used to perform undo operations.
Linked are used in software development where they indicate the correct syntax of a tag.
Linked lists are used to display social media feeds.
In a music playlist, songs are linked to the previous and next.
Used in switching between applications and programs (Alt + Tab) in the Operating system (implemented using Circular Linked List)

Binary Search

Finding Page Number in a book, e.g. Target page number is 35, you open at page no. 15, its less, you move ahead and open 43, it is greater, you again move backward.

Stacks

A queue is a data structure that uses LIFO order.

Undo/Redo button/operation in word processors.
Wearing/Removing Bangles.
Pile of Dinner Plates.
Stacked chairs.
Changing wearables on a cold evening, first in, comes out at last.
Last Hired, First Fired which is typically utilized when a company reduces its workforce in an economic recession.
Loading bullets into the magazine of a gun. The last one to go in is fired first. Bam!
Scratch cards earned after Google pay transaction.

Queues

A queue is a data structure that uses FIFO order.

In Escalators.
Printer spooler.
Sending emails.
Car washes queue.
Server while responding to requests.
Operating System uses queues for job/task scheduling.
Data packets in communication are arranged in queue format.
Stack/Queue is used in the back and forward buttons of the web browser.
While switching multiple applications, windows uses a circular queue.
A circular queue is used to maintain the playing sequence of multiple players in a game.
A queue can be implemented in Linked List-based Queue, Array-based Queue, Stack-based Queue.

Priority Queue

Process scheduling in the kernel.
Priority queues are used in file downloading operations in a browser.

Sorting Algorithm

Order things by their value.
Backend Databases (Merge Sort).
Playing Cards with your friends (Insertion Sort).
sort() uses IntroSort (a hybrid of Quicksort, Heapsort, and Insertion Sort), Faster than qsort().

Graph

Facebook, Instagram, and all social media networking sites, every user is Node, use the graph to suggest friends.
The GPS navigation system also uses shortest path APIs. Google Maps, Apple Maps, and Bing Maps.
Reacts virtual DOM uses graph data structures.
MS Excel uses DAG (Directed Acyclic Graphs).
Path Optimization Algorithms, BFS, DFS.
Recommendation Engines.
Scientific Computations.
Flight Networks.
Page ranking.

Tree

A decision-based algorithm is used in machine learning which works upon the algorithm of a tree.
Databases also use B-Tree data structures for indexing.
Domain Name Server (DNS) also uses tree structures.
The file system of computer or mobile.
Parsers(XML parser), Filesystem.
Code Compression(zip).
DOM in Html.
Evaluate an expression (i.e., parse).
Integral to compilers/automata theory.

Binary Search Tree

3D Game Engine.
Computer Graphics Rendering.

Trie

Dictionary application.
Autocomplete feature in searching.
Auto-completing the text and spells checking.

Hash Table

Data stored in databases is generally of the key-value format which is done through hash tables.
Social network feeds.
Every time we type something to be searched in google chrome or other browsers, it generates the desired output based on the principle of hashing.
Message Digest, a function of cryptography also uses hashing for creating output in such a manner that reaching the original input from that generated output is almost next to impossible.
In our computers we have various files stored in it, each file has two very crucial information that is, filename and file path, in order to make a connection between the filename to its corresponding file path hash tables are used.
Password hashing.
Used for fast data lookup symbol table for compilers, database indexing, caches, Unique data representation.

Heap

Systems concerned with security and embedded systems such as Linux Kernel uses Heap Sort because of the O( n log(n) ).
If we are stuck in finding the K-th smallest (or largest) value of a number then heaps can solve the problem in an easy and fast manner.
Used by JVM (Java Virtual Machine) to store Java objects.

Greedy Algorithm

Dijkstra algorithm.
Shopping on a tight budget but want to buy gifts for all family members.
Prims and Kruskals algorithms are used for finding the minimum spanning trees.

DIJKSTRA Algorithm

Used in applications like Google Maps to find the shortest path in a graph.

Dynamic Programming

In Google Maps to find the shortest path between the source and the series of destinations (one by one) out of the various available paths.
In networking to transfer data from a sender to various receivers in a sequential manner.

Backtracking

Suppose we are coding a chess-playing algorithm and at a certain point, the algorithm finds that a set of steps fails to win. In this situation, the algorithm will reverse back to the safe state and try another possible set of steps.
Sudoku solver
2048 game

Note I cannot claim 100% copyright on the content, some examples are taken from other sources over Quora(Igor Markov).

Thanks for reading.💗 Connect me on LinkedIn

✅𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝𝐢𝐧𝐠 𝐄𝐯𝐞𝐧𝐭s 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭

Sagar Medtiya — Tue, 13 Sep 2022 12:31:24 +0000

What are events?

Events allow you to write JavaScript code that reacts to certain situations. Examples of events include:

The user clicking the mouse button
The Web page loading
A form field being changed
Playing video content
Typing inside a search bar

To react with those events we assign an event handler which is a callback function that runs when that event occurs.

Event Handlers

To allow you to run your bits of code when these events occur, JavaScript provides us with the event handler. All the JavaScript handler starts with the word on, and each event handler deals with the specific event. Some examples of the event handlers are:

onChange - The data in the form element is changed by the user.
onClick - The object is clicked on.
onSubmit - The user clicks the forms Submit button.
onError - A JavaScript error occurs.
onMove - The user moves the browser window or frame.

Here is an example of using one event called onclick.

<button class="btn">Click me!</button>
const button = document.querySelector(".btn")

button.onclick = () => {
  console.log("Button clicked.");
};

The onclick event is triggered when the user clicks on the button. As a result Button clicked is output into the console.

Event Listeners

This is the modern way. To listen the events on elements, we first need to fetch the element. We can then use the addEventListener() method. The syntax to add a handler is this:

element.addEventListener(event, handler, [options]);

element - specified element from HTML elements , but also any other DOM object.
event - specified event type (eg: click, scroll, submit)
handler - the function to be called and executed when the event occurs.
options - optional object[capture, once, passive] specifies characteristics about the event listener. {capture: false} is the default value and it watches an event in a bubbling phase. {capture: true} watches an event in a capturing phase. {once: true} is a useful option if you want to execute only once. So the attached event listener would be automatically removed when invoked. {passive: true} indicates that the function will never call the preventDefault() method.

You can listen on window to intercept global events, like the usage of the keyboard , and you can listen on specific elements to check events happening on them, like a mouse click on a button.

to learn more about options please refer to the MDN document.

To get how it works let's see some code,

<button class="myButton">Click me!</button>
const button = document.querySelector('.myButton'); // go get something
button.addEventListener('click', function(){ // listen for something
  console.log('button clicked'); // do something
});

Although the above code will work, but we can create a function before the event listener.

function handleClick() {
  console.log('button clicked');
}
button.addEventListener('click', handleClick);

Event Object

To properly use event we dont just want to know if there was a clicked, scroll or keydown. Wed like to know what was clicked? Where was the Y position when scrolled? Which key was pressed? Event Object is where we can get some answers.

When an event happens, the browser creates an Event Object that holds information on that event and passes it as an argument to the handler.

Properties of event object:

event.type - Event type, such as "click", "keydown"
event.currentTarget : Element that the event was attached to.
event.target: Element where the event actually happened. ( this is useful in Event delegation where you have a single handler for the repetitive event on a common parent.)
event.isTrusted : Boolean tells whether the event was generated by a user action or created or modified by a script.

Let's jump right into the code,

<button class="coupon">Coupon code for <strong>shoes</strong></button>
<button class="coupon">Coupon code for <strong>clothes</strong></button>
const couponButtons = document.querySelectorAll('button.coupon')
function handleCouponButtonClick(){
  console.log(event.target); // logs <strong>shoes</strong>
  console.log(event.currentTarget); // logs <button class="coupon">Coupon code for <strong>shoes</strong></button>
  console.log('coupon button clicked');
}
couponButtons.forEach(function(couponButton){
  couponButton.addEventListener('click', handleCouponButtonClick);
});

The log of event.target outputs the node that triggered the event, in this case its the strong tag and its contents.

event.currentTarget logs the element that the event listener is attached to, so we get a log of the entire button markup.

Event propagation

Event propagation is a term used when talking about event capturing and event bubbling. It relates to the order in which event handlers are called when an element is nested inside another element and both have event listeners registered for the same type of event, for example, a click.

To understand propagation we need to understand how events are dispatched in the DOM. Event objects are dispatched to an event target, but before the dispatch can happen a propagation path needs to be determined.

The propagation path is a list of current event targets that the event object needs to pass through. This path reflects the DOM structure of the document and the elements in order. The last item in this list is called the event target. Anything before the event target is often referred to as a target ancestor, with the last item before the target being the targets parent.

Once a propagation path has been calculated the event object passes through one or more event phases. The three phases are as follows:

Capture phase - the event object trickles down through the DOM from the window, through the targets ancestors until it reaches the parent.
Target phase - the event object arrives at the event target.
Bubbling phase - the event object propagates through the targets ancestors back up to the window.

A nice way of remembering this is that events trickle down and bubble up.

Source: w3.org

<button class="myButton">Click me!</button>
const myButton = document.querySelector('.myButton');
function handleButtonClick() {
  console.log('Button clicked');
}
myButton.addEventListener('click', handleButtonClick);
window.addEventListener('click', function(event) {
  console.log('Window clicked');
  console.log(event.bubbles); // logs true
});

When running the above code, if I click anywhere in the browser window the console.log returns Window clicked , however, if I click on the button then the logs return both Button clicked and Window clicked, in that order. As a result of bubbling , the event is captured and handled by the inner element first (the button) and then propagated to the outer element (the window).

Its worth noting that event bubbling doesnt occur with every kind of event. During propagation it is possible for a listener to know if an event bubbles by reading the .bubbles boolean property of the event object. The above code contains the line console.log(event.bubbles); which in this instance logs true.

We can stop event propagation within any listener to prevent an ancestor elements event handlers from being notified about an event. We do this with the stopPropagation() method.

Features of Event Listener

Some of the features of the event listener method include:

The addEventListener() method attaches an event handler to the specified element.
This method attaches an event handler to an element without overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e two click events.
Event listeners can be added to any DOM object not only HTML elements. i.e the window object.
The addEventListener() method makes it easier to control how the event reacts to bubbling.

Which Should I Use, event listener or event handler?

Generally, it is advised to use event listeners over event handlers because you can add multiple event listeners for the same event.

References

Happy coding💗

𝐒𝐩𝐫𝐞𝐚𝐝 𝐚𝐧𝐝 𝐑𝐞𝐬𝐭 𝐎𝐩𝐞𝐫𝐚𝐭𝐨𝐫 101🚀

Sagar Medtiya — Mon, 12 Sep 2022 17:52:56 +0000

Prerequisites: JavaScript ES6

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same. It was introduced in ECMAScript 2015 and they allow us to write more concise and flexible code like most of the other ES6 features do.

🍁Spread

The spread operator allows us to expand the collected elements of an iterable data type like strings, arrays, or objects into individual elements in places. It helps to create a list of elements from a list by spreading out the values of an iterable where zero or more arguments (function calls) or elements (array literals) or key-value pairs (object literals) are expected.

Syntax: var var_name = [...iterable];

The use of the spread operator is explained below,

🍀Function calls

The spread operator can be used to take elements of an array and pass them as a list of arguments into a function.

Let's jump to the example,

printAnimals =(Animal1, Animal2, Animal3)=>{
    console.log(Animal1 + ',' + Animal2 + ',' +Animal3);
};
(Animal1, Animal2, Animal3)=>{
    console.log(Animal1 + ',' + Animal2 + ',' +Animal3);
}
let animals = ['tiger', 'elephant', 'lion'];
printAnimals(...animals);

Output:The function printAnimals takes in three parameters and we want to pass three arguments stored in animal array. When we call the function, the spread operator unpacks the passed array of arguments, tiger, elephant, and lion.

🍀Array Literals

Although we have concat and slice method the spread operator provides us a new quick method for merging and copying arrays.

const arr1 = ['coffee','tea', 'milk']
const arr2 = ['juice', 'smoothie']
var beverages = arr1.concat(arr2); //without spread

var beverages = [...arr1,...arr2]; // with spread

console.log(beverages)

Output:

The above example shown, the spread operator is used to add the elements of the arr2 to the end of the arr1. This process creates a new array non-destructively by concatenating two existing arrays.

const arr1 = ['coffee','tea', 'milk']
var arrCopy1 = arr1.slice() //without spread

var arrCopy2 = [...arr1] //with spread

console.log(arrCopy1);
console.log(arrCopy2);

Output:

The example above copies arr1 into arrCopy2. The changes you will do on the arrCopy2 will not affect the arr1, this process makes an exact copy of an existing array.

There are other use cases like,

Remove duplicate entries from Array

const arr1 = ['coffee','tea','milk','coffee','milk'];

const arr1Copy = [...new Set(arr1)];
console.log(arr1Copy)

Output:

Convert string to Array

const myBeverage = 'tea';
var bevArr = [...myBeverage]
console.log(bevArr)

Output:

Find min max

var max1 = Math.max(3,2,1,5,-10); // without spread

var mynums = [3,2,1,5,-10];
var max2 = Math.max(...mynums) // with spread
console.log(max2)

Output:

🍀Object Literals

Another use case of the spread operator is to use it in object literals. Since ES2018, it is possible to use the spread operator to copy and merge objects:

The spread operator only provides a shallow copy of its own enumerable properties from a provided object and then returns the result in a new object by excluding the prototype.

🍁Rest Operator

The Rest operator is the opposite of Spread operator. While spread operator expands elements of an iterable, rest operator compresses them. It collects several elements. In functions when we require to pass arguments but were not sure how many we have to pass, the rest parameter makes it easier.

Syntax:

function function_name(...arguments) {
    statements;
}

The rest parameter, which is the same syntax as the spread operator, can be used for destructuring arrays and objects to unpack their data into different individual variables.

function log(a,...numbersToLog){
    console.log(a);
    console.log(numbersToLog);
}

log(1,2,3)

Output:

In the example above, the rest parameter collected the rest of the elements of log into a new array. Note that the rest parameter can only be the last parameter.

The rest parameter can be very useful when we work with an indefinite number of parameters in the functions. See the following example:

add=(...numbers)=>{
    let answer = 0;
    for(let num of numbers){
        answer+= num; 
    }
    return answer;
}

add(1,23,4,5,6,7,8,9,4,5); //72
add(1,2,3) //6

The add() function receives a rest parameter numbers and adds the arguments we pass into it when it is called. This makes functions more flexible and helps us to run them with as many arguments as we want. The first function call add(1, 2, 3) returns 6 and the second function call add(1,23,4,5,6,7,8,9,4,5) with more arguments returns 72. As shown in this example, the rest parameter can gather any number of arguments into an array.

Remember that the arguments object is an array-like object but does not support array methods like map() and forEach() unless you convert it to a real array. Since the rest parameter gives us an array, those array methods can now be easily used.

🍁References

I hope you have like this blog. Happy coding💗

Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you

10 𝐆𝐢𝐭𝐇𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐢𝐞𝐬 𝐭𝐨 𝐌𝐚𝐤𝐞 𝐲𝐨𝐮 𝐚 10𝐱 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 🤩

Sagar Medtiya — Mon, 12 Sep 2022 09:34:02 +0000

These are the ten GitHub repository that can help you become a good developer.🚀

🍁Public APIs

👉 The Public APIs repository is a collective list of free APIs for software and web development use. APIs are integral to development, and this repository finding useful APIs makes it easy for developers to find free and relevant APIs in the category. In addition, the list is constantly updated with newer APIs in the public domain.

🔗 GitHub repository here

🍁Developer Roadmaps

👉 The most complete roadmap, that will help you to grasp the bigger picture of the development landscape, its main technologies, and the recommended sequence of learning things.

🔗 GitHub repository here

🍁The Algorithms

👉 The Algorithm is an open-source resource for learning data structures, data algorithms and their implementation in any programming language. Data structures are the core for programming and developing, and this repository explores more than 34 languages, including Python, Java, Go, Java Plus, Lua, Rust, C++ and more.

🔗 GitHub repository here

🍁30Days of Javascript

👉 Starter Files + Completed solutions for the JavaScript 30 Day Challenge by Wes Bos.

🔗 GitHub repository here

🍁Developer Handbook

👉 An opinionated guide on how to become a professional Web/Mobile App Developer.

🔗 GitHub repository here

🍁Web Fundamentals

👉 Some of the best practices for modern web development, are provided by Google developers.

🔗 GitHub repository here

🍁Clean Code Javascript

👉 Software engineering principles, from Robert C. Martin's book "Clean Code", adapted for JavaScript. A guide to producing readable, reusable, and refactorable software in JavaScript.

🔗 GitHub repository here

🍁Real World

👉 Realworld allows you to choose any frontend (React, Vue, & more) and any backend (Node, Django, & more) and see how they power real-world, beautifully designed full-stack apps.

🔗 GitHub repository here

🍁Build your own X

👉Build your own (insert technology here).

🔗 GitHub repository here

🍁EbookFoundation

👉 Freely available programming books.

🔗 GitHub repository here

I hope you have like this small tutorial. Happy coding💗

Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you

Comment down which repository you liked the most. 😎

Automate your workflow with GitHub Actions🤖

Sagar Medtiya — Mon, 12 Sep 2022 07:24:34 +0000

GitHub Action

Let's get the full picture of what GitHub Action is and break it down into several components,

In any software projects, there are repetitive tasks that can be benefited by GitHub Actions. Code reviews, branch management, pull request labelling, regression testing, issue triaging, release management, npm package publication, and cloud deployment are examples of such tasks. These are hard to do manually or consistently.

🍁Workflows

A workflow is an automated🤖 process composed of a series📃 of jobs that gets executed when its triggered by an event. Workflows are defined in YAML files and are stored in a .github/workflows at the root of the repository. A repository can also have multiple workflows.

🍁Events

An event is anything that can happen in GitHub repository. This includes pushing a code, creating a branch🌿, opening a pull request, and even commenting on an issue. There's a hell lot of triggers, you can have a look👁 here

🍁Jobs

A job is a series📃 of tasks that gets executed in a workflow upon being triggered by an event. Each step is either a script or a Github action. A workflow can have multiple jobs that run in parallel.

🍁Runners

Runners are processes on a server that run the workflow when its triggered. Each runner is responsible for executing a given job. Runners are hosted in the cloud but they can also be self-hosted in custom cloud environments.

🍁Actions

Actions are individual tasks: they are called inside a job. Actions are used to perform complex tasks that you may call multiple times and import into your workflows. Some examples of actions are: installing node packages, hosting the code, running a script, etc.

Building a Workflow file

Let's jump🦘 right into making a workflow and see how it's work,

name: Sample
on: 
  push:
    branches:
      - main
  schedule: 0 12 * * *
jobs:
  print_hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - with: 
            app_name: "hello world!"
            api_key: "1212@#!@!@$32323"
      - run: | 
          echo "Hello World!"
          echo "Hey!"

The workflow is defined in a YML file inside the workflows folders📂. Remember the proper indentation.

on: 
  push:
    branches:
      - main
  schedule: 0 12 * * *

Inside the on section, you have to add the events (push , pull_request) as subsections. Then, each event is linked to a specific branch🌿 (main , dev ).
schedule this will be triggered on 12pm (UTC) each day.

jobs:
  print_hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - with: 
            app_name: "hello world!"
            api_key: "1212@#!@!@$32323"
      - run: | 
          echo "Hello World!"
          echo "Hey!"

Tasks are defined inside jobs section.
print_hello is the name of the job.
`runs-on, this is where the job will run. Possible values are ubuntu-latest, windows-latest, ubuntu-16.04. There are many more versions.
steps contains list📃 of step. If one fails, the next steps are skipped. There are ways to trigger it to.
uses use other's actions and publish yours. Here actions is the username, checkout is the repo name. v1 is the tag.
with takes the input from outside to act on, you can pass this using with keywords.
run , this | enables us to use multiple commands, good for formatting. You can a list of commands to run.

Why to use GitHub actions?

GitHub Actions enable you to use others actions in your workflow which just make your workflow file small and speed💨 up your workflow building steps. Also you can write your own actions and publish it to actions marketplace in GitHub that can be used by others.

Some examples of useful workflows and actions

Now that you've understand all the workings of the GitHub Actions. Let's see some example and go through typical use cases,

🍁Updating latest blog post on README.md of GitHub

If you need to update your blog post on GitHub's README.md file, you can use this workflow by gautamkrishnar and add it in .github/workflows directory.

`
name: Latest blog post workflow
on:
schedule:
# Runs every hour
- cron: "0 */1 * * *"
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "URL" #type your RSS URL

🍁Deploy code on Heroku whenever you push it to GitHub

To deploy your code whenever you push it to GitHub, you can use this workflow to simply your hectic work. There are many more options like using docker etc, you can check it out here

`
name: Deploy

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: akhileshns/heroku-deploy@v3.6.8 # This is the action
with:
heroku_api_key: "HEROKU_API_KEY"
heroku_app_name: "APP_NAME" #Must be unique in Heroku
heroku_email: "YOUR_EMAIL"
appdir: "FOLDER_NAME"
procfile: "web: npm start"
justlogin: true
working-directory: "FOLDER_DIRECTORY"
run: |
heroku container:login
heroku container:push --recursive -a "APP_NAME"
heroku container:release -a "APP_NAME" web

If youre curious about what you can do, you can check the following resources.

References📚:

I hope you have like this small tutorial. Happy coding💗

Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you

Meet my latest project, I built User Authentication using Passport.js and Bcrypt🎉

Sagar Medtiya — Thu, 08 Sep 2022 19:10:13 +0000

Prerequisites : Javascript ES6

🍁Passport.js

It is an authentication middleware for Express-based app using Node.js. Being a middleware, it has access to request and response object and can manipulate them into request-response cycle. The passport.js library consist of two separate libraries. The first is the main Passport JS library, and the second is the relevant strategy library.

The primary Passport JS library is always required, and is used to maintain session information for authenticated users (i.e. you will import this library irrespective of the type of Strategy that you will use to authenticate the user).
The secondary strategy library is dependent on the methodology you plan use to authenticate a user. eg. passport-local, passport-facebook, passport-oauth-google etc. Users could be authenticated against a username/password saved in a database that you created either locally or on a cloud (called Local Strategy), OR users could be authenticated by having them log into their Google account (Google Authentication Strategy), or Facebook, or Github account.

The Passport JS framework abstracts the Login process into 2 separate parts, the session management (done by the Passport JS library ), and the authentication (done by the secondary Strategy library eg. passport-local or passport-facebook or passport-oauth-google etc.)

Here comes the express.js,

The Passport JS library connects with the express-session library, and forms the basic scaffolding to attach the (authenticated) user information to the req.session object. The main Passport JS library deals with already authenticated users, and does not play any part in actually authenticating the users. Its sole purpose is to maintain (attach) the (already authenticated) user to sessions.

🍁Bcrypt

It is very much important to have a secure system to save the password on the internet business. Saving password directly on the database is not recommended. There can be a security breach. In order to save the password without any security breach, and providing the users with the correct privacy of their personal data, we need to follow some protocols when building an app.

There comes hashing , developers usually run a function to convert this password into something that looks completely different from its original form through a mathematical algorithm. This process is called hashing and the mathematical algorithm is called hashing algorithm. The famous package of node.js is "bcrypt" and it is downloaded on an average of 590,489 times a week (oh yeah, thats a lot 💰).

Bcrypt also introduces salt technique. In order to increase the complexity of password security and protect users passwords from the attacks, an additional step called password salting is taken. Salting a hash, in the field of cryptography, actually means to add an additional string of 32 or more characters to the password before it gets hashed.

Lets demonstrate it with an example.

Michael and Bob both use the same password s@1t3dH@shBrown by coincidence, they will also have the same hash: $2a$12$xdWgQ5mhv8rSaUK3qdusTO4XdMFbQi6TD/1VvOZjvGm10RXnhZZa2

However, if Michaels password is salted with Iwx2ZEand Bobs password is salted with 0DoVej, they will have completely different salted hashes.

Michael

Password: s@1t3dH@shBrown

Salt: Iwx2ZE

Salted Input: Iwx2ZEs@1t3dH@shBrown

Salted Hash Output: $2a$12$TGRg8FCZvnDm.f4WPNtWQucwRv5zsi4D9Qy/gYgpfFfYx9XpXdE6a

Bob

Password: s@1t3dH@shBrown

Salt: 0DoVej

Salted Input: 0DoVejs@1t3dH@shBrown

Salted Hash Output: $2a$12$VtpXTHf69x1db/71bGHl3eMiEDAkgQe/Gq6UeNOKuHvdg.WnIXEHa

As you can see, their salted hash outputs are quite different even though they share the same password.

🍁Let's build User Authentication

🍀Install the required package and run the server

Type npm init and install the below packages,

express
express-session
passport
passport-local
bcryptjs

Now create a file, app.js, and add the following code to create the server.

const express = require("express");
const app = express();
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});

You can use dotenv to store the PORT number.

🍀Set up the Database

We'll use mongoDB, so let's install it

npm i mongoose

create db.js file and configure the database

const mongoose = require('mongoose')

function Dbconnect(){

    const url = mongodb://localhost:27017/user;
    mongoose.connect(url,{ useNewUrlParser: true, useUnifiedTopology: true
        }).then(()=>{
            console.log('Connection Successful');
        }).catch((error)=>{     
            console.log('Something went wrong', error)
        });
}

module.exports = Dbconnect

Now, create UserModel.js and add the following.

const mongoose = require('mongoose')
const {Schema} = mongoose
const UserSchema = new Schema ({
 email: {
 type: String,
 required: true
 },
 password: {
 type: String,
 required: true
 }
})
const UserModel = mongoose.model('user', UserSchema);
module.exports = UserModel;

Before storing the password, you need to encrypt it for security purposes. You will use bcrypt , a very useful npm package that makes working with encrypted passwords easy.

npm i bcrypt

Modify UserModel.js to encrypt the password before saving it to the database.

const mongoose = require('mongoose')
const bcrypt = require('bcryptjs');
const {Schema} = mongoose

const UserSchema = new Schema ({
...
})
UserSchema.pre('save', async function(next) {
 try {
 // check method of registration
 const user = this;
 if (!user.isModified('password')) next();
 // generate salt
 const salt = await bcrypt.genSalt(10);
 // hash the password
 const hashedPassword = await bcrypt.hash(this.password, salt);
 // replace plain text password with hashed password
 this.password = hashedPassword;
 next();
 } catch (error) {
 return next(error);
 }
 });
...
const User = mongoose.model('User', UserSchema);

Here we are using a pre save hook to modify the password before it is saved. The idea is to store the hash version of the password instead of the plain text password. A hash is a long complex string generated from a plain text string.

Use isModified to check whether the password is changing since you only need to hash new passwords. Next, generate a salt and pass it with the plain text password to the hash method to generate the hashed password. Finally, replace the plain text password with the hashed password in the database.

In app.js , connect to the database.

// connect to db
const db = require('./db');
db.connect();

🍀Set up Passport

Install Passport and passport-local. You will use these packages to register and login users.

npm i passport
npm i passport-local

Create a new file, passportConfig.js, and import passport-local and the UserModel.js.

const LocalStraregy = require("passport-local").Strategy;
const User = require("./userModel");

Configure Passport to handle user registration.

const LocalStrategy = require("passport-local");
const User = require("./userModel");
module.exports = (passport) => {
 passport.use(
 "local-signup",
 new LocalStrategy(
 {
 usernameField: "email",
 passwordField: "password",
 },
 async (email, password, done) => {
 try {
 // check if user exists
 const userExists = await User.findOne({ "email": email });
 if (userExists) {
 return done(null, false)
 }
 // Create a new user with the user data provided
 const user = await User.create({ email, password });
 return done(null, user);
 } catch (error) {
 done(error);
 }
 }
 )
 );
}

In the above code, you are checking if the email is already in use. If the email does not exist, register the user. Note that you are also setting the username field to accept an email. By default, passport-local expects a username, so you need to tell it you are passing in an email instead.

Use passport-local to also handle user login.

module.exports = (passport) => {
 passport.use(
 "local-signup",
 new localStrategy(
 ...
 )
 );
passport.use(
 "local-login",
 new LocalStrategy(
 {
 usernameField: "email",
 passwordField: "password",
 },
 async (email, password, done) => {
 try {
 const user = await User.findOne({ email: email });
 if (!user) return done(null, false);
 const isMatch = await user.matchPassword(password);
 if (!isMatch)
 return done(null, false);
 // if passwords match return user
 return done(null, user);
 } catch (error) {
 console.log(error)
 return done(error, false);
 }
 }
 )
 );
};

Here, check whether the user exists in the database, and if they do, check if the password provided matches the one in the database. Note you also call the matchPassword() method on the user model so go to UserModel.js file and add it.

UserSchema.methods.matchPassword = async function (password) {
 try {
 return await bcrypt.compare(password, this.password);
 } catch (error) {
 throw new Error(error);
 }
};

This method compares the password from the user and the one in the database and returns true if they match.

🍀Set Up Authentication Routes

You now need to create the endpoints to which users will send data. First up is the signup route which will accept the email and password of a new user.

In app.js , use the passport authentication middleware you just created to register the user.

app.post("/auth/signup",
 passport.authenticate(&apos;local-signup&apos;, { session: false }),
 (req, res, next) => {
 // sign up
 res.json({
 user: req.user,
 });
 }
);

If successful, the signup route should return the created user.

Next, create the login route.

app.post(
 "/auth/login",
 passport.authenticate(&apos;local-login&apos;, { session: false }),
 (req, res, next) => {
 // login
 res.json({
 user: req.user,
 });
 }
);

🍀Add Protected Routes

So far, you have used Passport to create a middleware that registers a user in the database and another that allows a registered user to sign in. Next, you will create an authorization middleware to protect sensitive routes using a JSON web token(JWT). To implement JWT authorization, you need to:

Generate JWT token. Pass the token to the user. The user will send it back in authorization requests. Verify the token sent back by the user.

You will use the jsonwebtoken package to handle JWTs.

npm i jsonwebtoken

Next, generate a token for each user that successfully logs in.

In app.js , import jsonwebtoken and modify the login route like below.

app.post(
 "/auth/login",
 passport.authenticate(&apos;local-login&apos;, { session: false }),
 (req, res, next) => {
 // login
 jwt.sign({user: req.user}, 'secretKey', {expiresIn: '1h'}, (err, token) => {
 if(err) {
 return res.json({
 message: "Failed to login",
 token: null,
 });
 }
 res.json({
 token
 });
 })
 }
);

In a real-life application, you would use a more complicated secret key and store it in a configuration file.

The login route returns a token if successful.

Use passport-jwt to access protected routes.

npm i passport-jwt In passportConfig.js , configure the passport-jwt.

const JwtStrategy = require("passport-jwt").Strategy;
const { ExtractJwt } = require("passport-jwt")
module.exports = (passport) => {
passport.use(
 "local-login",
 new LocalStrategy(
 ...
 );
passport.use(
 new JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader("authorization"),
 secretOrKey: "secretKey",
 },
 async (jwtPayload, done) => {
 try {
 // Extract user
 const user = jwtPayload.user;
 done(null, user);
 } catch (error) {
 done(error, false);
 }
 }
 )
 );
};

Notice you are extracting the JWT from the authorization header instead of the request body. This prevents hackers from intercepting a request and grabbing the token.

Now You're Ready to Take Your User Authentication to the Next Level

I hope you have like this small tutorial. Happy coding💗

Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you

Understanding React🚀-Redux and using Redux Toolkit🚀

Sagar Medtiya — Mon, 05 Sep 2022 19:48:37 +0000

Prerequisites : React, Javascript ES6

🍁What is Redux?

Redux is a state container for JavaScript app. It is mostly paired with redux, where it takes control of state away from React components and gives it to a centralised place called a store.

Let's understand how redux works,

The upper image represents React without Redux. Each circle represents component. When a component initiates a change (the blue circle), this change is communicated to the other components one step at a time. This may seem simple enough when we only have 10 components, but what about an app with 20, 50 or 100 components? As an app becomes larger, debugging can quickly becomes harder, and we lose sight of how information is passed from one component to another.

On the lower is the same React app with Redux. In this, when a component initiates a change, that information goes straight from the blue circle to our store (the green circle). From there, the change is then communicated directly to all the components that need to update.

🍁Understand State management

State management is a way to present the data you use in your application in a form of data structure. Therefore, it will be easier to exchange this data between components. It facilitates the communication between the different components and lets them know about any updated data in an easy way.

In React, there are many different libraries for state management : Redux, Recoil, context api etc.

The above picture depicts the process which is involved during the state management process. Now the blue box represents boilerplate and not every developer looks forward to use Redux. But don't worry, I'll give simple analogy to make you understand properly.

🍀View

It is nothing but the front-end of the application, what ever changes happens, it should reflect the same on the application. For analogy, consider there is a store of Jewellery in the front. You are standing in front of it and looking at it, if somebody purchase, or if the store gets some Jewellery, you see the changes being done in the shop. This is a View.

🍀Store

Store basically keeps all your state management data in one place, so to understand in an analogy, a store which we talked about in the View keeps all the jewellery in its store. Some other store keeps other stuffs. Hence stores.

🍀Action

In Redux term, it has to dispatch an action to the Reducer, so that the state management can be done according to the action sent, which will eventually be reflected in the View of our application. Now, we have seen two new things, which we need to understand, and these are: Action and Dispatch. So to understand both of them, and how are they linked with each other. Assume Action as a thought which comes into your mind, when you enter inside the shop, for example, I want to buy a jewellery. And Dispatch is something which comes out of your mouth, basically your voice/command/request, which sends a message to the Shopkeeper on why have you come to the shop.

🍀Reducer

In Redux language, it is something which makes changes to the the State object in the Store, to be reflected in the View. Sophisticated, right? Now let us understand it in the analogical way, now you have entered into the store, and asked (Dispatched) for buying a jewellery (Action). The request you have raised to a person who would be standing on the other side of the store, we call him/her a shopkeeper, but he/she also is a Reducer. Your next question would be how? Then let me tell you how, as soon as you raise a request, the shopkeeper picks up the desired item for you and gives it to you in exchange of money. Now let us neglect the money part for a while, and focus on the jewellery reduction. So what happened actually in between the process? The shopkeeper (Reducer), made changes in the store by reducing the number of jewellery from the store, and hence the View is also changed, that is, the number of jewellery in the shop is changed now.

🍁Redux-toolkit

The Redux Toolkit package is intended to be the standard way to write Redux logic. To simply the things it is recommend to use Redux Toolkit. It was developed in order to resolve three common Redux concerns:

Configuring a Redux store is too complicated
I have to add a lot of packages to get Redux to do anything useful
Redux requires too much boilerplate code

Let's use Redux Toolkit to make To-Do app.

🍀Setting up Redux Toolkit

Now well set up Redux Toolkit and React-Redux. Start by running:

# NPM
npm install @reduxjs/toolkit
npm install react-redux

# Yarn
yarn add @reduxjs/toolkit
yarn add react-redux

🍀Set up the store

Create the store.js file. Import the configureStore API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

🍀Configure Redux Store to React

Once the store is created, we can make it available to our React components by putting a React-Redux around our application in src/store.js. Import the Redux store we just created, put a Provider around your , and pass the store as a prop.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import store from './store';
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

🍀Create a Redux Slicer

Create file name Reducers/todoSlider.js and import createSlice from Redux Toolkit Api.

Slicer requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Slicer allows us define initial state , create action and reducer at same place.

import { createSlice } from '@reduxjs/toolkit'
export const toDoSlider = createSlice({
 name: 'toDo',
 initialState: {
   todoList: [
     { id: 1, content: "Hit the gym" },
     { id: 2, content: "Meet George"}
   ]
 },
 reducers: {
   addToDo: (state, action) => {
     let newTodoList = {
       id: Math.random(),
       content: action.payload.newContent
     }
     state.todoList.push(newTodoList);
   },
   deleteToDo: (state, action) => {
     let { todoList } = state;
     state.todoList = todoList.filter((item) => 
         item.id !==action.payload.id);
   },
   editTodo: (state, action) => {
     let { todoList } = state;
     state.todoList = todoList.map((item) => 
       item.id === action.payload.id ? action.payload : item);
   }
  },
})
// Action creators are generated for each case reducer function
export const { addToDo, deleteToDo, editTodo } = toDoSlider.actions
export default toDoSlider.reducer;

From above code you can observe initial state is define and reducers functions are created to perform add, update and delete operation.

🍀Add Slice Reducers to the Store

Next, we need to import the reducer function from the counter slice and add it to our store inside src/store.js . By defining a field inside the reducer parameter, we tell the store to use this slice reducer function to handle all updates to that state.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {
        toDo: toDoReducer;
    },
})

🍀Create components and import into app.js

Create a file named src/Components/AddTodo.js.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addToDo } from '../Reducers/toDoSlider';
const AddTodo = () => {
  const dispatch = useDispatch();
  const [state, setState] = useState({
     content: '',
     contentError: null
  });
  const handleChange = (e) =>{
    setState({...state, 
          [e.target.name]: e.target.value,
          [`${e.target.name}Error`]: null });
  }
  const add = () =>{
    if(content === ''){
      setState({...state, 
         contentError: 'You must write something!'});
       return;
    }
    dispatch(addToDo({newContent: content}));
    setState({...state, content: ''});
  }
  const { content, contentError } = state;
   return <div className='form'>
      <h2>What's your plan for today</h2>
      <input type='text' value={content} 
        name='content' 
        onChange={handleChange}>
      </input>
      <button type='button' className='button' 
        onClick={add}>Add
      </button>
      {contentError ? 
         <div className='error'>{contentError}</div>: null}
    </div>;
};
export default AddTodo;

From above code you can observe Redux hook useDispatch is use to dispatch addToDo action to update state.

Create a file named src/Components/ListTodo.js.

import React, { useState } from 'react';
import { AiFillEdit, AiOutlineCloseCircle } from "react-icons/ai";
import { useDispatch, useSelector } from 'react-redux';
import { deleteToDo, editTodo } from '../Reducers/toDoSlider';
const ListTodo = () => {
  const { todoList } = useSelector((state) => state.toDo);
  const dispatch = useDispatch();
  const [isEditing, setEditing] = useState(false);
  const [state, setState] = useState({
   id: '', content: '', contentError: null
  });
  const onEditToggle = ( id, content) => {
   setEditing(true);
   setState({ ...state, id, content});
  }
  const handleChange = (e) =>{
   setState({...state, [e.target.name]: e.target.value,  
      [`${e.target.name}Error`]: null });
  }
  const { content, contentError, id } = state;
  const edit = () =>{
   if(content === ''){
    setState({...state, contentError: 'You must write something!'});
    return;
   }
   dispatch((editTodo({content, id})));
   setEditing(false);
  }
return <div>
 {
   isEditing ?
    <div className='form'>
      <h2>Update your plan for today</h2>
      <input type='text' value={content} name='content' 
         onChange={handleChange}>
      </input>
      <button type='button' className='button' 
        onClick={edit}>Edit
     </button>
     {contentError ? 
       <div className='error'>{contentError}</div>: null
     }
   </div> :
   <ul className='todos'>
    {
      todoList.map(({id, content})=> {
        return <li className='grid' key={id}>
          <span className='content'>{content}</span>
          <span className='todo-action'>  
            <AiOutlineCloseCircle className="close" 
              onClick={() => dispatch(deleteToDo({id}))}
            />
            <AiFillEdit className="edit" 
              onClick={() =>onEditToggle(id, content)} 
            />
          </span>
       </li>
     })
    }
  </ul>
  }
</div>;
};
export default ListTodo;

In above component Redux hook useDispatch is use to dispatch deleteToDo, editTodo action and useSelector to get state from reducer.

Import Components into App.js

import './App.css';
import AddTodo from './Components/AddTodo';
import ListTodo from './Components/ListTodo';
function App() {
  return (
    <div className="App">
      <AddTodo />
      <ListTodo />
    </div>
  );
}
export default App;

🍀Finally, add styles inside app.css

/* variables */
:root{
  --primary: #FFC636;
  --secondary: #0A0B5B;
}
/* reset */
body,p,a,ul,li{
 margin: 0;
 padding: 0;
 text-decoration: none;
}
li{
 list-style-type: none;
}
/* base styles */
body{
 background: var(--secondary);
 overflow-x: hidden;
}
.button{
 background: none;
 border: 2px solid var(--primary);
 color: var(--primary);
 padding: 6px 12px;
 border-radius: 10px;
 text-transform: uppercase;
 box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
 display: inline-block;
 font-size: 1em;
 margin-left: 5px;
}
.button:hover{
 color: #222;
 background: var(--primary);
}
input{
 background: rgba(255,255,255,0.05);
 padding: 10px 16px;
 border-radius: 10px;
 border: 2px solid #9893D8;
 color: #f2f2f2;
 font-size: 1em;
}
.error{
 color: rgb(187, 30, 30);
 text-align: left;
 margin-left: 2px;
}
/* fonts */
body{
 color: #f2f2f2;
}
/* mobile styles */
.App{
 margin: 5%;
}
.form{
 text-align: center;
}
.grid{
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 gap: 10px;
 box-sizing: border-box;
}
.todos{
 margin-top: 20px;
}
.todos li{
 margin-top: 10px;
 background-color: #6767ab;
 padding: 3%;
 box-shadow: 1px 2px 3px honeydew;
 cursor: pointer;
}
.content{
 grid-column: 1/8;
}
.todo-action{
 display: flex;
 font-size: 1.5em
}
/* small tablet styles */
@media screen and (min-width: 620px){
 input{
  width: 300px;
 }
 .todos li{
   margin: 10px 20%;
   padding: 2%;
  }
 }
/* large tablet & laptop styles */
@media screen and (min-width: 960px){
.todos li{
  margin: 10px 25%;
 }
}
@media screen and (min-width: 1200px){
 .todos li{
  margin: 10px 33%;
  padding: 1%;
 }
}

🍀Output

I hope you have liked this small tutorial. Happy coding💗

Always remember, no one reached to the top in one shot. It took them a lot more struggle and hard work than you can imagine. So strive for knowledge, and keep moving forward. Thank you

Learn to use Git and GitHub Efficiently!!!🚀🚀

Sagar Medtiya — Thu, 01 Sep 2022 18:49:06 +0000

🍁What is a Git?

Git is an open-source distributed version control system(DVCS). Especially, it is a system used to record changes to files over time, so you can see what all changes you have made later on.

A version control system simply tracks the history of changes whenever people or team collaborate to do project together. As the project evolves team can test, run and contribute to the code with confidence that any version can be recovered anytime if something happens. Developers can review the following:

Which changes were made?
Who made the changes?
When were the changes made?

🍁What is a GitHub?

GitHub is a website and cloud-based service that helps developers store and manage their code, as well as track and control changes to their code. GitHub's interface is user-friendly enough so that the novice coders can take advantage of Git. Without GitHub, using Git generally requires a bit more technical savvy and use of the command line. With addition to that, anyone can SignIn and host a public repository freely which makes GitHub especially popular with open-source projects.

🍁How to install Git?

You can download your Git version according to your OS. Here is the Link

🍁Git Commands

git init

Syntax : git init <directory>

git clone

Syntax : git clone <repo>

git add

Syntax : git add <directory>

git commit -m

Syntax : git commit -m <message>

git status

Syntax : git status

git branch

Syntax : git branch

git merge

Syntax : git merge <branch>

git pull

It updates the local line of development with updates from its remote counterpart. Developers use this command if a teammate has made commits to a branch on a remote, and they would like to reflect those changes in their local environment.

Syntax : git pull --rebase <remote>

git push

It updates the remote repository with any commits made locally to a branch.

Syntax : git push <remote-repo> --all

🍁Move backward to the previous state

If we found a bug, we must trace from the beginning of the code, looking into line per line of codes. Git simplifies our work with the move backward feature. Instead of looking from the beginning of works, we can track based on the previous commit before a bug was found. There are three commands to move back on git. It is used for our needs.

git checkout: it is like a time machine, we can restore the condition of the project file to the designated time. However, this is temporary. These are not stored in the git database

git reset: this command makes us unable to go back to the future. We will lose our commits. After the git logs were reset, we need to write a new commit

git revert: will take the existing file condition in the past, then merge them with the last commit

🍁Git Lifecycle

The git lifecycle is divided into four states namely:

Modified : any changes didnt been marked yet. We can do anything here, manipulate files, create or delete a new folder, and other things.
Staged : a condition when our changes have been marked but didnt been recorded yet.
Committed : folders or files successfully are been recorded into our .git folder.

🍁Start a new repository and publish it to GitHub

Let's create a new repository and publish it to GitHub. Do not initialise the repository with a README, .gitignore or License. This empty repository will await your code.

# create a new directory, and initialize it with git-specific functions
git init my-repo

# change into the `my-repo` directory
cd my-repo

# create the first file in the project
touch README.md

# git isn't aware of the file, stage it
git add README.md

# take a snapshot of the staging area
git commit -m "add README to initial commit"

# provide the path for the repository you created on github
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git

# push changes to github
git push --set-upstream origin master
git push -u origin master (Alternative)

🍁Summary

This is the end of our tutorial, coders! Learn more about the git cheat sheet!

Thanks for reading this blog. Hope you have liked it!💗

Some best techniques to Optimize your React App🐱‍💻

Sagar Medtiya — Wed, 31 Aug 2022 11:17:12 +0000

Improving the web🌐 application performance plays an important role to improve User Experience and keep users engaged. However, it can be challenging to optimize your React App for performance. This post will cover some techniques to improve your React code.

Lets see what all important best optimization techniques we can apply to the React code.

🍀shouldComponentUpdate

The shouldComponentUpdate is a lifecycle method in react. This method makes the react component to re-render whenever there are changes in state or props and that change will affect the output.

For more detailed blog, you can have a look to this blog.

It helps in checking whether re-rendering is required or not. If re-rendering is not required then shouldComponentUpdate does not render the code. For example, if you want certain code to not re-render then this method can be of very handy.

Note: It is encouraged to use functional components over class components. With functional component you can use useMemo() and React.memo hooks.

function shouldComponentUpdate(nextProps, nextState){
    return nextProps.id !== this.props.id;
}

🍀Lazy Loading

Lazy loading is a great technique to improve your app's performance. The idea of lazy loading is to load a component only when it is needed. React comes bundled with React.lazy API so that you can import a dynamic import to regular component.

For example,

const LazyComponent = React.lazy(() => import('./LazyComponent'));

React.lazy takes a function that must call a dynamic import(). This will then return a Promise which resolves to a module with a default export containing a React component.

Another way is to load components only when they are in the viewport. You can use this awesome library react-loadable-visibility.

import LoadableVisibilty from 'react-loadable-visibility/react-loadable';
import MyLoader from './my-loader-component'

const LoadableComponent = LoadableVisibilty({
    loader:() => import('./my-component'),
    loading:MyLoader
});

export default function APP(){
    return <LoadableComponent/>
}

🍁Suspense

Note: Suspense is an experimental feature at this time. Experimental features may change significantly and without a warning before they become a part of React.

Suspense is an another technique used for lazy loading. It lets you "wait" for some code to load and lets you declaratively specify a loading state while waiting. Multiple lazy components can be wrapped with the suspense component. It takes a fallback property that accepts the react elements you want to render as the lazy component is being loaded.

// install the experimental version
npm install react@experimental react-dom@experimental

import React,{Component, lazy, Suspense} from 'react'
const MyComp = lazy(()=>import('../mycomp'))
<Suspense fallback={<div>Loading...</div>}>
<div>
    <MyComp></MyComp>    
</div>

Suspense is most popularly used for waiting for the data
But it can also be used to wait for images, script or any asynchronous code.
It helps you avoid race conditions
- Race conditions are bug that happen due to incorrect assumptions about the order in which our code can run.
- Suspense feels more like reading data synchronously -- as if it was already loaded.

🍁Suspense - Data Fetching

It is used to wait for rendering component until the required data is fetched.
- That means no need to add conditional code anymore!
You need to enable concurrent mode.
- So the rendering is not blocked.
- This gives better user experience.


// enable concurrent mode 
const rootEl = document.getElementById('root')

//ReactDOM.render(<APP/>, rootEl)
const root = ReactDom.createRoot(rootEl) //you'll use a new createRoot API

root.render(<APP/>)

🍁Render-as-you-Fetch

This approach doesn't wait for the response to come back before we start rendering. We start rendering pretty much immediately after kicking off the network request.

Start fetching
Start rendering
finish fetching

const resource = fetchCartData();

function CartPage(){
    return (
        <Suspense fallback={<h1>Loading Cart...</h1>}>
            <CartDetails/>
        </Suspense>
    );
}
function CartDetails(){
    //Try to read product info, although it might not have loaded yet
    const product = resource.product.read();
    return <h1>{product.name}</h1>
}

The CartPage() is loaded. It tries to load CartDetails(), but CartDetails() makes call to resource.product.read() so this component suspenses. React shows the fallback loader and keep fetching the data in the background. When all the data is retrieved the fallback loader is replaced by CartDetails() children.

🍀Memoization

Memoizing in React is a performance feature of the framework that aims to speed up the render process of component. It is a well know concept in programming, aiming to speed up the program by caching results of the expensive function and re-using those cached result as to avoid rendering of expensive function again.

Memoization in React is not guarantee that your function will be cached

🍁When to use it?

Suppose your state object is updating but your value is not really changing, you can use memo to not re-render your functional component. If your component just takes primitive value as props, just wraps it in memo() to prevent an unwanted re-render.

React.memo() by default just compares the top-level props. It is not that simple for nested objects. For nested objects, you can pass custom comparer function to check if prop values are same.

export default React.memo((props)=>{
    return (<div>{props.val}</div>)
})

//for nested object
const MemoedElement = React.memo(Element, areEqual) 

export function areEqual(prevProps: props, nextProps:props){
    const cardId = nextProps.id
    const newActiveCardId = nextProps.newActiveCardId
    const isActive = newActiveCardId == cardId

    return !some([
        isActive,
    ])
}

🍁useMemo

React.memo is used to memoize components. You can use useMemo to memoize inner variable. If there's CPU intensive operation going on to calculate those variables, and the variables does not really change that often then you can use useMemo.

const allItems = getItems()
//CPU intensive logic
const itemCategories = useMemo(()=> getUniqueCategories(allItems),[allItems])

🍀Points to remember

Measure performance using these tools
- Chrome dev tools

- Play with the throttle feature
- Check out the performance timeline and flame charts

Chrome's Lighthouse tool
- Minimise unnecessary component re-renders
use shouldComponentUpdate where applicable
use PureComponent
use React.memo for functional components

- along with the ```

useMemo()

``` hook

use React.lazy if you not doing server-side rendering
use service worker to cache files that are worth caching
use libraries like react-snap to pre-render components

Thanks for reading. Like for more such blogs. Happy coding💗

Component Lifecycle🌀 in ReactJS🚀

Sagar Medtiya — Fri, 26 Aug 2022 18:57:31 +0000

In React, component are designed to follow the natural cycle🚲 of life. As everyone goes through a cycle of born, grow and die. Each component in react goes through Mounting , Updating and Unmounting. Below is a good illustration of how react lifecycle works.

Image Source: wojtekmaj

React provides access to certain built-in events/methods called lifecycle🌀 hooks or lifecycle methods. These methods give you opportunities to control and manipulate how a component reacts to changes in the application.

Lets have a look at each phase in a component lifecycle:

🍀Initialization

This is the first stage in react lifecycle, in this stage🪜 the component is constructed with provided props and default states. This is where we define defaults and initial values for this.props and this.state.

🍀Mounting

This is the next state🪜 in React Lifecycle. After you have prepared the basic code requirement, states and props, you need to mount on the browser. This is done via browser DOM. React uses virtual DOM to put all the elements into the memory. Note: Child component is mounted before the parent component.

🌿constructor

constructor()👷 method is called when the component is initiated and its the best place to initialize our state. The constructor method takes props as an argument and starts by calling super(props) before anything else.

class Todo extends React.Component {
  //Setting the initial state of the Component
  constructor() {
    super();
    this.state = {
      task: "",
      isCompleted: false,
      dateCreated: ""
    }
  }
}

🌿componentDidMount

This is the final ReactJS hook🪝 method that is executed after the component mounts the DOM. This method is executed after first render and is executed only on client side. This is a great place to set up initial data. Child component's componentDidMount runs before parent's componentDidMount. It runs🏃 only once. You can also make the right API calls under this method so that you can retrieve the data the right way.

🌿static getDerivedStateFromProps

This method is called (or invoked) before the component is rendered to the DOM on initial mount. It allows a component to update its internal state in response to a change in props. To update the state -> return object with new values.

For example,

static getDerivedStateFromProps(props, state){
    return{
          points: 200 // update state with this
   }
}

🍀Updating

The third stage🪜 starts when the component has been adopted on the browser. During this phase the component is already inserted into DOM. A component is updated when there is a change in state and props React basically has three built-in methods that are called while updating the components.

🌿shouldComponentUpdate

The method tells the program🐱💻 about the state of rendering when it is updated. If new props or rules are being updated, then a rendering can be done or skipped. This is important to code in properly as there are evolving states in the program as well. Updating the method as true/false is the proper approach. The default here is true, which can be changed as per the code.

🌿getSnapshotBeforeUpdate

This hook🪝 is executed right after the render method is called. It has access to props and state before the update. It is handy when you want some DOM info or want to change DOM just after an update is made. For example, getting information about the scroll position.

getSnapshotBeforeUpdate(prevProps, prevState){
    //capture the scroll position so we can adjust scroll later
    if(prevProps.list.length < this.props.list.length){
        const list = this.listRef.current;
        return list.scrollHeight - list.scrollTop;
    }
    return null;
}

Value queried from the DOM in getSnapshotBeforeUpdate will refer to the value just before the DOM is updated. It doesn't work on its own and used in conjunction with the componentDidUpdate lifecycle🌀 method.

🌿componentDidUpdate

This method is called just after the re-rendering of the component. This hook🪝 has prevPropsand prevState available. This lifecycle method is invoked after the getSnapshotBeforeUpdate is invoked.

componentDidupdate(prevProps, prevState, snapshot){
    if(condition){
        this.setState({..})
    }
    else{
        //do something else o loop
    }
}

🍀Unmounting

The final stage🪜 of unmounting is essential as it doesnt require the component and gets unmounted from the DOM. As the final state🪜, it is designed to produce the outcome via unmounting.

🌿componentWillUnmount

If there are any cleanup actions like canceling API calls or clearing any caches in storage you can perform that in the componentWillUnmount method. You cannot use setState inside this method as the component will never be re-rendered.

These are the methods that you are most likely come across. I've omitted some deprecated methods or are set to be deprecated in the very near future.

Thanks for reading💗

Reference :

Know Your JavaScript🤌

Sagar Medtiya — Wed, 24 Aug 2022 12:20:02 +0000

This blog covers the basics of JavaScript. So, lets begin

🔭Scope

Scope in JavaScript defines accessibility of variables, objects and functions. There are three types of scope:

Global Scope

When the JavaScript engine executes a script, it creates a global execution context. When we define global-scoped variable then that variable can be accessible through out the script.

var message = 'Hi';

Image Source: javascripttutorial.net/

The variable message is global-scoped. It can be accessible everywhere in the script.

Local Scope

The variable which is defined inside the function is called local variable and can only be accessible inside the function.

function animal(){
    let animal1 = 'tiger';
    console.log(animal1);
}
animal();
console.log(animal1);

Output:

In the above code, the variable animal1, when calling outside the function is returning referenceError as the variable is defined inside the function.

Block Scope

Generally, whenever you see curly brackets {}, it is a block. It can be the area within the if, else, switch conditions or for, do while, and while loops.

Hoisting

By the definition of MDN,

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

It allows functions to be safely used in code before they are declared.

For example,

console.log(Hoist);
var Hoist = 'The variable Has been hoisted'; //Output: undefined

JavaScript only hoists declarations, not initialization. Functions are hoisted first and then variables. Variables and constants declared with let and const are not hoisted. Function declaration are hoisted but function expressions are not.

Polymorphism

Polymoriphism in javascript refers to the concept of reusing a single piece of code multiple times.

For example,

class Car{
    constructor(vehicle){
        this._vehicle = vehicle;
    }
    move(){
        console.log('drive', this._vehicle);
    }
}
class Bike{
    constructor(vehicle){
        this._vehicle = vehicle;
    }
    move(){
        console.log('ride', this._vehicle);
    }
}
function getVehicle(vehicle){
    switch(vehicle.type){
        case"bike":
            return new Bike(vehicle);
        case "car":
            return new Car(vehicle);
        default:
            break;
    }
}

let vehicle = getVehicle({
    type: "bike",
});
vehicle.move() // ride {type:'bike'}
vehicle = getVehicle({
    type: 'car',
})
vehicle.move(); // drive {type:'car}

Ouput:

In the above code, both are 🚜vehicles and both vehicles move. But depending on the type of the vehicle, they move differently. But from the user's point of view they just have to call move() method.

Closures

Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.

In laymen terms, whenever you see a function keyword within another function, the inner function has access to variables in the outer function, that is a closures.

var a = 42;
function js(){
  return a;
}
js()

This is the example of closure because a is outside the scope of function js(). Closures are just using variables that come from a higher scope.

Closure remembers the environment

The function defined in the closure 'remembers' the environment in which it was created. Closure happens when an inner function is defined in outer function and is made accessible to be called later.

function fruit(){
    var apple = 'Hello apple';
    var log = ()=>{
        console.log(apple);
    }
    return log;
}
var closure = fruit();
closure();

Output:

In the above code, closurevariable is now pointing to the log() function. Meaning calling closure() function is actually invoking the log() function from the fruit() function. If you see result log() functions accurately logs the value of hello variable which was originally declared in the parent function fruit(). It means the log() function has accurately "remembered" the value of the hello variable.

IIFE

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

For example,

(function fruit(){
    //your code here
})()

It is a function expression. It is moreover a self-executing function and useful in closure. It also prevents from polluting the global scope.

var sum = (function(){
    var foo = 20;
    function bar(){
        foo = foo +10;
        console.log(foo);
    }
    return bar;
})()
sum()   
sum()
sum()

Output:

The primary reason to use an IIFE is to obtain data privacy. Because JavaScripts var scopes variables to their containing function, any variables declared within the IIFE cannot be accessed by the outside world.

`new` and `this` keywords

The new operator will create the instance of an object. If the new keyword is called then the following actions are taken:

It links the newly created object to another object. It does it by setting its constructor to another object. The object type is set to its constructor function.
It makes the this variable point to the newly created object.
It invokes the constructor function.
object.prototype property is set to the object's prototype. For example,

function Car(name){
    console.log(this); //this points to myCar
    this.name = name;
}

var myCar = new Car('honda')
console.log(myCar)

Output:For more insights,

Car is a constructor function because it is invoked using new keyword. Car function has a field called name. myCar object is created from the Car function using new keyword. It makes Car the prototype/constructor of myCar. It sets the name field to Honda. The value of myCar becomes {name: "Honda"}

Prototype

Prototype is a link to another object. In JavaScript, objects are chained together by prototype chain. JS objects inherit properties and methods from a prototype. Prototype property allows you to add properties and methods to any object dynamically.

For example,

function Animal(name){
    this.name = name;
}
Animal.prototype.age =10;
var Cat = new Animal('cat');
console.log(Cat)
console.log(Cat.name)
console.log(Cat.age)

Output:

When object Cat is inherited from object Animal, then Animal is the prototype object or the constructor of the Cat.

Prototypal Inheritance

Prototypal Inheritance means that if the property is not found in the original object itself then the property will be searched for in the object's parent prototype object.

For example,

function Animal(name){
    this.name = name;
}
Animal.prototype.move=function(){
    console.log('move');
}
Cat.prototype = Object.create(Animal.prototype)
function Cat(name){
    Animal.call(this,name);
}

Cat.prototype.meow=function(){
    console.log('meow');
}

var misty = new Cat('misty');
console.log(misty);
console.log(misty.name);
console.log( misty.meow());
console.log( misty.move())

Output:

Animal object is at the top of the inheritance. It has a Animal.prototype property on it. We also have Cat object and to execute prototypal inheritance we have to link their prototype. Cat.prototype is linked with Animal.prototype. Then we have created misty object from Cat.

Why prototypal inheritance is better?

It is simple, just create and extend objects. You don't worry about classes, interfaces, abstract classes, virtual base classes, constructor etc.
It is more powerful, you can 'mimic' multiple inheritance by extending object from multiple objects. Just handpick properties and methods from the prototypes you want.
It is dynamic, you can add new properties to prototypes after they are created. This also auto-adds those properties and methods to those object which are inherited from this prototype.
It is less verbose than class-based inheritance.

Memoization

Memoization is a technique for speeding up the application by caching its previously computed results. If the data is not cached, then the function is executed, and the result is added to the cache.

The function is an integral part of the programming, they help to modularity and reusable to our code, as per above definition memoization is an optimizing our code.

const memoizedAdd = () => {
    let cache = {};
    return (value) => {
        if (value in cache) {
            console.log('Fetching from cache');
            return cache[value];
        } else {
            console.log('Calculating result');
            let result = value + 10;
            cache[value] = result;
            return result;
        }
    }
}
// returned function from memoizedAdd
const newAdd = memoizedAdd();
console.log(newAdd(9)); //output: 19 calculated
console.log(newAdd(9)); //output: 19 cached

Output

apply, call and bind methods

apply, call and bind are used to attach a correct this to the function and invoke it. The difference is the way of function invocation.

bind()

It returns a function. This returned function can later be called with a certain context set for calling the original function. The returned function needs to be invoked separately.

For example,

var person ={
    hello: function(message){
        console.log(this.name + " says hello "+ message)
    }
}
var ngNinja = {
    name: "NgNinja Academy"
}
var sayHello = person.hello.bind(ngNinja)
sayHello("world");

Output:Here, person object has a method called hello(). ngNinja object does not have it. You can bind hello() to ngNinja object and call it later in the code.

call()

call() attaches this to function and invokes the function immediately. The owner object is sent as an argument. With call(), an object can use a method belonging to another object.

For example,

var person ={
    hello: function(message){
        console.log(this.name + " says hello "+ message)
    }
}
var ngNinja = {
    name: "NgNinja Academy"
}
person.hello.call(ngNinja,"world");

Output

In the above example this is set to the ngNinja object. You can send arguments to the function as a comma-separated list following the owner object.

apply()

apply() also attaches this to a function and invokes the function immediately. apply() is similar to call() except it takes an array of arguments instead of the comma-separated list.

For example,

var person ={
    hello: function(message){
        console.log(this.name + " says hello "+ message)
    }
}
var ngNinja = {
    name: "NgNinja Academy"
}
person.hello.apply(ngNinja,["world"]);

Output

Here, this is set to the ngNinja object. You can send arguments to the function as a comma-separated list following the owner object.

Callback Function

Callback functions are executed "later". Later it can be any action that you'd want to be completed before calling the callback function. Callback functions are passed as arguments to the outer function.

For example,

function getName(){
    return "viewers";
}
function greet(getName){
    const name = getName();
    return "Hello " + name;
}
greet(getName);

Output

In the above code, we can see that we are passing the function which we want to execute later on. greet() is the outer function. And getName() is the callback function. We pass getName() function to the outer greet() function as a function argument. The value from getName() callback function is then used in the outer function greet().

Promises

For detailed explanation of the promise, you can read the other blog. Promises. Thank you 🧡

Asynchronous Js

In JavaScript Synchronous and asynchronous are code execution Pattern,

In JavaScript Code Execution done By two separate ways:

Browser JS Engine (popular V8 JS Engine)
NodeJs V8 Engine

Browser JS Engine parse Html file and executes JavaScript by three patterns,

synchronous
Asynchronous
defer

index.html

<script src='index.js'> //default Synchronous

<script async src='index.js'> //parse as Asynchronously

<script defer src='index.js'> //parse as deferred

NodeJS V8 Engine: NodeJS V8 engine executes its JavaScript Code as single-threaded based on the Event loop!

async and await

async makes a function return a Promise and await makes a function wait for a Promise. Similar to callback and promises, we have another paradigm for handling async programming. Every async function you write will return a promise, and every single thing you await will ordinarily be a promise.

In JavaScript Asynchronous pattern handled in various versions,

ES5 -> Callback

ES6 -> Promise

ES7 -> async & await For example,

let promise1 = new Promise((resolve, reject)=>{
    console.log("Hello");
})
let promise2 = new Promise((resolve,reject)=>{
    resolve(setTimeout(()=>{
        console.log('viewers')
    },5000))
})

async function display() {
    let data = await Promise.all([promise1,promise2]);
    console.log(data);
  }

display()

Output

In the above code, we have used two promises and used display() function with async and await. In Async & Await lot more stuff there, Just play around it.

Here JavaScript API cheatsheet for front end developer http://overapi.com/javascript

Image source: http://overapi.com/javascript

Thanks for reading, if you like it you can subscribe to my blog. 🧡

References from:

🤞Understanding Promises in JavaScript🚀

Sagar Medtiya — Thu, 18 Aug 2022 12:03:55 +0000

What is a Promise🤞?

By the definition of MDN,

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

We know that JavaScript is a synchronous programming language but callback function makes it Asynchronous.

Let's understand promise by simple example, suppose you made a promise🤞 to yourself that you will wake up at sharp 5AM. But eventually, you don't know whether you will make it or not, that means either you are going to complete that promise or not.

How it works?

The promises returns one of the 3 possible states:

Fullfilled: You woke up at sharp 5AM.
Rejected: You didn't wake up at 5AM.
Pending: You don't know if you'll wake up or not.

A promise is settled if it's not pending means it has been resolved or rejected. After it has been settled there is no use of calling resolve() or reject().

Syntax📃

new Promise( (resolve, reject)=> { ... } );

For example📃 ,

let wakePromise = true;
let wakeUp = new Promise((resolve, reject)=> {
    setTimeout(() => {
        if (wakePromise) {
        resolve('I woke up');
    } 
    else {
        reject('I didnt wake up'); }
    }, 5000);
});
console.log(wakeUp);

Output:

After completion of 5 seconds the promise gets fulfilled.

If we change wakePromise = false then it returns,

So the reject method moved the promises to the rejected() state.

Static types and prototype method:

Promise.prototype.then(onFulfilled, onRejected)

.then method is used to schedule📅 a callback to be executed when the promise is successfully resolved.

Promise.prototype.catch(onRejected)

.catch method is used to schedule📅 a callback to be executed when the promise is rejected.

Promise.prototype.finally(onFinally)

.finally is used to execute the same piece of code whether the promise is fulfilled or rejected.

For example📃 ,

function makePromise(wakeUp) {
    return new Promise(function (resolve, reject) {
       setTimeout(() => {
           if (wakeUp) {
               resolve("I woke up at 5AM.");
           } else {
               reject("I didn't wake up at 5Am.");
           }
       }, 5 * 1000);
   });
   }
   let wakeUp = makePromise(true);
   wakeUp
       .then(success => console.log(success))
       .catch(reason => console.log(reason))
       .finally(() => console.log("Let's sleep"));

Output:

Promise🤞 Chaining

Promise Chaining is a concept by which we may initialize another promise inside our .then() method and accordingly we may execute our results.

For example📃 ,

let promise = new Promise((resolve, reject) => {
    resolve("Test");
  });
  promise
    .then(
      new Promise((resolve, reject) => {
        resolve("exams");
      })
      .then((result1) => {
        console.log(result1);
      })
    )
    .then((result2) => {
      console.log(result2);
    });

Output:

We can use promise.all() for the nested .then method. It can simply the messy code easily. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.

For example📃 ,

const Promise1 = new Promise((resolve, reject)=>{
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
      }, 1 * 1000);
})
const Promise2 = new Promise((resolve, reject)=>{
    setTimeout(() => {
        console.log('The second promise has resolved');
        resolve(10);
      }, 1 * 1000);})
Promise.all([Promise1, Promise2])
    .then((data)=>{
        console.log(data);
    })
    .catch((error)=>{
        console.log(error)
    })

Output:

Important points

Use promises whenever you are using async or blocking code.
A promise is an object that returns a value in the future.
A promise starts in the pending state and ends in either a fulfilled state or a rejected state.
resolve maps to then and reject maps to catch
If something needs to be done in both cases use .finally

Thanks for reading my post. I hope you've liked it. Happy coding😊

Some more blogs by me💗

Some best techniques to Optimize your React App🐱💻

Component Lifecycle🌀 in ReactJS🚀

Know Your JavaScript🤌