100% found this document useful (6 votes)

13K views

HTML To React - The Ultimate Guide PDF

This document provides an overview of HTML and introduces key concepts. It covers creating an HTML page with the basic boilerplate code, including the <DOCTYPE>, <html>, <head>, and <body> tags. It also discusses the DOM, when to use different semantic elements like <section>, <article>, and <div>, and basic HTML tags for headings, paragraphs, links and images.

Uploaded by

ricky pateal

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (6 votes)

13K views

HTML To React - The Ultimate Guide PDF

Uploaded by

ricky pateal

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 399

HTML

HTML
TO
REACT
The Ultimate Guide
NGNINJA
ACADEMY
NgNinja Academy | All Rights Reserved

HTML and CSS

Table Of Content

Module 1 - Getting Started

Create Your First HTML Page
Write the following boilerplate code in index.html le
Run Your First HTML File
Run the application on the Internet for FREE
If I do not put <! DOCTYPE html> will HTML5 work?
DOM
When should you use section, div or article?
section
article
div
Headings
Paragraph
Links / Anchor elements
Images
Image Sizes
Image as links
Module 2 - Styling your Webpage
Create a CSS File
Then add your style in your index.html le
Now let's create the body of your Valentine's Day card
Now let's add your rst style
Selectors
.class
child .class
#id
element tag
Mix n match

1 / 85
NgNinja Academy | All Rights Reserved

Id and Class
Element and Class
Advanced Selectors
adjacent selector
attributes selector
Backgrounds
Colors
Borders
Fun with Border Radius
Shapes
Shorthand
Circle and leaf
Circle
Leaf
Module 3 - Display and position your elements
Box model
Total width of an element should be calculated like this:
Total height of an element should be calculated like this:
Margins
Margin On Individual Sides
Margin Shorthands
Auto Margin
Paddings
Padding On Individual Sides
Padding Shorthands
Display
Block
Inline
Inline-block
None
Visibility Hidden
Flex
Positions
Static
Relative
Absolute
Fixed
Centering:
Centering Vertically
CSS Float
Clearing Floats
Methods to clear oat:
Module 4 - Semantic HTML5
Semantic HTML?
More about Semantic HTML
Di erence between HTML and HTML5?

2 / 85
NgNinja Academy | All Rights Reserved

HTML
HTML 5
Below are new semantic elements
What elements have disappeared in the latest HTML?
Di erence between <div> and <frame>?
What is HTML5 Web Storage?
localStorage:
sessionStorage:
Module 5 - Flexbox intro and media query
Flexbox
Flex box container properties
Flex box item properties
Flexbox Examples
Media queries
Always Design for Mobile First
Orientation: Portrait / Landscape
Let's talk about the sizes - px vs em vs rem
How to calculate PX from REM
More on rem vs em
CSS Grids
Flexbox
Grids
Example
Example #2 - Gaps
Example #3 - Fractions
Example #4 - Fractions Contd.
Nested grids
Start-End points of Grid
Module 6 - Quirks, tips, and tricks
FOUC
How to avoid it?
BEM naming convention
OOCSS - Object Oriented CSS
CSS User Agent Styles
Normalizing CSS
Reset CSS
Validate your CSS
Testing Strategies
Conditional CSS

3 / 85
NgNinja Academy | All Rights Reserved

Module 1 - Getting Started

Create Your First HTML Page

Create an app folder on your computer

Create le named index.html inside app folder on your computer
Open that page in your favorite text editor
I personally use VSCode

Write the following boilerplate code in index.html le

This is your HTML boilerplate code

You are telling the browser that index.html is an HTML le and render it as an HTML website
head tag is where you declare meta-data, title, and link your style les
body tag is where you actually start writing your web page codes
The visible part of the HTML document is between <body> and </body>
title tag is used to de ne your page title
h1 tag is used to render a heading on your page

4 / 85
NgNinja Academy | All Rights Reserved

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First Web Page</h1>
</body>
</html>

Run Your First HTML File

To run your application locally -

Save your changes to the index.html page
Then imply open your index.html le in the browser

Run the application on the Internet for FREE

If you want to run your application on the Internet and share the URL with your partner follow
these steps
Go to Netlify Drop

5 / 85
NgNinja Academy | All Rights Reserved

Drop the folder that contains your HTML and CSS le (if you have one) on that page where it says
Drag and drop your site folder here
And Voila! It should create a unique URL that you can simply share with your partner

You can see the working example here

If I do not put <! DOCTYPE html> will HTML5 work?

No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function
properly.
Modern browsers are clever enough to render the HTML content, but it may not be optimized
correctly.

6 / 85
NgNinja Academy | All Rights Reserved

DOM

Document object model

HTML document is represented as tree

Every tree node is an object
document object represents the DOM tree
<html> node is at the root
<head> and <body> are its children
The leaf nodes contain text of the document
"My Application", "This is title", and "This is link" are the leaf nodes
DOM api is available to capture user events and give access to its children

NOTE: If we put something after </body> end tag, then that is automatically moved inside the
body, at the end, as the HTML spec requires that all content must be inside <body>.

7 / 85
NgNinja Academy | All Rights Reserved

NOTE: Modern browsers are smart. If the browser encounters malformed HTML, it automatically
corrects it when making the DOM. For ex: browser will auto insert <html> tag at the top is not
provided.

When should you use section, div or article?

section

Group content with related single theme

Like a subsection of long article
Normally has heading and footer

<section>
<h2>Subtitle</h2>

8 / 85
NgNinja Academy | All Rights Reserved

<p>My long paragraph</p>

</section>

article

Represents complete, self-contained content of page

Could be a forum post, newspaper article, blog entry
Its independent item of content
Make sense on its own

<article>
<h2>Subtitle</h2>
<p>My long paragraph</p>
</article>

div

Does not convey any meaning

Its often called element of last resort
Use it when no other element is suitable

<div>
<h2>Subtitle</h2>
<p>My long paragraph</p>
</div>

9 / 85
NgNinja Academy | All Rights Reserved

10 / 85
NgNinja Academy | All Rights Reserved

Headings

Heading tags are part of semantic HTML

They are used to de ne headings
They go from h1 to h6
Size is largest for h1 by default and smallest for h6 by default

<h1>My Heading 1</h1>

<h2>My Heading 2</h2>
<h3>My Heading 3</h3>
<h4>My Heading 4</h4>
<h5>My Heading 5</h5>
<h6>My Heading 6</h6>

Headings are used for SEO purposes

Search Engine Optimization
Useful for indexing pages and structure of the page
You can format the font styles as per your requirements for these tags

<h1 style="font-size:72px;">My Heading</h1>

Paragraph

11 / 85
NgNinja Academy | All Rights Reserved

p element is used for writing a paragraph of texts in HTML

You can include p inside other elements like div, section, article

TIP: don't add extra white spaces - the browser will remove any extra spaces and extra lines when
the page is displayed. Use other HTML and CSS properties to add white spaces as per your
requirements.

<div>
<p style="font-size:12px;">This is a paragraph.</p>
</div>

Links / Anchor elements

Links allow users to navigate

From one page to another
Or even from one section of the page to another section on the same page
Links in HTML are called Hyperlinks
Below link will take you to https://www.google.com
href attribute speci es the target address

<a href="https://www.google.com">Google</a>

12 / 85
NgNinja Academy | All Rights Reserved

Images

HTML allows you to add images on your website

src attribute is where you specify the location of your image
It can be an image from the internet
Or from your local machine

img tag also takes in another attribute called alt

alt attributes provide a way to show an alternative text in case an image is not available for
display
Example if the internet is not available, or user is on screen reader

Image Sizes
You can size your image using width and height property or the style property

<img src="https://via.placeholder.com/150" alt="placeholder" width="150"

height="150">
<img src="https://via.placeholder.com/150" alt="placeholder"
style="width:150px; height:150px;">

Image as links
You can make image clickable using anchor tags around them
This can be used to navigate to another place by clicking on the image

13 / 85
NgNinja Academy | All Rights Reserved

</a>

14 / 85
NgNinja Academy | All Rights Reserved

Module 2 - Styling your

Webpage

Create a CSS File

Create style.css le inside app folder that you created above when creating your rst HTML
page
Your styles will go in this style.css le

Then add your style in your index.html le

You have to use the link tag to include your style le inside your HTML le

<head>
<meta charset="utf-8" />
<title>Valentine Gift</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

15 / 85
NgNinja Academy | All Rights Reserved

Now let's create the body of your Valentine's Day card

Replace the body tag in your index.html le to match the following code
You are adding card DIV which will be the container of your greeting card. We will add the styles
later.
Inside the card DIV add two H1 tags
These are your heading messages
H1 are the biggest headings available
You can also change the font-size as per your need
We also assigned appropriate classes to our HTML so that we can style them later
You will learn about classes later

<body>
<div class="card">
<h1 class="quote">You're the CSS to my HTML</h1>
<h1 class="message">Happy Valentine's Day</h1>
</div>
</body>

Now let's add your rst style

Let's add styles for your valentine's day card

We are using .card - class selector to grab the card DIV and style it
Here we are just setting a nice red border: 10px solid #E53038;
height: 100vh; is done to match out body tag's height - which is the full view-port height.
display: flex; makes this card DIV a ex-box.
We are just making all our flex-children align in vertically and horizontally center
position in one column.
NOTE: We will learn about ex-box in the later section.

16 / 85
NgNinja Academy | All Rights Reserved

.card {
border: 10px solid #E53038;
height: 300px;
width: 300px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

17 / 85
NgNinja Academy | All Rights Reserved

Selectors

In layman terms selectors are used to grab a DOM element to apply styles to it
There are di erent types of selectors you will learn below

The images shows tag selector

We are grabbing all the <p> tags in our HTML document and applying it red color and margin of
3px
color is the property. red is the property value
margin is the property. 3px is the property value
There are numerous other values you can use to apply correct styles to your web page.

.class

Selects all elements with given class name

It will select all p with class="myClass"
Write a period (.) character, followed by the name of the class

<p class="myClass">This is a paragraph</p>

.myClass {
background-color: yellow;

18 / 85
NgNinja Academy | All Rights Reserved

child .class

You can target child element using a class hierarchy

// syntax

.parent .child {
background-color: yellow;
}

You have to write parent class name followed by a space, and then followed by the child's class
name
Below example will add background-color: yellow to the paragraph

<div class="parent">
<p class="child">This is a paragraph</p>
</div>

.parent .child {
background-color: yellow;
}

19 / 85
NgNinja Academy | All Rights Reserved

#id

Style the element with given id attribute

In below example myParagraph is the id of the paragraph
We select the elements by adding # followed by the id attribute of the element

<p id="myParagraph">This is a paragraph</p>

#myParagraph {
background-color: yellow;
}

element tag

You can directly select an element by its tag name and apply the styles
In this case you don't have to mention id or the class - simply write the element name in your
styles and add properties to it
Below example will grab all the p elements and apply the style to it

<p>This is a paragraph</p>

p {
background-color: yellow;

20 / 85
NgNinja Academy | All Rights Reserved

Mix n match

Above mentioned selectors are basic and most common ways to select elements and apply the
styles
You can also mix and match any of the above selectors to apply the styles

Id and Class
id="myParagraph" forms the Id selector
class="myClass" forms the class selector

<p id="myParagraph" class="myClass">This is a paragraph</p>

#myParagraph.myClass {
background-color: yellow;
}

Element and Class

p is used as element selector
class="myClass" forms the class selector

<p class="myClass">This is a paragraph</p>

21 / 85
NgNinja Academy | All Rights Reserved

p.myClass {
background-color: yellow;
}

22 / 85
NgNinja Academy | All Rights Reserved

Advanced Selectors

adjacent selector

Selects only the element which is preceded by the former element

In this case, only the rst paragraph after each ul will have red text

ul + p {
color: red;
}

attributes selector

Will only select the anchor tags that have a title attribute

a[title] {
color: green;
}

23 / 85
NgNinja Academy | All Rights Reserved

Will style all anchor tags which link to http://ngninja.com

a[href="http://ngninja.com"] {
color: #1f6053; /* ngninja green */
}

Star designates that the proceeding value must appear somewhere in the attribute's value
This covers ngnin.com, ngninja.com, and even inja.com

a[href*="in"] {
color: #1f6053; /* ngninja green */
}

Attribute "contains" value

Needs to be whole word

[title~="cat"] {
border: 5px solid yellow;
}

<img src="cat1.jpg" title="small cat" width="150" height="113"> //

selected
<img src="cat2.gif" title="catssss" width="224" height="162"> // NOT
selected
<img src="dog.gif" title="dog" width="200" height="358"> // NOT selected

Attribute "contains" value

Does NOT have to be whole word

24 / 85
NgNinja Academy | All Rights Reserved

[title*="cat"] {
border: 5px solid yellow;
}

<img src="cat1.jpg" title="small cat" width="150" height="113"> //

selected
<img src="cat2.gif" title="catssss" width="224" height="162"> // selected
<img src="dog.gif" title="dog" width="200" height="358"> // NOT selected

Attribute "starts with" value

The value HAS to be a whole word
Either whole word
Or word followed by -

[title|="cat"] {
border: 5px solid yellow;
}

<img src="cat1.jpg" title="cat-like small" width="150" height="113"> //

selected
<img src="cat2.gif" title="cat" width="224" height="162"> // selected
<img src="dog.gif" title="dog" width="200" height="358"> // NOT selected

Attribute "starts with" value

The value DOEST NOT have to be a whole word

[title^="ca"] {
border: 5px solid yellow;
}

<img src="cat1.jpg" title="cat-like small" width="150" height="113"> //

selected
<img src="cat2.gif" title="cat" width="224" height="162"> // selected
<img src="dog.gif" title="dog" width="200" height="358"> // NOT selected

25 / 85
NgNinja Academy | All Rights Reserved

Attribute "ends with" value

The value DOEST NOT have to be a whole word

[title$="at"] {
border: 5px solid yellow;
}

<img src="cat1.jpg" title="cat-like small" width="150" height="113"> //

NOT selected
<img src="cat2.gif" title="cat" width="224" height="162"> // selected
<img src="dog.gif" title="dog" width="200" height="358"> // NOT selected

26 / 85
NgNinja Academy | All Rights Reserved

Backgrounds

You can set di erent background of your elements

Background of an element is the total size of the element, including padding and border (but not
the margin)
Below is the list of all the background properties

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

You can set all the properties using one declaration

These are some of the most commonly used background properties
It adds lightblue background-color
It adds myImage.png background image
It set no-repeat background meaning it will not repeat the background image
It is defaulted to repeat both vertically and horizontally
It sets center background-position

body {
background: lightblue url("myImage.png") no-repeat center;
}

27 / 85
NgNinja Academy | All Rights Reserved

Colors

The color property speci es the color of the text

You can specify the color property on di erent elements by using di erent types of selectors
You can specify colors by its name, it's hex value or its RGB value

h1 {
color: red;
}

h1.myClass {
color: #02af00;
}

h1#myId {
color: rgb(111,111,111);
}

Borders

You can add borders to your HTML elements

Below is the list of all the border properties

border-width
border-style (required)
border-color

In below example

28 / 85
NgNinja Academy | All Rights Reserved

5px is the border width

solid is the border style
Other examples are dotted, double, dashed
red is the border-color
You can specify colors by its name, it's hex value or its RGB value

h1 {
border: 5px solid red;
}

Fun with Border Radius

Shapes

Borders also take another property called border-radius using which you can give di erent
shapes to your elements

In the above illustration we have a square on the left and circle on the right
29 / 85
NgNinja Academy | All Rights Reserved

If you provide border-radius of 50% it will turn your square into a circle

.square {
border-radius: none;
}

.circle {
border-radius: 50%;
}

Shorthand

If one value is set, this radius applies to all 4 corners.

If two values are set, the rst applies to top-left and bottom-right corner, the second
applies to top-right and bottom-left corner.
If three values are set - the second value applies to top-right and also bottom-left.
If four values apply to the top-left, top-right, bottom-right, bottom-left corner (in
that order).

30 / 85
NgNinja Academy | All Rights Reserved

<div class="card one">

<h1 class="">One</h1>
</div>
<div class="card two">
<h1 class="">Two</h1>
</div>
<div class="card three">
<h1 class="">Three</h1>
</div>
<div class="card four">
31 / 85
NgNinja Academy | All Rights Reserved

// all 4 corners
.one {
border-radius: 50%;
}

// 10% top-left and bottom-right, 20% top-right and bottom-left

.two {
border-radius: 10% 20%
}

// 10% top-left, 20% top-right and also bottom-left, 30% bottom-right

.three {
border-radius: 10% 20% 30%;
}

// top-left, top-right, bottom-right, bottom-left corner (in that order)

.four {
border-radius: 10% 20% 30% 40%;
}

.card {
border: 10px solid #E53038;
height: 100px;
width: 100px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

Circle and leaf

32 / 85
NgNinja Academy | All Rights Reserved

Circle

.circle {
border-radius: 50%;
}

Leaf

.leaf {
border-radius: 5px 20px 5px;
33 / 85
NgNinja Academy | All Rights Reserved

34 / 85
NgNinja Academy | All Rights Reserved

Module 3 - Display and

position your elements

Box model

Imagine box that wraps around every HTML element

This refers to the box model
It has margins, borders, paddings and the actual content
Everything in a web page is a box where you can control size, position, background, etc.

div {
width: 320px;
padding: 10px;
35 / 85
NgNinja Academy | All Rights Reserved

border: 5px solid gray;

margin: 0;
}

320px (width)

- 20px (left + right padding)

- 10px (left + right border)
- 0px (left + right margin)
= 350px

Total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border +
right border + left margin + right margin

Total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border
+ bottom border + top margin + bottom margin

Margins

36 / 85
NgNinja Academy | All Rights Reserved

Margins are used to create space around elements - outside its border

<div>
<p class="myParagraph">My Paragraph</p>
</div>

// styles

.myParagraph {
margin: 20px;
}

margin: 20px; gives the p element margin of 20px around it from all the sides

Margin On Individual Sides

You can also give margin to the elements on any particular side if you'd want

margin-top
margin-right
margin-bottom
margin-left

Margin Shorthands

37 / 85
NgNinja Academy | All Rights Reserved

This shortcut can be used to give margin on all the sides

p {
margin: 20px;
}

The example below gives margin 20px top and bottom

And give margin 40px left and right

p {
margin: 20px 40px;
}

The example below give margin 20px top

And give margin 40px left and right
And give margin 50px bottom

p {
margin: 20px 40px 50px;
}

Auto Margin

38 / 85
NgNinja Academy | All Rights Reserved

auto value of margin sets the element horizontally center within its container
Below div will take 200px width and remaining space will be split equally between left and right
margin

div {
width: 200px
margin: auto;
}

Paddings

Paddings are used to generate space around the given element's content - inside its border

<div class="myDiv">
<p>My Paragraph</p>
</div>

// styles

.myDiv {
padding: 20px;
}

padding: 20px; gives the div element padding of 20px

So, basically there will be 20px space between p and div on all the sides

39 / 85
NgNinja Academy | All Rights Reserved

Padding On Individual Sides

You can also give padding to the elements on any particular side if you'd want

padding-top
padding-right
padding-bottom
padding-left

Padding Shorthands

To give padding on all the sides

div {
padding: 20px;
}

The below example give padding 20px top and bottom

And give padding 40px left and right

div {
padding: 20px 40px;
}

40 / 85
NgNinja Academy | All Rights Reserved

The below example give padding 20px top

And give padding 40px left and right
And give padding 50px bottom

div {
padding: 20px 40px 50px;
}

41 / 85
NgNinja Academy | All Rights Reserved

Display

Block

This property stretches the element left to right as far as it can

Default is block for div, p, form, header, footer, section (and some more)
Such elements cannot be placed on the same horizontal line with any other display modes
Except when they are oated
Like shown in the illustration -> every item stretches and uses up the entire row

Inline

Inline element sits in line

Without disrupting the ow of other elements
Like shown in the illustration -> every item takes up only the space it needs
Item wraps to the next row if there is no enough space
span, em, b are examples of inline elements
They take only width needed for it
They do not honor vertical padding
No width
No height
They just ignores them
Horizontal margin and padding are honored
Vertical margin and padding are ignored

42 / 85
NgNinja Academy | All Rights Reserved

Inline-block

This is just like inline element

BUT they will respect the width and height
Basically, they combine the properties of both block elements and inline elements
The element can appear on the same horizontal line as other elements
So, like the illustration shows if you set width you can t all the items together in a single row

None

These elements will not appear on the page at all

But you can still interact with it through DOM
NO space allocated on the page

Visibility Hidden

Space is allocated for it on the page

Tag is rendered on the DOM
The element is just no visible

div {
visibility: hidden;
}

Flex

43 / 85
NgNinja Academy | All Rights Reserved

Flex property gives ability to alter its item's width/height to best ll the available space
It is used to accommodate all kind of display devices and screen sizes
Fills available space
Or shrink to prevent over ow

44 / 85
NgNinja Academy | All Rights Reserved

Positions

Static

It is the default for every element

Honestly, it doesn't mean much
It just means it will ow into the page as it normally would
As shown in the illustrations blocks just falls in their default position
Use it when you want to remove forcefully applied position to the element
NOTE: z-index does not work on them

Relative

45 / 85
NgNinja Academy | All Rights Reserved

The element is relative to itself

Check out the example below

.myDiv{
position: relative;
top: 10px;
left: 10px;
}

Now, it will slide down and to the left by 10px from where it would normally be
Please refer the illustration above
Without that "top" property - it would have just followed position: static

Absolute

This property is very powerful

It lets you place element exactly where you want
Using top, left, bottom. and right to set the location
REMEMBER!! - these values are relative to its parent
Where parent is absolute or relative
If there is no such parent then it will check back up to HTML tag and place it absolute to the
webpage itself
So, elements are removed from the " ow" of the webpage
Not a ected by other elements
And it doesn't a ect other elements
NOTE: Its overuse or improper use can limit the exibility of your site

.myDiv{
position: absolute;
top: 10px;

46 / 85
NgNinja Academy | All Rights Reserved

left: 10px;
}

The above div will slide down and to the left by 10px from its parent
Assuming the parent is either absolute or relative positioned

Fixed

Positioned relative to the viewport

Useful in xed headers or footers
Please refer the illustration above for better visualization

.myDiv{
position: fixed;
}

47 / 85
NgNinja Academy | All Rights Reserved

Centering:

Center the line of text using text-align property

<div class="card">
<h2 class="">long paragraph</h2>
<p class="">headline</p>
</div>

P { text-align: center }
H2 { text-align: center }

Center a paragraph block or an image using margin property

This will horizontally center the elements

48 / 85
NgNinja Academy | All Rights Reserved

<div class="card">
<p class="blocktext">
headline
</p>
<img src="https://via.placeholder.com/150" />
</div>

P.blocktext {
margin-left: auto;
margin-right: auto;
width: 50px;
}

IMG {
display: block;
margin-left: auto;
margin-right: auto;
}

.card {
border: 10px solid green;
height: 200px;
width: 200px;
padding: 20px;
}

49 / 85
NgNinja Academy | All Rights Reserved

Centering Vertically

We can use transform property along with setting the top of the element to center it vertically
inside its parent
Please not the parent container has to be positioned relative or absolute to center the child

<div class="container">
<p>This paragraph…</p>
</div>

div.container {
height: 10em;
position: relative;
border: 2px solid blue;
}

div.container p {
margin: 0;
position: absolute;

// 50% here means 50% of the height of the container

top: 50%;

// move the element up by half its own height. '50%' in 'translate(0,

-50%)' refers to the height of the element itself
transform: translate(
0,
-50%
);
}

50 / 85
NgNinja Academy | All Rights Reserved

top: 50%; - 50% here means 50% of the height of the container
transform: translate(0, -50%);
this will move the element up by half its own height.
50% in translate(0, -50%) refers to the height of the element itself

51 / 85
NgNinja Academy | All Rights Reserved

CSS Float

Element can be pushed to the left or right

Other elements can wrap around it
It is used for positioning and formatting content
Used with images and text which wraps around them

left - The element floats to the left of its container

right - The element floats to the right of its container
none - The element appears in its default position
inherit - The element inherits the float value of its parent

.myImage1 {
float: left;

52 / 85
NgNinja Academy | All Rights Reserved

.myImage2 {
float: right;
}

Please refer the above code and the illustration to get better visualization
We have de ned two p tags and an img tag inside each paragraph elements
We then set float: left; on myImage1
This pushes the image to the left and text to the right
And set float: right; on myImage2
This pushes the image to the right and text to the left

Clearing Floats

Used to control behavior of oating elements

Clear is used to stop wrap of an element around a oating element

Floats are headache when they are not cleared properly

Problem1:

There are 2 sections side by side

You oat LHS section..
The LHS section height is not does not match the RHS section

============
| LHS | RHS|
| |=====
| |
=======

53 / 85
NgNinja Academy | All Rights Reserved

problem2:
parent collapses when children are oated

===========
parent
===========

============
| LHS | RHS|
| | |
============

<div class="parent">
<div class="lhs" >
// float left
</div>
<div class="rhs">
// float left
</div>
</div>

// Fix:

==================
parent

============
| LHS | RHS|
| | |
============

===================

<div class="parent">
<div class="lhs" >
// float left
</div>
<div class="rhs">
// float left
</div>
<div style="clear:both"></div>
</div>

54 / 85
NgNinja Academy | All Rights Reserved

Methods to clear oat:

clear
takes in 3 values. left, right or both
used for problem 1
overflow:hidden
great for ensuring parent does not collapse
this prop is set to parent
used for problem 2
clearfix
its a hack.. it uses pseudo elements... and clear both property together
prop set to the parent
used for problem 2

55 / 85
NgNinja Academy | All Rights Reserved

Module 4 - Semantic HTML5

Semantic HTML?

It is a coding style
Semantic elements == elements with a meaning
Good for SEO
Good for accessibility
Especially for visually impaired people
Which rely on browser speech, screen readers to interpret page content clearly

Check out the image above

Every semantic element clearly describes its meaning to both the browser and the developer
Avoid using simple div tags everywhere. It does not clearly express the intention.
Use elements like header, nav, section, article, aside, footer
All these elements are built with speci c purpose - they are good for SEO too
56 / 85
NgNinja Academy | All Rights Reserved

More about Semantic HTML

<b></b> for bold, and <i></i> for italic should not be used
They are just formatting
They do not provide indication of meaning and structure
Use <strong></strong> and <em></em>
Provide meaning ---> emphasis for example
Non-semantic elements: <div> and <span> - Tells nothing about its content
Semantic elements: <form>, <table>, and <article> - Clearly de nes its content

Di erence between HTML and HTML5?

HTML

Simple language for laying out text and images on a webpage

HTML 5

More like an application development platform

A new standard for HTML
Better support for audio, video, and interactive graphics
Supports o ine data storage
More robust exchange protocols
Proprietary plug-in technologies like Adobe Flash, Microsoft Silverlight no longer needed
Because browsers can process these elements without any external support

Below are new semantic elements

57 / 85
NgNinja Academy | All Rights Reserved

- <article>, <aside>, <command>, <details>, <figure>, <figcaption>,

What elements have disappeared in the latest HTML?

- <frame> and <frameset>

- <noframe>, <applet>, <bigcenter> and <basefront>

Di erence between <div> and <frame>?

div is a generic container for grouping and styling

frame actually divides the page
frame is no longer popular
iframes are used instead
exible
embed third-party elements like YouTube video

58 / 85
NgNinja Academy | All Rights Reserved

What is HTML5 Web Storage?

With HTML5, browsers can store data locally

It is more secure and faster than cookies
You are able to store large information -> more than cookies
They are name/value pairs
2 objects
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the tab is closed)

localStorage:

Stores the data with no expiration date

Data is NOT deleted when browser is closed
Available the next day, week, or year
It's not possible to specify expiration
You can manage its expiration in your app

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");

sessionStorage:

59 / 85
NgNinja Academy | All Rights Reserved

Stores the data for only one session

Data deleted when browser is closed

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}

document.getElementById("result").innerHTML = "You have clicked the button

" +
sessionStorage.clickcount + " time(s) in this session.";

60 / 85
NgNinja Academy | All Rights Reserved

Module 5 - Flexbox intro and

media query

Flexbox

It provides e cient way to lay out, align and distribute space among items in a container
The main idea - give the container the ability to alter its items' width/height (and order) to best ll
the available space

Flex box container properties

display: flex
de nes a ex container
flex-direction: row | row-reverse | column | column-reverse;
establishes main axis
de nes the direction of children placement
flex-wrap: nowrap | wrap | wrap-reverse;
allow items to wrap or nowrap as needed
justify-content
de nes the alignment along the main axis
X-axis for row, Y-axis for column
align-items
de nes the alignment along the cross axis
Y-axis for row, X-axis for column - opposite of justify-content
children properties

