DEV Community: Shubham Lakhara

React.JS SEO

Shubham Lakhara — Thu, 19 Oct 2023 02:31:33 +0000

Creating code snippets for all the possible SEO considerations listed earlier would be extensive and beyond the scope of a single response. However, I can provide code snippets for some key SEO aspects in React.js. You can adapt and expand these examples to fit your specific needs. Here are a few code snippets:

1. Page Title and Meta Description:

import React from 'react';
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div>
      <Helmet>
        <title>Your Page Title</title>
        <meta
          name="description"
          content="A brief and relevant description of your page."
        />
      </Helmet>
      {/* ... rest of your content */}
    </div>
  );
}

export default App;

2. Semantic HTML Structure:

<div>
  <header>
    <h1>Main Heading</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        {/* ... more navigation links */}
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
    {/* ... more articles or sections */}
  </main>
  <footer>
    <p>&copy; 2023 Your Company</p>
  </footer>
</div>

3. Friendly URLs (using React Router):

import { Route, BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      {/* ... more routes */}
    </Router>
  );
}

4. Header Tags (h1, h2, h3):

<div>
  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Content here...</p>
</div>

5. Images and Alt Text:

<img src="image.jpg" alt="A descriptive alt text for the image" />

6. Internal Linking:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    {/* ... more navigation links */}
  </ul>
</nav>

7. Schema Markup (Structured Data):

import React from 'react';
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div>
      <Helmet>
        {/* JSON-LD structured data */}
        <script type="application/ld+json">
          {`
            {
              "@context": "http://schema.org",
              "@type": "WebPage",
              "name": "Your Page Name",
              "description": "A brief description of your page",
              "url": "https://example.com/your-page-url"
            }
          `}
        </script>
      </Helmet>
      {/* ... rest of your content */}
    </div>
  );
}

export default App;

Please adapt and expand these code snippets according to your specific website's requirements and content. Remember to focus on creating high-quality, original content that provides value to your audience and follow best practices for SEO.

JavaScript: Promise

Shubham Lakhara — Thu, 19 Oct 2023 01:40:03 +0000

How to use JavaScript Promises in the industry :-

Ecommerce:

Promises are a way to handle asynchronous operations more cleanly and manage errors effectively.

E-commerce platforms often rely on external APIs for various functionalities like product catalog, payment processing, or shipping calculations. When making API requests, use the fetch API or a library like Axios that returns promises.

fetch('https://api.example.com/products')
  .then(response => response.json())
  .then(data => {
    // Handle the API response data
  })
  .catch(error => {
    // Handle errors
  });

Promises are a fundamental concept in asynchronous programming in JavaScript.
They provide a way to handle asynchronous operations more cleanly and manage the flow of asynchronous code.

****The core concepts of promises include:

States:
- Promises have three possible states:
  - Pending: The initial state when a promise is created, representing that the operation is ongoing or hasn't completed yet.
  - Fulfilled: The state when the asynchronous operation is successfully completed, and a result value is available.
  - Rejected: The state when the asynchronous operation encounters an error or fails, and an error reason is provided.
Callbacks:
- Promises use two callback functions to handle their states:
  - resolve(): A function called when the promise is successfully fulfilled. It passes a result value to any attached .then() handlers.
  - reject(): A function called when the promise is rejected due to an error. It passes an error reason to any attached .catch() handlers.
Chaining:
- Promises allow you to chain multiple asynchronous operations together using .then(). This enables you to specify a sequence of tasks to execute when the promise is fulfilled.

   someAsyncFunction()
     .then(result => {
       // Handle the result
       return anotherAsyncFunction(result);
     })
     .then(finalResult => {
       // Handle the final result
     })
     .catch(error => {
       // Handle errors from any of the steps
     });

Error Handling:
- Promises provide a centralized way to handle errors using .catch(). Errors thrown in any .then() block will propagate down to the nearest .catch() handler.

   someAsyncFunction()
     .then(result => {
       // Handle the result
       throw new Error('An error occurred');
     })
     .catch(error => {
       // Handle the error
     });

Promise.all():
- You can use Promise.all() to wait for multiple promises to fulfill in parallel. It resolves when all the provided promises have resolved, providing an array of their results.

   const promises = [promise1, promise2, promise3];
   Promise.all(promises)
     .then(results => {
       // Handle the results
     })
     .catch(error => {
       // Handle errors from any of the promises
     });