61 / 85
NgNinja Academy | All Rights Reserved

Flex box item properties

order: <integer>; /* default is 0 */

order in which the ex item appear inside the ex container
flex-grow: <number>; /* default 0 */
de nes the ability for a ex item to grow if necessary
accepts a unitless value that serves as a proportion
flex-shrink: <number>; /* default 1 */
de nes the ability for a ex item to shrink if necessary
flex-basis: <length> | auto; /* default auto */
de nes the default size of an element before the remaining space is distributed
can be a length (e.g. 20%, 5rem, etc.) or a keyword
auto keyword means "look at my width or height property"
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
shorthand for ex-grow, ex-shrink and ex-basis combined
default is 0 1 auto
recommended that you use this shorthand property rather than set the individual properties
shorthand sets the other values intelligently
align-self
allows the default alignment to be overridden for individual item
overrides container's align-items property

Flexbox Examples

This is the boilerplate code we will use to demonstrate how ex box works

.flex-container {
display: flex;

62 / 85
NgNinja Academy | All Rights Reserved

padding: 20px;
margin: 0;
list-style: none;
background: orange;
}

.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}

This is how the output looks for the above code

.flex-container {
display: flex;
flex-direction: column;
}

63 / 85
NgNinja Academy | All Rights Reserved

.flex-container {
display: flex;
flex-direction: column-reverse;
}

.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
}

64 / 85
NgNinja Academy | All Rights Reserved

.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.first {
order: 1;
}

.second {
order: 2;
}

.third {
order: 3;
}

65 / 85
NgNinja Academy | All Rights Reserved

.first {
flex-grow: 1;
}

.second {
flex-grow: 2;
}

.third {
flex-grow: 3;
}

.first {
flex-basis: 500px;
}

66 / 85
NgNinja Academy | All Rights Reserved

67 / 85
NgNinja Academy | All Rights Reserved

Media queries

It was introduced in CSS3

It uses @media rule to include CSS only if a certain condition is true

Media queries allow you to target any platform you desire and write speci c styles for that
platform
This is how you write responsive styles
Di erent styles for desktops vs tablets vs mobiles
Simple example below

// If the browser window is smaller than 500px, the background color will
change to lightblue:

@media only screen and (max-width: 500px) {

body {
background-color: lightblue;
}
}

Below are the breakpoints for targeting devices of your interest

/* Extra small phones */

68 / 85
NgNinja Academy | All Rights Reserved