Async/Await (ES6 and later):
- ES6 introduced the async/await syntax, which simplifies working with promises, making asynchronous code look more like synchronous code.

   async function fetchData() {
     try {
       const result = await someAsyncFunction();
       // Handle the result
     } catch (error) {
       // Handle errors
     }
   }

Promises are a crucial part of modern JavaScript and are widely used in web development for handling asynchronous operations such as AJAX requests, file I/O, and more. They promote cleaner, more maintainable code by providing a structured way to deal with asynchronous behavior and errors.

Javascript_Major: JavaScript DOM Interview Questions Made Simple with Real-World Examples"

Shubham Lakhara — Tue, 11 Jul 2023 21:25:37 +0000

🚀 Boost Web App Performance: Minimize DOM Access in a Social Media Feed 📈💥

In the dynamic world of social media, a fast and responsive feed is crucial for a top-notch user experience. Let's unlock the secrets of optimizing your social media app's performance by minimizing DOM access! 🚀💪

Imagine each post in your feed has a captivating "Like" button that instantly updates the like count without a page reload. Your goal? To minimize DOM queries and enhance the responsiveness of this coveted "Like" functionality. 🌟💖

Introducing our secret weapon: caching references to frequently accessed elements. Here's a snippet in JavaScript that will empower your web app to shine: 💡🖥️

`// 🔥 Caching frequently accessed elements
const likeButtons = document.querySelectorAll('.post-like-button');
const likeCounts = document.querySelectorAll('.post-like-count');

// 🎯 Attaching event listeners to like buttons
likeButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 🔥 Simulating like functionality
    // 💯 Increment the like count
    const currentCount = parseInt(likeCounts[index].textContent, 10);
    likeCounts[index].textContent = currentCount + 1;
  });
});`

By caching references to all the "Like" buttons and corresponding like count elements using the powerful querySelectorAll(), we eliminate repeated DOM queries within the event listener callback. 🚀💡

When a user clicks a "Like" button, we swiftly retrieve the current count using the cached reference to the specific like count element. With a simple increment, we seamlessly update the DOM with the shiny new value. This ingenious approach minimizes DOM access and supercharges your web app's performance! 🚀⚡

By caching frequently accessed elements and intelligently reusing those references, we eliminate the need for redundant DOM queries. The result? A more efficient, lightning-fast, and delightful user experience. 🌟🚀

This optimization technique is your ticket to success in various scenarios where frequent DOM access is required. Get ready to witness a remarkable boost in performance across your entire web application! 📈💪

Ready to create blazing-fast web apps that leave a lasting impression? Let's embark on this performance optimization journey together! 💻🔥 #WebDevelopment #DOMManipulation #PerformanceOptimization #FrontEndDevelopment

MongoDB

Shubham Lakhara — Sun, 09 Apr 2023 04:16:22 +0000

MonogoDB Resources

4.Start Here - Intro to MongoDB

5.MongoDB ALL in One

6.MongoDB Node.js Developer Path

7.mongoDB GFG Complete Guide

8.MongoDB crash course in 2021 in Hindi

MonogoDB Project Resources

1.Top Node Js Projects

Top 10 Node JS Projects Ideas (With Source Code)

3.Top 7 Node.js Project Ideas For Beginners

4.Top10 Node.js Projects for Beginners (with Code)

5.10 MongoDB Mini Projects Ideas for Beginners with Source Code

6.12 Top MongoDB Project Ideas & Topics For Beginners

7.nodejs REact Native news app

JS Project

Shubham Lakhara — Sun, 09 Apr 2023 04:15:32 +0000

Project - 1

Password Generator

custom or data-* Attributes

Why custom attribute:

Data attributes allow developers to store custom data in HTML
elements.

AWS

Shubham Lakhara — Sat, 08 Apr 2023 04:28:03 +0000

RESOURCES

NodeJS From Scratch

Shubham Lakhara — Wed, 05 Apr 2023 09:36:48 +0000

Session - 1