@media only screen and (max-width: 600px) {

/* Portrait tablets and large phones */

@media only screen and (min-width: 600px) {

/* Landscape tablets */
@media only screen and (min-width: 768px) {

/* Laptops/desktops */
@media only screen and (min-width: 992px) {

/* Large laptops and desktops */

@media only screen and (min-width: 1200px) {

Always Design for Mobile First

It means style for mobiles rst

Then include desktop styles in media queries

/* Default styles for mobile phones */

.mobile-styles {
width: 100%;
}

/* Styles for desktop in media queries */

@media only screen and (min-width: 768px) {

69 / 85
NgNinja Academy | All Rights Reserved

/* Style For desktop: */

.desktop-styles {
width: 100%;
}
}

Orientation: Portrait / Landscape

These are queries which apply depending on the orientation of browser/device

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}

70 / 85
NgNinja Academy | All Rights Reserved

Let's talk about the sizes - px vs em vs rem

Pixels are ignorant, avoid using them

If you’re setting all of your font-sizes, element sizes and spacing in pixels, you’re not treating the
end user with respect.

Users will have to zoom in and out with ctrl plus +/- depending on the device they are on

REMs are a way of setting font-sizes based on the font-size of the root HTML element

Allows you to quickly scale an entire project by changing the root font-size

em is relative to the font size of its direct or nearest parent

When you have nested styles it becomes di cult to track ems

This is what REMs solve - the size always refers back to the root

Both pixels and REMs for media queries fail in various browsers when using browser zoom, and
EMs are the best option we have.

How to calculate PX from REM

EX: HTML font-size is set to 10px, paragraph font-size is set to 1.6rem

Then size in pixels is - 1.6rem * 10px = 16px

Both rem and em are relative units

rem is only relative to the HTML (root) font-size
rem is popularly used for margins, paddings, and sometimes font-sizes too
71 / 85
NgNinja Academy | All Rights Reserved

em is relative to the font size of its direct or nearest parent

em are encouraged to be used for media queries

72 / 85
NgNinja Academy | All Rights Reserved

CSS Grids

Flexbox

Flexbox is 1 dimension
Its either columns OR rows
Complext 2-dimensional layouts not possible

Grids

It is a grid based layout system

CSS Grids are 2 dimensional
You can a ect columns and rows simultaneously

TIP: You can use Grid and Flexbox together.

Example

Let's check out the example below

Create a wrapper DIV

display: grid; de nes the DIV as Grid

Then we create 2 rows

Each has 2 columns

First column -> 70% of the space

73 / 85
NgNinja Academy | All Rights Reserved

Second column -> 30% of the space

grid-template-columns: 70% 30%; de nes these two column

<div class="wrapper">
// first row
<div>70%</div>
<div>30%</div>

// second row... you don't have to specify rows like bootstrap

.wrapper {
display: grid;

// this will split children into 2 rows of 70% and 30%

grid-template-columns: 70% 30%;
}

Example #2 - Gaps

Here we create 3 columns

40% 30% 30% respectively

grid-column-gap - used to give margin between columns

grid-row-gap - used to give margin between rows

grid-gap - used to give margin between rows and columns using single command

74 / 85
NgNinja Academy | All Rights Reserved

.wrapper {
display: grid;
grid-template-columns: 40% 30% 30%; // 3 columns in 1 row
grid-column-gap: 1em; // margin between columns
grid-row-gap: 1em; // margin between row
grid-gap; 1em; // row and column both!!!
}

Example #3 - Fractions

You don't have to spend time calculating percentages

You can simply use "fractions"

3 DIVS with same width

grid-template-columns: 1fr 1fr 1fr;

3 DIVS
Total space will be divided by 4
ex: 80 / 4 = 20px
1st and 3rd DIV will take 20px space
2nd DIV will take 40px space

grid-template-columns: 1fr 2fr 1fr;

75 / 85
NgNinja Academy | All Rights Reserved

Example #4 - Fractions Contd.

You can use repeat() function instead of manually repeating the column sizes

Below property will create 4 columns

Each column width is 1fr

grid-template-columns: repeat(4, 1fr);

TIP: fractions are recommended over pixels or %

Extended example below

.wrapper {
display: grid;

// 3 columns in 1 row
// divide into fractions...
grid-template-columns: 1fr 2fr 1fr;

// it will repeat fractions 4 times

grid-template-columns: repeat(4, 1fr 2fr);

grid-auto-row: 100px; // row height will be 100px

grid-auto-row: minmax(100px, auto); // min height = 100px max height =
auto based on content

76 / 85
NgNinja Academy | All Rights Reserved

Nested grids

You can also de ne nested Grids

// now the nested div is also a grid container

.nested {
display: grid;
grid-template-columns: repeat(3, 1fr); // 3 columns of 1 fr
grid-auto-rows: 100px;
}

Start-End points of Grid

77 / 85
NgNinja Academy | All Rights Reserved

We can also specify start and end points of the grid columns and rows
If you use this you may not want to specify sizes
Check out the inline descriptions

// wrapper is grid container... of 4 columns in this example!!!

.box1 {
grid-column: 1/3; // box1 spans from 1 to 3 columns on browser window
grid-row: 1/3; // box1 spans from 1 to 3 rows on browser window
}

.box2 {
grid-column: 3; // box2 spans takes spaces 3 and 4
grid-row: 1/3; // same as box1
}

.box3 {
grid-column: 2/4; // box3 will take space 2 to 4
grid-row: 3; // it will take row space 3
}

// NOTE: in grids... we can overlaps things.. like below

// overlaps 1 and 3
// Sooo... you don't need negative margins and that crap CSS!!!
.box4 {
grid-column: 1;
grid-row: 2/4;
}

78 / 85
NgNinja Academy | All Rights Reserved

Module 6 - Quirks, tips, and

tricks

FOUC

Flash of un-styled content

Happens when for a brief moment -> content is displayed with browser's default styles
Happens when CSS is not loaded but the content is loaded

How to avoid it?

You can use CSS to hide BODY

Then when CSS is loaded then using JS -> set body to visible
But note, if JS is disabled -> then users won't see anything ever!!!

Use JS to hide body

And when JS and CSS are loaded -> use JS only to make body visible
Write that JS code in HEAD -> so as soon as it is hit, HTML is hidden
And when document is ready -> then show the HTML again

79 / 85
NgNinja Academy | All Rights Reserved

<html>
<head>
<!— Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(document).ready(function() { // EDIT: From Adam Zerner's
comment below: Rather use load: $(window).on('load', function () {...});
$('html').show(); // EDIT: Can also use
$('html').removeClass('hidden');
});
</script>
</head>
<body>
<!— Body Content -->
</body>
</html>

80 / 85
NgNinja Academy | All Rights Reserved

BEM naming convention

Blocks, Elements, Modi ers -> BEM

Naming convention to write styles so that everyone on your team understands the convention
Blocks
Represents standalone entity that is meaningful on its own
Parent level elements
Class name selector only
No tag name or ids
<ul class="nav"></ul>
Elements
Children of parent level components
They usually don't have any standalone meaning
Any DOM node within a block can be an element
Class name selector only
No tag name or ids
<li class="nav__item"></li>
2 underscores -> it tells that item is child of nav
Modi ers
Use them to change appearance, behavior or state
You can add it to blocks or elements
Keep the original "block" or "element" styles as it is - add new modi er class
Ex below - separate element nav__item class and separate modi er nav__item—-active
class
<li class="nav__item nav__item—-active"></li>
2 hyphens -> it tells that active is modi er class

81 / 85
NgNinja Academy | All Rights Reserved

<li class="nav__item">Home</li>
<li class="nav__item nav__item—-active">About</li> // active modifier
applied
</ul>

OOCSS - Object Oriented CSS

Standard to structure your CSS in a modular fashion

Can reuse CSS seamlessly
Meaning above NAV CSS can be used in any container -> section, page, dialog
It follows a component based approach
It enables us to abstract common styles together
Reduces duplication of the styles

// basic example

.global {
width: 980px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}

.header {
height: 260px;
}

.main {
background-color: gray;
}

.footer {
height: 100px;
background-color: blue;
}

82 / 85
NgNinja Academy | All Rights Reserved

<div class="main global">

// your code
</div>

CSS User Agent Styles

These are browser styles

When browser renders a page it applies basic styles before you’ve even written a single style
Each browser has its speci c styles di erent from other browsers
It causes an inconsistency problem
To solve this problem:
Normalize CSS approach and the CSS Reset approach
Normalize CSS as a gentle solution
Reset CSS as a more aggressive solution

83 / 85
NgNinja Academy | All Rights Reserved

Normalizing CSS

Small CSS le that provides cross-browser consistency

Provides default styles for HTML elements
Make sure that all HTML elements renders the same way in ALL browsers - same padding, margin,
border, etc..
In some cases this approach applies IE or EDGE styles to the rest of the browsers

Reset CSS

This approach says that we don’t need the browsers’ default styles at all
We’ll de ne in the project according to our needs
CSS Reset resets all of the styles that come with the browser’s user agent
Grab sample CSS reset here
The problem with CSS Resets is that they are ugly and hard to debug
Solution - use Normalize CSS with little bit of CSS Reset
Unlike an ordinary CSS reset, target speci c HTML tags’ styles rather than making a big list of tags.
Make it less aggressive and a lot more readable

Validate your CSS

Use online tools to validate your CSS

Validation Service can be used to check the correctness (validity)
You might get important insights on what you are missing
It Helps Cross-Browser, Cross-Platform and Future Compatibility
Validating your web page does not ensure that it will appear the way you want it to.
It merely ensures that your code is without HTML or CSS errors.
Tool - The Validation Service

84 / 85
NgNinja Academy | All Rights Reserved

Testing Strategies

Do cross-browser testing
Manually test Chrome, refox
Then manually test IE, Edge
Then use tools like ..for compatibilities
browsershots.org
IEtest

Conditional CSS

Use below conditional CSS for IE hacks

<link type="text/css" href="style.css" />

<!—[If IE]>
<link type="text/css" href="IEHacks.css" />
<![endif]-->

<!—[if !IE]>
<link type="text/css" href="NonIEHacks.css" />
<![endif]-->

85 / 85
NgNinja Academy | All Rights Reserved

JavaScript

Table Of Content

Module 1 - JavaScript Basics

Who created JavaScript?
What is JavaScript
Why do you love JavaScript?
Your rst "hello world" program
Run just JavaScript
Variables
Data Types in JavaScript
Basic Operators
Special Operators
Fun with Operators
JavaScript as Object-Oriented Programming language
Polymorphism Example in JavaScript
Module 2 - Conditionals and Collections
Conditionals
If Else Condition
Ternary Operator
Advanced Ternary
Switch Statements
truthy and falsy values in JavaScript
For Loop
For-In loop
For-Of loop
While loop
Do-While loop
Map Reduce Filter
Map
Reduce

1 / 92
NgNinja Academy | All Rights Reserved

Filter
Module 3 - JavaScript Objects and Functions
JavaScript Object Basics
Access Object Value
JavaScript Functions
Example Function
Invoke Function
Local variables
Function Expressions
Scoping in JavaScript
Two Types
Examples
Example: JavaScript does not have block scope
Constructor Functions
The this keyword
this with example
More this examples
The new Operator
Understand with example
Example of creating an object with and without new operator
WITHOUT new operator
WITH new operator
Interview Question: What is the di erence between the new operator and Object.create
Operator
new Operator in JavaScript
Object.create in JavaScript
Module 4 - Prototypes and Prototypal Inheritance
JavaScript as Prototype-based language
What is a prototype?
Example of Prototype
What is Prototypal Inheritance?
Understand Prototypal Inheritance by an analogy
Why is Prototypal Inheritance better?
Example of Prototypal Inheritance
Linking the prototypes
Prototype Chain
How does prototypal inheritance/prototype chain work in above example?
Module 5 - Advanced JavaScript (Closures, Method Chaining, etc.)
Hoisting in JavaScript
Another example
We get an error with Function Expressions
JavaScript Closures
Closure remembers the environment
IIFE
What is happening here?
Closure And IIFE

2 / 92
NgNinja Academy | All Rights Reserved

JavaScript call() & apply() vs bind()?

bind
Example using bind()
call()
apply
Asynchronous JavaScript
Callback Function
Simple example
Example callback in asynchronous programming
Promises
Explanation via Example
Promise.all
Async-await
Explanation via Example
Handle errors using async-await
Module 6 - Next Generation JS - ES6 and Beyond
JavaScript Classes
Class methods
Class vs Constructor function
Using Function - ES5 style
Using Classes - ES6+ Style
let and const and Block scope
let
Example of let
const
Tricky const
Arrow Functions
Another example
Lexical this
Example of lexical this

3 / 92
NgNinja Academy | All Rights Reserved

Module 1 - JavaScript Basics

Who created JavaScript?

Brendan Eich when working at NetScape

It was created in 10 days

What is JavaScript

JavaScript is an interpreted language

It means it doesn't need a compiler
It executes instructions directly without compiling
It is platform independence, dynamic typing
The source code is evaluated JUST before executing it
It is open-source and cross-platform compatible
It is created by NetScape
It has object-oriented capabilities

Why do you love JavaScript?

It is easy to start using

JavaScript can be used on any platform
It performs well on every platform
You can build web, IOT, mobile apps using JavaScript

4 / 92
NgNinja Academy | All Rights Reserved

It can be used on the Frontend, Backend, and also in the databases like MongoDB
It is dynamic in nature ex: objects and arrays can be of mixed types

5 / 92
NgNinja Academy | All Rights Reserved

Your rst "hello world" program

Write the below HTML code in index.html le and open it in browser

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
console.log("Hello World");
</script>
</body>
</html>

JavaScript code is written in between the script tag in the above code.
When the page loads the browser will run the code between the script tag.
alert() function will be called which will create a model with hello world text on it.

Congratulation! You just wrote your rst JavaScript program

Run just JavaScript

Instead of creating your own HTML le you can use online IDE as a JavaScript playground

My favorite ones are:

6 / 92
NgNinja Academy | All Rights Reserved

Code Sandbox
PlayCode

Or you can also run JavaScript programs in VSCode

You need too install Node on your machine

Run hit cmd + shift + p on Mac, ctrl + shift + p on Windows / Linux

Type "Tasks: Con gure Task"

Type "echo"

And replace your task.json le with below code

Then everytime you want to JavaScript program hit hit cmd + shift + p on Mac, ctrl
+ shift + p on Windows / Linux

Type "Tasks: Run Task"

Type "Show in console"

// task.json

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
},
{
"label": "Show in console",
"type": "shell",
"osx": {
"command": "/usr/local/opt/node@10/bin/node ${file}"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}

7 / 92
NgNinja Academy | All Rights Reserved

8 / 92
NgNinja Academy | All Rights Reserved

Variables

Variables are containers

They store data values
For ex: var x = 5
5 is the value stored in variable x
In programming, just like in mathematics, we use variables to hold values

Look at the illustration above

var is the keyword used to declare a variable
In JavaScript you can also use const or let
If you don't use any keyword - the variable will be declared in a global scope
foo is the name of the variable
Basically you give a name to some value
11 is the value you are storing in variable foo
This value can be anything you'd like
number, string, object, function - anything

// More examples

var x = 10 // number variable

var x = "hi" // string variable

9 / 92
NgNinja Academy | All Rights Reserved

Data Types in JavaScript

Values used in your code can be of certain type - number or string for example
This type is called data type of the language
Data Types supported in JavaScript are: Number, String, Boolean, Function, Object,
Null, and Undefined
They are categorized as primitive or non-primitive data types
Check the illustration below

Unlike Java or C#, JavaScript is a loosely-typed language

No type declarations are required when variables are created
Data Types are important in a programming language to perform operations on the variables

// Data Types examples

var x = 10 // number variable

var x = "hi" // string variable
var x = true // boolean variable
function x { // your function code here } // function variable
var x = { } // object variable
var x = null // null variable
var x // undefined variable

10 / 92
NgNinja Academy | All Rights Reserved

11 / 92
NgNinja Academy | All Rights Reserved

Basic Operators

= operator is used to assign value to a variable

ex: var x = 10 - variable x is assigned value 10
+ operator is used to add numbers
ex: var x = 10 + 5 - variable x is now 15
+ operator is also used to concatenate two strings
ex: var x = "hi" + "there" - variable x is now hithere
- operator is used to subtract numbers
ex: var x = 10 - 5 - variable x value is now 5
* operator is used to multiple numbers
ex: var x = 10 * 5 - variable x value is now 50
/ operator is used to divide numbers
ex: var x = 10 / 5 - variable x value is now 2
++ operator is used to increment value of the variable
ex: var x = 10; x++;- variable x value is now 11
-- operator is used to decrement value of the variable
ex: var x = 10; x--; - variable x value is now 9

Special Operators

typeof operator can be used to return the type of a variable

Use typeof for simple built in types
instanceof operator can be used to check if the object is an instance of a certain object type
Use instanceof for custom types

'my string' instanceof String; // false

typeof 'my string' == 'string'; // true

function() {} instanceof Function; // true

typeof function() {} == 'function'; // true

12 / 92
NgNinja Academy | All Rights Reserved

Fun with Operators

var x = 15 + 5 // 20
var y = "hi"

var z = x + y // 20hi

var y = "hi" + 15 + 5 // hi155

In the rst example

15 + 5 is treated as number operation
When the compiler sees hi it performs string concatenation
So the answer is 20hi
In the second example
JavaScript compiler sees hi string rst so it considers the operands as strings
So the answer is string concatenation hi155

13 / 92
NgNinja Academy | All Rights Reserved

JavaScript as Object-Oriented Programming language

JavaScript has OOP capabilities like Encapsulation, Aggregation, Composition,

Inheritance, and Polymorphism
Aggregation
A "uses" B = Aggregation : B exists independently (conceptually) from A
example:
Let say we have objects: address, student, teacher
We want to specify student address and teacher address
Then we can reuse address between student and teacher
Composition
A "owns" B = Composition : B has no meaning or purpose in the system without A
Inheritance
Inheritance can be implemented in JavaScript like below
class Car { }
class Honda extends Car { }
Douglas Crockford says - "In its present form, it is now a complete object-oriented programming
language."
http://JavaScript.crockford.com/JavaScript.html

Polymorphism Example in JavaScript

We have two classes Car and Bike

Both are Vehicles. Both vehicles move.
But depending on the type of the vehicles they move di erently
ex: Car drives
ex: Bike rides
But from the user's point of view they just have to call move() method
And depending on the type the respective objects will take care of calling the appropriate methods
underneath.

class Car {
14 / 92
NgNinja Academy | All Rights Reserved

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;
}
}

// this would create the appropriate vehicle using the above classes
let vehicle = getVehicle({
type: "bike",
});

vehicle.move(); // ride { type: 'bike' }

vehicle = getVehicle({
type: "car",
});

vehicle.move(); // drive { type: 'car' }

15 / 92
NgNinja Academy | All Rights Reserved

Module 2 - Conditionals and

Collections

Conditionals

You can make decisions in your code using conditional statements

Essentially, they let you write -> if this is true, do this - else do that

16 / 92
NgNinja Academy | All Rights Reserved

The above ow chart can be represented as below in the JavaScript code

// ...your code

if(some-condition == true) {
// execute some code
}
else {
// execute some other code
}

// ... your rest of the code

If Else Condition
17 / 92
NgNinja Academy | All Rights Reserved

var x = 10;

if(x == 10) {
console.log("x is 10")
}
else if(x < 10) {
console.log("x is less than 10)
}
else {
console.log("x is greater than 10)
}

if block is executed if the condition is true

else if block is used to specify additional conditions if the if condition is not satis ed
else block is executed if neither of the prior conditions is satis ed

Ternary Operator

if-else block can be simpli ed and written in lesser verbose code

// using if else

if(x == 10) {
console.log("x is 10")
}
else {
console.log("x is NOT 10")
}

// using ternary

x == 10 ? console.log("x is 10") : console.log("x is NOT 10")

18 / 92
NgNinja Academy | All Rights Reserved

condition ? if-code : else-code is the syntax used for the ternary operator

Advanced Ternary

You can also nest the ternary operators if there are complex conditions

// using if else

if(x <= 10) {

if(x == 10) {
console.log("x is 10")
}
else {
console.log("x is less than 10")
}
}
else {
console.log("x is greater than 10")
}

// using nested ternary

x == 10 ? (x == 10 ? console.log("x is 10") : console.log("x is less than

10") ) : console.log("x is greater than 10")

condition ? nested-ternary : else-code - this is the syntax we used for the above-nested
ternary operation
You can go multiple levels deep into writing nested ternary operator
But it is recommended to keep the ternary operators as simple as possible to keep the code more
readable

19 / 92
NgNinja Academy | All Rights Reserved

Switch Statements

It is another way to write conditional statements

Based on conditions it can perform di erent actions

switch(x) {
case 10:
console.log("x is 10")
break
case 20:
console.log("x is 20")
break
default
console.log("x is NOT 10 nor 20")
}

switch(x) this is where you specify the condition to be evaluated

case 10: this is where you specify if the result of the condition equals this value the block of code
will be executed
break statement is required to break out of switch block.
If not provided it will execute all the following cases until it hits a break keyword or until the
switch block is executed completely.
default case is executed if none of the prior case conditions are met
default case does not have to be the last case in a switch block
default case is not required

20 / 92
NgNinja Academy | All Rights Reserved

truthy and falsy values in JavaScript

Boolean data types are either true or false

But in JS in addition to this, everything else has inherent boolean values
They are falsy or truthy
Following values are always falsy:

// falsy values

false
0 (zero)
"" (empty string)
null
undefined
NaN (a special Number value meaning Not-a-Number)

All other values are truthy

// truthy values

"0" // zero in quotes

"false" // false in quotes
function () {} // empty functions
[] // empty arrays
{} //empty objects

This concept is important because the inherent values can then be used in conditional logic
You don't have to do if(x == false) - you can just do if(!x)

21 / 92
NgNinja Academy | All Rights Reserved

if (x) {
// x is truthy
}
else {
// x is falsy
// it could be false, 0, "", null, undefined or NaN
}

22 / 92
NgNinja Academy | All Rights Reserved

For Loop

Loops are used to run the same code block again and again "for" given number of times

// ... your code

// This loop will be executed 10 times

for (i = 0; i < 10; i++) {
console.log(i)
}

// ... your rest of the code

Check out the illustration above

It checks a condition rst

If the condition is true it will run the code inside the loop

23 / 92
NgNinja Academy | All Rights Reserved

It will continue running the code inside the loop until the condition does not meet anymore

After that the execution will come outside the loop and continue executing the rest of the code

Loops come in handy when working with collections and arrays

Below code will iterate over an array and log all its items

var items = [1,2,3,4]

for (i = 0; i < items.length; i++) {

console.log(items[i]) // 1,2,3,4
}

For-In loop

It is similar to for loop but is used to iterate over an object instead of an array

var myObject = {foo: "Dan", bar: 2};

for (var x in myObject) {

// displays the object keys

console.log(x) // foo, bar

// displays the values of the keys

console.log(myObject[x]) // Dan, 2

24 / 92
NgNinja Academy | All Rights Reserved

For-Of loop

This kind of looping loops through the values of an iterable objects

For ex: array or string
You can directly use the values instead of using index on that array or the string

var items = [1,2,3]

// using simple for loop

for(var i = 0; i < items.length; i++) {

console.log(items[i]) // 1, 2, 3
}

// using for-of loop

for(var x of items) {
console.log(x) // 1, 2, 3
}

While loop

This loop executed a block of code "while" the given condition is true

// This loop will be executed 10 times

var i = 0
while (i < 10) {
console.log(i)

25 / 92
NgNinja Academy | All Rights Reserved

i++
}

NOTE: Remember to terminate the while condition properly. Or else the loop will go into in nity and
it might crash your browser.

Do-While loop

It is similar to the while loop except it executes the block of code rst and then checks for the
condition
This process will repeat until the condition is true

// This loop will be executed 10 times

var i = 0
do {
console.log(i)
i++
} while (i < 10)

Tip: In my experience, I have rarely used this do-while. Most of the time you can get away with
using the for or the while loop.
26 / 92
NgNinja Academy | All Rights Reserved

27 / 92
NgNinja Academy | All Rights Reserved

Map Reduce Filter

Map

It is used for creating a new array from an existing one

It applies the given function to each item in that array

function getSquare(item) {
return item * item
}

const numbers = [1, 2, 3, 4];

const squareOfNumbers = numbers.map(getSquare);
console.log(squareOfNumbers); // [1, 4, 9, 16]

In the above example getSquare method is called for each item in the numbers array
The method returns the square of each number
The result of the .map is a new array with square of each number

Reduce

Similarly to .map - .reduce calls the given method for each element in the array
The result of each method call is passed over to the next method call in the array
This result is called as accumulator
It can anything like a string, number or any object
You can also pass in an initial value of the accumulator as an optional argument

28 / 92
NgNinja Academy | All Rights Reserved

function getSum(result, item) {

return result + item
}

const numbers = [1, 2, 3, 4];

const sumOfNumbers = numbers.reduce(getSum, 0);
console.log(sumOfNumbers); // 10

In the above example getSum method is called for each item in the numbers array
0 is passed as the initial value of the accumulator
result is the variable name of the accumulator
The above .reduce method adds each item in the array and stores that sum in the result
variable
Finally the result is returned to sumOfNumbers

Filter

This method returns a subset of the given array

It executes the given function for each item in the array and depending on whether the function
returns true or false it keeps that element in or lters it out
If true the element is kept in the result array
If false the element is excluded from the result array

function isGreaterThanTwo(item) {
return item > 2
}

const numbers = [1, 2, 3, 4];

var greaterThanTwoArray = numbers.filter(isGreaterThanTwo);
console.log(greaterThanTwoArray); // [3,4]

29 / 92
NgNinja Academy | All Rights Reserved

In the above example isGreaterThanTwo method checks if the value of the given item is greater
than two
The result is a new array with only [3,4] items in it

30 / 92
NgNinja Academy | All Rights Reserved

Module 3 - JavaScript
Objects and Functions

JavaScript Object Basics

JS objects are used to represents real-life objects in most cases

Ex: Person, Vehicle, Monitor
But, you can make an object for practically anything

const foo = {} // foo is an object

Objects are variables

They represent various attributes of a certain entity
person object below represents a Person whose name is "foo" and age is 21
name is the property key
foo is the property value

const person = {
name: "foo",
age: 21
}

31 / 92
NgNinja Academy | All Rights Reserved

Access Object Value

You can access object property value in two ways

1.
console.log(person.name) // foo

2.
console.log(person['age']) // 21

32 / 92
NgNinja Academy | All Rights Reserved

JavaScript Functions

It is a piece of code ideally with a single purpose

It is a wrapper around a piece of code
It provides an abstraction to a block of code
It provides a way to reuse functionality

Example Function

Below is an example of JavaScript function

addMe is the name of the function
a and b are two arguments
JavaScript arguments are dynamic so you can pass it any value
The function addMe returns the sum of two arguments a and b

function addMe(a, b) {
return a + b // The function returns the sum of a and b
}

Invoke Function

Below is how you can invoke the addMe function

1 and 2 are arguments passed to the function which corresponds to a and b respectively
The return value of the function is then stored in the variable sum
return statement is optional

33 / 92
NgNinja Academy | All Rights Reserved

let sum = addMe(1,2)

console.log(sum) // 3

Local variables

You can de ne variables inside the function

In the below example we have just passed in a variable
The function addMe de nes variable b inside the function
Such variables like variable b are called local variables

function addMe(a) {
let b = 2
return a + b
}

let sum = addMe(4)

console.log(sum) // 6

Local variables are not accessible outside the function

function addMe(a) {
let b = 2
return a + b
}

34 / 92
NgNinja Academy | All Rights Reserved

console.log(b) // ERROR - b is not defined

Function Expressions

You can also create functions using another syntax

You can assign an anonymous function to a variable, like below -

var addMe = function(a, b) {

return a + b
}

var sum = addMe(1,2)

console.log(sum) // 3

Please note that the name of the function is assigned to the variable instead of the function
Result of the function remains the same

35 / 92
NgNinja Academy | All Rights Reserved

Scoping in JavaScript

Every variable de ned in JavaScript has a scope

Scope determines whether the variable is accessible at a certain point or not

Two Types

Local scope
Available locally to a "block" of code
Global scope
Available globally everywhere

JavaScript traditionally always had function scope. JavaScript recently added block scope as a
part of the new standard. You will learn about this in the Advanced JavaScript module.

Examples

Function parameters are locally scoped variables

Variables declared inside the functions are local to those functions

// global scope
var a = 1;

36 / 92
NgNinja Academy | All Rights Reserved

function one() {
console.log(a); // 1
}

// local scope - parameter

function two(a) {
console.log(a); // parameter value
}

// local scope variable

function three() {
var a = 3;
console.log(a); // 3
}

one(); // 1
two(2); // 2
three(); // 3

Example: JavaScript does not have block scope

In the below example value of a is logged as 4

This is because JavaScript function variables are scoped to the entire function
Even if that variable is declared in a block - in this case, the if-block
This phenomenon is called as Hoisting in JavaScript

var a = 1

function four(){

if(true){
var a = 4
}

console.log(a) // logs '4', not the global value of '1'

37 / 92
NgNinja Academy | All Rights Reserved

38 / 92
NgNinja Academy | All Rights Reserved

Constructor Functions

Functions used to create new objects are known as constructor functions

Below function Person is a standard function
But the function is used to create a new object called john
Therefore, the Person function by convention is called a constructor function

It is considered good practice to name constructor functions with an upper-case rst letter. It is not
required though.

function Person() {
this.name = "John"
this.age = 21
}

var john = new Person()

The this keyword

The this represents the object (or function) that “owns” the currently executing code.
this keyword references current execution context.
When a JavaScript function is invoked, a new execution context is created.
this in js is di erent than other languages because of how functions are handled
Functions are objects in JavaScript
So we can change the value of this keyword for every function call

39 / 92
NgNinja Academy | All Rights Reserved

this with example

The value of this depends on the object that the function is attached to
In the below example;
getMyAge function belongs to person object
So, this.age represents the person object's age property

const person = {
name: "foo",
age: 21,
getMyAge: function() {
return this.age // 21
}
}

More this examples

Reference to the top-level execution context

In the browser below this represents the window object

function go() { console.debug(this); }

go();

In below example -

var foo = 10; statement declares foo variable on the window object

print(); belongs to window object of browser

40 / 92
NgNinja Academy | All Rights Reserved

So, this.foo returns the value of foo variable on the window object - which is 10

var myObject = { foo : 20}; declares foo property which belongs to myObject object

print.apply(myObject); statement simply makes myObject the owner of the print method

So, this.foo now returns the value of foo variable on the window object - which is 20

NOTE: We will learn more about apply method in Module 5

var myObject = { foo : 20 };

var foo = 10;

function print(){
console.log(this.foo);
}

// This will log window.foo - 10

print(); //

// This will alert myObject.foo which is 20

print.apply(myObject);

41 / 92
NgNinja Academy | All Rights Reserved

The new Operator

It will create a new instance of an object

It can be user-de ned or a builtin type

// built-in type object

var cars = new Array('Honda', 'Audi', 'BMW');

// user-defined object

class Car {
constructor(name) {
this.name = name;
}
}

var car = new Car('Honda')

NOTE: You will learn about JavaScript Classes in Module 6

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

42 / 92
NgNinja Academy | All Rights Reserved

object.prototype property is set to the object's prototype

Understand with example

Car is a constructor function because it is invoked using new keyword

Car function has a eld called name
myCar object is created from the Car function using new keyword
When that is done:
It makes Car the prototype/constructor of myCar
It sets the name eld to Honda
The value of myCar becomes {name:'Honda'}

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

var myCar = new Car('Honda')

console.log(myCar) // {name: "Honda", constructor: "Car"}

Example of creating an object with and without new operator

WITHOUT new operator

this.A = 1; - value of this is unde ned so this statement will throw error
var t = Foo(); - value of t will be unde ned because Foo() function is not returning anything

43 / 92
NgNinja Academy | All Rights Reserved

var Foo = function(){

this.A = 1;
};

var t = Foo();
console.log(t); // undefined

WITH new operator

var m = Foo(); - value of m is { A: 1 } with constructor set to Foo
this.A = 1; - value of this is m object

var Foo = function(){

this.A = 1;
};

var m = new Foo();

console.log(m); // m is { A: 1 }, type of m is Foo

44 / 92
NgNinja Academy | All Rights Reserved

Interview Question: What is the di erence between the new

operator and Object.create Operator

new Operator in JavaScript

This is used to create an object from a constructor function

The new keywords also execute the constructor function

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

var myCar = new Car()

console.log(myCar) // Car {name: "Honda", constructor: Object}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // true
console.log(myCar.constructor) // function Car() {}
console.log(myCar.constructor === Car) // true
console.log(typeof myCar) // object

Object.create in JavaScript

You can also use Object.create to create a new object

But, it does not execute the constructor function
Object.create is used to create an object from another object

45 / 92
NgNinja Academy | All Rights Reserved

const Car = {
name: "Honda"
}

var myCar = Object.create(Car)

console.log(myCar) // Object {}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // ERROR
console.log(myCar.constructor) // Anonymous function object
console.log(myCar.constructor === Car) // false
console.log(typeof myCar) // object

46 / 92
NgNinja Academy | All Rights Reserved

Module 4 - Prototypes and

Prototypal Inheritance

JavaScript as Prototype-based language

JavaScript does not contain "classes" that de nes a blueprint for the object, such as is found in C++
or Java
JavaScript uses functions as "classes"
Everything is an object in JavaScript
In JavaScript, objects de ne their own structure
This structure can be inherited by other objects at runtime

What is a prototype?

It is a link to another object

In JavaScript, objects are chained together by prototype chain

Joe -> Person -> Object -> null

47 / 92
NgNinja Academy | All Rights Reserved

JavaScript objects inherit properties and methods from a prototype

Example of Prototype

Prototype property allows you to add properties and methods to any object dynamically

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

Animal.prototype.age = 10

When object Cat is inherited from object Animal

Then Animal is the prototype object or the constructor of the Cat

var Cat = new Animal('cat')

console.log(Cat) // constructor: "Animal"
console.log(Cat.name) // cat
console.log(Cat.age) // 10

48 / 92
NgNinja Academy | All Rights Reserved

What is Prototypal Inheritance?

In JavaScript object inherits from object - unlike class inheritance in C++ or Java
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.
Object literally links to other objects

Check out the illustration above and refer the code below

function Animal(name) {
this.name = name;
}

Animal.prototype.move = function () {
console.log("move");
};

function Cat(name) {
Animal.call(this, name);
49 / 92
NgNinja Academy | All Rights Reserved

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

Animal object is at the top of the inheritance (for this example)

It has a Animal.prototype property on it
We then have Cat object
To execute a prototypal inheritance we have to link their prototypes
Below is how you do it

Cat.prototype = Object.create(Animal.prototype)

Now Cat.prototype is linked with Animal.prototype

Then we create misty object from Cat

var misty = new Cat('misty')

Now our new misty cat object will inherit all the properties on Animal and Cat object and also the
properties on Animal.prototype and Cat.prototype

console.log(misty); // constructor: "Animal"

console.log(misty.name); // cat
console.log(misty.meow()); // meow
console.log(misty.move()); // move

50 / 92
NgNinja Academy | All Rights Reserved

Understand Prototypal Inheritance by an analogy

You have exam, you need a pen, but you don't have a pen
You ask your friend if they have a pen, but the don't - but they are a good friend
So they ask their friend if they have a pen, they do!
That pen gets passed to you and you can now use it
The friendship is the prototype link between them!

Why is Prototypal Inheritance better?

It is simpler
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

Example of Prototypal Inheritance

function Building(address) {
this.address = address
}

51 / 92
NgNinja Academy | All Rights Reserved

Building.prototype.getAddress = function() {
return this.address
}

function Home(owner, address){

Building.call(this, address)
this.owner = owner
}

Home.prototype.getOwner = function() {
return this.owner
}

var myHome = new Home("Joe", "1 Baker Street")

console.log(myHome)
// Home {address: "1 Baker Street", owner: "Joe", constructor: Object}

console.log(myHome.owner) // Joe
console.log(myHome.address) // 1 Baker Street

Let's de ne accessor methods on the above constructor function

getAddress method is de ned on Building
getOwner method is de ned on Home

// On Building constructor
Building.prototype.getAddress = function() {
return this.address
}

// On Home constructor
Home.prototype.getOwner = function() {
return this.owner
}

var myHome = new Home("Joe", "1 Baker Street")

console.log(myHome.getOwner()) // Joe
console.log(myHome.getAddress()) // ERROR: myHome.getAddress is not a
function

52 / 92
NgNinja Academy | All Rights Reserved

getOwner works correctly

But - getAddress method gives error
That is because we have not linked the prototype of Home to the prototype of Building

Linking the prototypes

We can link the prototype by using Object.create

Now when we call getAddress we get the value correctly as expected

Home.prototype = Object.create(Building.prototype)

console.log(myHome.getOwner()) // Joe
console.log(myHome.getAddress()) // 1 Baker Street

53 / 92
NgNinja Academy | All Rights Reserved

Prototype Chain

In JavaScript, objects are chained together by a prototype chain

If I the object don't have a property or method that is requested -
Then go to the object's prototype and look for it
This process is repeated until JavaScript hits the top-level builtin object - Object

How does prototypal inheritance/prototype chain work in above example?

JavaScript checks if myHome has an getAddress method - it doesn't

JavaScript then checks if Home.prototype has an getAddress method - it doesn't
JavaScript then checks if Building.prototype has an getAddress method - it does
So, JavaScript then calls the getAddress on the Building function

54 / 92
NgNinja Academy | All Rights Reserved

Module 5 - Advanced
JavaScript (Closures,
Method Chaining, etc.)

Hoisting in JavaScript

In JavaScript function declarations and variable declarations are 'hoisted'

Meaning variables can be used before they are declared

From the illustration above - refer the code below

We are logging bar variable to the console
But, the variable bar is de ned AFTER it is being used
In other traditional languages - that would have been an error
But, JavaScript does not throw any error here
But, remember - the value of the variable is still undefined because the value is really assigned on
AFTER it is being logged

55 / 92
NgNinja Academy | All Rights Reserved

console.log(bar) // undefined - but no error

var bar = 1

Another example

// Function declarations

foo() // 1

function foo() {
console.log(1)
}

The variable declarations are silently moved to the very top of the current scope
Functions are hoisted rst, and then variables
But, this does not mean that assigned values (in the middle of function) will still be associated with
the variable from the start of the function

It only means that the variable name will be recognized starting from the very beginning of the
function
That is the reason, bar is undefined in this example

// Variable declarations

console.log(bar) // undefined

var bar = 1

56 / 92
NgNinja Academy | All Rights Reserved

NOTE 1: Variables and constants declared with let or const are not hoisted!

NOTE 2: Function declarations are hoisted - but function expressions are not!

// NO ERROR

foo();

function foo() {
// your logic
}

We get an error with Function Expressions

var foo is hoisted but it does not know the type foo yet

foo(); // not a ReferenceError, but gives a TypeError

57 / 92
NgNinja Academy | All Rights Reserved

var foo = function bar() {

// your logic
}

58 / 92
NgNinja Academy | All Rights Reserved

JavaScript Closures

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

Whenever you see a function keyword within another function, the inner function has access to
variables in the outer function.
That is a closure.

Simply accessing variables outside of your immediate lexical scope creates a closure.
Below example is a closure
Because a is outside the scope of function foo

var a = 42;

function foo() { return a; }

Closures are just using variables that come from a higher scope

Closure remembers the environment

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

59 / 92
NgNinja Academy | All Rights Reserved

In the below example we have a function sayHello

It declares a local variable called hello
It also declares a function variable called log()
And nally, it returns the log() function

So, myClosure variable is now pointing to the log() function

Meaning calling myClosure() function is actually invoking the log() function from the
sayHello() function

And if you see the result - log() functions accurately logs the value of hello variable which was
originally declared in the parent function sayHello()
It means, the log() function has accurately "remembered" the value of the hello variable
This phenomenon is called closure
The value of hello variable is successfully locked into the closure of the log() function

function sayHello() {
var hello = 'Hello, world!';

var log = function() { console.log(hello); }

return log;
}

var myClosure = sayHello();

myClosure(); // ‘Hello, world!’

60 / 92
NgNinja Academy | All Rights Reserved

IIFE

It is called as Immediately Invoked Function Expressions

What is happening here?

(function foo(){

// your code

})()

It is function expression
It is moreover a self-executing function - an IIFE
It wraps the inside members to the scope
It prevents from polluting the global scope
It is useful in closures

Closure And IIFE

sum is a Function expression whose value is an IIFE

So, consequently, the sum is assigned the return value of a self-invoking function

var sum = (function() {

61 / 92
NgNinja Academy | All Rights Reserved

var foo = 20

function bar() {
foo = foo + 10

console.log(foo)
}

return bar

})()

sum() // 30
sum() // 40
sum() // 50

What is happening inside IIFE?

We have de ned foo variable as the local variable inside the function
We also have a function called bar()
And, nally, we return the bar function
So, the function bar is getting assigned to the variable sum

What is happening inside the bar() function?

We are accessing variable foo from the parent scope
And we are incrementing its value by 10 and reassigning the new value back to the variable foo
from the parent scope
And nally, we are logging the new value of the variable foo

The interesting part is, the value of foo is enclosed inside the IIFE which is assigned to sum
And, sum is actually the function bar as you can see below
Every time you call function sum() it updates and remembers the new value of variable foo
Therefore, every call to the function displays the updated value of the foo

console.log(sum) // function bar() {}

62 / 92
NgNinja Academy | All Rights Reserved

63 / 92
NgNinja Academy | All Rights Reserved

JavaScript call() & apply() vs bind()?

They all are used to attach a correct this to the function and invoke it
The di erence 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

Example using bind()

person object has a method called hello()

ngNinja object does not have it
You can bind hello() method to ngNinja object and call it later in the code

var person = {
hello: function(message) {
console.log(this.name + " says hello " + message)
}
}

var ngNinja = {
name: "NgNinja Academy"
}

var sayHello = person.hello.bind(ngNinja)

64 / 92
NgNinja Academy | All Rights Reserved

sayHello("world"); // output: "NgNinja Academy says hello world"

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

In the below example this is set to the ngNinja object

You can send arguments to the function as a comma-separated list following the owner object

var person = {
hello: function(message) {
console.log(this.name + " says hello " + message);
}
}

var ngNinja = {
name: "NgNinja Academy"
}

person.hello.call(ngNinja, "world"); // output: "NgNinja Academy says

hello world"

apply
65 / 92
NgNinja Academy | All Rights Reserved

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

In the below example this is set to the ngNinja object

You can send arguments to the function as a comma-separated list following the owner object

var person = {
hello: function(message) {
console.log(this.name + " says hello " + message);
}
}

var ngNinja = {
name: "NgNinja Academy"
}

person.hello.apply(ngNinja, ["world"]); // output: "NgNinja Academy says

hello world"

66 / 92
NgNinja Academy | All Rights Reserved

Asynchronous JavaScript

Callback Function

These are functions that are executed "later"

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

Simple example

In this example 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()

function getName() {
return "Sleepless Yogi";
}

function greet(callbackFn) {
// call back function is executed here
const name = callbackFn();

return "Hello " + name;

}

This was a very basic example

Callback functions are more often used in asynchronous programming

67 / 92
NgNinja Academy | All Rights Reserved

Asynchronous programming

- This is the type of programming where actions does not take place in a
predictable order
- Example: network calls
- When you make an HTTP call you cannot predict when the call will return
- Therefore your program needs to consider this asynchronism to out the
correct results

Example callback in asynchronous programming

In the below example we de ne a callback function printUser

This function depends on the variable name

So, basically until we have value for the name variable we cannot print the value

We then de ne fetchAndPrintUser function to fetch the user and then print the user's name

We are simulating network call using setTimeout method

Basically it means after 500 ms we will have the name available

In real world this will be a network call to some user API that queries the user database for
this information

After we get the user's name

We call the callback function printUser with the name value

function printUser(name) {
console.log(name)
}

function fetchAndPrintUser(printCallbackFunction) {

// simulate fake network call

setTimeout(() => {
const fakeUserName = 'Sleepless Yogi'

68 / 92
NgNinja Academy | All Rights Reserved

// We call the callback function here

printCallbackFunction(fakeUserName)
}, 500)
}

// Execute the function to fetch user and print the user's name
fetchAndPrintUser(printUser)

Promises

Now that you have understood what is asynchronous programming and what are callbacks

Let's dive into some advanced stu - Promises

Promises are basically another way to deal with asynchronous programming

These simpli es your async code greatly!

The example we saw earlier was contrived and simple - so you might not notice much di erence

BUT! in the real world applications promises simpli es the code to a great extent

Explanation via Example

Let's implement the fetchAndPrintUser example using Promises

TIP: When reading through this example try and compare with how we implemented the same
requirement using callbacks

As before we de ne the fetchAndPrintUser function which fetches the user details and prints
the user

But, this time instead of passing any callback function we create a new promise

New promise can be created as below

69 / 92
NgNinja Academy | All Rights Reserved

const newPromise = new Promise()

What is a promise?

- Promise is literally a promise made by some function

- That it will eventually return the result and fulfill that promise
- Promise is a proxy for a value that will eventually become available

The Promise object itself takes a callback function with two functions as parameters

resolve - function to be called after successful data retrieval

reject - function to be called if there was some error during data retrieval

So, in the example below we return Promise from the fetchAndPrintUser function

Once the data is available we return the data using resolve(fakeUserName)

If there were any network error or some server failue - we would return error by rejecting the
promise

This is done using reject('Error ocurred!')

function fetchAndPrintUser() {

// create new promise

return new Promise((resolve, reject) => {

// simulate fake network call

setTimeout(() => {

// simulate error
// when error occurs we reject the promise
if(someError) {
reject('Error ocurred!')
}

70 / 92
NgNinja Academy | All Rights Reserved

const fakeUserName = 'Sleepless Yogi'

// Resolve the user name

resolve(fakeUserName)
}, 500)
})

The usage of promise is done via promise.then.catch pattern

This means if the data is correctly resolved the execution goes in the then() block

Where you can do any other thing with the result data

If the promise was rejected due to some error the execution would go in the catch() block

Where you can handle errors

This is demonstrated below

// Execute function that fetch user and then prints it

fetchAndPrintUser()
.then((name) => {
console.log(name)
})
.catch((error) => {
console.log(error)
})

Promise.all

Let's see how to handle if you want to fetch via multiple APIs and then perform some operation on
the entire dataset

This naive way would be to declare multiple promises and then perform operations when all
promises are resolved

71 / 92
NgNinja Academy | All Rights Reserved

Like below

We create two di erent promises

One for user data

Another for order data

const userPromise = new Promise()

const orderPromise = new Promise()

// Wait for user data

userPromise.then((userData) => {

// Wait for order data

orderPromise.then((orderData) => {

// after you get user and order data both

// then perform some operation on both dataset
console.log(userData, orderData)
})
})

Did you see how messy the code is

If you had 3 or 10 or 100 promises - can you imagine how much nesting you would have to do?

That is clearly bad!

Enter promise.all!!!

You can simplify the above code using promise.all

Basically using this you can wait for all the promises to resolved and then only perform the next
operations

The above example can be written like below

Please read the inline comments

const userPromise = new Promise()

72 / 92
NgNinja Academy | All Rights Reserved

const orderPromise = new Promise()

Promise.all([userPromise, orderPromise])
.then((data) => {

// here we are confident that we have both

// user data as well as the order data
console.log(data)
})
.catch((error) => {

// we fall in this code block

// if either one or all the promises are rejected
console.log(error)
})

Async-await

Similar to callback and promises, we have another paradigm for handling async programming

It is called Async-await

This method is less verbose and much more readable

If you are comfortable with synchronous programming this method will be much easy to
understand

Because it does not include callbacks

Explanation via Example

For this to work we need two things

One - async function

Two - await on some promise

If your function is awaiting on some asynchronous data you have to de ne your function as async

And you have to use await keyword for the function call that is making the network API call

73 / 92
NgNinja Academy | All Rights Reserved

Please see the example below

We have de ned fetchAndPrintUser function which fetches the user name and prints it

Your function fetchAndPrintUser is de ned as async

Because internally it is calling await fetchUserData()

fetchUserData is the function that is making network call to the API to fetch the user data

// Your async function

async function fetchAndPrintUser() {

// await on the API call to return the data

const name = await fetchUserData()

// your data is now available

console.log(name)
}

Just see how simple and less-verbose the example looks

You don't have to deal with callbacks or promises

Handle errors using async-await

To handle errors using async-await you have to wrap the code inside try-catch block

Like below

async function fetchAndPrintUser() {

try {
const name = await fetchUserData()

// we have the data successfully

console.log(name)

} catch (error) {

74 / 92
NgNinja Academy | All Rights Reserved

// there was some error

console.log(error)
}
}

75 / 92
NgNinja Academy | All Rights Reserved

Module 6 - Next Generation

JS - ES6 and Beyond

JavaScript Classes

Classes were introduced in ES6 standard

Simple Person class in JavaScript
You can de ne constructor inside the class where you can instantiate the class members
Constructor method is called each time the class object is initialized

class Person {
constructor(name) {
this.name = name
}
}

var john = new Person("John")

Class methods
76 / 92
NgNinja Academy | All Rights Reserved

You can add your functions inside classes

These methods have to be invoked programmatically in your code

class Person {
constructor(name) {
this.name = name
}

getName() {
return this.name
}
}

john.getName() // John

JavaScript class is just syntactic sugar for constructor functions and prototypes
If you use typeof operator on a class it logs it as "function"
This proves that in JavaScript a class is nothing but a constructor function

example:
class Foo {}
console.log(typeof Foo); // "function"

Class vs Constructor function

Below example demonstrates how to achieve the same result using vanilla functions and using new
classes
You can notice how using class make your code cleaner and less verbose

77 / 92
NgNinja Academy | All Rights Reserved

Using class also makes it more intuitive and easier to understand for Developer coming from
class-based languages like Java and C++

Using Function - ES5 style

var Person = function(name){

this.name = name
}

var Man = function(name) {

Person.call(this, name)
this.gender = "Male"
}

Man.prototype = Object.create(Person.prototype)
Man.prototype.constructor = Man

var John = new Man("John")

console.log(John.name) // John
console.log(John.gender) // Male

Using Classes - ES6+ Style

class Person {
constructor(name){
this.name = name
}
}

78 / 92
NgNinja Academy | All Rights Reserved

class Man extends Person {

constructor(name){
super(name)
this.gender = "Male"
}
}

var John = new Man("John")

console.log(John.name) // John
console.log(John.gender) // Male

79 / 92
NgNinja Academy | All Rights Reserved

let and const and Block scope

let and const keywords were introduced in ES6

These two keywords are used to declare JavaScript variables

let myFirstName = "NgNinja"

const myLastName = "Academy"

console.log(myFirstName + myLastName) // "NgNinjaAcademy"

These two keywords provide Block Scope variables in JavaScript

These variables do not hoist like var variables

Remember: using var to declare variables creates a function scope variables

These two keywords lets you avoid IIFE

IIFE is used for not polluting global scope
But, now you can just use let or const inside a block - {} - which will have same e ect

let

let keyword works very much like var keyword except it creates block-scoped variables
let keyword is an ideal candidate for loop variables, garbage collection variables
80 / 92
NgNinja Academy | All Rights Reserved

Example of let

var x declares a function scope variable which is available throughout the function
checkLetKeyword()
let x declares a block scope variable which is accessible ONLY inside the if-block
So, after the if-block the value of x is again 10

function checkLetKeyword() {
var x = 10
console.log(x) // 10

if(x === 10) {

let x = 20

console.log(x) // 20
}

console.log(x) // 10
}

const

const keyword is used to declare a constant in JavaScript

Value must be assigned to a constant when you declare it
Once assigned - you cannot change its value

81 / 92
NgNinja Academy | All Rights Reserved

const MY_NAME = "NgNinja Academy"

console.log(MY_NAME) // NgNinja Academy

MY_NAME = "JavaScript" // Error: "MY_NAME" is read-only

Tricky const

If you de ned a constant array using const you can change the elements inside it
You cannot assign a di erent array to it
But, you can add or remove elements from it
This is because const does NOT de ne a constant value. It de nes a constant reference to a value.
Example below:

const MY_GRADES = [1, 2, 3]

MY_GRADES = [4, 4, 4] // Error: "MY_GRADES" is read-only

MY_GRADES.push(4) // [1, 2, 3, 4]

82 / 92
NgNinja Academy | All Rights Reserved

Arrow Functions

They were introduced in ES6

It is another syntax to create functions
It has a shorter syntax

// syntax

(parameters) => { statements }

Brackets around parameters are optional if you have only 1 param

Statement brackets can be removed if you are returning an expression

Below arrow function takes in number parameter

It multiplies the number with 2
And nally it returns the result

// example

var double = number => number * 2

// equivalent traditional function

var double = function(number) {

return number * 2
}

83 / 92
NgNinja Academy | All Rights Reserved

Another example

You can pass multiple parameters to the arrow function

You can also write {} and return value like a normal function

// example

var sum = (a, b) => {

return a + b
}

// equivalent traditional function

var sum = function(a, b) {

return a + b
}

84 / 92
NgNinja Academy | All Rights Reserved

Lexical this

It means forcing the this variable to always point to the object where it is physically located within
This phenomenon is called as Lexical Scoping
Arrow function let's you achieve a lexical this via lexical scoping
Unlike a regular function, an arrow function does not bind this
It preserves the original context
It means that it uses this from the code that contains the Arrow Function

Example of lexical this

Below example declares person object

It has a name: 'John' and a function printName()

When you invoke printName() using person.printName()

The this operator originally points to the person object
Therefore this.name logs John correctly

Then we have declared two function getName() and getNameArrowFunction()

Both of them does the same thing - they return the name of the person

But, getName() gives an error because this is unde ned inside the function
Because in traditional function this represent the object that calls the function
And we have not assigned any object to the function invocation

Whereas, getNameArrowFunction() logs John correctly

That is because it uses this object from the code that contains the Arrow Function which is
person

85 / 92
NgNinja Academy | All Rights Reserved

var person = {
name: 'John',
printName: function(){

console.log(this.name); // John

var getName = function() {

return this.name // ERROR
}

var getNameArrowFunction = () => {

return this.name
}

// TypeError: Cannot read property 'name' of undefined

console.log(getName())

// John
console.log(getNameArrowFunction())

person.printName()

86 / 92
NgNinja Academy | All Rights Reserved

Destructuring Operator

It lets you unpack values from arrays, or properties from objects, into distinct variables

Example using array

You can name your variables anything

let [a, b] = [1, 2]

console.log(a) // 1
console.log(b) // 2

Example using object

Your name of the variables should match the name of the properties
Order does not matter

let { b, a } = {
a: 1,
b: 2
}

console.log(a) // 1
87 / 92
NgNinja Academy | All Rights Reserved

console.log(b) // 2

Rest Operator

It allows us to more easily handle a variable number of function parameters

Earlier we had to use arguments variable to achieve this

function log() {

for(var i = 0; i < arguments.length; i++) {

console.log(arguments[i])
}
}

log(1) // 1
log(1, 2, 3) // 1, 2, 3

Using Rest Operator

It will assign all the remaining parameters to a rest-variable after those that were already assigned
numbersToLog is the rest-variable in the example below
Rest operator puts all the remaining arguments in an array and assigns it to the rest-variable

88 / 92
NgNinja Academy | All Rights Reserved

Rest operator turns comma-separated value to an array

function log(a, ...numbersToLog) {

console.log(a) // 1
console.log(numbersToLog) // [2, 3]
}

add(1, 2, 3)

Spread Operator

It looks like has the same as the Rest parameter operator

But it has a di erent use case
In fact, it perform almost the opposite function to Rest operator

Spread operator turns an array to comma-separated values

Example

89 / 92
NgNinja Academy | All Rights Reserved

Below example spread array1 to a comma-separated list of values into the array2

var array1 = [2, 3];

var array2 = [1, ...array1, 4, 5]; // spread

// array2 = [1, 2, 3, 4, 5]

Spread tricks

Concat array

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

const arr2 = ['juice', 'smoothie']

// Without spread
var beverages = arr1.concat(arr2)

// With spread
var beverages = [...arr1, ...arr2]

// result
// ['coffee', 'tea', 'milk', 'juice', 'smoothie']

Make copy of array

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

90 / 92
NgNinja Academy | All Rights Reserved

// Without spread
var arr1Copy = arr1.slice()

// With spread
const arr1Copy = [...arr1]

Remove duplicate entries from Array

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

// Without spread
// Iterate over the array add it to object as property
// If value present in the object skip it
// Else push it to another array

// With spread
const arr1Copy = [...new Set(arr1)]

// result
// ['coffee', 'tea', 'milk']

Convert string to array

const myBeverage = 'tea'

// Without spread
var bevArr = myBeverage.split('')

// With spread
var bevArr = [myBeverage]

// result
91 / 92
NgNinja Academy | All Rights Reserved

// ['t', 'e', 'a']

Find min max

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

// With spread
var myNums = [3, 2, 1, 5, -10]
var max = Math.max(...myNums)

// result
// 5

92 / 92
NgNinja Academy | All Rights Reserved

TypeScript

Table Of Content

Who created TypeScript?

What is TypeScript?
More on TypeScript
What more is o ered by TypeScript?
Overcomes JavaScript drawbacks
Why use TypeScript?
Install TypeScript
Con gure TypeScript
Compile TypeScript to JavaScript
Data types
Examples
More Examples
Variable scopes
Class inheritance
Data hiding
Interface
Example
Namespaces
Enums
never and unknown primitive types
Why static type checking
Type assertion
Generics
Simple example
Advanced example
Intersection Types
Union Types
Advanced example

1 / 34
NgNinja Academy | All Rights Reserved

Partial Type
Required Type
Readonly
Pick
Omit
Extract
Exclude
Record
NonNullable
Type guards
typeof
instanceof
in

2 / 34
NgNinja Academy | All Rights Reserved

Who created TypeScript?

Designed by Anders Hejlsberg

Who is also the designer of C# at Microsoft

What is TypeScript?

Typed superset of JavaScript

Meaning JS plus additional features
It compiles to plain JavaScript
TypeScript uses static typing
You can give types to your variables now
JavaScript instead is super dynamic - doesn't care about types

It is a pure Object oriented language

It has classes, interfaces, statically typed
Like C# or Java
Supports all JS libraries and frameworks
Javascript is basically Typescript
That means you can rename any valid .js le to .ts
TypeScript is aligned with ES6
It has all features like modules, classes, etc

3 / 34 ?
NgNinja Academy | All Rights Reserved

What more is o ered by TypeScript?

Generics
Type annotations
Above 2 features are not available in ES6

Overcomes JavaScript drawbacks

Strong type checking

Compile time error checks
Enable IDEs to provide a richer environment

Basically, TypeScript acts as your buddy programmer when you are pair programming with
someone

Why use TypeScript?

It is superior to its counterparts

Like Co eescript and Dart

TypeScript extends JavaScript - they do not
They are di erent language altogether
They need language-speci c execution env to run

It gives compilation errors and syntax errors

Strong static typing

It supports OOP

Classes, interfaces, inheritance, etc.

Like Java, c#

Reacher code hinting due to its typed nature

Automated documentation

4 / 34
NgNinja Academy | All Rights Reserved

Due to its typed nature

Therefore, good readability

No need of custom validation which is clunky for large apps

No boilerplate code

5 / 34
NgNinja Academy | All Rights Reserved

Install TypeScript

Open terminal
Run following command to install typescript globally
You can access it from any folder
You will need yarn or npm installed already on your system

yarn add -g typescript

// if you are using npm

npm install -g typescript

TIP: You can play around with TypeScript using their o cial playground

Con gure TypeScript

This allows us to de ne rule-sets for the typescript compiler

tsconfig le is used for this
It is a JSON le
Run following command to create the con g le

6 / 34
NgNinja Academy | All Rights Reserved

tsc --init

Open the tsconfig.json in IDE

My favorite IDE is VSCode
It will look something like this
We will only focus on compilerOptions for now

{
"compilerOptions": {
"target": "es5",
"noImplicitAny": true,
"outDir": "public/js"
"rootDir": "src",
},
}

target speci es the ECMAScript target version

The compiled JavaScript will follow es5 version standards in this case
You can set it to es6, es2020, etc.
noImplicitAny speci es strict typings
All variables must be explicitly given types or specify any type explicitly
outDir speci es output directory for compiled JavaScript code
rootDir speci es where your typescript les are

Compile TypeScript to JavaScript

Run the following command from your project root to compile all the typescript les into
JavaScript
It will throw an error if any part of the le is not following the rule-set you de ned under
compilerOptions

7 / 34
NgNinja Academy | All Rights Reserved

tsc

You can also compile single le by running the command like below

tsc ninjaProgram.ts

You can run compile command on watch mode

Meaning you don't have to compile les manually
Typescript will watch your changes and compile them for you automatically

tsc -w

Data types

any
Supertype of all data types
Its the dynamic type
Use it when you want to opt out of type checking
Builtin types
Number, string, boolean, void, null, unde ned
Number is double precision -> 64-bit oats
User de ned types
Arrays, enums, classes, interfaces

Examples
8 / 34
NgNinja Academy | All Rights Reserved

// Variable’s value is set to 'ninja' and type is string

let name:string = 'ninja'

// Variable’s value is set to undefined by default

let name:string

// Variable’s type is inferred from the data type of the value.

// Here, the variable is of the type string
let name = 'ninja'

// Variable’s data type is any.

// Its value is set to undefined by default.
let name

More Examples

// Variable is a number type with value 10

let num: number = 10

num = 50 // valid operation

num = false // type error
num = 'ninja' // type error

// Variable is a string array

let arr: string[] = ["My", "first", "string", "array"]

arr.push("add one more string") // valid operation

arr.push(1) // This will throw type error

9 / 34
NgNinja Academy | All Rights Reserved

Variable scopes

Global scope
Declare outside the programming constructs
Accessed from anywhere within your code

const name = "sleepless yogi"

function printName() {
console.log(name)
}

Class scope
Also called elds
Accessed using object of class
Static elds are also available... accessed using class name

class User {
name = "sleepless yogi"
}

const yogi = new User()

console.log(yogi.name)

10 / 34
NgNinja Academy | All Rights Reserved

Local scope
Declared within methods, loops, etc ..
Accessible only withing the construct where they are declared
vars are function scoped
let are block scoped

for (let i = 0; i < 10; i++) {

console.log(i)
}

Class inheritance

Typescript does not support multiple inheritance

It supports - single and multi-level inheritance
super keyword is used to refer to the "immediate parent" of a class
Method overriding is also supported

class PrinterClass {
doPrint():void {
console.log("doPrint() from Parent called…")
}
}

class StringPrinter extends PrinterClass {

doPrint():void {
super.doPrint()
console.log("doPrint() is printing a string…")
}
}

var obj = new StringPrinter()

obj.doPrint()

// outputs
doPrint() from Parent called…

11 / 34
NgNinja Academy | All Rights Reserved

doPrint() is printing a string…

Data hiding

Visibility of data members to members of the other classes

It's called data hiding or encapsulation

Access modi ers and access speci ers are used for this purpose

Public

Member has universal accessibility

Member are public by default

class User {
public name: string

public constructor(theName: string) {

this.name = theName;
}

public getName(theName: string) {

this.name = theName
}
}

const yogi = new User("Sleepless Yogi")

console.log(yogi.name) // valid
console.log(yogi.getName()) // valid

Private
Member are accessible only within its class

class User {

12 / 34
NgNinja Academy | All Rights Reserved

// private member
#name: string

constructor(theName: string) {
this.name = theName;
}
}

const yogi = new User("Sleepless Yogi")

console.log(yogi.name) // invalid

Protected
Similar to private members
But, members are accessible by members within same class and its child classes

class User {
// protected member
protected name: string

constructor(theName: string) {
this.name = theName;
}
}

class Student extends User {

private college: string

constructor(name: string, college: string) {

super(name);
this.college = college;
}

public getDetails() {
return `Hello, my name is ${this.name} and I study in
${this.college}.`;
}
}

const yogiStudent = new Student("Yogi", "Some college")

console.log(yogi.name) // invalid
console.log(yogi.college) // invalid
console.log(yogi.getDetails()) // valid

13 / 34
NgNinja Academy | All Rights Reserved

Interface

This is new in TypeScript that is not present in vanilla JavaScript

It is a syntactical contract that entity should respect

Interfaces contain only the declaration of members

Deriving class has to de ne them

It helps in providing standard structure that deriving class should follow

It de nes a signature which can be reused across objects

Interfaces are not to be converted to JavaScript

It's a typescript thing!

Example

IPerson is an interface
It de nes two members
name as string
sayHi as a function

interface IPerson {
name: string,
sayHi?: () => string
}

// customer object is of the type IPerson

var customer1: IPerson = {
name: "Ninja",
sayHi: (): string => { return "Hi there" }
}

14 / 34
NgNinja Academy | All Rights Reserved

// customer object is of the type IPerson

// optional field sayHi omitted here
var customer2: IPerson = {
name: "Ninja",
}

We de ne IPerson interface in above example

The interface declares two properties name and sayHi
The object that implements this interface must de ne these two properties on them
But notice sayHi is followed by ? question mark - that means sayHi property is optional
So object can skip the de nition for that property
Hence customer2 is a valid object that implements our interface

Optional members:

You can declass optional fields using the "?" operator

So, in the below example "sayHi" is an optional function

So, the objects that implements that interface need not define the "sayHi"
function

Namespaces

Way to logically group related code

This is inbuilt into typescript - unlike js

Let's see an example

namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }

export class SomeClassName { }

15 / 34
NgNinja Academy | All Rights Reserved

Classes or interfaces which should be accessed outside the namespace should be marked with
keyword export

Can also de ne one namespace inside another namespace

Let's see an example

//FileName : MyNameSpace.ts

namespace MyNameSpace {

// nested namespace
export namespace MyNestedNameSpace {

// some class or interfaces

export class MyClass {

}
}
}

// Access the above class somewhere else

/// <reference path = "MyNameSpace.ts" />

const myObject = new MyNameSpace.MyNestedNameSpace.MyClass();

16 / 34
NgNinja Academy | All Rights Reserved

Enums

Allow us to de ne a set of named numeric constants

Members have numeric value associated with them

Let's see an example

enum Direction {
Up = 1,
Down,
Left,
Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left,

Directions.Right]

// generated code will become - in JS

var directions = [0 /* Up /, 1 / Down /, 2 / Left /, 3 / Right */];

let a = Enum.A;
let nameOfA = Enum[Enum.Up]; // "Up"

never and unknown primitive types

17 / 34
NgNinja Academy | All Rights Reserved

they are both complementary

never is for things that never happen
ex: use never here because Promise never resolves
that is most speci c type here
using any will be ambiguous
we would have lost bene ts of type-checking
using unknown is also not advised
because then we would not be able to do stock.price
price would be not available or known to the type checker

function timeout(ms: number): Promise<never> {

return new Promise((_, reject) =>
setTimeout(() => reject(new Error("Timeout elapsed")), ms)
)
}

async function fetchPriceWithTimeout(tickerSymbol: string):

Promise<number> {
const stock = await Promise.race([
fetchStock(tickerSymbol), // returns `Promise<{ price: number }>`
timeout(3000)
])
return stock.price
}

use never to prune conditional types

prune unwanted cases
use unknown for values that could be anything
similar to any but not quite
it is the type-safe counterpart of any
Anything is assignable to unknown, but unknown isn't assignable to anything but itself

any vs unknown

let vAny : any = 10 ; // We can assign anything to any

let vUnknown: unknown = 10; // We can assign anything to unknown just
like any

let s1: string = vAny; // Any is assignable to anything

let s2: string = vUnknown; // Invalid we can't assign vUnknown to any
18 / 34
NgNinja Academy | All Rights Reserved

other type (without an explicit assertion)

vAny.method(); // ok anything goes with any

vUnknown.method(); // not ok, we don't know anything about this variable

void vs never
void return void, never never return
void can be thought of as a type containing a single value
no means to consume this value though
but a void function can be thought of returning such value
never is a type containing no values
meaning function with this return type can never return normally at all
either throw exception or reject promise or failing to terminate

Why static type checking

Catch errors super early

Increase con dence in code

Like adding unit tests

Or documentation
Or style guides

Interfacing modules is made easy

If you know the types you can just start using things from other modules
Without worrying about breaking your code

It can tell what you can do and what you cannot do

BUT, beware sometimes it does not give error at all

Check the example below

doSomething(m) {
// m.count is undefined
// and undefined not greater than 2
// so returns "small"
return m.count > 2 ? 'big' : 'small'
19 / 34
NgNinja Academy | All Rights Reserved

doSomething(5) // prints "small"... no error given

Other alternatives to static type checking ( ow, typescript)

Linters
But they are very rudimentary so not 100% su cient
Custom runtime checking
It's manual validation, hard to maintain, looks clunky for large apps
Plus its only at runtime - not at compile time

// custom runtime checking

validate(arr) {
if(!Array.isArray(arr)) {
throw new Error('arr must be an Array')
}
}

Type assertion

You can change type of variables

Possible only when types are compatible

So, changing S to T succeed if

S is a subtype of T
OR...
T is a subtype of S

This is NOT called type casting

Because type casting happens at runtime

Type assertion is purely compile time

Example

20 / 34
NgNinja Academy | All Rights Reserved

var str = '1'

//str is now of type number

var str2:number = <number> <any> str

21 / 34
NgNinja Academy | All Rights Reserved

Generics

Gives ability to create a component that can work over a variety of types
Rather than only a single one
Consumer can then consume these components and use their own types

Simple example

Below we have two arrays

numArr can take only numbers
strArr can take only strings

type numArr = Array<number>;

type strArr = Array<string>;

Basically we can use Generics to create one function to support multiple types

So you don't have to create same function again and again

You can use any type if you want

BUT - then you lose the type de nition of your objects

That leads to buggy code

22 / 34
NgNinja Academy | All Rights Reserved

// you can use any type too

// but you don't get type definitions
// this can lead to buggy code
type anyArr = Array<any>;

Advanced example

Below is a generic function

It basically returns last element of T type of array that you pass to it

The parameter arr accepts arguments of array type T

It returns an element of type T

const getLastElement = <T>(arr: T[]): T => {

return arr[arr.length - 1];
};

// T will number
// it will return 3
const lastNum = last([1, 2, 3]);

// T will be string
// it will return "c"
const lastString = last(["a", "b", "c"]);

Intersection Types

It is a way to combine multiple types into one

Merge type A, type B, type C, and so on and make a single type

23 / 34
NgNinja Academy | All Rights Reserved

type A = {
id: number
foo: string
}

type B = {
id: number
bar: string
}

// Merge type A and type B

type C = A & B

const myObject: C = {id: 1, foo: "test", bar: "test"}

If you declare con icting types it Typescript gives an error

Example below

type A = {
bar: number
}

type B = {
bar: string
}

// Merge type A and type B

type C = A & B

const myObject: C = {bar: 1} // error

const myObject: C = {bar: "test"} // error

To accept bar as number or string use Union types - explained below

Union Types
24 / 34
NgNinja Academy | All Rights Reserved

Typescript gives the ability to combine types

Union types are used to express a value that can be one of the several types
Two or more data types are combined using the pipe symbol (|) to denote a Union Type

Type1 | Type2 | Type3

Below example accepts both strings and numbers as a parameter

var val: string | number

val = 12
console.log("numeric value of val " + val)

val = "This is a string"

console.log("string value of val " + val)

Advanced example

You can combine intersection types and union types to x the above code snipped
Like below

type A = {
bar: string | number
}

type B = {
bar: string | number
}

// Merge type A and type B

25 / 34
NgNinja Academy | All Rights Reserved

type C = A & B

const myObject: C = {bar: 1} // valid

const myObject: C = {bar: "test"} // valid

Partial Type

It is a utility type
Can be used to manipulate types easily
Partial allows you to make all properties of the type T optional

Partial<T>

Example

type Customer {
id: string
name: string
age: number
}

function addCustomer(customer: Partial<Customer>) {

// logic to add customer
}

// all of the below calls are valid

addCustomer({ id: "id-1" })

addCustomer({ id: "id-1", name: "NgNinja Academy" })
addCustomer({ id: "id-1", name: "NgNinja Academy", age: 10 })

26 / 34
NgNinja Academy | All Rights Reserved

Required Type

It is also an utility type

Required allows you to make all properties of the type T required

type Customer {
id: string
name?: string
age?: number
}

function addCustomer(customer: Required<Customer>) {

// logic to add customer
}

addCustomer({ id: "id-1" }) // type error

addCustomer({ id: "id-1", name: "NgNinja Academy" }) // type error
addCustomer({ id: "id-1", name: "NgNinja Academy", age: 10 }) // valid

Readonly

To make the properties read only

You cannot reassign values to the properties

type Customer {
id: string
name: string
}

function setCustomer(customer: Readonly<Customer>) {

customer.name = "New Name"
}

setCustomer({ id: "id-1", name: "NgNinja Academy" })

27 / 34
NgNinja Academy | All Rights Reserved

// Error: Cannot assign to 'name' because it is a read-only property

You can also set single properties as readonly

In below example name property is set to readonly

type Customer {
id: string
readonly name: string
}

function setCustomer(customer: Customer) {

customer.name = "New Name"
}

setCustomer({ id: "id-1", name: "NgNinja Academy" })

// Error: Cannot assign to 'name' because it is a read-only property

Pick

Use this to create new type from an existing type T

Select subset of properties from type T
In the below example we create NewCustomer type by selecting id and name from type Customer

type Customer {
id: string
name: string
age: number
}

type NewCustomer = Pick<Customer, "id" | "name">

function setCustomer(customer: Customer) {

28 / 34
NgNinja Academy | All Rights Reserved

// logic
}

setCustomer({ id: "id-1", name: "NgNinja Academy" })

// valid call

setCustomer({ id: "id-1", name: "NgNinja Academy", age: 10 })

// Error: `age` does not exist on type NewCustomer

Omit

This is opposite of Pick type

It will omit (remove) the speci ed properties from type T
In the below example we create NewCustomer type by removing name and age from type
Customer
It will only have id property

type Customer {
id: string
name: string
age: number
}

type NewCustomer = Omit<Customer, "name" | "age">

function setCustomer(customer: Customer) {

// logic
}

setCustomer({ id: "id-1" })

// valid call

setCustomer({ id: "id-1", name: "NgNinja Academy", age: 10 })

// Error: `name` and `age` does not exist on type NewCustomer

29 / 34
NgNinja Academy | All Rights Reserved

Extract

It will extract common properties from two di erent types

In the below example we extract type from Customer and Employee types
Common properties are id and name
So the new Person type will have id and name

type Customer {
id: string
name: string
age: number
}

type Employee {
id: string
name: string
salary: number
}

type Person = Extract<keyof Customer, keyof Employee>

// id and name property

Exclude

This is opposite of Extract

It will exclude the common properties from the two types speci ed
In the below example we exclude type from Customer and Employee types
Common properties are id and name
So the new Person type will have age and salary

type Customer {
id: string
name: string
age: number
}

30 / 34
NgNinja Academy | All Rights Reserved

type Employee {
id: string
name: string
salary: number
}

type Person = Exclude<keyof Customer, keyof Employee>

// age and salary property

Record

Handy when mapping properties of one type to another

In below example it creates record of number: Customer
Keys should be numbers only - any other type will throw error
Value should be Customer type

type Customer {
id: string
name: string
age: number
}

const customers: Record<number, Customer> = {

0: { id: 1, name: "Jan", age: 12 },
1: { id: 2, name: "Dan", age: 22 },
2: { id: 3, name: "Joe", age: 32 },
}

NonNullable

It allows you to remove null and undefined from a type

Suppose you have a type MyTask which accepts null and undefined
But you have a use case which should not allow null and undefined
You can use NonNullable to exclude null and undefined from the type

31 / 34
NgNinja Academy | All Rights Reserved

Then if you pass null or undefined to the type your app linter will throw an error

type MyTask = string | number | null | undefined

function addTask(task: NonNullable<MyTask>) {

// logic
}

addTask("task-1")
// valid call

addTask(1)
// valid call

addTask(null)
// Error: Argument of type 'null' is not assignable

addTask(undefined)
// Error: Argument of type 'undefined' is not assignable

Type guards

They allow you to check the type of variables

You can check it using di erent operators mentioned below

typeof

Checks if the type of the argument is of the expected type

if (typeof x === "number") {

// YES! number logic
}

32 / 34
NgNinja Academy | All Rights Reserved

else {
// No! not a number logic
}

instanceof

Checks if the variable is instance of the given object/class

This is mostly used with non-primitive objects

class Task {
// class members
}

class Person {
// class members
}

const myTasks = new Task()

const myPerson = new Person()

console.log(myTasks instanceof Task) // true

console.log(myPerson instanceof Person) // false

Allows you to check if property is present in the given type

type Task {
taskId: string
description: string
33 / 34
NgNinja Academy | All Rights Reserved

console.log("taskId" in Task) // true

console.log("dueDate" in Task) // false

34 / 34
NgNinja Academy | All Rights Reserved

ReactJS

Table Of Content

Module 1 - Getting started

What is react?
Features
Why React, Bene ts, and Limitations
Why react / Bene ts
Other Bene ts
Limitations
What Are SPAs
SPA
Pros
Cons
Installing React
Prerequisites
Install Node
Install Yarn
Install ReactJS using create-react-app
Online Playgrounds
Deploying React App To Internet
Deploy to Netlify
Easy setup deploy
Module 2 - Basics of React
React JSX
JSX - confusing parts
Virtual DOM
Cons of real DOM
Enter -> Virtual DOM
Di ng
React Components

1 / 71
NgNinja Academy | All Rights Reserved

Thinking in components
Component Render
Function Components
Class Components
NOTE: Please prefer using Function components with React hooks whenever you need
to create component that need to track it's internal state.
Pure components
Reusing Components
States And Props
States
Props
Event Handling
Bind this
Passing Arguments
Two Way Binding
One way data binding
Two Way - 2 way binding
Module 3 - Styling your components
Inline Styles
CSS Stylesheets
Dynamic Styles
Module 4 - Advanced React
Conditional Rendering
Outputting Lists
Keys
Higher Order Components
Cons of HOC
Render Props
Con
Component Lifecycle
initialization
mounting
componentWillMount()
componentDidMount()
static getDerivedStateFromProps()
updating
componentWillReceiveProps()
shouldComponentUpdate()
getSnapshotBeforeUpdate()
componentWillUpdate()
componentDidUpdate()
unmount
Error handling
componentDidCatch()
Module 5 - React hooks
React Hooks Basics

2 / 71
NgNinja Academy | All Rights Reserved

Why React Hooks?

useState React Hook
useE ect React Hook
More About useEffect
Cleanup
useRef React Hook
Two Use Cases
1. Accessing DOM nodes or React elements
2. Keeping a mutable variable
Context
React.createContext
Context provider
Consuming context
useContext
Module 6 - App performance optimization
Improve React app performance
Memoization
When to use it?
useMemo
Lazy Loading
Suspense
Suspense - Data Fetching
This approach is called Render-as-You-Fetch
Sequence of action in the above example

3 / 71
NgNinja Academy | All Rights Reserved

Module 1 - Getting started

What is react?

It is a UI library developed at Facebook

Create interactive, stateful, and reusable components
Example:
Instagram.com is written in React completely
Uses virtual DOM
In short: React selectively renders subtree of DOM based on state changes
Server side rendering is available
Because fake/virtual DOM can be rendered on server
Makes use of Isomorphic JS
Same JS code can run on servers and clients...
Other egs which does this- Rendr, Meteor & Derby
It is the V in MVC

Features

Quick, responsive apps

Uses virtual dom
Does server side rendering
One way data binding / Single-Way data ow
Open source

4 / 71
NgNinja Academy | All Rights Reserved

Why React, Bene ts, and Limitations

Why react / Bene ts

Simple, Easy to learn

It is fast, scalable, and simple
No need of separate template les JSX!
It uses component based approach
Separation of concerns
No need of direct DOM manipulation
Increases app performance

Other Bene ts

Can be used on client and server side

Better readability with JSX
Easy to integrate with other frameworks
Easy to write UI test cases

Limitations

It is very rapidly evolving

Might get di cult to keep up

5 / 71
NgNinja Academy | All Rights Reserved

It only covers V of the MVP app.

So you still need other tech/frameworks to complete the environment
Like Redux, GraphQL, Firebase, etc.
Inline HTML and JSX.
Can be awkward and confusing for some developers
Size of library is quite large

6 / 71
NgNinja Academy | All Rights Reserved

What Are SPAs

SPA

Single-page application
You load the app code JUST once
The JavaScript framework (like React, AngularJS) intercepts the browser events
Instead of making a new request to the server that then returns a new document
Behaves more like a desktop application
You don't need to refresh the page for updates
Your framework handles reload internally
Some examples:
Gmail
Google Maps
Google Drive

Pros

Feels much faster to the user

Instant feedback
No client-server communication for getting pages
Server will consume less resources
Just use server for creating data APIs
Easy to transform into Progressive Web Apps
Better support for local caching and o ine experiences
Best to use when there is limited or no need for SEO

7 / 71
NgNinja Academy | All Rights Reserved

Cons

Single Page Apps rely heavily on JavaScript

Some of your visitors might just have JavaScript disabled
Scroll positions have to be handled and remembered programmatically
Cancelling API calls have to be done programmatically when user navigates to another page
Handling unsaved changes have to be done programmatically too
Search engine optimization (SEO) with SPAs is di cult
Increases the chance of memory leaks
As SPAs don't load pages, the initial page will stay open for a long time

8 / 71
NgNinja Academy | All Rights Reserved

Installing React

Prerequisites

Node.js and NPM or Yarn

Node.js is a Javascript run-time environment that allow us to execute Javascript code like if we
were working on a server.
NPM amd Yarn are package manager for Javascript.
Allows us to easily install Javascript libraries
You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine

Install Node

Download Node here - https://nodejs.org/en/

Double click the downloaded le
Go through the installation widget
After completing the installation open up Terminal or Command Prompt window and run

node -v

// output - v8.9.4

If a version was output, then you're all set.

9 / 71
NgNinja Academy | All Rights Reserved

Install Yarn

Follow the step by step guide here - https://yarnpkg.com/lang/en/docs/install

Install ReactJS using create-react-app

Create React App is a comfortable environment for learning React.

Best way to start building a new single-page application in React.
Sets up your development environment
Provides a nice developer experience, and optimizes your app for production

npx create-react-app ninja-academy

cd ninja-academy
yarn start

Online Playgrounds

If you just want to play around with React to test it out follow these links
Codepen - https://codepen.io/pen?&editable=true&editors=0010
Sandbox - https://codesandbox.io/s/new

Deploying React App To Internet

10 / 71
NgNinja Academy | All Rights Reserved

Developing locally is good for testing but you may want to deploy your amazing app to the
internet for the world to see
You can do it for free by using services like Netlify, Firebase, and many others
We will look at how to deploy your app to the internet using Netlify
Netlify is a great service that lets you deploy static sites for free
It also includes tooling around managing your deployment process

Deploy to Netlify

First step, register your Netlify account - https://app.netlify.com/signup

Select on New site from Git button
Authorize Github to give access to Netlify
Then select your project repo
Select master branch to deploy from
Enter npm run build in the build command
Enter build/ folder as your publish directory
Click on "Deploy Site"
Once the deployment is complete the status will change to "Published"
Then go to your site
URL will be on the top left on the Netlify project page
URL will look something like this https://happy-ramanujan-9ca090.netlify.com/
Your React app is now deployed

Easy setup deploy

If you want an easy way to deploy your simple HTML and CSS page follow these steps
Go to Netlify Drop
Drop the folder that contains your HTML and CSS le on that page where it says Drag and drop
your site folder here
And Voila! It should create a unique URL for your project
URL will look something like this https://happy-ramanujan-9ca090.netlify.com/

11 / 71
NgNinja Academy | All Rights Reserved

Module 2 - Basics of React

React JSX

It is JavascriptXML
It is used for templating
Basically to write HTML in React
It lets you write HTML-ish tags in your javascript
It's an extension to ECMAScript
Which looks like XML
You can also use plain JS with React
You don't HAVE to use JSX
But JSX is recommended
JSX makes code more readable and maintainable
Ultimately Reacts transforms JSX to JS
Performs optimization
JXK is type safe
so errors are caught at compilation phase

// With JSX
const myelement = <h1>First JSX element!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

12 / 71
NgNinja Academy | All Rights Reserved

// Without JSX

const myelement = React.createElement('h1', {}, 'no JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

JSX - confusing parts

JSX is not JS
So won't be handled by browsers directly
You need to include React.createElement so that React can understand it
We need babel to transpile it

// You get to write this JSX

const myDiv = <div>Hello World!</div>

// And Babel will rewrite it to be this:

const myDiv = React.createElement('div', null, 'Hello World')

whitespaces
React removes spaces by default
You speci cally give it using {' '}...
For adding margin padding

// JSX
const body = (
<body>
<span>Hello</span>

13 / 71
NgNinja Academy | All Rights Reserved

<span>World</span>
</body>
)

<body><span>Hello</span><span>World</span></body>

Children props
They are special kind of props
You will learn about props more in the following sections
Whatever we put between tags is children
Received as props.children

// Same as
<User age={56} children="Brad" />

There are some attribute name changes

NOTE: class becomes "className", for becomes "htmlFor"
Cannot use if-else inside JSX
But you can use ternary!

14 / 71
NgNinja Academy | All Rights Reserved

Virtual DOM

This is said to be one of the most important reasons why React app performances is very good
You know that Document Object Model or DOM is the tree representation of the HTML page

Cons of real DOM

Updating DOM is a slow and expensive process

You have to traverse DOM to nd a node and update it
Updating in DOM is ine cient
Finding what needs to be updated is hard
Updating DOM has cascading e ects - things need to be recalculated

Enter -> Virtual DOM

Virtual DOM is just a JavaScript object that represents the DOM nodes
Updating JavaScript object is e cient and fast
Virtual DOM is the blueprint of the DOM - the actual building
React listens to the changes via observables to nd out which components changed and need to
be updated

Di ng

15 / 71
NgNinja Academy | All Rights Reserved

Please check the illustration above

When an update occurs in your React app - the entire Virtual DOM is recreated
This happens super fast
React then checks the di erence between the previous virtual DOM and the new updated virtual
DOM
This process is called di ng
It does not a ect the react DOM yet
React also calculates the minimum number of steps it would take to apply just the updates to the
real DOM
React then batch-updates all the changes and re-paints the DOM as the last step

16 / 71
NgNinja Academy | All Rights Reserved

React Components

It is a building block that describes what to render

To create component
Create local variable with Uppercase letter
React uses this to distinguish between components and HTML
It is the heart and soul of react
Every component must implements "render" method
Every component has state obj and prop obj

// Create a component named FirstComponent

class FirstComponent extends React.Component {
render() {
return <h2>Hi, I am first react component!</h2>;
}
}

Your rst component is called FirstComponent

Your component returns h2 element with string Hi, I am first react component!
Using your rst component

// As a root component

ReactDOM.render(<FirstComponent />, document.getElementById('root'));

// As a child component

17 / 71
NgNinja Academy | All Rights Reserved

Thinking in components

Let's see what components are and how to use them

Check out the illustration above

It is a page from a TODO application

It has a title

It has list of TODO items

Then at the bottom of the page - there are actions you can take

Like adding new item, editing an item, etc.

Imaging you wanted to implement this using React framework

Best thing about React is you don't have to implement this entire page in a single le

You can break this TODO page into logical parts and code them separately

And then join them together linking them with line of communication between them

See below

18 / 71
NgNinja Academy | All Rights Reserved

Look at the TODO list

Do you see any similarity between the list items?

Yes - they all have a title and a checkbox to mark them complete

So, that should instantly spark an idea in you that this part can be refactored out into it's own
component

Like below

// Pseudo code for the component

class TODOItem extends React.Component {

render() {
return (
<div>
<input type="checkbox" isDone={isDone}/>
<label title={title} />

19 / 71
NgNinja Academy | All Rights Reserved

</div>
)
}
}

We called our component TODOItem

It has a checkbox and text-label baked into it

You can go even further and refactor out the checkbox and label into its own component

I'd highly suggest you to do that because it will keep your code cleaner and give you an
opportunity to customize it however you like

Similar to our TODOItem component we can refactor out the actions too
See below

// Pseudo code for the component

class Actions extends React.Component {

render() {

20 / 71
NgNinja Academy | All Rights Reserved

return (
<div>
<button title="Clear"/>
<button title="Add"/>
</div>
)
}
}

We have declared Actions component above

It has two buttons - one for clearing the list and another for adding an item
Even here you can go ahead and refactor out a Button component
Doing this you can encapsulate the similar looks and behavior of the button and give the consumer
ability to customize it as they would like

// Pseudo code for the component

class Button extends React.Component {

render() {
return (
<button title={title} onClick={onClickHandler} />
)
}
}

Component Render

Every component must have render function

It should return single React object
Which is a DOM component
It should be a pure function..
It should not change the state
Changing state in render function is not allowed

21 / 71
NgNinja Academy | All Rights Reserved

So, do not call setState here

Because it will call render again
Component renders when props or state changes

// Root level usage

ReactDOM.render(<p>Hi!</p>, document.getElementById('root'));

// Using render inside component

class MyComponent extends React.Component {

render() {
return <h2>I am a Component!</h2>;
}
}

22 / 71
NgNinja Academy | All Rights Reserved

Function Components

They are stateless components by default

You can use React hooks to add states though
More about this in React hooks section
It receive props as arguments
The is no internal state
There are no react lifecycle methods available
You can you react hooks to achieve this
React hook like useEffect should give you most of what you'd need
Use it whenever possible
Whenever you don't care about the state of the component
Greatly reduce the baggage of class components
Also o er performance advantages
Improves readability

// First function component

function FirstComponent() {
return <h2>Hi, I am also a Car!</h2>;
}

Class Components

This is considered as the “old way” of de ning components in React

De ne components using Classes
They are stateful
They store component state change in memory
You can access props via this.props
You can access state using this.state

23 / 71
NgNinja Academy | All Rights Reserved

They can use component lifecycle methods

Whenever you care state of the component
Use class component

// Class component

class ClassComponent extends React.Component {

constructor() {
super();
this.state = {age: 26};
}

render() {
return <h2>I am a class component!</h2>;
}
}

NOTE: Please prefer using Function components with React hooks whenever you
need to create component that need to track it's internal state.

24 / 71
NgNinja Academy | All Rights Reserved

Pure components

They are simplest and the fastest components

You can replace any component that only has render() function with pure components
It enhances simplicity and performance of app
When setState method is called:
Re-rendering happens - it's blind
It does not know if you really changed the value
It just re-renders - this is where pure component comes in handy
Pure components does a shallow compares the objects
So, do not blindly use pure components!
Know how your component state works before you use it

// App is a PureComponent
class App extends PureComponent {
state = {
val: 1
}

componentDidMount(){
setInterval(()=> {
this.setState(()=>{
return { val : 1}
});
}, 2000)
}

render() {
console.log('render App');
return (
<div className="App">
<Temp val={this.state.val}/>
</div>
);
}
}

25 / 71
NgNinja Academy | All Rights Reserved

Reusing Components

We can refer to components inside other components

This is great for writing a clean code
It is recommended to refactor duplicate elements to their own reusable components
Good rule of thumb - if you are using something more than 2 times refactor it out to be able to
reuse it

class ChildComponent extends React.Component {

render() {
return <h2>I am child!</h2>;
}
}

class FirstComponent extends React.Component {

render() {
return (
<div>
<h1>I am parent</h1>
<ChildComponent />
</div>
);
}
}

ReactDOM.render(<FirstComponent />, document.getElementById('root'));

26 / 71
NgNinja Academy | All Rights Reserved

States And Props

States

It represents data internal to the component

It represents the STATE of the component!
It is objects which supplies data to component
Variables which will modify appearance -
Make them state variables
DON'T include something in state if you DON'T use it for re-rendering your component
Include it in prop instead
Changing state re-renders component
State object is immutable

class MyComponent extends React.Component {

constructor(props) {
super(props);
this.state = {
array: [3,4],
userName: 'ninja'
};

changeUserName = () => {
// NOTE: this will NOT change this.state.array
this.setState({
userName: 'rjNinja'
});
}

render() {
return (
<div>
<p>
It is a {this.state.userName}
</p>
<button
type="button"
onClick={this.changeColor}
27 / 71
NgNinja Academy | All Rights Reserved

>Change UserName</button>
</div>
);
}
}

Props

Props are used to communicate between components

Child components should be passed state data using props
Props are immutable
They are readonly
You will get an error if you try to change their value.
Always passed down from parent to child
Data Flow:
state c1 -> prop c2 -> state c2 -> render
State data of c1 component are passed at props to the c2 component
c2 component use the props as initialize its own state data
And then the state data is used to render the c2 component
Keep props in control
Don't go crazy about de ning them

// In Parent component
<Child name="Dan" id="101"></Child>

// Child component definition

<h1>{props.name}</h1>
<p>{props.id}</p>

28 / 71
NgNinja Academy | All Rights Reserved

Event Handling

Very similar to handling events on DOM elements

Events are named using camelCase, rather than lowercase
With JSX you pass a function as the event handler
React has the same events as HTML: click, change, mouseover etc

// handleClick is an event handler attached to the click event

<button onClick={handleClick}>
Activate Lasers
</button>

Call preventDefault explicitly to prevent default behavior

function handleClick(e) {
e.preventDefault();
}

Bind this

Needed only in case of Class components

this represents the component that owns the method

29 / 71
NgNinja Academy | All Rights Reserved

Tip: Use arrow functions to avoid confusion about this

class Car extends React.Component {

drive = () => {
// The 'this' keyword refers to the component object
alert(this);
}

render() {
return (
<button onClick={this.drive}>DRIVE</button>
);
}
}

Passing Arguments

// event handler
drive = (a) => {
alert(a);
}

// inside render function

<button onClick={() => this.drive("Far")}>Drive!</button>

30 / 71
NgNinja Academy | All Rights Reserved

Two Way Binding

Idea of two way data binding is that the state of the component and the view that user sees
remains in sync all the time

One way data binding

React supports one-way data binding by default

Unlike AngularJS
So, a parent component has to manage states and pass the result down the chain to its children

Two Way - 2 way binding

Two Way data binding is not available by default - out of the box like AngularJS
You need event handling to do that

Check the above illustration

Users types something on the input control on the view - the UI

This triggers an on-change event

31 / 71
NgNinja Academy | All Rights Reserved

We can listen on this event and update the state of the component with the value that user typed

And the state of component becomes the source of the truth - meaning its value is then fed to the
view that user sees

Below code example is how you update state with the value entered on the input

onHandleChange(event) {
this.setState({
homeLink: event.target.value
});
}

<input type="text" value={this.state.homeLink} onChange={(event) =>

this.onHandleChange(event)} />

32 / 71
NgNinja Academy | All Rights Reserved

Module 3 - Styling your

components

Inline Styles

Inline styling react component means using JavaScript object to style it

Tip: Styles should live close to where they are used - near your component

class MyComponent extends React.Component {

let styleObject = {
color: "red",
backgroundColor: "blue"
}

render() {
return (
<div>
<h1 style={styleObject}>Hi</h1>
</div>
);
}
}

33 / 71
NgNinja Academy | All Rights Reserved

// You can also skip defining objects to make it simpler

// But, I don't recommend it because it can quickly get out of hands and
difficult to maintain

render() {
return (
<div>
<h1 style={{backgroundColor: "blue"}}>Hi</h1>
</div>
);
}

CSS Stylesheets

For bigger applications it is recommended to break out styles into separate les
This way you can also reuse styles in multiple components by just importing the CSS le

// style.css file
.myStyle {
color: "red";
backgroundColor: "blue";
}

// component.js file
import './style.css';

class MyComponent extends React.Component {

render() {
return (
<div>
<h1 className="myStyle">Hello Style!</h1>
</div>
);
}
}

34 / 71
NgNinja Academy | All Rights Reserved

Dynamic Styles

You can dynamically change your component styles

Real world example: when your input is invalid you'd want to show red color text inside the input

onHandleChange(event) {
if(error) {
this.setState({
color: "red"
});
}
else {
this.setState({
homeLink: event.target.value
});
}

<input type="text" value={this.state.homeLink} onChange={(event) =>

this.onHandleChange(event)} style={{color: this.state.color}} />

You can also dynamically change the class names instead of individual styles

// Traditional way
<input type="text" className={'valid ' + this.state.newClass} />

// Using string template

35 / 71
NgNinja Academy | All Rights Reserved

Module 4 - Advanced React

Conditional Rendering

React components lets you render conditionally using traditional conditional logic
This is useful in situations for example: showing loading state if data is not yet retrieved else show
the component details when data is retrieved
You can use if..else or ternary or short-circuit operators to achieve this

// IF-ELSE

const Greeting = <div>Hello</div>;

// displayed conditionally
function SayGreeting() {
if (loading) {
return <div>Loading</div>;
} else {
return <Greeting />; // displays: Hello
}
}

// Using ternary and short-circuit method

const Greeting = <div>Hello</div>;

const Loading = <div>Loading</div>;
36 / 71
NgNinja Academy | All Rights Reserved

function SayGreeting() {
const isAuthenticated = checkAuth();

return (
<div>
{/* if isAuth is true, show AuthLinks. If false, Login */}
{isAuthenticated ? <Greeting /> : <Loading />}

{/* if isAuth is true, show Greeting. If false, nothing. */}

{isAuthenticated && <Greeting />}
</div>
);
}

Outputting Lists

React uses Array.map method to output items in an array

This is needed in situations for example outputting list of fruits, or list of users in your database
You can render multiple component using Array.map just as you'd do with normal collection of
numbers or string

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
<div>{number}</div>
);

A little advanced example where you have a component that accepts list of numbers through
props

37 / 71
NgNinja Academy | All Rights Reserved

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<div>{number}</div>
);
return (
<div>{listItems}</div>
);
}

const numbers = [1, 2, 3, 4, 5];

Keys

When you run the above code it will give you a warning that a key should be provided to each of
the item
Also, when you provide that key it should be unique for each item
You can modify the code to below

const listItems = numbers.map((number) =>

<div key={number.toString()}>{number}</div>
);

Keys are useful construct in React

It helps React identify and keep track updates on each item in the collection
That is why it is important for keys to be unique
Avoid using index of array item as keys as it may negatively impact performance and cause
unexpected bugs

38 / 71
NgNinja Academy | All Rights Reserved

39 / 71
NgNinja Academy | All Rights Reserved

Higher Order Components

It is a design pattern
Not speci cally for React - but widely used in React
It is a technique for reusing component logic
Higher-order component is a function that takes a component and returns a new component

const ModifiedComponent = higherOrderComponent(WrappedComponent);

It is used to move out the shared same functionality across multiple components
Example: manage the state of currently logged in users in your application
create a higher-order component to separate the logged in user state into a container
component
then pass that state to the components that will make use of it

// commonStyles.js
// this is used by HOC
const styles = {
default : {
backgroundColor: '#737373',
color: '#eae8e8',
},
disable : {
backgroundColor: '#9c9c9c',
color: '#c7c6c6',
}
}

export default styles;

// HOC

const translateProps = (props) => {

let _styles = {...commonStyles.default}

if(props.disable){

40 / 71
NgNinja Academy | All Rights Reserved

// existing plus disable styles!!!

_styles = {..._styles, ...commonStyles.disable};
}

const newProps = {...props, styles:_styles }

return newProps;
}

// this function is the HOC function

// it takes in button... and passes the necessary props to that component
export const MyHOC = (WrappedComponent) => {
return function wrappedRender(args) {
return WrappedComponent(translateProps(args));
}
}

// USAGE: button component

const MyButton = (props) => {
return (
<button style={props.styles}>I am MyButton</button>
)
}

// USAGE of HOC
export default MyHOC(ButtonOne);

Cons of HOC

HOC can be di cult to understand initially

Every view that will be used with the HOC has to understand the shape of the props passed
Sometimes we have to have a component whose only purpose is transforming props into the
intended ones, and that feels ine cient
Some HOCs will always lead to branched views...
similar views but not exactly same looking
Multiple/nested HOCs are bug prone
hard to debug bugs
Typing is not easy

41 / 71
NgNinja Academy | All Rights Reserved

Render Props

Render prop is a pattern in which you are passing a function as a prop

Also known as Children as Function pattern
render props and HOC patterns are interchangeable
You can use one or the other
Both patterns are used to improve reusability and code clarity
Simply put, when you are using this.props.children you are using render prop
We are using children as the render prop

Con

It can lead to a nasty callback hell

This is solved by react hooks

// Section
const Section = ({children}) => {
const number = 1000;

return children(number);
};

// App
<Section>
{({number}) => (
<div>
<p>You are at {number}</p>
</div>
)}
</Section>

42 / 71
NgNinja Academy | All Rights Reserved

43 / 71
NgNinja Academy | All Rights Reserved

Component Lifecycle

These lifecycle methods pertains to class-based React components

4 phases: initialization, mounting, updating and unmounting in that order

initialization

This is where we de ne defaults and initial values for this.props and this.state
Implementing getDefaultProps() and getInitialState()

mounting

Occurs when component is being inserted into DOM

NOTE: Child component is mounted before the parent component

componentWillMount() and componentDidMount() methods are available in this phase

44 / 71
NgNinja Academy | All Rights Reserved

Calling this.setState() within this method will not trigger a re-render

This notion can be used to your advantage

This phase methods are called after getInitialState() and before render()

componentWillMount()

This method is called before render

Available on client and server side both
Executed after constructor
You can setState here based on the props
This method runs only once
Also, this is the only hook that runs on server rendering
Parent component's componentWillMount runs before child's componentWillMount

componentDidMount()

This method is executed after rst render -> 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 make ajax calls here
You can also setup any subscriptions here
NOTE: You can unsubscribe in componentWillUnmount

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
Remember: this should be used sparingly as you can introduce subtle bugs into your application if
you aren’t sure of what you’re doing.
To update the state -> return object with new values
Return null to make no updates

45 / 71
NgNinja Academy | All Rights Reserved

static getDerivedStateFromProps(props, state) {

return {
points: 200 // update state with this
}
}

updating

When component state and props are getting updated

During this phase the component is already inserted into DOM

componentWillReceiveProps()

This method runs before render

You can setState in this method
Remember: DON'T change props here

shouldComponentUpdate()

Use this hook to decide whether or not to re-render component

true -> re-render
false -> do not re-render
This hook is used for performance enhancements

46 / 71
NgNinja Academy | All Rights Reserved

shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}

getSnapshotBeforeUpdate()

This hook is executed right after the render method is called -

The getSnapshotBeforeUpdate lifecycle method is called next
Handy when you want some DOM info or want to change DOM just after an update is made
Ex: 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
Think of it as staged changes before actually pushing to the DOM
Doesn't work on its own
It is meant to be used in conjunction with the componentDidUpdate lifecycle method.
Example usage:
in chat application scroll down to the last chat

componentWillUpdate()
47 / 71
NgNinja Academy | All Rights Reserved

It is similar to componentWillMount
You can set variables based on state and props
Remember: do not setState here -> you will go into an in nite loop

componentDidUpdate()

This hook it has prevProps and prevState available

This lifecycle method is invoked after the getSnapshotBeforeUpdate is invoked
Whatever value is returned from the getSnapshotBeforeUpdate lifecycle method is
passed as the THIRD argument to the componentDidUpdate method.

componentDidUpdate(prevProps, prevState, snapshot) {

if (condition) {
this.setState({..})
} else {
// do something else or noop
}
}

unmount

This phase has only one method → componentWillUnmount()

It is executed immediately BEFORE component is unmounted from DOM
You can use to perform any cleanup needed
Ex: you can unsubscribe from any data subscriptions

componentWillUnmount(){
this.unsubscribe();
48 / 71
NgNinja Academy | All Rights Reserved

Error handling

static getDerivedStateFromError()
Whenever an error is thrown in a descendant component, this method is called rst

static getDerivedStateFromError(error) {
console.log(`Error log from getDerivedStateFromError: ${error}`);
return { hasError: true };
}

componentDidCatch()

Also called after an error in a descendant component is thrown

It is passed one more argument which represents more information about the error

componentDidCatch(error, info) {

49 / 71
NgNinja Academy | All Rights Reserved

Module 5 - React hooks

React Hooks Basics

Introduced in React 16.8

It is a way to add React.Component features to functional components
Speci cally you can add state and lifecycle hooks
It o ers a powerful and expressive new way to reuse functionality between components
You can now use state in functional components
Not only the class components
Real world examples:
Wrapper for rebase API
React based animation library
react-spring

Why React Hooks?

Why do we want these?

JS class confuses humans and machines too!
Hooks are like mixins
A way to share stateful and side-effectful functionality between components.
It o ers a great way to reuse stateful code across components
It can now replace your render props or HOCs
Developers can care LESS about the underline framework

50 / 71
NgNinja Academy | All Rights Reserved

Focus more on the business logic

No more nested and complex JSX (as needed in render props)

51 / 71
NgNinja Academy | All Rights Reserved

useState React Hook

useState hook gives us local state in a function component

Or you can simply use React.useState()
Just import useState from react
It gives 2 values
1st - value of the state
2nd - function to update the state
It takes in initial state data as a parameter in useState()

import React, { useState } from 'react';

function MyComponent() {

// use array destructuring to declare state variable

const [language] = useState('react');

return <div>I love {language}</div>;

}

Second value returned by useState hook is a setter function

Setter function can be used to change the state of the component

function MyComponent() {

// the setter function is always the second destructured value

const [language, setLanguage] = useState('react');

return (
<div>
<button onClick={() => setLanguage("javascript")}>
I love JS
</button>
<p>I love {language}</p>
</div>
);

52 / 71
NgNinja Academy | All Rights Reserved

You can create as many states as you'd want in your component

const [language, setLanguage] = React.useState('React');

const [job, setJob] = React.useState('Google');

You can initiate your state variable with an object too

const [profile, setProfile] = React.useState({

language: 'react',
job: 'Google'
});

53 / 71
NgNinja Academy | All Rights Reserved

useE ect React Hook

It lets you perform side e ects in function components

It is used to manage the side e ects
Examples of side e ects:
Data fetching
Setting up subscription
Manually changing DOM in react components
Think of useEffect Hook as componentDidMount, componentDidUpdate, and
componentWillUnmount combined together into one function
So previously we would have to duplicate the code in all those 3 lifecycle hooks
This is solved with useEffect

More About useEffect

E ects scheduled with useEffect don’t block the browser from updating the screen
Unlike the class based lifecycle
By using this Hook, you tell React that your component needs to do something after rendering
Does useEffect run after every render? Yes!
You can add multiple useEffect hook functions to do di erent things in a single component
That is the beauty of useEffect

Cleanup

useEffect also handles cleanup

Just return a function which does the cleanup
useEffect will run it when it is time to clean up
React performs the cleanup when the component unmounts

54 / 71
NgNinja Academy | All Rights Reserved

React also cleans up e ects from the previous render before running the e ects next time

import React, { useState, useEffect } from 'react';

function MyComponent() {
const [count, setCount] = useState(0);

// NOTE: when component is mounted pass empty array

// this hook only runs 1 time after component is mounted
useEffect(() => {
console.log("I am born. Runs 1 time.")
}, []);

// NOTE: define another useeffects for componentDidMount and

componentDidUpdate
useEffect(() => {
console.log("Runs on initial mount, and also after each update")

// Update the document title using the browser API

document.title = `You clicked ${count} times`;

// NOTE: return function that does the cleanup

// Unsubscribe any subscriptions here
return function cleanup() {
console.log("This function takes care of cleanup")
// ex: window.removeEventListener()
}
});

return <button onClick={() => setCount(count + 1)}>Update

Count</button>;
}

55 / 71
NgNinja Academy | All Rights Reserved

useRef React Hook

useRef returns a mutable ref object.

The object's .current property is initialized to the passed argument - default initial value.
The returned object will persist for the full lifetime of the component.

const refObject = useRef(initialValue);

Two Use Cases

1. Accessing DOM nodes or React elements

You can use it to grab a reference of the text input element and focus it on button click

import React, { useRef } from "react";

const MyComponent = () => {

const myInput = useRef();

focusMyInput = () => myInput.current.focus();

return (
<>
<input type="text" ref={myInput} />
<button onClick={focusMyInput}>Focus input</button>
</>
);
56 / 71
NgNinja Academy | All Rights Reserved

NOTE: you can use createRef if you are using Class components

2. Keeping a mutable variable

Equivalent to instance variables in class components
Mutating the .current property won't cause re-renders

const MyComponent = (prop) => {

const myCounter = useRef(0);

const updateState = () => {

// Now we can update the current property of Referenced object
myCounter.current++;
}

return (
<div>
<div>
<div>myCounter : {myCounter.current}</div>
<input type="button" onClick = {() => updateState()} value="Update
myCounter"></input>
</div>
</div>
);
}

Mutating the .current property doesn’t cause a re-render

React recommends three occasions where you can use it because you have no other choice.
Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.

57 / 71
NgNinja Academy | All Rights Reserved

Context

Provides a way to pass data through the component tree

without having to pass props down manually at every level
Passing down props can be cumbersome when they are required by many components in the
hierarchy
Use it when you want to share data that can be considered “global” for a tree of React
components
Ex: User information, Theme, Browser history

React.createContext

Use React.createContext to create a new context object

const MyThemeContext = React.createContext("light");

Context provider

We need a context provider to make the context available to all our React components
This provider lets consuming components to subscribe to context changes

function MyComponent() {
const theme = "light";

return (
<MyThemeContext.Provider value={theme}>
<div>
my component
</div>
</MyThemeContext.Provider>
);
}

Consuming context

We assign a contextType property to read the current theme context

In this example, the current theme is "light"
After that, we will be able to access the context value using this.context

class ThemedButton extends React.Component {

static contextType = MyThemeContext;

render() {
return <Button theme={this.context} />;
}
}

useContext

In the previous chapter we learned about what is Context and why it is useful in React
Context can also be used in Function components

Consuming context with functional components is easier and less verbose

We just have to use a hook called useContext
It accepts a context object
It returns the current context value for that context

const Main = () => {

const currentTheme = useContext(MyThemeContext);

return(
<Button theme={currentTheme} />
);
}

useContext(MyThemeContext) only lets you read the context and subscribe to its changes
You still need a <MyThemeContext.Provider> above in the tree to provide the value for this
context

function MyComponent() {
const theme = "light";

return (
<MyThemeContext.Provider value={theme}>
<div>
my component
</div>
</MyThemeContext.Provider>
);
}

Module 6 - App performance

optimization

Improve React app performance

Measure performance using these tools

Chrome dev tools
Play with the throttle feature
Check out the performance timeline and ame charts
Chrome's Lighthouse tool
Minimize unnecessary component re-renders
use shouldComponentUpdate where applicable
use PureComponent
use Rect.memo for functional components
along with the useMemo() hook
use React.lazy if you are not doing server-side rendering
use service worker to cache les that are worth caching
use libraries like react-snap to pre-render components

Example of shouldComponentUpdate
NOTE: It is encouraged to use function components over class components
With function components you can use useMemo() and Rect.memo hooks

// example of using shouldComponentUpdate to decide whether to re-render

function shouldComponentUpdate(nextProps, nextState) {

return nextProps.id !== this.props.id;
}

React devtools
Install the chrome extension
These are super power tools to pro le your application
You can also check why the component was updated
For this - install why-did-you-update package - https://github.com/maicki/why-did-you-
update

// example from https://github.com/maicki/why-did-you-update

import React from 'react';

if (process.env.NODE_ENV !== 'production') {

const {whyDidYouUpdate} = require('why-did-you-update');

whyDidYouUpdate(React);
}

// NOTE: Be sure to disable this feature in your final production build

Lazy load the components

Webpack optimizes your bundles
Webpack creates separate bundles for lazy loaded components
Multiple small bundles are good for performance

// TODOComponent.js
class TODOComponent extends Component{

render() {
return <div>TODOComponent</div>
}
}

// Lazy load your component

const TODOComponent = React.lazy(()=>{import('./TODOComponent.js')})

function AppComponent() {
return (<div>
<TODOComponent />
</div>)
}

Cache things worth caching

use service worker
It runs in the background
Include speci c functionality that requires heavy computation on a separate thread
To improve UX
This will unblock the main thread
Server-side rendering
Pre-render if you cannot SSR
It's a middle-ground between SSR and CSR
This usually involves generating HTML pages for every route during build time
And serving that to the user while a JavaScript bundle nishes compiling.
Check the app performance on mobile
Lists cause most of the performance problems
Long list renders cause problems
To x
Implement virtualized lists -> like in nite scrolling
Or pagination

Memoization

This feature is available from React > 16.6 version

Memoization is a technique to use previously stored results and fasten computation

Memoization means caching the output based on the input

In the case of functions, it means caching the return value based on the arguments
It is similar to shouldComponentUpdate or using pure components
But you don't need class components
You can use React.memo on function components

Let's see how memoization works using the above illustration

You can see that sum() method is being called multiple times

Without memoization the sum() method would be called and executed multiple times even if the
parameters passed to the methods are the same

From the above illustration sum(5, 10) would be computed twice WITHOUT memoization

This becomes expensive as your application starts to grow

The solution for this is - memoization

If the same method is called multiple times and the parameters passed to it are the same - it
logically means the answer would be the same

So, in memoization instead of computing the answer it is stored in a memory

And when the same method is called with the same parameters the stored answer is returned
without wasting the computation cycle on it

Similar idea is applied on memoized react components too

Because under the hood react components are nothing but JavaScript functions

And parameters passed to it are the props

So, if the props are the same memoized components are not re-rendered unnecessarily

When to use it?

It is used to not re-render your components unnecessarily

Suppose your state object is updating
But the value is not really changing
You can use memo to NOT re-render your functional component
If your component just takes primitive values as props,
Just wrap it in memo() to prevent an unwanted re-render.

export default React.memo((props) => {

return (<div>{props.val}</div>)
})

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

const MemoedElemenet = React.memo(Element, areEqual)

export function areEqual(prevProps: Props, nextProps: Props) {

const cardId = nextProps.id
const newActiveCardId = nextProps.activeCardId
const isActive = newActiveCardId === cardId

return !some([
isActive,
])
}

TIP: General advice is to avoid memoization until the pro ler tells you to optimize

useMemo

React.memo is used to memoize components

You can use useMemo to memoize inner variables
If there's CPU intensive operation going on to calculate those variables
And the variables does not really change that often - use useMemo

const allItems = getItems()

// CPU intensive logic

const itemCategories = useMemo(() => getUniqueCategories(allItems),
[allItems])

Lazy Loading

Lazy loading is another technique to improve your app's performance

You can split your JavaScript bundles and dynamically import the modules
Example: only import lodash sortby function dynamically in the code where it is actually needed

import('lodash.sortby')
.then(module => module.default)
.then(module => doSomethingCool(module))

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

// example from https://github.com/stratiformltd/react-loadable-visibility

import LoadableVisibility from "react-loadable-visibility/react-loadable";

import MyLoader from "./my-loader-component";

const LoadableComponent = LoadableVisibility({

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
signi cantly and without a warning before they become a part of React.

Suspense is another technique used for lazy loading

It lets you “wait” for some code to load and lets you declaratively specify a loading state (like a
spinner) while waiting

import React, { Component, lazy, Suspense } from 'react'

const MyComp = lazy(() => import('../myComp'))

<Suspense fallback={<div>Loading...</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 bugs that happen due to incorrect assumptions about the order in which
our code may 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

// install the experimental version

npm install react@experimental react-dom@experimental

// 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 />)

Using Suspense for data fetching

const CartPage = React.lazy(() => import('./CartPage')); // Lazy-loaded

// Show a spinner while the cart is loading

This approach is called Render-as-You-Fetch

1. Start fetching
2. Start rendering
3. Finish fetching

It means we don’t wait for the response to come back before we start rendering
We start rendering pretty much immediately after kicking o the network request

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>;
}

Sequence of action in the above example

1. CartPage is loaded
2. It tries to load CartDetails
3. But, CartDetails makes call to resource.product.read() - so this component “suspends”
4. React shows the fallback loader and keep fetching the data in the background
5. When all the data is retrieved the fallback loader is replaced by CartDetails children

Web Development

Table Of Content

Module 1 - Web Development Tooling

Git and GitHub Basics
What is Git
Install Git
Create Git project
Adding a le to your repo
Committing your le
Git clone
How to clone Git repo?
Git Branching
Checkout the branch
Merging branches
Git status
Webpack
Installing Webpack
Webpack in-depth
Webpack con g
Module 2 - HTTP and API
What is HTTP
HTTP is a stateless protocol
HTTP Headers
SSL and TLS
SSL handshake process
Web Services
How do web services work?
Why web services?
RESTful web services - REST API
Bene ts of REST APIs

More details about REST APIs

GraphQL
Simple Example
Bene ts of GraphQL / Why GraphQL?
Setup GraphQL
Create First GraphQL Application
Data Access Layer
Data store
Create a schema le schema.graphql
Creating your rst resolver
Query
Nested Query
Dynamic Queries
Mutations
Setting up GraphQL client
Online Playgrounds
GraphQL vs RESTful APIs
Apollo
Apollo client
Apollo Server
Module 3 - Web Application Performance
List of ways to reduce page load time?
How to lazy load images?
Method 1
Example
Method 2
Example
Web Worker
How Web Workers work
Terminating the worker thread
Web workers use cases
Important points about Web workers
Web workers cons
Server-side rendering SSR vs Client-side rendering CSR
Client-side rendering
Advantages of Client-Side Rendering
Disadvantages of Client-Side Rendering
Server-side rendering
Advantages of Server-Side Rendering
Disadvantages of Server-Side Rendering
Module 4 - Web security
Authentication vs Authorization
Authentication
Authorization
OAuth
How does OAuth work?

JSON Web Token - JWT

Structure of JWT
Popular analogy to explain JWT
How JWT works
Advantages of JWT
Disadvantages of JWT
Local storage vs Session storage
localStorage
sessionStorage
Web attacks
CSRF
How does CSRF work?
Defense against CSRF
XSS
How XSS work?
Defense against XSS
CORS
CORS Example
Principles of secure coding
Secure your Web application
Disable cache for web pages with sensitive data
Use HTTPS instead of HTTP
Prevent Content-Type Sni ng
Security in JavaScript

Module 1 - Web Development

Tooling

Git and GitHub Basics

What is Git

Git is a Version Control System (VCS)

A version control system helps you document and store changes you made to your le throughout
it's lifetime
It makes it easier to managing your projects, les, and changes made to them
You can go back and forth to di erent versions of your les using Git commands
It helps keep track of changes done to your les over time by any speci c user

Check out the illustration above. Here's a simple ow.

There are two parts

One your local setup on your machine

Two the remote setup where your project les are on the github

You keep coding in your "working folder" on your computer

Once you feel you have come to a point where you need to save changes such that a history is
maintained for it - that's where you start the commit process

In the commit process you stage all your changes

git add command for staging changes

Then you write a nice commit message that will describe your changes to the code

ex: Added new TODO component

Then you commit your changes to your "local repository"

git commit command for committing your changes

At this point git history is generated for your commited changed. But the changes are still on your
local system

Then you push your changes to the remote repository

git push command for pushing the changes

After this your changes are on the github cloud

So, anyone that has access to view your github repo can view these changes and can download it

They can also write on your changes if given su cient access

For downloading the remote repo change use git fetch

git checkout command is then used to start working on any git feature branch

git merge is used if you are already on the branch and just want to merge remote changes with
your local changes

NOTE: The exact syntax for these commands will be explained in the following sections

Install Git

You will rst have to install Git to be able to use it

You can follow the steps from their o cial docs - https://git-scm.com/
Once you install verify it by running this command

git

// sample output excerpt

usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]

[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
[-p | --paginate | -P | --no-pager] [--no-replace-objects] [--
bare]
[--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
<command> [<args>]

Create Git project

After your have installed the Git create your rst project by running following command

git init Ngninja

// Ngninja is your project name. It can be anything you want.

cd Ngninja

When you run this command a Git repository will be created

And you will go inside that directory

Adding a le to your repo

Create a text le first.txt in your new folder

Now to add that le to the Git repository run the following command

git add first.txt

This will stage your le making it ready to commit

The git add command takes a snapshot of your le
Now you will have to push/save this snapshot to your Git repository

Pro tip: You can add all your les by simply running git add . instead of providing the individual
le names

Committing your le

Once you have staged your you will have to run commit command to push your changes to the Git
repository

Run the following command to commit your changes

git commit -m "my first commit"

Running this command will make save the snapshot of that le in your Git history
Commit command can take multiple ags allowing you to customize the command
-m ag is used to provide the commit message
You can see list of all the available ags here

Git clone

You can clone a Git repository

Cloning is to make a copy of the repo and download it to your local computer

How to clone Git repo?

First get the download link of the repo

On your terminal to your desired projects directory using cd projects
Clone the project

git clone [download link]

Go to the project directory and check the content that are downloaded

$ cd myProject

$ ls

Git Branching

Git provides a way for multiple people working on the same project using di erent branches

Think of Git as a tree

Each developer can create their own branch to do their speci c work on the project
The main branch of the tree is usually called master
Each developer can commit their changes to their respective branches
And when their work is nished they can merge their changes to the main master branch

Run the below command to create your Git branch

git branch featureABC

It will create a new branch named featureABC

Like the other Git command this command has other ags available to use
Read the entire list here

Checkout the branch

Please note that the above git branch command will only create a new branch
To move your control to that branch you will have to execute another command
It is called checkout in Git language

git checkout featureABC

This will change your current branch to featureABC

Pro Tip: You can create and checkout a new branch in just one command using - git checkout
-b featureABC

Merging branches

After you are done working on a feature you may want to merge it to the master branch where
you maintain the code for all the completed features
To do that you will have to merge your branch with the master branch
Run the following commands to do the merge

git checkout master

git merge featureABC

Here you are switching your branch to master

Then the merge command merges the changes from the featureABC branch to the master
branch
If there are merge con icts you will have to solve them before completing the merge

Git status

This command lists all the les that you have worked on and have not been committed yet.

git status

Webpack

It is a module loader/packager/module bundler

You can code your modules independently
And then just give the starting point to your project
You can provide "entry point" to your app
It then resolves all its imports recursively
You can use it to minify your code
CSS, JavaScript, Static les

// Simple config

// It will combine and included all referenced files and minify your
JavaScript
"scripts": {
"build": "webpack"
}

Then you can run the above command using npm or yarn as follows

npm run build

Installing Webpack

Run the following command in your project directory to install webpack

npm install --save-dev webpack webpack-dev-server webpack-cli

webpack module — this includes all core webpack functionality

webpack-dev-server — this enables development server to automatically rerun webpack when

our le is changed

webpack-cli — this enables running webpack from the command line

To run development server write this in your package.json

Then run npm run dev

To make your project ready for production run npm run build

"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},

Webpack in-depth

You can also load external plugins and dependencies using Webpack

For ex: You can also transpile your JavaScript le using Babel

Webpack is used to manage your code

For example: Put code together and combine everything in a single le

So that there are no dependency issues because of order of importing les
You just have to mention in each le all its dependencies
Then web pack nds the code properly for you

It does not duplicate imported modules or dependencies

Even if you import is multiple times in di erent les

Some more examples

"scripts": {
"build": "webpack src/main.js dist/bundle.js", // create bundled JS file
"execute": "node dist/bundle.js", // uses Node.js to execute/run the
bundled script
"start": "npm run build -s && npm run execute -s" // do everything above
in single command
}

Webpack con g

We can write custom webpack con g for our project

Create webpack.config.js in your project root directory and write your con g in that le
Sample con g le can look like this

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
mode: "development",
entry: "./modules/index.js"
output: {
filename: "build.js"

path: path.resolve(__dirname, "build"), // creates a build folder in

root
},
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
],
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),
}),
]
}

You can set mode to development or production

Default is production mode
development mode means JavaScript is not mini ed
So it is easy to debug
You can use bad practices like eval
production
It mini es code
You cannot use bad practices like eval
The build is optimized for better performance
The entry tells Webpack where to start
It takes one or more entries
It looks in these entry les if some other les are imported
It goes down to till no le is importing any other le
output con g
main.js by default
You can provide custom output le name, and le path
output path
It is recommended to install path package
You can use it to correctly specify path instead of guess work
So you can avoid doing ../../.....
rules de ne actions to perform based on the predicate
We wrote a rule above for CSS les
For all the CSS les please run it through the style-loader and css-loader
plugins lets you customize your project packaging
We have added HtmlWebpackPlugin
Install it with npm install html-webpack-plugin -D command
This plugin will generate index.html le in the same directory where our build.js is
created by Webpack
This step will be useful to deploy your React project to Netlify

Module 2 - HTTP and API

What is HTTP

Hyper Text Transfer Protocol

It de nes a set of rules for sending and receiving (transfer) web pages (hypertext)
It is also used to transfer other type of data like JSON and images
It is a simple request -> response cycle between a local machine called as client and a
remote machine called as server
When a request is made it has 3 main pieces
Start-line
Method, target, version
ex: GET /image.jpg HTTP/2.0
Headers
Body
When a response is send back it also has 3 main pieces
Start-line
Version, status code, status text
ex: HTTP/2.0 404 Not Found
Headers
Body

Above illustration shows a simple work ow design on how HTTP works

Your browser makes a GET request to get the site data
ngninja.com in this case
The web server has all the needed content to load the site
The web server sends the necessary content back to the browser in response

HTTP is a stateless protocol

It treats each pair of request and response independent

It does not require to store session information
This simpli es the server design
As there is no clean up process required of server state in case the client dies
But, disadvantage being - additional information is required with every request which is interpreted
by server

HTTP Headers

Information about client and server systems are transmitted through HTTP headers
For ex: timestamps, IP addresses, server capabilities, browser information, cookies
Some examples of HTTP headers are as mentioned below
General headers
Request URL: https://www.ngninja.com
Request Method: GET
Status Code: 200 OK

Request Headers
Accept: text/html
Accept-Language: en-US,en
Connection: keep-alive
Host: ngninja.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6
Cookie: key=value; key2=value2; key3=value3
Response Headers
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json
Server: nginx
X-Content-Type-Options: nosni
Content-Length: 648

SSL and TLS

Secure Sockets Layer - SSL

Transport Layer Security - TLS
SSL and TLS are cryptographic protocols that guards HTTP
The combination of TLS (or SSL) and HTTP creates an HTTPS connection
SSL is older than TLS
But, "SSL" is commonly used to refer to TLS
Following protocols use TLS
HTTPS = HTTP + TLS
FTPS = FTP + TLS
SMTPS = SMTP + TLS
Why do we need TLS?
Authentication
Verify identity of communicating parties
Con dentiality
Protect exchange of information from unauthorized access
Integrity
Prevent alteration of data during transmission

SSL handshake process

Client contacts the server and requests a secure connection

Server replies with cryptographic algorithm or cipher suites
Client compares this against its own list of supported cipher suites
Client selects one from the list and let the server know about it
Then server provides its digital certi cate
This is issued by third party
This con rms server's identity
It contains server's public cryptographic key
Client receives the public cryptographic key
It then con rms the server's identity
Using the server's public key client and server establishes a session key
This key will be used to encrypt the communication
ex: Di e–Hellman key exchange algorithm can be used to establish the session key
Encrypted messages are transmitted over the other side
These messages will be veri ed to see if there's any modi cation during the transmission

If not, the messages will be decrypted with the secret key

NOTE: Session key is only good for the course of a single, unbroken communications session. A
new handshake will be required to establish a new session key when communication is re-
established

Web Services

They are reusable application components

Ex: currency conversion app, weather app
These applications are mainly based on open standards like XML, HTTP, SOAP,etc.
Web services communicate with each other to exchange data
They are self-contained, modular, distributed, dynamic applications
They use standardized XML messaging system

How do web services work?

Web services work using the following components

SOAP
Simple Object Access Protocol
It is a communication protocol
Used to transfer messages
It uses the internet to communicate
XML based messaging protocol
WSDL
Web Services Description Language
Used describe the availability of service
This is written in XML
It is used to describe operations and locate web services

Why web services?

You can expose existing functionality over the internet and make them reusable
Applications using di erent tech-stack can communicate with each other
It o ers low-cost way of communicating
It decouples your application from the web service
It can be used to exchange simple to complex documents/data

RESTful web services - REST API

REST is an architectural style

REpresentational State Transfer (REST)
It is a stateless client-server architecture
Web services are viewed as resources and they are identi ed by their URIs
Web clients can access or modify these REST resources
It is often used in mobile applications, social networking sites

Query example:

http://www.ngninja.com/user/12345

Above illustration shows the basics of how REST API works

REST lets us use HTTP for all four CRUD (Create/Read/Update/Delete) operations
For example if you are interacting with some customer data
Customer in the example is the "resource"
GET -> Read resource
Read customer data
POST -> Create new resource
Create new customer
PUT -> Update an existing resource
Update existing customer's information
DELETE -> Delete a resource
Delete the customer

Bene ts of REST APIs

It is a light-weight alternative to RPC, SOAP

Platform-independent, Language-independent
REST is totally stateless operations
REST - simple GET requests, caching possible
REST is simpler to develop
Separating concerns between the Client and Server helps improve portability
Client-server architecture also helps with scalability

More details about REST APIs

GET query is used to get/read a resource

POST is used to create
It is not idempotent
PUT is used to update (if does not exist create it)/Replace
It must also be idempotent
DELETE is used to delete resources
The operations are idempotent

Idempotent means result of multiple successful requests will not change the state of the resource
after initial application

GraphQL

Developed by Facebook
Co-creator Lee Byron
It is an open-source server-side technology
It is an execution engine and a data query language

GraphQL is used to interact with server data source

Just like RESTFul APIs you can perform CRUD operations on the data
There are two types of operations you can perform
Queries
Mutations
Queries are used to read the data
Mutations are used to create, update or delete the data

Simple Example

Lets query for Person data

Person entity can contain other information too like lastname, date of birth
But we can only query for firstName if we want to.

// Query

id
firstName
}
}

// Result

{
"data": {
"person": [
{
"id": "123",
"firstName": "Foo"
},
{
"id": "234",
"firstName": "Boo"
}
]
}
}

Bene ts of GraphQL / Why GraphQL?

Fast
It gives only what you ask for
It saves multiple round trips
Robust
It returns strongly typed response
APIs don't need versioning
Because you can customize what you ask for at any time
Docs are auto-generated
Because it is strongly typed language

Central schema
It provides a central data model
It validates, executes, and is always an accurate picture of what data operations can be
performed by the app
Provides powerful query syntax for traversing, retrieving, and modifying data
Ask for what you want
It gets exactly that
It can restrict data that should be fetched from the server
Debugging is easy
Because it is strongly typed language

Setup GraphQL

You need the recent version of Node.js

run node -v to verify
VSCode GraphQL plugin is recommended

Create First GraphQL Application

Create a folder my-app

Go to the folder
Create package.json with following dependencies

{
"name": "ngninja-graphql-apollo-server-example",
"private": true,
"version": "1.0.0",

...

"dependencies": {
"body-parser": "1.17.2",
"cors": "2.8.3",
"express": "4.15.3",
"graphql": "0.10.3",
"graphql-server-express": "0.9.0",
"graphql-tools": "1.0.0"
},
"devDependencies": {
"babel-cli": "6.24.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.5.2"
}
}

Then install all dependencies

npm install

Data Access Layer

Create your database document in a le called person.json under data folder

// person.json

[
{
"id": "123",
"firstName":"Foo",
"lastName":"Boo",
},
]

Data store

We need to create a datastore that loads the data folder contents

Create db.js le under your project folder

const { DataStore } = require('notarealdb')

const store = new DataStore('./data')

Create a schema le schema.graphql

It describes the functionality available to the clients

It helps decouple client and server

// schema.graphql

type Query {
persons:[Person]
}

type Person {
id:ID!
firstName:String
lastName:String
}

Creating your rst resolver

Resolver is a function that generates response for a query

persons resolver will return the list of persons
Create resolver.js le

// resolver.js

const db = require('./db')
const Query = {
persons:() => db.persons.list()
}

module.exports = {Query}

Query

This is how you fetch and read data in Graphql

The query keyword is optional
It is better than REST API
Because user has exibility on what elds to query for
Smaller queries means lesser network tra c so better performance

// query with name myQuery

query myQuery{
persons {
id
}
}

// without query keyword

{
persons {
id
}
}

Nested Query

You can also nest queries to create complex queries and fetch multiple entities
Example get persons and their companies

// schema file

type Company {
id:ID!
name:String
}

type Person {
id:ID!
firstName:String
lastName:String
company:Company
}

Now update the resolve to return nested results

root represents person entity
companyId is used to query for the companies

// resolver file

const Person = {
firstName:(root,args,context,info) => {
return root.firstName
},
company:(root) => {
return db.companies.get(root.companyId);
}

}
module.exports = {Query,Student}

You can write nested query like below

This will query for company object under person object

{
persons{
id
firstName
company {
id
name
}
}
}

Dynamic Queries

You can use query variables to pass dynamic values to the query

// schema
type Query {
sayHello(name: String!):String
}

// resolver
sayHello:(root, args, context, info) => `Hi ${args.name}. Welcome!`

// query
query myQuery($myName: String!) {
sayHello(name: $myName)
}

Mutations

Mutations are way to modify server data

Use it to insert, update, or delete data
NOTE: You can do it using query too -> but not recommended
It is just like REST's GET API can modify data
But not a good convention

// simple example
// schema

type Mutation {
createPerson(firstName: String, lastName: String): String
}

// resolver

const db = require('./db')

const Mutation = {
createPerson: (root, args, context, info) => {
return db.students.create({
firstName: args.firstName,
lastName: args.lastName,
})
},
}

module.exports = {Mutation}

// mutation query

mutation {
createPerson(firstName: "Foo", lastName: "Boo")
}

Above mutation query will create a new person

rstName -> Foo
lastName -> Boo

Setting up GraphQL client

GraphQL client is used to the GraphQL server and use the queries and mutations you de ned on
the server

You can de ne GraphQL client by a React app like below

Create react app using the create-react-app tool

npx create-react-app my-app

Run a development server at port 3000 to run this react app

Below code is to get Graphql data in App component
It assumes you have run the application
Then click the Show button
It should you the rst person's rst name

import React, { Component } from 'react';

import './App.css';

async function loadPeople(name) {

const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type': 'application/json'},
body:JSON.stringify({query: `{persons}`})
})

const responseBody = await response.json();

return responseBody.data.persons;
}

class App extends Component {

constructor(props) {
super(props)

this.state = { persons: [] }
this.showPerson = this.showGreeting.bind(this)
}

showPerson() {
loadPeople().then(data => this.setState({ persons: data }))
}

render() {
const { persons } = this.state

return (
<div className = "App">
<header className = "App-header">
<h1 className = "App-title">Welcome to React</h1>
</header>

<section>
<button id="btnGreet" onClick=
{this.showPerson}>Show</button>
<br/>
<div id="personsDiv">
<h1>{persons[0].firstName}</h1>
</div>
</section>
</div>
)
}
}

export default App;

Online Playgrounds

You can use Web IDE with autocompletion support and interactive schema lookups
https://github.com/graphql/graphiql
https://github.com/prisma-labs/graphql-playground
You can also using code sandbox - https://codesandbox.io/dashboard/recent
Select Apollo GraphQL Server sandbox
There are also public graphQL APIs to play with
https://apis.guru/graphql-apis/

GraphQL vs RESTful APIs

REST API returns a lot of things

Not everything is necessary all the time
Not good for slower clients
There is no query language built into REST
So cannot request just the required data
REST is not good for client-speci c services
You might have to create another intermediate service -> to provide client-speci c data
REST needs multiple round trips for related data/resources

Apollo

O cial site - https://www.apollographql.com/

Apollo provides all tooling to manage any data your app needs
Make it much easier for developers to use GraphQL
It is easy to implement data fetching, loading, error handling
It also manages cache
It does not blindly query for the data
Apollo has control over fetching policies

It helps with data pre-fetching

It o ers optimistic updates
Apollo don't wait for the full round trip
It immediately updates UI with the data you know will be there
Use the optimisticResponse prop
Pre-fetch, delay-fetch, polling - all possible
You can set poll frequency
Works great with Typescript
It also o ers server-side rendering

Apollo client

Tool that helps you use GraphQL in the frontend

You can write queries as a part of UI components
You can also write write declarative styles queries
It helps with state management - very useful for large scale applications

Apollo Server

It is your API gateway

It can directly talk to your database
Or it can be a middle layer to your REST API
And your existing REST API can continue talking to the database
You can combine multiple data sources

Module 3 - Web Application

Performance

List of ways to reduce page load time?

Write and include your CSS on top

Add your JavaScript references at the bottom
Lazy loading use defer in script tag - <script src="index.js" defer></script>
Reduce your image size
Use webp image format
They provide lossless compression
Use svg whenever possible
They are smaller than bitmap images, responsive by nature
They work well with animation
Use browser caching on your API requests
Delivering cached copies of the requested content instead of rendering it repeatedly
Reduces the number of client-server round trips
Use fragment caching
It stores the output of some code block that remains unchanged for a very long time
It is an art of caching smaller elements of non-cacheable dynamic website content
Example: Redis object cache
Reduce load on the Database server
Heavy queries - complicated joins should be put on caching servers. Like Redis.
Your Database should be hit minimum times possible
Reduce simple queries
Add minimum table join queries
Add master-slave Database con g
Master is the true copy
Slaves are replicates
Writes happen on master
41 / 70
NgNinja Academy | All Rights Reserved

Reads can happen on slaves

Have multiple masters to reduce downtime during updates
Do Database sharding
Simple formula: ID's mod by N
There are other sophisticated algorithms you can use

How to lazy load images?

There are plugins available too

Below are some methods using vanilla JavaScript

Method 1

David Walsh's method

It is easy to implement and it’s e ective
Images are loaded after the HTML content
However, you don’t get the saving on bandwidth that comes with preventing unnecessary image
data from being loaded when visitors don’t view the entire page content
All images are loaded by the browser, whether users have scrolled them into view or not
What happens if JS is disabled?
Users may not see any image at all
Add <noscript> tag with src property

Example

Here we are selecting all the images with img[data-src] selector

Once the HTML is loaded we just replace the data-src attribute with src attribute which will
render the image

<img data-src="myImage.jpg" alt="My Image">

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img)
{

img.setAttribute('src', img.getAttribute('data-src'));

img.onload = function() {
img.removeAttribute('data-src');
};

});

Method 2

Progressively Enhanced Lazy Loading

It is an add on to previous David Walsh's method
It lazy loads images on scroll
It works on the notion that not all images will be loaded if users don’t scroll to their location in the
browser

Example

We have de ned function isInViewport which determines where the image "rectangle" via the
getBoundingClientRect function
In that function we check if the coordinates of the image are in the viewport of the browser
If so, then the isInViewport function returns true and our lazyLoad() method renders the
image
If not, then we just skip rendering that image

function lazyLoad(){
for(var i=0; i<lazy.length; i++){

if(isInViewport(lazy[i])){

if (lazy[i].getAttribute('data-src')){
lazy[i].src = lazy[i].getAttribute('data-src');
lazy[i].removeAttribute('data-src');
}
}
}
}

function isInViewport(el){
var rect = el.getBoundingClientRect();

return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight ||
document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth ||
document.documentElement.clientWidth)
);
}

Web Worker

JavaScript is single-threaded
It means you cannot run more than 1 script at the same time
Web workers provide a mechanism to spawn a separate script in the background
You can do any calculation - without disturbing the UI
You won't get that website unresponsive chrome error!
Web workers are general-purpose scripts that enable us to o oad processor-intensive work from
the main thread
UI logic/rendering usually runs on the main thread
They enable developers to bene t from parallel programming in JavaScript
Run di erent computations at the same time
When the background thread completes its task it seamlessly noti es the main thread about the
results

NOTE: Ajax call is not multi-threading. It is just non-blocking.

How Web Workers work

See the above illustration

There's a main thread

Meaning the UI
Or the thread on which your which browser it running

Then there's a worker thread

This is where computationally heavy operations are o loaded

And then results are used in the main thread processing

Basic communication happens between UI and web worker using following API

postmessage() - to send message

onmessage() - to receive message
myWorker.terminate() - to terminate the worker thread

example:

// main.js file

if(window.Worker) {

let myWorker = new Worker("worker.js");

let message = { add: { a: 1, b: 2 } };

myWorker.postMessage(message);

myWorker.onmessage = (e) => {

console.log(e.data.result);
}
}

// worker.js file

onmessage = (e) => {

if(e.data.add) {
let res = e.data.add.a + e.data.add.b;

this.postMessage({ result: res });

}
}

In the above example - main.js script will be running on main thread

It creates a new worker called myWorker and sends it a message via postMessage API

The worker receives the message onmessage and it identi es that it has to do addition operations
After the addition is completed the worker sends back the results again using the postMessage
API
Now, the main thread receives the result via the onmessage API and it can do its logic on the result
it got

Terminating the worker thread

There are two ways to do it

From main thread call worker.terminate()
Web worker is destroyed immediately without any chance of completing any ongoing or
pending operations
Web worker is also given no time to clean up
This may lead to memory leaks
From the worker thread call close()
Any queued tasks present in the event loop are discarded

Web workers use cases

Data and web page caching

Image encoding - base64 conversion
Canvas drawing
Network polling and websockets
Background I/O operations
Video/audio bu ering and analysis
Virtual DOM di ng
Local database operations
Computation intensive operations

Important points about Web workers

Web worker has NO access to:

window object
document object
Because it runs on a separate thread
Basically, web worker cannot do DOM manipulation
Web worker has access to -
navigator object
location object
XMLHttpRequest - so you can make ajax calls
One worker can spawn another worker
To delegate its task to the new worker

Web workers cons

There's a lot of overhead to communicate/messaging between master and worker

That's probably the main reason developers hesitate to use them
comlink library streamline this communication
you can directly call the work function instead of using postMessage and onMessage
https://github.com/GoogleChromeLabs/comlink

Server-side rendering SSR vs Client-side rendering CSR

Client-side rendering

When the browser makes a request to the server

HTML is returned as response
But no content yet
Browsers gets almost empty document
User sees a blank page until other resources such as JavaScript, styles, etc are fetched
Browser compiles everything then renders the content
Steps involved
Download HTML
Download styles
Download JS
Browser renders page
Browser compiles and executes JavaScript
The page is then viewable and interact-able

Advantages of Client-Side Rendering

Lower server load since the browser does most of the rendering
Once loaded pages don't have to be re-rendered so navigating between pages is quick

Disadvantages of Client-Side Rendering

Initial page load is slow

SEO (Search Engine Optimization) may be low if not implemented correctly

Server-side rendering

When the browser makes a request to the server

Server generates the HTML as response plus the content
Server sends everything - HTML, JS to render page
So, the page is viewable but not interact-able
Steps involved
Server sends ready to be rendered HTML, JS, and all the content
Browser renders page - the page is now viewable
Browser downloads JavaScript les
Browser compiles the JavaScript
The page is then interact-able too

Advantages of Server-Side Rendering

The user gets to see the content fast compared to CSR

The user can view page until all the remaining JavaScript, Angular, ReactJS is being
downloaded and executed
The browser has less load
SEO friendly
A great option for static sites

Disadvantages of Server-Side Rendering

Server has most of the load

Although pages are viewable, it will not be interactive until the JavaScript is compiled and executed
All the steps are repeated when navigating between pages

Module 4 - Web security

Authentication vs Authorization

Two related words that are often used interchangeably

But they are technically di erent

Authentication

Authentication answers who are you?

It is a process of validating that users are who they claim to be
Examples
Login passwords
Two-factor authentication
Key card
Key fobs
Captcha tests
Biometrics

Authorization

Authorization answers are you allowed to do that?

It is a process of giving permissions to users to access speci c resources and/or speci c actions
Example
Guest customer
Member customer
Admin of the shop

OAuth

It is an authorization framework and a protocol

Simply put - it is a way for an application to access your data which is stored in another application
Without needing to enter username and password manually
It is basically just a way to delegate authentication security to some other site
Which already have your account
Example: Facebook, Gmail, LinkedIn, etc.
Example
When you are lling out job applications
Go to the employer job page
Popup is shown to login with Gmail or LinkedIn
Gmail, LinkedIn shows the consent page - to share email, contacts, etc with this site
Your account is then created without you creating username or password for the employer's
site
And the next time when you come
Site requests token from the Gmail authentication server
The employer site gets your data and you are logged in!

How does OAuth work?

You will have to register your app with the OAuth provider like Google, Twitter, etc.
You will receive the application's id and secret
This secret allows you to speak OAuth to the provider
When a user comes to your app
Your app sends a request to the OAuth provider

The provider sends you a new token

Then your app redirects the user to the OAuth provider which includes that new token and a
callback URL
The OAuth con rms the identity of the user with a consent form
The OAuth also asks your app what information exactly your app needs from it via the
access token
Ex: username, email, or a set of access rights
After the identity is con rmed by the OAuth provider it redirects the user back to the callback
URL you app had sent to with the request

JSON Web Token - JWT

It is standard used to create access tokens for an application

It is a way for securely transmitting information between parties as a JSON object
Information about the auth (authentication and authorization) can be stored within the token itself
JWT can be represented as a single string

Structure of JWT

It is made up of three major components

Each component is base64 encoded

base64Url(header) + '.' + base64Url(payload) + '.' + base64Url(signature)

example how JWT looks like:

feJhbGciOizzUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQm9iYnkgVGFibGVzIiwiaWF0I
joxNTE2MjM5MDIyLCJpc0FkbWluIjp0cnVlLCJwZXJtaXNzaW9ucyI6eyJ1c2Vyc01ha2UiOnR
ydWUsInVzZXJzQmFuIjp0cnVlLCJ1c2Vyc0RlbGV0ZSI6ZdEsc2V9fQ.HFRcI4qU2lyvDnXhO-
cSTkhvhrTCyXv6f6wXSJKGblk

Header
Contains the metadata about the JWT itself
Ex: type of algorithm used to encrypt the signature

// Header example

{
"alg": "HS256",
"typ": "JWT"
}

Payload
This is the most important part from the app's perspective
Payload contains the claims
User sends this payload to the server
Server then decodes the payload to check for example whether the user can delete a
resource

// Payload example

{
"name": "Ninja",
"iat": 123422221, // timestamp the JWT was issued
"isAdmin": true,
"permissions": {
"canViewOrders": true,
"canDeleteOrders": false
}
}

Signature
This pertains to the security
Basically, it's a hashed value of your header, payload, and SECRET
The secret that only server and trusted entities know
Server used this signature to validate the JWT sent by the user
It looks gibberish

Popular analogy to explain JWT

Imagine international airport

You come to the immigration and say - "hey I live here, please pass me through"
Your passport con rms this
Passport o ce - authentication service which issued JWT
Passport - JWT signed by passport o ce
Citizenship/visa - your claim contained in the JWT
Border immigration - security layer which veri es and grants access to the resources
Country - the resource you want to access

How JWT works

JWT is returned as a response to the user after successful login

JWT is saved locally on local storage, session storage or cookie
When user want to access private route
User query request will send the JWT in authorization header using the bearer schema
Authorization: Bearer <token>
Protected route checks if the JWT is valid and whether the user has the access
If so, then user is allowed to the route or perform the restricted action

Advantages of JWT

It is compact so transmission is fast

JSON is less verbose
It is self contained
The payload contains all the required information about user
So no need to query server more than once
It is very secure
It can use the shared SECRET as well as pub/private key pair
Strength of the security is strongly linked to your secret key
It is easy to implement
Developers use Auth0 to manage majority if the JWT stack

Disadvantages of JWT

Logouts, deleting users, invalidating token is not easy in JWT

You need to whitelist or backlist the JWTs
So every time user sends JWT in the request you have to check in the backlist of the JWT

Local storage vs Session storage

They both are a way of client side data storage

Introduced as a part of HTML5
They are considered better than cookie storage

localStorage

Data stored here exist until it's deleted

Up to 5MB storage available - which is more than possible in cookies
They help reduce tra c - because we don't have to send it back with HTTP requests
Data is stored per domain
That means website A's storage cannot be accessed by website B

// Store
localStorage.setItem("blog", "NgNinja Academy");

// Retrieve
console.log(localStorage.getItem("blog"))

sessionStorage

It is very similar to the localStorage

Only di erence is how much time the data is persisted

It stores data for one session

It is lost when session is closed - by ex: closing the browser tab

// Store
sessionStorage.setItem("blog", "NgNinja Academy");

// Retrieve
console.log(sessionStorage.getItem("blog"))

Web attacks

They are biggest security threats in today's world

Attacks such as SQL injection and Cross-Site Scripting (XSS) are responsible for some of the largest
security breaches in history
Web applications are easily accessible to hackers
Web apps are also lucrative because they store personal sensitive information like credit cards and
other nancial details
There are many automated toolkits available to even untrained "hackers" which can scan your
applications and expose its vulnerabilities

CSRF

Cross Site Request Forgery

This attack allows an attacker to force a user to perform actions they don't actually want to do
It tricks the victim browser into performing an unintended request to a trusted website
When a user is authenticated on a trusted site
A malicious web site, email, blog, instant message, or program
Causes the user's web browser to perform an unwanted action on the trusted site
Often referred to as a one-click attack
Because often all it requires for a user to do is one click

How does CSRF work?

Refer to the illustration above

User logs onto a "good" website
ex: a bank website
The bank website assigns validation token to the user using which the bank can identify the user
and let it perform the authorized tasks
User is performing some bank transactions
But, suddenly gets bored and wants to do something di erent
During this process user visits an "evil" website
The evil website returns a page with a harmful payload
The harmful payload does not "look" harmful
User thinks it's a legitimate communication/action
Browser executes that harmful payload to make request to a trusted site (which it did not intend
originally)
The harmful payload may look like below

// example script
$.post("https://bankofmilliondollars.com/sendMoney",
{ toAccountNumber: "1010101", amount: "$1M" }
)

The script above will be executed on the bank's website using the user's valid authorization token
If the bank does not have necessary defense against such attack in place - the money will be sent
to the attacker

Defense against CSRF

Developers duty is to protect their users from attacks like CSRF

Anti-forgery tokens is one simple and easy way you can use to protect against CSRF
The "trusted" website (dropbox in the above example) stores this token as csrf_cookie on the
rst page load
The browser sends this CSRF token for every request it makes
The trusted website compares this token and gives CSRF error if values do not match
Another defense against it is to only allow POST requests from the same site
Other sites may still make the GET requests

XSS

Cross Site Scripting

The attacker injects malicious script into trusted website
Example: attacker injects JavaScript code which is displayed in user browser
Vulnerabilities are injected via
URL
DOM manipulation
Types
Unprotected and not sanitized user inputs are stored in database and displayed to other
users
Unprotected and not sanitized values from URLs are directly used on the web pages
When a user is XSS'ed
The attacker has access to all it's web browser content
Cookies, history, etc.

How XSS work?

Refer to the ow from the above diagram

Ideally website inputs should only accept plain texts
But consider there is a vulnerable website which accepts below script tag and saves it, like bow

// `document.cookie` has the cookie

// `cookiestealer.php` has the script to send the cookie to the attacker

Attacker injects the above example script that will steal the victim's cookies
The victim browser will think its javascript code sent by server to be executed
The user will see an image-link so user might just click it
When the user clicks this link image gets rendered, BUT -
In the background this link will silently grab the cookie
This cookie has all the active session details
The cookies are sent to the attacker
Now attacker can pose as the victim user and do bad things

Defense against XSS

Every value that can be entered by user should be treated as untrusted data
All the input must be sanitized before storing
Example: all theHTML tags are removed
Validation code for number values, username, email, password
There are existing libraries available for doing such validations
Escape the strings
This script looks for special characters, such as < > and replaces them with appropriate
HTML character entity name
There are existing libraries available for this purpose
Write escape logic on front end as well as back end
Below is a simple logic how to escape the string

function escapeString(str) {
return str.replace(/</g, '<')
}

CORS

Cross Origin Resource Sharing

It is a security feature of modern browsers
Generally speaking, resources retrieved from distinct origins are isolated from each other
Content received from one website is allowed to read and modify other content received from the
same site
But it is not allowed to access content received from other sites.
CORS allows restricted resources on a web page to be requested from another domain
Resources like images, stylesheets, fonts, scripts
By default ajax requests are forbidden
For security reasons
Same origin security policy
CORS basically de nes whether or not it is safe to allow cross-origin requests
Origin de nition contains:
URI resource
Hostname
Port number

CORS Example

Suppose there are 2 websites

aaa.com
bbb.com
You have an image on path aaa.com/example.png
If you try to access that image from bbb.com it won't be allowed by default
For it to be accessed you will have to enable CORS
CORS are disabled by default
Following is an example how to enable CORS

// CORS config

Access-Control-Allow-Origin: https://aaa.com

Access-Control-Allow-Methods: GET

Principles of secure coding

DO NOT trust any inputs

Principle of least privilege
Give users least privilege possible with which they can still do their jobs
Add privileges as required
Fail securely
When a system fails, it should do so securely
On failure undo the changes and restore the last secure state
Separation of duties
Example - a function should only perform one action
Avoid security by obscurity
Assuming your system is safe
Because attackers don't know where it is, what it does, how it works or who owns it
It is like keeping passwords on cloud in some excel hoping attackers wont know about it
Use stateless authentication
Token based authentication
Each request should have token
Use JWT for this purpose

Secure your Web application

Disable cache for web pages with sensitive data

It might give some performance lag but it is worth doing

cache-control: no-cache, no-store, must-revalidate
This policy tells client to not cache request, do not store data, and should evaluate every
request origin server
expires: -1
This policy tells the client to consider response as stale immediately

Use HTTPS instead of HTTP

In simple words
http sends credentials in plain text
https encrypts the request
The data is encrypted with a symmetric key
Then sent to server
Then the server decrypts the data using the symmetric key to get the plain text data back

Prevent Content-Type Sni ng

Browsers can detect response content type correctly irrespective of the content-type speci ed
This feature is called content-type sniffing or MIME sniffing
This feature is useful, but also dangerous
An evil person can do MIME confusion attack
They can inject a malicious resource, such as a malicious executable script
Masquerading as an innocent resource, such as an image
Browser will ignore the declared image content type because it can derive the actual content
type
And instead of rendering an image will execute the malicious script
Use - X-Content-Type-Options: nosniff
Now, the browser will not use sni ng when handling the fetched resources

Security in JavaScript

Validate user inputs on server side too

Do not use eval
But beware, inbuilt JavaScript methods use eval under the hood like - setTimeout(),
setInterval(), function()
So always sanitize the inputs to these methods
Save from XSS

Sanitize the inputs

Research is going on to make this process on the y
Encode output - escape special characters
Like for string <div> - escape or encode the < and >
Session management
Do not implement custom authentication
It is hard to do correctly and often have aws in implementation
Don't expose session token in URL
ATnT company had this vulnerability - it is xed now
Session token should timeout
Use OAUTH2.0
Password management
Don't use SHA1 hashing function now. It is not foolproof.
Use SALT
Use 2-factor authentication
Do not disclose too much info in error logs and console logs

Web Developer Roadmap

[Beginner]

12 Week Plan Overview

Things You Will Learn In This 12 Weeks

HTML deep dive

CSS deep dive
JavaScript fundamentals
Web Development fundamentals
Chrome developer tools
Git Basics
Interview Prep

Table Of Content

12 Week Plan Details

Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12

12 Week Plan Details

Week 1

HTML
Anatomy of HTML
history, what can HTML do
What is DOM
What are DOM nodes
Tags - HTML, Body, Head, Nav
Tags - Div, P, Section, Span
CSS
What is Box-model
Selectors - Id, Class, Element-tag
Properties - Color, Background-color, Border
Properties - Margin, Padding
Chrome Developer Tools
Elements tab
select DOM element through dev-tool
Inspect an element
Inspect styles of the element
Change styles through the inspect tool
Delete classes from the element
Add new class to the element through the dev tool
Exercise
1. Create HTML page
2. Add Navigation bar with items - Home, About, Contact Us
3. Set background color of navigation bar to Blue
4. Add a text paragraph inside Div element below navigation bar

Week 2

HTML
Formatting: Strong, Italicize, Subscript, Strikeout
Inner HTML
Anchor tag
Images
add image
set height-width
repeat property
size property
DOM Manipulation through dev tools
change inner HTML
delete DOM node
CSS
Decoupling CSS from HTML
Write CSS in a le
Import CSS from CDN
What is CDN
Why to use CDN
Playing with Fonts, font size, weight, family
Height and Width
Position properties
Display properties
JavaSCript
Hello World
What and Why JavaScript
Primitive data types - Numbers, Boolean, String, etc
Variables - var, let, const
What is the di erence between them
When to use which type of declaration
Exercise
1. Edit style of an element from dev tool
2. Edit inner HTML of an element from dev tool
3. Edit class and other attributes from dev tool
4. Add image with a link that will take you to google.com

Week 3

HTML
Unordered Lists
Ordered Lists
Attributes vs Properties
Builtin and Custom attributes
CSS
Fun with borders - style, dash, dotted, width
Fun with shadows
Using Google Font Icons
Add phone, home, facebook, instagram icon
Use Font awesome icons
Working with oats
Left, right oat
Centering elements and other position quirks
px vs % units
JavaScript
Operators
add, subtract, multiple, divide, mod
Complex data types
objects, arrays
null and undefined
Exercises
1. CSS selectors - grab element by id, class, and tag and change their property
2. Make image oat to the right of the text-paragraph
3. Make a list of grocery
4. Perform addition, subtraction, division, and multiplication of two numbers

Week 4

HTML
Input and Button tags
Web storage, local storage, session storage
Why do we need them
When to use which type of storage
Intro to Canvas and SVG
Di erence between them
5 / 12
NgNinja Academy | All Rights Reserved

Accessibility
Why is this important
How to add accessibility attributes on Anchor, Buttons, Image elements
CSS
Parents, siblings, and other selectors
Pseudo classes
Pseudo elements
What and why do we use them?
CSS Gradients
JavaScript
Truthy and Falsy values
List of such values
How to check if a variable is truthy or falsy
Conditionals - if, else, switch, ternary
How to write nested ternary
Loops
for, while
When to use which?
Are there any performance di erences between them?
Arrays and collections
When to use arrays?
How to traverse arrays?
Chrome Developer Tools
Debugging your function using console logs
What is JSON
JSON.Stringify
Change JavaScript Object to JSON
Change JSON to JavaScript Object
Tip and tricks of using dev tools
Exercises
1. Create 3 beautiful colored gradient squares
2. Add alternate text to an image
3. Swap values of 2 variables in JavaScript

Week 5

HTML
Script tag
Add JS code in Script tag

Add JS from external le

Form tag
Input types - text, password, email, etc.
CSS
Changing CSS with pure JavaScript
Add, remove, and toggle classes with JavaScript
JavaScript
document vs window object
Event listeners
Event handling
Event bubbling and Event delegation
JavaScript as OOP
Git
What and why Git
Create a Git repo
What are branches
Committing, pushing, and pulling changes
What are the commands for these operations?
What ags do they take
Exercise
1. Write JavaScript in a separate le and use it in your HTML
2. Change paragraph text color from black to red using JavaScript
3. Create a simple login form and create an onClick event handler that will log a message to
the console
4. Grab element by its ID and change its inner HTML

Week 6

HTML
Radio buttons
Checkboxes
When to use Radio buttons vs When to use Checkboxes
CSS
Introduction - What and Why Flexbox
Flexbox properties
flex-direction
flex-wrap
just-content
align-items

JavaScript
Builtin Functions
Custom Functions and Methods
Write a custom function
Call that custom function from another function
Scoping in JavaScript
Function scope vs Block scope
What is hoisting
Git
Install Git locally
Use git -v command on command line
Merging remote branch X into your local branch Y
Deleting a local branch
Exercise
1. Dynamically update the image source
2. Create a dropdown list using exbox and list elements
3. Write a function to alert "Hello World" message
4. Write a function that takes in a string and a number as arguments and console logs its value
5. Find length of this string - "I love JavaScript"
6. Change the case to all-capital for this string - "I love JavaScript"

Week 7

CSS
“Initial”, “Inherit” and “Unset” Properties
Normalizing and Validating your CSS
Why to do it
How to do it
What are CSS Sprites
When and why to use them
JavaScript
The "new" keyword
How to create new objects in JavaScript
The "this" keyword
How is this di erent in JavaScript
Examples of how this is di erent depending on the context
Function as rst-class citizens
What do rst-class citizens mean?
Web Development

HTTP fundamentals
What is HTTP
How does internet work?
How does browser work?
What happens behind the scenes when you visit any site?
Search about this on ngninja.com
Git
Writing good commit messages
Format to follow
Why writing good commit messages is important?
Exercise
1. Validate your CSS le and x the errors
2. Pass a function-object as a parameter to another function X and call that function-object
argument inside function X

Week 8

CSS
Media queries
Target mobile, tab, and desktop resolutions
Writing responsive CSS for all the major platforms
JavaScript
Intervals and Timers
Intro to Ajax
What is it?
Why is used?
Who uses it?
What are Callback functions
Objects and Prototypes
What are prototypes?
What is prototype chaining?
Prototypal Inheritance
How is this di erent than Class-based Inheritance?
Web Development
Di erent HTTP Headers
Caching in browser
Application tab in Chrome Development Tool
Exercise
1. Fix the CSS of your website to make it responsive on mobile platforms

2. Implement inheritance in JavaScript for the following hierarchy - LivingThing -> Animal -> Cat

Week 9

CSS
2D and 3D transformations
Animations
JavaScript
Recursion
Why to use recursion?
Fun with array methods
map, reduce, filter
More Fun with array methods
find, concat, reverse
Web Development
What is REST API
Measure your website performance
How to reduce page load time?
What are package management services like NPM, Yarn?
Exercise
1. Create a bouncing ball using just CSS and HTML
2. Get sum of numbers in array using "reduce" method
3. Find a number in an array
4. Measure the time taken by your website to load and to the rst-render

Week 10

CSS
What is Shadow DOM?
Why is Shadow DOM important?
JavaScript
ES6+ introduction

New features added in ES+

Make a list of them and learn them one at a time - practice them
Introduction to Classes and constructors
What are Classes in JavaScript?
How are they di erent than any other class-based language?
Web
Introduction to web security
Why is web security important?
How the internet has become insecure now?
Basics of famous web security attacks
XSS, Brute Force, DDoS
Mini project
Build a Tic-tac-toe game with pure JavaScript, HTML, and CSS
Create a border for the tic-tac-toe game
Add click-handler that will render X on odd click numbers
Add click-handler that will render O on even click numbers
At the end reveal the winner in GREEN color -> Even Or Odd

Week 11

Real world project 1

A fun TODO app
Create a TODO item
Mark a TODO item as complete
Set a due date for the TODO item
Earn virtual coins every time you complete item within its due date

Week 12

Real world project 2

Food recommendation app
App that gives random suggestion to cook food for today

Add JSON list of food that will be your database

Button to generate a random suggestion
Swipe left or right to dislike or like the food (or Click buttons)
Share the food recommendation on Facebook or Twitter

Web Developer Roadmap

[Advanced]

12 Week Plan Overview

Things You Will Learn In This 12 Weeks

Advanced HTML and CSS

JavaScript deep dive
ReactJS Fundamentals
TypeScript
Advanced Web Development Concepts
Algorithms and Data Structures Fundamentals
Git power user
Interview Prep

Table Of Content

12 Week Plan Details

Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12

12 Week Plan Details

Week 1

HTML
Refresh the tags
HTML, Body, Head, Nav
Div, P, Section, Span
Anchor, Images
Lists, Tables
What is DOM
How does DOM work
What is DOM hierarchy
CSS
Box-model
Selectors - Id, Class, Element-tag
Properties - Color, Background-color, Border
Properties - Margin, Padding
Decoupling CSS and HTML
What and Why CDN
JavaScript
Primitive data types - Numbers, Boolean, String, etc
Complex data types - Array, Objects
Variables - var, let, const
What is the di erence between them
When to use which type of declaration
Exercises
Write a function that takes in an array of mixed data types and returns the array in reverse
order
Implement a clickable image that will take you to your favorite website

Week 2

HTML
Input and Button tags
Input types - text, password, email, etc.
Submit type input
Form element
Attributes of form
Submit/Post form
Attributes vs Properties
When to use Attributes vs Properties
Builtin and Custom attributes
Web storage, local storage, session storage
Di erence between each storage type
Use cases for each storage type
CSS
Parents, siblings, and other selectors
Play around with each type of selectors
Grab sibling selector
Grab sibling in only odd or even position
Can you select a parent from a child element
Pseudo-classes
And pseudo-elements
What and why do we use them?
CSS Gradients
Create beautiful backgrounds using gradients
Create beautiful buttons, hero components using gradients
JavaScript
Truthy and Falsy values
List of such values
How to check if a variable is truthy or falsy
Conditionals - if, else, switch, ternary
How to write nested ternary
Event listeners
Create event listeners
Remove event listeners
Event handling
Event bubbling, delegation, propagation
What is event bubbling
What is event capturing
Di erent between target and currentTarget property
Chrome Developer Tools
Debugging your function using console logs
What is JSON
JSON.Stringify
4 / 13
NgNinja Academy | All Rights Reserved

Change JavaScript Object to JSON

Change JSON to JavaScript Object
Exercises
Create a registration form that will take username, password, email, telephone number
Hide an element on a click event anywhere outside of the element?
How to stop events bubbling in pure JavaScript?

Week 3

HTML
Accessibility
Unordered Lists
Ordered Lists
Form element
Form validation
Show/hide errors depending on error states
Radio buttons
Checkboxes
When to use Radio buttons vs When to use Checkboxes
What are cookies
How does e-commerce sites use cookies
How do ads companies use cookies
CSS
Changing CSS with pure JavaScript
Add, remove, and toggle classes with JavaScript
JavaScript
Loops
for, while
When to use which?
Are there any performance di erences between them?
Arrays and collections
When to use arrays?
How to traverse arrays?
Scoping and Hoisting
The "new" keyword
How to create new objects in JavaScript
The "this" keyword
How is this di erent in JavaScript
Examples of how this is di erent depending on the context

Bind, call, apply

Chrome Developer Tools
Console tab - log, dir, group, table
Debugging using console statements
Tip and tricks of using dev tools
Exercises
Create a TODO application using list elements and event listeners - pure HTML and
JavaScript
Add todo item
Remove todo item
Perform form validation
Show/hide message toast-bar depending on the error state
Use Checkboxes to mark complete/todo task
Use a Radio button to set the priority of the task

Week 4

CSS
Introduction - What and Why Flexbox
Flexbox properties
flex-direction
flex-wrap
just-content
align-items
Web Development
HTTP fundamentals
What is HTTP
How does internet work?
How does browser work?
What happens behind the scenes when you visit any site?
Search about this on ngninja.com
What is DNS
How is IP address resolved
Di erence between IP and Mac address
JavaScript
What are Callback functions
Objects and Prototypes
What are prototypes?
What is prototype chaining?

Prototypal Inheritance
How is this di erent than Class-based Inheritance?
Fun with array methods
map, reduce, filter
More Fun with array methods
find, concat, reverse
Bind, call, apply
Di erence between them
When to use which method
Function as rst-class citizens
What do rst-class citizens mean?
Git
What and why Git
Install Git locally
Merging remote branch X into your local branch Y
Deleting a local branch
Create a Git repo
What are branches
Committing, pushing, and pulling changes
What are the commands for these operations?
What ags do they take
Exercises
Create a navigation bar using Flexbox
Create a Git repo with two branches. Commit changes to one of the branches. Merge those
commits to the other branch.

Week 5

CSS
“Initial”, “Inherit” and “Unset” Properties
Normalizing and Validating your CSS
Why to do it
How to do it
Di erence between em, rem, px, %
When to use which
Media queries
Target mobile, tab, and desktop resolutions
Writing responsive CSS for all the major platforms
JavaScript

Closures
Composition
Intervals and Timers
Async programming
Promises, Observables, async-await
Recursion
Why to use recursion?
Design patterns of recursion
Tree data-structure
DFS and BFS algorithm using recursion
ReactJS
What is React
Why React
React vs Vue vs Angular
What are SPAs
Single Page Applications
Why SPAs are better than traditional web apps
Exercises
Create a blog
Page for list of all the posts
Page for the post
Make it responsive for mobile, tablet, and desktop
Make the images responsive too
Make the navigation bar responsive
Show hamburger icon with a dropdown for mobile platforms

Week 6

JavaScript
Immutable Data Structures
JavaScript as Functional Programming language
Currying
ReactJS
Installing ReactJS
What is JSX
What is a React component
Why do you need components
Creating your rst React App
using create-react-app utility

Git
Cherry-picking a particular commit
Rebasing your branch with the other branch
Creating pull requests
Squashing multiple commits into one single commit
Chrome Developer Tools
Networks tab - All, XHR, JS
Networks tab - Inspect XHR query request
Networks tab - Inspect XHR query response
Exercises
Create a react application
Create a React component that displays details of a TODO task
task name, description, due dates, priority
Demonstrate cherry-picking a particular commit
Commit changes to branch X
Goto branch Y and cherry pick the last commit from branch X and push it to the
branch Y

Week 7

HTML
Adding multimedia on webpages
Adding videos
Adding sounds
<object> Element
Embedding YouTube Videos
CSS
2D and 3D transformations
Animations
Keyframes
JavaScript
JavaScript Classes
What are classes
How is JavaScript class di erent than other language class like Java
Arrow functions
Block scope
How to achieve blog scope for variables
ReactJS
Function Components

Class components
Di erence between di erent component types
How to reuse components inside other components
states and props
What and why state variables
What and why prop variables
Exercises
Embed your favorite YouTube video on a webpage
Create a bouncing ball that bounces from oor to ceiling forever

Week 8

HTML
Implementing drag and drop using HTML5
CSS
What is Shadow DOM?
Why is Shadow DOM important?
JavaScript
The Lexical this
What is it?
How is it di erent from the regular this in JavaScript
Spread operator
What is it?
What are it's usecases?
Rest operator
What is it?
What are it's usecases?
What is destructuring
ReactJS
How to do two-way binding in React
Adding styles to your react component
External styles
Inline styles
Object notation styles
Git
Writing good commit messages
Format/Standard to follow
Why writing good commit messages is important?
Commitizen

Branching strategies
Di erent options available
Pros and cons of branching strategies
How to manage dev, QA, and production branches
Exercises
Write a function to clone a JavaScript object using ES6+ features
Implement drag and drop feature to upload a le by dropping it on a web page
Create a React component that displays a list of TODO tasks

Week 9

HTML
HTML5 Web Workers
What is a Web Worker?
Implementing web worker
Does given browser support web worker?
JavaScript
Map + Set + WeakMap + WeakSet
What are those?
What are the di erences between them?
When to use which data structure?
What is a call stack
What is a task queue
What is an event loop in JavaScript
ReactJS
Rendering content conditionally
Rendering async data in your React component
Get the data
Display it on your React app
Suspense react component
What does it do?
How to use it?
Show a loader when you are retrieving the data
Exercises
Given an array which contains duplicate elements write a function which returns an array of
unique elements
Fetch a data in your React application and use Suspense feature to gracefully show the
empty state loaders and the data once fetched

Week 10

ReactJS
React hooks
What are hooks
Why do you need hooks
What problem does it solve?
Di erent React hooks - commonly used ones
useState hook
useEffect hook
useRef with React hooks
What is Context API
How to use it?
useContext hook
JavaScript
What is Execution Context
How does JavaScript code and functions get executed?
How does setTimeout and setTimeInterval work under the hood?
All about memory leak
What causes memory leaks in JavaScript
How to avoid them?
How to debug memory leaks?
How-to Garbage Collection
What is Garbage Collection
How does Chrome handle Garbage collection
The JavaScript Engine
React about the Chrome's V8 JavaScript Engine
Mini project
Build a Tic-tac-toe game with ReactJS
Create a border for the tic-tac-toe game
Add click-handler that will render X on odd click numbers
Add click-handler that will render O on even click numbers
At the end reveal the winner in GREEN color -> Even Or Odd

Week 11

JavaScript
Debugging in JS
All the tricks to debug JS code
How to attach debugger in VSCode
What is debounce
How to implement it?
What are its use cases?
What is throttle?
How to implement it?
What are it's usecases?
JavaScript good practices
JavaScript bad practices
ReactJS
Adding Typescript to your application
Why Typescript?
What problems does Typescript solve?
Real-world project 1
Random Challenge App For Bored People
A button that will randomly suggest from a database of activities, brain-teasers, or
simple games
Win virtual coins after the user completes the challenge

Week 12

Real-world project 2
Build a clone of Instagram app
Use ReactJS framework
Use the Instagram public API to fetch the data from
Implement the timeline view
Implement the pro le view
Bonus: Solve any one major pain-point that you struggle with when using the
Instagram application

Interesting Project Ideas

1. Build your reusable component library - like bootstrap

Create a style-guide/storyboard
Make them responsive
Build it on top of a latest framework like React

2. Weather app using 3rd party API beginner

Getting comfortable with 3rd party APIs is very much encouraged by the interviewers
It shows that you are comfortable with understanding the documentation and debugging an
unknown territory

3. Video streaming app using YouTube API beginner

4. Flight booking system - o ine mode

How will you solve the o ine mode problem?

How will you cache the data and save it to the system when the user gets online again?

5. Food sharing app

Share the food you won't eat

Make new friends

6. App for bored people that sends fun activities, brain teasers or goofy challenges

Geo location to suggest nearby events/activities

Buddy up with your friends

7. Online treasure hunt

Find some online treasure with your group

Add group chat

8. App to post your tweets to Instagram

App will convert tweets to beautiful images

Use twitter API
Ability to share the image directly as Instagram post or story
Based on the tweet content it can also recommend good caption and trending hashtags

9. Machine learning app

Given a person's browser history predict the person's personality

11. An app that generates app ideas

12. Slack chatbot that corrects your o ensive language

13. Slack clone

Instant messaging
Create channels
Private channels
Direct messaging
Set status
Set availability

14. Build a clone of Facebook

15. Build a clone of Instagram

Basic features to start with

Pro le page
Feed
Simple chronological order to start with
Your photos
No need to implement messaging - it's a huge beast

16. Clone of Uber

17. Dating app for old people

18. Dating app for bling people

What challenges? How would you solve them?

19. Ecom app

Product list
Search
Add to cart
Wishlist
Checkout

20. Random YouTube video player beginner

Connect to YouTube or other video streaming API

Get random video on a button click
Play the video
Like the video

21. Movie seat booking system

Pure JavaScript - no database

Play around with event handling
Select movie
Book seats
Update price per movie and per seat selected
Checkout work ow

22. Tic - tac - toe game beginner

23. Monthly budget tracker

Add your income

Create a budget category
Allocate a budget for each category
Add how much money spent per category
Show graphs/pie chart of how is your money spent per category

24. Chrome extension that will nd broken links on the page and mark them red

Optimize it to parse links only when user views that part of the page
If it's admin consolidate the links in one page to make them easier to x

25. VSCode multiple instances of same project feature

Should be able to open one project folder in multiple instances of VSCode

Can run di erent Git branches on those separate instances
This will give the ability to work parallel when waiting for build to complete, etc.

26. Random challenge app beginner

A button that will suggest a random but fun challenge

ex: Build your portfolio website in a week
ex: Publish a game to the Apple store in a month
ex: Write 30 blog articles in a month
A way to track your progress
Gamify the challenge with virtual coins

Invite a friend to buddy-up on a challenge or just challenge them

27. Crowd-sourced site for roadmaps

Roadmaps for learning something

ex: Roadmap to becoming a web developer
ex: Roadmap to becoming a data scientist
ex: Roadmap to becoming a graphic designer
ex: Roadmap to becoming a freelancer
ex: Roadmap to start an ecom business
Members can post their roadmaps
Members can create
Simple text
Infographic upload
Create a owchart through the app itself
Members can view roadmap
Search roadmaps by categories
Bookmark roadmaps
Link to external resources to learn on a topic in the roadmap

28. Easy bookmarks

Bookmark organizer chrome extension

Should allow you to easily add a bookmark to the correct folder
Suggest you to better organize your bookmarks
Reminder to go to a bookmark after a certain amount of days

29. VR app to learn through videos

Using gestures to manage video playing - pause, resume, next, previous, etc
Take quiz via the VR app

30. Tinder for playing quiz with friends beginner

Swipe left and right to select friends

Challenge them for a 10 question quick quiz

31. Design analyzer

App that use phone camera

Point the camera at any illustration or logo
The app will analyze what tools, and techniques was used to design it

32. App to share photos instantly with the group

Use case: when you go out with your friends

Create a temporary group
Connection could be via bluetooth or just need to be using the same WiFi
Take photos with your phone like you normally would do
The photos will be automatically sent to everyone in that group

33. App that teaches entrepreneurship to young kids

Concepts should be explained in very simple ways

Should include a lot of pictures and success stories
Bite-sized lessons

34. Students community app

Connect with students from same eld all over world

Filter by locations
Students can help each other with job search in their respective locations
Share study material
MVP - start with a Telegram group to test out this idea

35. Trip planner

Web or mobile app

Create group of friends going on the trip
Share trip details on the group
Google maps integration to plan each day and places to visit
Plan things to do together on the app
Show popular recommendations to help you plan the trip

36. Bill track

Simple way to upload bills and parse the data

Visualize the history of your bills using some charting library
Use machine learning to predict future monthly bills
Use machine learning to recommend how to save on bills
Based on your purchases show recommendations on where to buy cheaper and better stu

37. Image carousal / slider beginner

Show left/right buttons to change the images

Have a timer to change the images after X seconds
Pull images from a folder or from CDN
Build it using simple HTML, CSS, JavaScript (without library/framework)

38. Quote of the day beginner

Single page application

Show quote for the day
Change quote every single day
Pull quote from a JSON le
Twist: or you can show a di erent quote every time user refreshes the page
Twist 2: You can build similar app for Joke of the day

39. Social media that will auto-censor

You can write your heart out

The feature that will delete uncensored language, foul language when applicable
Replace it with censored language
It can be implemented using simple Hashmap
Or you can use machine learning

40. Gamify the TODO app

Start with a TODO app - more like Trello clone

But introduce point/rewards system
Earn point for every task you complete
Reduce point if you miss the deadline
At the end of the week/month calculate your score
Reward based on your scores
Low score -> eat ice cream
Medium score -> play Xbox for whole day
High score -> buy some cool tech for yourself
Twist: Challenge your friends and see who scores better

41. All in one messenger

Consolidate all apps into one - Whatsapp, Facebook messenger, etc.

Hook up with their respective APIs
Or look into headless CMS for scraping the messages

42. Tinder for nding project partners

Match via their previous work, their expertise

And what they are looking for
Pictures of their previous apps
Built in chat feature to bounce o project ideas

43. Apps of music lists

Love the songs of 90s? But lost your beloved music list from winamp player? Me too.
Build app where users share their favorite songs list
Integrate with music services like YouTube, Spotify, iTunes, etc.
Just import/clone the list in your favorite music service and relive those moments
Advanced search
By genre
Artists
Upvote/downvote/comments

44. Marketplace for donations

User shares pictures of what they want to donate

They can pick their favorite donation organization
Donation organizations send their drivers to pick up the items

45. Airbnb for tech gadgets

Some gadgets are exotic, expensive

Not everyone can buy them
Diamond smartwatch, drones, high end cameras
Marketplace where you can rent out your tech gadgets
Users are charged per hour usage

App creators can earn commissions

46. Quiz apps beginner

Country quiz
Logo quiz
Programming quiz
World leader quiz

47. Chrome extension that lters out negativity from Internet

Filter out negative news, comments, posts, people

Could start from small set of apps - like FaceBook and Twitter
Basic implementation - lter based on dictionary of negative words
Advanced - add some machine learning algorithms to it

48. Debate app

Select a topic
Select a group
Set time limit for the debate
Debate via text or voice or video call

49. Investment platform for kids

Main purpose of the app should to teach investments to kids

Gamify the app to make it easy for kids to follow
Teach them how to trade with real values BUT paper money
Give them lessons, quizzes to increase their knowledge

50. Delete X- les

App/scrapper that helps you delete stu about your ex partner

Facebook posts, images
IG images
Whatsapp messages
Google photos
Two way to implement this
1st using the APIs of social media
2nd headless chrome where you scrape any site to nd the details
You can also start with repository of frequently found places where ex-stu is stored
Like a checklist that your users can use to manually nd and delete stu they want

51. Caption this

Struggle to come up with a caption for your FB or IG post?

Write AI app that will write a caption for you
You just a upload a photo
App will suggest you bunch of captions
Based on your mood, the scene, who's involved in the photo, where it is taken, etc.

52. Track my BMI beginner

Manually log in the necessary data

weight
height
Visualize the weight history
Set goals
Predict future values to motivate the users

53. Co ee lovers

If reddit, quora and stackover ow had a child - for co ee lovers

Community based app
Suggest recommendation of local co ee places to visit
Share tips and recipes to brew the perfect co ee
Share where to nd exotic / specialty co ee shops around the world
If you are not a co ee lover - replace "co ee" with something you are passionate about

54. Celeb tweets beginner

Fun app that shows the rst tweet your favorite celebrity wrote
Single page application
Select a user / search for a user
Talk to Twitter API
Get that user's rst every tweet
Maybe rst 10 if the page is showing up more white space

55. Karma app beginner

App will ask series of questions

The responses will decide if you are doing good or bad karma
Apps will give ideas and opportunities to rectify your karma
Pro: Crowd source questions

56. Find your Twitter twin

Add your username

App will perform a match on your interests, your tweet content, your hashtags
And it will choose a user that has the most similar activity as yours

57. Blur out the profanity

Chrome extension
It will blur out the words, pictures, and videos which are uncensored or obscene
For starters you can start with just words
Use a dictionary of words and match the words on the webpage with it and blur them out if they
are not appropriate

58. Cloud compiler for any language

You don't actually have to implement the compiler

Create a web-app platform that will let use select language
The can ddle with a language of their choice like JSBin
You can send the program to cloud machine where it will get compiled with a native compiler
And then return result for the program

Tools For Developers

Development

Responsively
Develop responsive web apps
Resizin
Resize your images online
Apollo Client Developer Tools
GraphQL debugging tools for Apollo Client in the Chrome developer console
ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
GraphQL Network
GraphQL Network provides a "network"-style tab for GraphQL requests to allow developers
to debug more easily
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools
Babel REPL
JSON Generator

Apis For Your Next Project

Currency Exchange
Urban Dictionary
URL Link Shortner
PlaceGOAT
The Bored API
Rick and Morty API
Chucknorris
Breaking Bad Quotes

Host Your Apps

Netlify
Firebase
Github Pages
Heroku
Render

Productivity Tools For

Developers

Creativity

Logo Makers

Canva
Namecheap

Illustrations

Handz
Blush
Streamline Lab
Open Doodles

Photos & Videos

Pixabay
Burst
Marzwai

Fonts

Google fonts
Font library
100 Days of Fonts
Font In Logo

Icons

SMPLKit

Material Icons
Feather Icons

Colors

HappyHues
Piggment
Coolers

Productivity

Pastel
Review and comment on websites live
Image compression
N8N
Extendable work ow automation
IFTTT
Connect your apps and devices in new and remarkable ways
Pastebin

Make Money Hustles

For Developers

List of different ways you can make money as a Web Developer apart from the traditional job.

Find local businesses. Build apps for them that will make their life easier.

Local grocery shop

Homemade food delivery service
Local gym
Insurance provider - freelancer

Reach out to your family and friends who own business. Start with them.

Join freelancing websites

Fiverr
Upwork
PeoplePerHour

Build audience on Instagram or Twitter

O er people to build apps

Reach out to businesses on Instagram or Twitter and pitch them your idea

Start creating YouTube videos

Teach Web Development concepts

Build audience
Start running ads on your channel

Create video courses

Create ebook courses

A liate Marketing

Build audience on Instagram, Twitter or Youtube

Become a liate partner with someone you admire
Earn commission

By the way, you can join my a liate partners' gang to start your online money making journey.
Reach out to me about this at [email protected]

Do user testing for apps to make money

Usertesting
TestingTime
TryMyUI

Build apps for mobile

Build audience
Start running ads on your mobile app

Brainstorm a mind blowing idea and start a startup

Start your blog

Host it
Start running Google ads on it

Build your audience on LinkedIn

Reach out to businesses

Pitch them your ideas
Build app for them

If you are wondering how to build audience and make money out of it, I would encourage you to
check out my ebook that lays out the exact step by step strategy - Build. Create. Sell. Scale.

Non-programming Side Hustles

List of side hustles that requires no programming. These are already proven to be making money for many
people.

Teach music instrument

Piano
Guitar

Sell unused house hold items

Craigslist
O er up

Investment

Stocks, options
Day trading
Swing trading

Write content for other blogs

Paint and sell your paintings online

Photography

Wedding
Couple
Events

Become a model on Instagram

Dog sitter

Baby sitter

Virtual wine tasting, whiskey tasting

Flip houses

Make custom keychains and ornaments

3/3

NextJS Ebook
80% (5)
NextJS Ebook
95 pages
The Road To React
92% (13)
The Road To React
250 pages
The Complete Guide To Modern Javascript
100% (11)
The Complete Guide To Modern Javascript
295 pages
CSS Mastery, 3rd Edition PDF
100% (11)
CSS Mastery, 3rd Edition PDF
428 pages
The Ultimate React - Js Guide
100% (1)
The Ultimate React - Js Guide
33 pages
Complete MERN Stack
0% (1)
Complete MERN Stack
19 pages
NextJS Ebook
100% (1)
NextJS Ebook
136 pages
Mern Guide
100% (1)
Mern Guide
41 pages
React Questions and Answers Ebook
No ratings yet
React Questions and Answers Ebook
118 pages
Learn NodeJS in 1 Day: Complete Node JS Guide with Examples
From Everand
Learn NodeJS in 1 Day: Complete Node JS Guide with Examples
Krishna Rungta
3.5/5 (4)
Javascript: Javascript Programming For Absolute Beginners: Ultimate Guide To Javascript Coding, Javascript Programs And Javascript Language
From Everand
Javascript: Javascript Programming For Absolute Beginners: Ultimate Guide To Javascript Coding, Javascript Programs And Javascript Language
William Sullivan
3.5/5 (2)
React Quickstart Step Guide PDF
100% (6)
React Quickstart Step Guide PDF
188 pages
A Smarter Way - To Learn JavaScript
95% (59)
A Smarter Way - To Learn JavaScript
288 pages
ReactJS Interview QA
100% (3)
ReactJS Interview QA
15 pages
The Ultimate React - Js Guide
100% (2)
The Ultimate React - Js Guide
33 pages
Front-End Developer Handbook 2019 PDF
97% (30)
Front-End Developer Handbook 2019 PDF
145 pages
How To Code in Reactjs
86% (7)
How To Code in Reactjs
962 pages
The Javascript Handbook 2015 PDF
100% (7)
The Javascript Handbook 2015 PDF
227 pages
React.js Essentials
From Everand
React.js Essentials
Artemij Fedosejev
4/5 (9)
Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
From Everand
Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
Mehul Mohan
No ratings yet
React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360
From Everand
React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360
Roy Derks
No ratings yet
Getting Started with React
From Everand
Getting Started with React
Doel Sengupta
No ratings yet
React Deep Dive
From Everand
React Deep Dive
Manuel Bieh
5/5 (1)
React in Patterns
75% (4)
React in Patterns
149 pages
React Book - Freebie
91% (11)
React Book - Freebie
303 pages
(PDF) JavaScript Programming
83% (6)
(PDF) JavaScript Programming
81 pages
React - Js Book - Solid Understanding of A Hard To Learn The Basics of ReactJS Programming - Greg Sidelnikov
100% (3)
React - Js Book - Solid Understanding of A Hard To Learn The Basics of ReactJS Programming - Greg Sidelnikov
113 pages
React - Js by Example
100% (9)
React - Js by Example
28 pages
React
100% (3)
React
138 pages
JavaScript Algorithms
93% (15)
JavaScript Algorithms
292 pages
Automating With Node - Js
100% (5)
Automating With Node - Js
191 pages
ReactJS by Example - Building Modern Web Applications With React - Sample Chapter
67% (9)
ReactJS by Example - Building Modern Web Applications With React - Sample Chapter
26 pages
Node - Js Notes For Professionals
100% (3)
Node - Js Notes For Professionals
333 pages
Fullstack Node - JS
100% (13)
Fullstack Node - JS
258 pages
React Js Tutorial
67% (3)
React Js Tutorial
73 pages
React 2020 Cheatsheet Small PDF
No ratings yet
React 2020 Cheatsheet Small PDF
30 pages
30 Days of React
100% (1)
30 Days of React
281 pages
Node - JS Handbook
100% (1)
Node - JS Handbook
189 pages
React JS Notes For Professionals
80% (5)
React JS Notes For Professionals
109 pages
Powering Up With ReactJS
100% (2)
Powering Up With ReactJS
128 pages
Css Animations
100% (4)
Css Animations
78 pages
React Training
No ratings yet
React Training
114 pages
The Road To React. Robin Wieruch, 2020 PDF
100% (1)
The Road To React. Robin Wieruch, 2020 PDF
229 pages
HTML
83% (6)
HTML
87 pages
50 JavaScript Tips
83% (6)
50 JavaScript Tips
15 pages
React Tutorial 2020
50% (2)
React Tutorial 2020
34 pages
Javascript Bootcamp
92% (13)
Javascript Bootcamp
108 pages
The Road To React PDF
100% (3)
The Road To React PDF
249 pages
JavaScript Fundamentals
100% (6)
JavaScript Fundamentals
80 pages
Alberto Montalesi Complete Guide To Modern JavaScript - 2020
100% (1)
Alberto Montalesi Complete Guide To Modern JavaScript - 2020
204 pages
How To Code in Node - Js
No ratings yet
How To Code in Node - Js
418 pages
ReactJS PDF
No ratings yet
ReactJS PDF
403 pages
Reactjs Cheat Sheet
100% (1)
Reactjs Cheat Sheet
1 page
The JavaScript Beginner's Handbook
90% (10)
The JavaScript Beginner's Handbook
76 pages
The CSS Guide: The Complete Guide to Modern CSS
From Everand
The CSS Guide: The Complete Guide to Modern CSS
Tim Robards
5/5 (2)
JavaScript: Tips and Tricks to Programming Code with Javascript: JavaScript Computer Programming, #2
From Everand
JavaScript: Tips and Tricks to Programming Code with Javascript: JavaScript Computer Programming, #2
Charlie Masterson
No ratings yet
Node.js, JavaScript, API: Interview Questions and Answers
From Everand
Node.js, JavaScript, API: Interview Questions and Answers
John Edward Cooper Berg
5/5 (1)
Mastering JavaScript Object-Oriented Programming
From Everand
Mastering JavaScript Object-Oriented Programming
Andrea Chiarelli
No ratings yet
Instant SASS CSS How-to
From Everand
Instant SASS CSS How-to
Alex Libby
5/5 (2)
Node.js By Example
From Everand
Node.js By Example
Krasimir Tsonev
2/5 (1)
List of Companies LLPs Registered During The Year 2009
No ratings yet
List of Companies LLPs Registered During The Year 2009
1,204 pages
ContentKing - Redirects Cheatsheet
No ratings yet
ContentKing - Redirects Cheatsheet
1 page
How To Make $10K - Month With An Automation Agency
50% (4)
How To Make $10K - Month With An Automation Agency
42 pages
Hip Bar Press Kit
No ratings yet
Hip Bar Press Kit
13 pages
Business Names1
100% (1)
Business Names1
1,927 pages
Top 50 Oops Interview Questions and Answers: Java PDF C# PDF C++ Programming Java Programming
No ratings yet
Top 50 Oops Interview Questions and Answers: Java PDF C# PDF C++ Programming Java Programming
7 pages
My Journey To Becoming A Web Developer From Scratch
No ratings yet
My Journey To Becoming A Web Developer From Scratch
13 pages
Zdocs - Ro - Aadhar Card Eas List
No ratings yet
Zdocs - Ro - Aadhar Card Eas List
34 pages
10 Skills You Need To Land Your First Front End Developer Job
No ratings yet
10 Skills You Need To Land Your First Front End Developer Job
4 pages
Updated 1 Lead Service Providers - Logistics - Covid 19 India
No ratings yet
Updated 1 Lead Service Providers - Logistics - Covid 19 India
10 pages
Coding
No ratings yet
Coding
1 page
CSRF Example: How Does The Attack Work?
No ratings yet
CSRF Example: How Does The Attack Work?
3 pages
How To Generate High-Quality Leads With Digital Ads
No ratings yet
How To Generate High-Quality Leads With Digital Ads
27 pages
Kriti Nelavelli 2019 Resume
No ratings yet
Kriti Nelavelli 2019 Resume
1 page
General Info: Pre-Production Planning Document (PODCAST)
100% (1)
General Info: Pre-Production Planning Document (PODCAST)
6 pages
Nasscome QP Sscq0502 It Ui Developer1.0 2018
No ratings yet
Nasscome QP Sscq0502 It Ui Developer1.0 2018
53 pages
Qualifications Pack - National Occupational Standards For It-Bpm Industry
No ratings yet
Qualifications Pack - National Occupational Standards For It-Bpm Industry
46 pages
Conversation Design Process: Requirements
No ratings yet
Conversation Design Process: Requirements
4 pages
Front End Developer (Junior PM) : Maksim Bratukhin
No ratings yet
Front End Developer (Junior PM) : Maksim Bratukhin
3 pages
Darknet Link List
No ratings yet
Darknet Link List
3 pages
Mod 1,2
No ratings yet
Mod 1,2
61 pages
Proper ATS Resume Supriya
No ratings yet
Proper ATS Resume Supriya
1 page
Cyber Security Q & A Unit 1-1
No ratings yet
Cyber Security Q & A Unit 1-1
34 pages
Seminar Report Vyshnav
No ratings yet
Seminar Report Vyshnav
53 pages
Directory Traversal Vulnerability: Barracuda Web Application Firewall
No ratings yet
Directory Traversal Vulnerability: Barracuda Web Application Firewall
4 pages
GC 2024 09 28
No ratings yet
GC 2024 09 28
14 pages
Cs-344: Web Engineering: Dr. Qaiser Riaz
No ratings yet
Cs-344: Web Engineering: Dr. Qaiser Riaz
54 pages
Don't Trust The Locals: Investigating The Prevalence of Persistent Client-Side Cross-Site Scripting in The Wild
No ratings yet
Don't Trust The Locals: Investigating The Prevalence of Persistent Client-Side Cross-Site Scripting in The Wild
15 pages
A Complete React Tutorial For 2020
No ratings yet
A Complete React Tutorial For 2020
24 pages
TLS DTDC Rest Tracking Api - Final - V4
No ratings yet
TLS DTDC Rest Tracking Api - Final - V4
25 pages
HTML URL Encoding Reference
No ratings yet
HTML URL Encoding Reference
7 pages
ECommerce Website Proposal
No ratings yet
ECommerce Website Proposal
9 pages
How To Send Image in Sap
No ratings yet
How To Send Image in Sap
12 pages
2022 Atti Brochure
No ratings yet
2022 Atti Brochure
25 pages
E-commerce website
No ratings yet
E-commerce website
8 pages
VD Infotech-Best Digital Marketing Company in Ghaziabad
No ratings yet
VD Infotech-Best Digital Marketing Company in Ghaziabad
19 pages
G-7 Ch-9 Lists and Tables in HTML 5
0% (1)
G-7 Ch-9 Lists and Tables in HTML 5
4 pages
Internship report yogi 4288
No ratings yet
Internship report yogi 4288
28 pages
DBMS Mini Project
No ratings yet
DBMS Mini Project
19 pages
Sample AJAX Using JSP
No ratings yet
Sample AJAX Using JSP
5 pages
What Can You Do With Python - Ecourse Review PDF
No ratings yet
What Can You Do With Python - Ecourse Review PDF
14 pages
TTQ1: Assignment Brief - BTEC (RQF) Higher National Certificate (HNC Level 4) in Computing
No ratings yet
TTQ1: Assignment Brief - BTEC (RQF) Higher National Certificate (HNC Level 4) in Computing
8 pages
Greensock and Scrollmagic Toolkit
No ratings yet
Greensock and Scrollmagic Toolkit
4 pages
CSS ppt
No ratings yet
CSS ppt
115 pages
BHU PROJECT LSS 2v4docx
No ratings yet
BHU PROJECT LSS 2v4docx
52 pages
Annex A.1 Technical Specifications F-Se-15-T01
No ratings yet
Annex A.1 Technical Specifications F-Se-15-T01
16 pages
Fundamentals Web Designing (For Minors) : Course Code: XXXXXXXX L T P C
No ratings yet
Fundamentals Web Designing (For Minors) : Course Code: XXXXXXXX L T P C
2 pages
Myresume
No ratings yet
Myresume
1 page