JS engine
How node comes into the picture -How Js works outside browser?
Why use Node JS?
Npm (what and why)?
npm init // npm install express
Package.json( Why and What)?
1. version (1.0.0)
2. scripts
Let's create first script
Create second script with nodemon
package.json VS package-lock.json // command : npm ci
What is Server ?
What is HTTP ? and HTTP Server ??
Create an HTTP Server
1. require to import a module // require()
2. createServer() method
3. server.listen();
Calling the server endpoint from Postman for Log Server Date- Time
The Response Object
1. res.end();
2. res.write(); //Sending Data with Response
3. res.writehead(); //Specifying Headers in Response
Request Object
1. req.url - contains the url of the request
Activity - Extending APIs
Activity - Advanced Extending APIs

Session 2

Whats is express ??
Using Express to create http server and send data
1. create an app instance
2. app.listen()
3. app.get() //adding route
4. res.end() , res.json , res.write(), res.send() , res.senStatus() //response
express request object
1. req.params()
2. req.query()
Filter all curency by min_Value -- use req.queryParam,
What is controller?
1. create controller?
2. Need of controllers?
3. flow of controllers
Import/export in Node JS?
1. require();
2. module.exports {};
In Express, the routes are served in the first come first server manner. ex user search by gender and age route position changed then its work well.

Session 3

Express Routes
1. what is express router?
2. Why use??
3. How to Manage API versioning?? //ans: router
4. Creating a router
5. new Router instance //const router = require("express").Router();
6. router.get("/");
7. Use the routes
8. app.use("/path", xyzroutes); Activity == club currency Routes.
Activity - Club User Routes
Validating Routes
1. if else if else check to validate
2. Validations using Joi
  1. Creating a Joi Schema
  2. Create a schema with the functions in the Joi object
  3. Adding Schema Keys
  4. Create a validator function
  5. Using the validator function //currencies
Environment Variables
1. How to use environment variables?
2. .env file -> // process.env.ROUTE_PASSWORD
3. require('dotenv').config() // npm install dotenv

Session 4

what is middleware
Why middleware
middleware Architecture
flow of excution middleware //create middleware for verify auth //create middleware for validateSearchQuery

mongoDB Database

How to Storing Stuff in DB
SQL vs MongoDB
Intro to MongoDB
1. Data is stored in collections and documents
2. Documents in MongoDB
3. Format of Data in MongoDB //BSON
Using Mongo and storing documents
1. Use the database test > use test
2. Check to see if it has any collections inside it? > db.getCollectionNames()
3. Add a new collection named “blogs” if already doesn’t exist > db.createCollection("blogs")
4. Add a new collection named “blogs” if already doesn’t exist > db.createCollection("blogs")
5. Add some documents to this collection > db.blogs.insert({publishedAt: null, content: "", author: []})
6. List down the documents of the blogs collection > db.blogs.find({}).pretty()
Storing Data in MongoDB with NodeJS
1. what is Object Data Modeling library ODM ??
2. What and Why Mongoose ??
3. How to use mongoose ??
  1. npm i mongoose
  2. Connecting to DB const DB_URI = "mongodb://127.0.0.1:27017";
  3. mongoose.connect(${DB_URI})
  4. Set specifying DB
Mongoose Schema
1. Creating a schema
Mongoose Model

mongoose.model("xyz", xyzSchema);

Session 5

Create - Writing to DB
1. create a new Blogs instance
2. const newBlogDoc = new Blogs({title: "First Blog"});
3. router.get("/new", createNewBlog);
4. app.use("/blogs", blogRoutes)
5. update our schema by passing in options object for keys
6. Confirm unique title
7. Delete the current blogs collection from the mongodb > db.blogs.drop()
8. POST- update title dynamically
9. router.post()
10. Parsing body from POST request -> in----> index.js --> app.use(express.json());
11. Confirming the document in the DB > db test > db.getCollectionNames(); [ ]
12. Saving the object in the DB -- by use .save()

2.Reading from the DB
1. create getAllBlogs in controller ->
2. Update the routes to support the GET / route that is
controlled by getAllBlogs
router.get()

3.Delete - Removing documents
1. check and remove from from DB command
> db.blogs.find({}).pretty()
> db.blogs.remove(
{ _id: ObjectId("61c81cca4112d97895e4911b") } );
2. need to be able to do this using a network call
1. router.delete("/:id", deleteBlogWithId);
2. controller -- -------> deleteBlogWithId --------
------> findOneAndDelete({ _id: id });

4.Updating content

findOneAndUpdate(filter, update, { new: true });
const filter = { _id: id }; //conditions to find the document
const update = req.body; //updates to be performed
router.patch("/:id", updateBlogsWithId);

5.Timestamps in Schema
{ timestamps: true }
//will add createdAt and updatedAt timestamps

Session 6

Nested Schema
1. const authorSchema = new mongoose.Schema({ });
2. { _id: false }
3. Fixing the validation for emails
  1. npm i validator
Building Queries in MongoDB
1. reate a route and a controller
  1. searchBlogs()
  2. A special operator $elemMatch
  3. $or operator
  4. RegEx
  5. findOne() vs findById()
Business Logic Layer - Services
1. what is Services?? Why ??? application ?? and flow??
2. Now get rid of business logic from controllers Step 1 - Create a new service file Step 2 - Transport logic from controller to service
3. Activity - Create New Services //Apply oops encapsulate
  1. Creating Blog Service Class
  2. Activity - Use classes to create a new blog
  3. Note on naming conventions
Final Architecture of our express app.

DSA

Shubham Lakhara — Sat, 01 Apr 2023 09:15:05 +0000

Basics of Programming - 1

Session 1

1.Thought Process to solve a problem
2.Using computer to solve problem
3.What is algorithm?
4.FlowChart
5.PseudoCode
6.Add 2 number by taking input -flowchart and pseudocode
7.Find curcumference of a cirlcle -flowchart and pseudocode
8.Average of 3 number -flowchart and pseudocode
9.Check number is odd or even -flowchart and pseudocode
10.Students and Grade -- Flow chart
11.Check number is +ve -ve and Zero
12.Add N numbers from user
13.print 1 to N but only odd numbers

Session-2

1.Compilation process
2.What is Programming Language?? H.W = Interpreter VS Compiler
3.First Program - NamsteWorld
3.Taking input in c++ ===> by using cin
4.Datatype and Varible? H.W = ASCII VALUE?, Explore Variable naming conventions?
5.sizeof
6.How data is stored
7.signed vs unsigned H.W = Find range of data type
8.TypeCasting
9.operators H.W = Explore Precedance Table?

Session3

Conditionals

if

if - else

if- else if - else

Loops

for loop - syntax ,for loop flow

Patterns

Solid Ractangle

sqaure Ractangle

Hollow Ractangle

Half Pyramid

Inverted Half Pyramid

Numeric Half Pyramid

Inverted Numeric Half Pyramid.

Basics of programming-2

Session 4

1.Full Pyramid
2.Inverted Full Pyramid
3.Solid Diamond
4.Hollow Diamod
5.Flipped Solid Diamond
6.Fancey pattern
7.Alphabet Palindorme Pyramid

Session 5

1.Numeric Full Pyramid
2.Numeric Hollow Pyramid
3.Bitwise operator | AND OR NOT XOR
4.Left and Right shift oprator
5.Pre/Post Increment/Decrement Operator
6.Break and continue keyword
7.variable scopping
8.operator precedance
9.switch case

Session 6

1.Function
2.Why Function
3.Function Call Stack
4.Pass by Value Concept
5.Write a function to add 2 numbers
6.Function order
7.Find max of 3 numbers
8.Counting from 1 to N
9.Write a function for student and grade problem
10.Sum of even no. upto N

Arrays

Session-7 Arrays Class-1

1.What is Array?
2.why array is needed??
3.creating an array
4.Index and access array
5.Arrays and function
6.Pass by reffernce concept
7.Linear Search in Array
8.count 0s and 1s
9.Maximum number in array
10.Print Extreme in array (Two pointer approach)
11.Reverse array

Session-8 Array Class-2

1.Dynamic array(Vector introduction)
2.Find Unique Element
3.Union of 2 Arrays
4.Intersection of two Arrays
5.Pair sum
6.Triplet sum
7.Sort 0s and 1s
8.for loop advanced

Session-9 Array Class-3

1.2D Arrays introduction
2.How 2D arrays Store in memory
3.2D array ip / op
4.Row sum print.
5.Linear Search in 2d Array
6.Get min/max in 2d Array
7.Transpose of matrix
8.Dynmic 2D array -- Vector in 2d Array

Searching

Session-10

Searching
1.Linear Search Intro.
2.Binary Search.
3.Implimentation of Binary Search.
4.Time Complexity Analysis of Binary Search.
5.Binary Search in STL.
6.Apply Binary Search STL on Vector and Array.
7.Find the first Occrance of an element by binary Search.
8.First and Last Occrance STL methods Upper and Lower Bound.
9.Find the Total Occrance of an element by binary Search.
10.Peak Element in Mountain Array.

Session-11

1.Find Pivot Element
2.Sqrt of a number using binary Search
3.Binary Search in 2d Matrix

Session-12

1.Binary Search in nearly sorted Array
2.Divide two number using binary Search
3.Find the odd occuring in an array

Sorting & char Array & String

Session-13

1.Selection Sort
2.Bubble Sort
3.Insertion Sort
4.Sort Function

Session-14

char Array

getline function

Length of String

Predefine c++ length function in array

Reverse String

Replace all Space

Palindrome

Upper Case Conversion

String intro

String functions .length()

Compare Function implement

Session 15

Remove all adjecent Duplicate in String

Remove all occurance of a SubString

Valid palindrome 2

Minimum Time Difference

Palindrome Substring

Pointers

Session - 1

Address-of operator (&)

What is Pointer?

How to access pointer.

Size of pointer. (64 vs 32 bit)

Why Pointer?

How to initialize null pointer.

pointer Airthmatic operation.

How to copy pointer.

Session - 2

1.Pointer in Array.

React From Scratch

Shubham Lakhara — Fri, 31 Mar 2023 01:32:52 +0000

Session 1

What is React ??
1. Why React is all about Compomnants? componants
Why React ?? WhyReact
SPA (Single-page application)
React Componants ?
Reac_JS Setup
1. createReact app and VS code installation
2. What is node modules in react?
3. what is NPM ?
4. package.json ? -> what is inside package.json?
5. package.lock.json -> Why need and purpose?
6. ReactDOM , render() - , file structure in react
7. Flow of execution : root -> index.js -> app.js -> Componants
8. what is import and export module ?
9. What is JSX?
10. Why use className instead Class in react ???
Create Component | and //access
Props | Data handle in component
props.children(); //use to show other content
props.className(); //Handle css property

Summary

Create Componant
Data handling by props

Session 2

Handling Events eventlistner inJs === Props in React
useState Hook React useStateHook
1. syntax
2. flow of execution
3. Project == update UI by useState (Date and Title )
4. event Object in handler shows ip value
5. Multiple states
6. preventDefault() preventDefault()
Lifting UP GFG CodeStudio Reat

Session 3

Counter App Project
Plan With Me Project

Session 4

useEffect
class Based components
Project Window size Update by useEffect

Session 5

Top Courses == Project

Session 6

Testimonial Project

REACT BASICS SUMMRY

INTRO TO REACT
PROPS
event Handler
useState Hook
Lifting Up Concept
useEffect Hook
4 Projects Completed

REACT INTERMEDIATE

Session -1

useState with Object
Controlled Component === value={formData}
Form Project

Session 2

Brouser Router
Routes
Route Map-with component
Link vs NavLink
Nested Routing
index to default route set
useNavigate Hook
Project to understand == Navigation bar project ReactSPA VSCode

Session - 3

1.Project Studynotion - functionality

Session - 4

project Studynotion - Style Tailwindcss

REACT INTERMEDIATE SUMMRY

useState object
Routers
useNavigate Hook
Controlled component

Project
1.Form App
2.Navbar Routes App
3.Studynotion

REACT ADVANCE

Session -1

customReact Hook like useGif()
axios concept
1. Random gif project

Session - 2

context API
state Management through context API
createContext()
Providers
consume
useContext() Hook;
Project codehlp blog

Session - 3

useSearch() hook
useLoactaion hook

Project Codehelp blog + Routes

Session 4

1.Redux
2.Flow of Execution Redux

createSlice()
reducers
create store
Provider
useSelector()
useDispatecher()
Redux project: Shopping Cart

React Resources

React Hooks Simplified

React JS

Shubham Lakhara — Thu, 30 Mar 2023 23:34:52 +0000

Difference package.json and package-lock.json files?

Q1: why package.lock.json is necessary when you have package.json in your project application?

ANS: package.lock.json is created for locking the dependency with the installed version. It will install the exact latest version of that package in your application and save it in package.json.

DIFFERENCE IS:

Without package.lock.json, there might be some differences in installed versions in different environments. To overcome this problem, package.lock.json is created to have the same results in every environment.

GFG

useState

Q.1 What is the use of useState() in React Hooks?

It allows to track the state in a functional component in React.

Props

React components use props to communicate with each other.
Props are also how you pass data from one component to another, as parameters.
In react, the prop stands for "Properties". They are plain JavaScript objects.
Props are used to store data that can be accessed by the children of a React component.
React Props are like function arguments in JavaScript.
Props are also how you pass data from one component to another, as parameters.
props

Components

Components are independent and reusable bits of code.

JavaScript From Scratch

Shubham Lakhara — Sun, 26 Mar 2023 11:44:12 +0000

Session1

What is JS?
What Can we do with JS?
Compiler in JS?
What is NodeJS?
What is console.log();?
JS Setup?
Add JS in HTML?
Variables? 1.let 2.var 3.const
Variable naming convention
Data Type 1.Primitive Type 2. Reffrencetype
Operators 1.Airthmatic 2.Comparision 3.Equality 4.Ternary Operator 5.Logical operator 6.With no booleans 7.Bitwise Operator 8.operator Precedance
Control Statements
1. if
2. else-if
3. else
4. switch, break, continue
Loops
1. for-loop
2. while-loop
3. Do-while-loop
4. what is inifinite loop?
5. for-in-loop
6. for-of-loop

Session2

What is Object in JS? //Object Creation //Object access //properties //methods
Object Creation
1. Factory Function
2. Constructor Function //new keyword
Dynamic Nature of Objects //add and //remove Properties in object
Function are objects proof?
Create Object for Primitive and Reference Type data type and their storage
Iterating through Objects
1. for-in-loop
2. for-of-loop
Object Clonning.
Garbage Collection.

Session3

Built in Objects
1. Math
2. String
3. Date 2.Template Litrals //backtick //escape sequences
Arrays
1. Creation
2. Access
3. Insertion
4. Searching
5. Callback Function
6. Arrow Function
7. Removing Element
8. Emptying an array
9. Combine and slicing Array //concat() //Slice(startIndex, endIndex);
10. Spread operator (...)
11. Iterating Array //For-Each loop
12. Joining Array join();
13. split Array split()
14. Sorting sort()
15. Reverse array reverse();
16. Filtering filter()
17. Mappping Array map()
18. Mapping with Object

Session4

What is Function?
syntax for function in JS? //Function Declaration
Why need function??
How to call or invoke function?
Hoisting concept
Function assignment
function declaration VS Function Assignment
Named function VS Annoyms Function
Dynamic nature of function?
special object Argument
REst parameter in function?
Default Parameter in function
Getter and setters in function
Try and Catch block Error Handling
Scope in function.

ModernJS Session1

window object
What is Dom ?
What is BOM ?
DOM tree of objects?
DOM ObjectMethods
1. .getElementById()
2. .getElementsByClassName()
3. .getElementsByTagName()
4. .querySelector()
5. .querySelectorAll()
6. .innerHTML
7. .outerHTML
8. .textContent
9. .innerText
10. .createElement()
11. .appendChild()
12. .insertAdjacentHTML()
13. .removeChild()
14. child.parent(childElement)

6.CSS Modify by JS

.style
.cssText
.setAttribute()
.className
.classList

Session2

Browser Events
1. what is event?
2. Respond to event
3. Data stored in event
4. Stop event
5. Life Cycle of event . monitorEvent() method . unmonitorEvent() merhod
EventListner
1. addEventListener() method
2. Type coercion
3. removeEventListener() method
4. Phases of an event
  1. Capturing Phase
  2. Target Phase
  3. Bubbling Phase
5. event Object
Default action .perentDefault()
Avoid too many events .nodeName and event.target
Document loaded event.

Session 3

Performance //performance.now() method
Reflow and Repaint Concept
Document Fragments
Call Stack
1. Single threading
2. Synchronus language
Event Loop
Async Code
setTimeOut

Session 4

Asynchronous JS
API
Features of Async Code
Promises
promise chaning
Async-Await
Fetch API //get //post //read //create
Closures
classes and export modules in JS