DEV Community: Yuvaraj

Generate documentation for your Angular App in just 5 simple steps

Yuvaraj — Sun, 18 Jul 2021 15:20:57 +0000

Hello everyone 👋,

In this article, we are going to see how to generate the documentation for your Angular Application in just 5 simple steps.

Yes, it's real!

Without any delay, let's gooo!

Steps

Install compodoc as dev dependency with the below command.

npm install --save-dev @compodoc/compodoc

Create tsconfig.doc.json in the root directory where you have the package.json file. Paste the below content to that file.

{
  "include": ["src/**/*.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}

Create a script in the package.json file to generate documentation.

"scripts": {
  "compodoc": "npx compodoc -p tsconfig.doc.json"
}

Now open your terminal and run the below command to generate the documentation. This command will generate the documentation in a new directory as documentation in the project root path.

npm run compodoc

To see the documentation, use http-server or any other npm package to serve the server for the documentation directory. I'm using http-server in this method. To use that, you should first install it by npm install --global http-server.

Then, run the below command to serve the files.

http-server documentation/

Once the command runs successfully, open http://localhost:8080/ to see the documentation for your Angular app.

That's it, Yes!

Here are the screenshots of the documentation created by compodoc.

In the overview section, you can see the number of modules, routes, services, guards, and the structure of the application.

You can see the services, components declare, the module imported for each module.

Also, the respective components are grouped under its module. See the left-hand side.
Additionally, you can view the metadata of the component, methods, properties etc..

The source of the component also can be viewed under the source tab.

The source of the template also can be viewed under the template tab.

And much more!

Learn more from here https://compodoc.app/guides/getting-started.html

I hope you enjoyed this article or found it helpful.

You can connect with me on Twitter & Github 🙂

Support 🙌

You can support me by buying me a coffee with the below link 👇

Buy Me a Coffee

Do you know that there are 7 ways to install an npm package? I bet you don't know all.

Yuvaraj — Fri, 16 Jul 2021 15:11:37 +0000

Hello everyone 👋,

In this article, I'm going to share how to use the npm install CLI command efficiently with different ways of installing a package.

Before going to the CLI command, let us learn what is npm.

What is npm?

npm is the world's largest software registry. Open-source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

Let's understand these key terms from the definition.

registry - Registry is a large public database of JavaScript software where software developers push their package to it. It is similar to Google Playstore.

packages - Packages are the software that a developer has created and pushed to it. It is similar to an APK to Google Playstore.

Developers - Developers are the one who creates the package, pushes to the registry and pull the other packages from the registry to use it in their application.

The below diagram shows how npm works

Ways to use npm install

To understand it, first, create an empty directory with the name as npm-install-ways.

mkdir npm-install-ways
cd npm-install-ways/

mkdir - helps to create the directory. The second argument is the directory name.

cd - helps to navigate it to the specific directory.

Now, run npm init and press enter continously for all the prompts to have a default value. Finally, a package.json file will be created in the same path.

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm-install-ways) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/yuvaraj/Documents/blog article projects/npm-install-ways/package.json:

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

Open *package.json * file to see the content.

{
  "name": "use-of-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {}
}

If you see in the above output, the dependencies & devDependencies have an empty object. What does that mean?

It tells that, our application is not dependent on any package from the registry. (for now)

1. Installing a package without any argument

Assume that our application needs a jquery package. You can install it with the below command.

npm install jquery

Impacts:

It does few operations.

Pulls the latest jquery package from npm.
Install the jquery package in the node_modules folder.
Adds jquery to the dependencies object in the package.json file.

This is the current package.json content,

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0" // <--- this is added
  }
}

2. Installing a package with --no-save argument

TypeScript becomes so popular by providing features like typings, interface, enums, etc... Now, you thought of trying it out temporarily without adding to the dependencies list in package.json.

In this scenario, you should use the --no-save argument while installing it.

npm install typescript --no-save

Impacts:

It does 2 operations.

Pulls the latest typescript package from npm.
Install the typescript package in the node_modules folder.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

It skips the 3rd operation from the 1st approach. Let's check if the typescript package is available in node_modules directory.

.
└── node_modules
    ├── jquery
    └── typescript

Yes, it is there. Let's move on to the next one!

3. Installing a package only for the development environment

Do you know that you can install a npm package only for a development environment?

Yes, you can. Let's see it in action.

Assume that, we need to write a unit test case that requires a jasmine package.

Let's install it with the below command.

npm install jasmine --save-dev

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "jasmine": "^3.8.0" <--- Added jasmine here
  }
}

Impacts:

It does few operations.

Pulls the latest jasmine package from npm.
Install the jasmine package in the node_modules folder.
Adds jasmine to the devDependencies object in the package.json file. (Note: It adds to devDependencies, not under dependencies)

So, you might be wondered what is the difference between this approach and the previous approaches.

Suppose, your application size is 10MB including the jasmine package which is 2MB. In the production environment, it is not required to have a jasmine package. So, If you install all application dependencies with npm install --production in the production server, it excludes the jasmine package from your application bundle since it is used only for development purposes.

And, thus it reduces your application build to 8MB from 10MB. Awesome!

4. Installing a specific package version

In our application, our jquery package version is 3.6.0. The latest version seems to have some problems. So, you are feeling to revert it to the older version (maybe 3.5.0) to make it work.

Let's see how to do it.

npm install jquery@3.5.0

Impacts:

Pulls the specific jquery package version from npm. In this case, it is 3.5.0.
Installs the specific jquery package in the node_modules folder. (It removed 3.6.0 and installed 3.5.0).
Updates thejquery version in the dependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0" <--- changed from 3.6.0 to 3.5.0
  },
  "devDependencies": {
    "jasmine": "^3.8.0"
  }
}

5. Installing a package version in a given range

Let's try one more approach.

These are the few versions of jasmine versions available in npm.

Our application has a jasmine package in the 3.8.0 version. This version seems to be buggy and you wanted to go back to the last available version.

So, without knowing the exact version number, you can install those by,

npm install jasmine@"<3.8.0" --save-dev

Impacts:

Pulls the jquery package version which is lesser than 3.8.0 from npm. In this case, it is 3.7.0. (See the above screenshot).
Then, it Installs the jquery package in the node_modules folder. (It removed 3.8.0 and installed 3.7.0).
Updates thejquery version in the devDependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.0"
  },
  "devDependencies": {
    "jasmine": "^3.7.0" <--- It updated from 3.8.0 to 3.7.0
  }
}

Similarly, you can install the version by combining the lesser than (<) & greater than(>) symbols.

Example,

npm install jasmine@">3.0.0 <3.5.0" --save-dev

The above command finds the jasmine version, which should be above 3.0.0 and lesser than 3.5.0. In this case, it installs 3.4.0.

6. Install package from tarball URL

You can also install the npm package with the tarball. It can be a local (or) remote file.

Let's install the jquery 3.3.0 version package from the tar file available in Github tags.

npm install https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz

It does the same operation as #1. Instead of pulling from the npm registry, it is installed from the tarball URL which is available on the jquery Github page.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz" <--- Installed from Github Tarball URL
  },
  "devDependencies": {
    "jasmine": "^3.4.0"
  }
}

Let's move on to the final approach.

7. Install npm package with a different name

So far, when we install a different version of a package, the existing one is deleted in the node_modules folder & it installs the specified version provided

What if there is a way you can keep both package versions?

In the last approach #6, we have installed jquery version 3.3.0 from Github tags. Let's try to install the jquery version 2 by keeping a customized package name for the jquery version 2.

npm install jquery-ver-2@npm:jquery@2

Impacts:

Pulls the jquery ver 2 package version from npm.
Created an alias name for it. In this case, it is jquery-ver-2.
Then, it Installs the jquery package in the node_modules folder. The folder will be jquery-ver-2.
Adds thejquery version 2 in the name of jquery-ver-2 in the dependencies object in the package.json file.

This is the package.json content.

{
  "name": "npm-install-ways",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "https://github.com/jquery/jquery/archive/refs/tags/3.3.0.tar.gz",
    "jquery-ver-2": "npm:jquery@^2.2.4" <--- Jquery 2 is installed as jquery-ver-2.
  },
  "devDependencies": {
    "jasmine": "^3.4.0"
  }
}

I hope you enjoyed this article or found it helpful.

You can connect with me on Twitter & Github 🙂

Support 🙌

You can support me by buying me a coffee with the below link 👇

Buy me a coffee

Why you should use Array.some instead of 'for' loop or forEach?

Yuvaraj — Thu, 15 Jul 2021 14:02:46 +0000

In this article, we are going to learn why we should use Array.some instead of Array.forEach (or) for loop.

Objective

In a given array, find if the student failed in any one of the subjects. The pass criteria for students is to score at least 40 marks in all the subjects.

const marks = [
  { name: "English", mark: 80 },
  { name: "Maths", mark: 100 },
  { name: "Science", mark: 38 },
  { name: "Social", mark: 89 }
];

Traditional approach

Solution 1: Using Array.forEach

let isFailed = false;
marks.forEach((subject) => {
  console.log("checking subject => " + subject.name);
  if (subject.mark < 40) {
    // failed
    isFailed = true;
  }
});
console.log("Is student failed => " + isFailed);

Output:

checking subject => English
checking subject => Maths
checking subject => Science
checking subject => Social

Is student failed => true

The student is failed because he doesn't meet the pass criteria in the Science subject.

But, if you look at the output, it is unnecessary to check the Social subject because he failed in Science subject and the position of Science subject is before Social. So, in order to stop further checking, we can update the existing code as below:

let isFailed = false;
marks.forEach((subject) => {
 // added this condition to prevent further checking
  if (!isFailed) {
    console.log("checking subject => " + subject.name);
    if (subject.mark < 40) {
      // failed
      isFailed = true;
    }
  }
});
console.log("Is student failed => " + isFailed);

Output:

checking subject => English
checking subject => Maths
checking subject => Science

Is student failed => true

This looks like we have solved the issue but it's not. Even though we wrapped our logic inside if
block, the iteration still happens. Try checking it by adding else block.

Imagine if we have 1000 elements in an Array and if the condition to fail is at 10th position, then the remaining 990 iteration still runs which is not needed. It takes both time & computation. 🤯

So, this is the Wrong solution to this problem. ❌

Let's move on to the second traditional approach.

Solution 2: Using for() loop

let isFailed = false;
for (i = 0; i <= marks.length; i++) {
  const subject = marks[i];
  console.log("checking subject => " + subject.name);
  if (subject.mark < 40) {
    // failed
    isFailed = true;
    // prevents further execution
    break;
  }
}

console.log("Is student failed => " + isFailed);

This solution is better than the previous approach. The reason is, when the fail condition is met, further iteration is stopped with break keyword.

The break statement is used to jump out of a loop

The problem with this approach is, this is not the right way to solve this problem. Like how we use the for loop & Array.forEach to iterate the Array, there is an inbuilt Array method to solve this problem.

So, this is also not a correct solution. ❌

Let's see in the next section!

Correct Approach

The correct approach to solve this problem is to use, Array.prototype.some().

From MDN ,

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

This is what we wanted. If at least one element passes the condition, it should return true otherwise it should return as false.

Here is the solution to our problem,

const isFailed = marks.some((subject) => subject.mark < 40);
console.log("Is student failed => " + isFailed); // true

This works as expected. The solution is in a single line. 🤯

But, how do we know, if further execution is stopped once the condition is met?

Let's check it out by updating the code.

const isFailed = marks.some((subject) => {
  console.log("checking subject => " + subject.name);
  return subject.mark < 40;
});
console.log("Is student failed => " + isFailed);

Output:

checking subject => English
checking subject => Maths
checking subject => Science

Is student failed => true

The code works as expected.

So, this is the correct solution to solve our problem. ✅

Now, the Code is much readable, simpler & efficient than the other approaches.

I hope you enjoyed this article or found it helpful.

You can connect with me on Twitter & Github 🙂

Support 🙌

Buy me a coffee

Understanding State in React JS - Part 4

Yuvaraj — Tue, 06 Jul 2021 13:53:36 +0000

Hello everyone 👋,

In the previous article of Learn React JS Series, we learned about,

What is a Component?
When to use a Component?
How to create a Component?
How to separate a big component into smaller components?

In this Part 4 of Learn React JS Series, we will learn about what is State, how to use it, and when to use it.

What is State?

State is similar to props, but it is private and fully controlled by the component.

When to use State?

In the previous part of this series, we created a SearchResults functional component that accepts props as an argument and renders the URL, title, and description.

function SearchResult(props) {
  return (
    <div>
      <div className="search-url">{props.url}</div>
      <h2 className="search-title">{props.title}</h2>
      <div className="search-description">{props.description}</div>
    </div>
  );
}
export default SearchResult;

Assume that you wanted to update the URL to localhost on the click event of a button.

function SearchResult(props) {
  // newly added - handler for button click
  function updateURL() {
    props.url = "localhost";
  }

  return (
    <div>
      <div className="search-url">{props.url}</div>
      <h2 className="search-title">{props.title}</h2>
      <div className="search-description">{props.description}</div>
       // newly added
      <button onClick={updateURL}>Update URL</button>
    </div>
  );
}
export default SearchResult;

When the click event happens on the button, updateURL function is triggered to update the URL in props. But, when it tries to update the URL, the following error will be displayed.

This is because props are the read-only property and the props values are obtained from the parent component. Props cannot be directly updated in the Component.

Similarly, taking a Counter example, if we have a Counter component, the counter value should be controlled by the Counter component. In this case, we should use State instead of Props to maintain the state for each component on its own. Let's see it in the next section on how to use it.

How to use State?

Create a class Component with for Counter and extend the React.Component.

import React from "react";

export class Counter extends React.Component {

}

Override the constructor and pass props to the base class.

import React from "react";

export class Counter extends React.Component {

constructor(props) {
    super(props);
  }

}

Define the state with its initial values. In our case, count is initialized to 0 and isStarted as false. isStarted flag is used to toggle the label. (start/stop)

export class Counter extends React.Component {

constructor(props) {
    super(props);
    this.state = { count: 0, isStarted: false };
  }

}

Override the render method. Render() method should return a value JSX. In the render() method, we have a button that displays either Stop/Start based on isStarted flag from the state object & span tag to show counter value.

export class Counter extends React.Component {

constructor(props) {
    super(props);
    this.state = { count: 0, isStarted: false };
  }

  render() {
    return (
      <div className="counter">
        <button className="btn">
          {this.state.isStarted ? "Stop" : "Start"}
        </button>

        <span>Count is {this.state.count}</span>
      </div>
    );
  }

}

To start the counter on the button click, listen to the onClick event on the button with the handler function.

export class Counter extends React.Component {

constructor(props) {
    super(props);
    this.state = { count: 0, isStarted: false };
    // This binding is necessary to make `this` work in the callback. eg (toggleButton)
    this.toggleButton = this.toggleButton.bind(this);
  }

 toggleButton() {
    if (!this.state.isStarted) {
     // clicked Start button, so start the timer
    } else {
    // clicked stopped button, so clear the timer
    } 
  }Ï

  render() {
    return (
      <div className="counter">
        <button className="btn" onClick={this.toggleButton}>
          {this.state.isStarted ? "Stop" : "Start"}
        </button>

        <span>Count is {this.state.count}</span>
      </div>
    );
  }

}

To increment the counter, we should use this.setState instead of directly changing the counter by this.state.counter = this.state.counter + 1.

Read more on why States should not be directly modified

There are 2 ways to update the State.

this.setState({}) accepts an object to update the state of the component with key-value pair. Eg: this.setState({count: this.state.count})
this.setState() also accepts a function rather than an object with the previous state as the first argument, and the props at the time the update is applied as the second argument.

As state update are asynchronous, it is better to use this way whenever the previous state is used to calculate new values. Syntax : this.setState((state, props) => { } )

In our case, we can update the count state by,

 this.setState((state) => ({
       count: state.count + 1,
 }));

Our final code for the Counter component,

import React from "react";

export class Counter extends React.Component {
  constructor(props) {
    super(props);
     // local state
    this.state = { count: 0, isStarted: false };
    // This binding is necessary to make `this` work in the callback. eg (toggleButton)
    this.toggleButton = this.toggleButton.bind(this);
  }

  toggleButton() {
    if (!this.state.isStarted) {
       // clicked Start button, so start the timer
      this.counterInterval = setInterval(() => {
        // Update the counter state
        this.setState((state) => ({
          count: state.count + 1,
        }));
      }, 1000);
    } else {
       // clicked stopped button, so clear the timer
      clearInterval(this.counterInterval);
    }
    // update the isStarted state
    this.setState({
      isStarted: !this.state.isStarted,
    });
  }

  render() {
    return (
      <div className="counter">
        <button className="btn" onClick={this.toggleButton}>
          {this.state.isStarted ? "Stop" : "Start"}
        </button>

        <span>Count is {this.state.count}</span>
      </div>
    );
  }
}

Use the counter component in the App.js

import React from "react";
import { Counter } from "./Counter";

function App(props) {
  return (
    <div className="container">
      <h1>Understanding State</h1>
      <Counter></Counter>
      <Counter></Counter>
    </div>
  );
}

export default App;

Output

We have used the Counter component 2 times. You can clearly see the counter state is maintained by its own Counter component instance. The count value is different as we started the 2nd one after some seconds.

Resource

Here's my Github repo where you can find all the files in the part-4 branch. You can clone and try it out!

Thanks for reading the article. I hope you like it!

You can connect with me on Twitter & Github :)

Learn the Angular Pipe in-Depth + Tips on boosting performance using Pipe

Yuvaraj — Thu, 10 Jun 2021 12:30:21 +0000

Hello everyone 👋,

In this article, we are going to cover what is Angular Pipe, how to create it and utilize it in our template. Additionally, we will learn how to boost performance with a custom Pipe.

What is Pipe in Angular?

From Angular Documentation,

Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions you can use in template expressions to accept an input value and return a transformed value.

Usecase of pipe:

Use DatePipe to convert the Date object to a human-readable format.
UpperCasePipe can be used to convert text to Uppercase.
CurrencyPipe helps to transform a number to a currency string, formatted according to locale rules.

The best advantage to use Pipe is, while transforming the data, it doesn't modify the original data. Let's see it in action.

Creating a Custom Pipe

You can create a custom Pipe only when it is not available in the built-in Pipe.

We are going to create a Pipe which filters the items as fruits/vegetables based on type property.

const items = [
    {
      name: 'Tomato',
      type: 'vegetables',
    },
    {
      name: 'Orange',
      type: 'fruits',
    },
    {
      name: 'Apple',
      type: 'fruits',
    },
  ];

Our objective is to show all the items in the first section, then show only fruits in the second section & vegetables in the third section.

First, let's create a Pipe with the below ng command.

ng generate pipe filter-items

The command creates a file as filter-items.pipe.ts with the following code.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterItems'
})
export class FilterItemsPipe implements PipeTransform {

transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Let's see it in detail on the created code.

ng command created a class and applied @Pipe decorator with name as a property. This is the name of the created pipe. Then it implements the PipeTransform interface to perform the transformation.
Angular invokes the transform method with the value of a binding as the first argument, and any parameters as the second argument in list form, and returns the transformed value.

Imagine, the transform is just a function, to which the original item is passed as a first argument and any parameters as the second argument in list form.

Now, update the transform function to filter the items based on the type property.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterItems'
})
export class FilterItemsPipe implements PipeTransform {

transform(value: any[], type: string): any[] {
    return value.filter(el => el.type === type);
  }
}

Applying the Custom Pipe to template

This is our app.component.ts which has items and a method addItem.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent {

  items = [
    {
      name: 'Tomato',
      type: 'vegetables',
    },
    {
      name: 'Orange',
      type: 'fruits',
    },
    {
      name: 'Apple',
      type: 'fruits',
    },
  ];

  addItem() {
    this.items.push({name: 'Lemon', type: 'fruits'});
  }

}

In the app.component.html, we are Iterating the items and

Showing all the items in the first section
Applied filterItems Pipe in the 2nd section and passed fruits as a second argument to it.
Applied filterItems Pipe in the 3rd section and passed vegetables as a second argument to it.

When we apply a pipe in the template, automatically the value on which pipe is applied is passed as a first argument to transform and an additional argument can be passed by adding :(colon) and then value.

<div>
  <h1>Original data</h1>
  <div *ngFor="let item of items">
    <p>{{item.name}} - {{item.type}}</p>
  </div>

  <h1>Filtered fruits</h1>
  <div *ngFor="let item of items | filterItems: 'fruits'">
    <p>{{item.name}} - {{item.type}}</p>
  </div>

  <h1>Filtered Vegetables</h1>
  <div *ngFor="let item of items | filterItems: 'vegetables'">
    <p>{{item.name}} - {{item.type}}</p>
  </div>

  <button type="button" (click)="addItem()">Add Item</button>

</div>

This is the visual representation of how our Pipe is applied to the template and the type is passed as a second argument.

This is the output after applying our pipe.

Yay! 😍 this is what we wanted. You can see that filtering the data happened by without modifying the original items.

Let's try clicking the Add Item button and see if lemon is shown in the fruits section.

Lemon is shown in the original data section, but it doesn't show in the fruits section.

Why? 🤔

The reason is, when a Pipe is created, it will be set as a Pure Pipe by default. Also, in the addItem method, the lemon is pushed to the same array. So, Angular doesn't know that there is a change in the value. Click here to learn more about it from Angular documentation.

To fix it, the Pipe can be changed to Impure Pipe which runs the transform function on all Angular Change Detection (or) create a new array every time when a new item is added to it.

First, we will see the first approach on changing to Impure Pipe.

Open the created pipe, and add pure to false in the @Pipe decorator.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterItems',
  pure: false
})
export class FilterItemsPipe implements PipeTransform {

transform(value: any[], type: string): any[] {
    return value.filter(el => el.type === type);
  }
}

Now, if you click the Add item, Lemon will be shown in the fruits section.

Setting Pure to false (Impure Pipe) solves the issue but let's discuss why it doesn't work with Pure Pipe.

Pure vs Impure Pipe

Before Ivy, Pure Pipe creates only one instance of a class ** whereas Impure pipe **creates many instances if it used in multiple places. In our example, we have used filterItems pipe for the 2nd and the 3rd section. So, it will create 2 instances of the class.
For Pure Pipe, the transform function in the Pipe will be called only when there is a change in the @Input(), change in the value passed to the pipe (for Object & Array it should be new reference) or forcefully running the change Detection with changeDetectorRef. For Impure Pipe, Angular executes the transform every time it detects a change with every keystroke or mouse movement.

If you are not using the Ivy engine, then if your page has 30 components uses Impure Pipe, and whenever there is a change in the mouse move, 120 times the transform function will be triggered with 30 instances of Pipe. 🤯

If you are using Ivy Engine, then be it Pure or Impure pipe, multiple instances will be created.
But the condition on triggering the transform function and the no of times is called are depends on the Pure or Impure Pipe.

As the latest Angular version has Ivy set as true by default, we will see the examples considering the view engine as Ivy.

In our pipe, the id property is created and a unique id is assigned to the instance of the class through the constructor.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterItems',
  pure: false
})
export class FilterItemsPipe implements PipeTransform {
// unique id for the instance 
id;

// assigns the unique id for the instance
constructor() {
    this.id = Math.floor(Math.random() * 10);
    console.log('unique id => ', this.id);
  }

transform(value: any[], type: string): any[] {
    return value.filter(el => el.type === type);
  }
}

Refresh the application and open the console tab in the DevTools.

As we've used pipe 2 times, one for fruits and the other for vegetables, 2 instances of the pipe is created with unique id as 6 & 3. And the transform function is called 8 times, 4 for each instance.

Now, if the Add Item button is clicked, again transform function called 4 times, 2 for each instance.

Additionally, Angular runs this transform function every time it detects a change with every keystroke or mouse movement.

Just Imagine, a bigger application that has 100+ components in UI with many impure pipe. 🤯

To fix this performance issue, Pure Pipe should be used with some modification in the application code.

Boost Performance with Pure Pipe

Let's fix this performance issue by following the below steps.

Change the Pipe to Pure by setting pure: true

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterItems',
  pure: true
})
export class FilterItemsPipe implements PipeTransform {
// unique id for the instance 
id;

// assigns the unique id for the instance
constructor() {
    this.id = Math.floor(Math.random() * 10);
    console.log('unique id => ', this.id);
  }

transform(value: any[], type: string): any[] {
    return value.filter(el => el.type === type);
  }
}

Then, open app.component.ts and update the code in addItem method.

 addItem() {
    // push an element doesn't change reference.
    // this.items.push({name: 'Lemon', type: 'fruits'});

    // Angular Change Detection runs when it sees a change in the Array as new reference
   this.items = [...this.items, {name: 'Lemon', type: 'fruits'}]; 
  }

Run the application and see the console tab.

2 instance of the pipe is created (because of Ivy), and the transform function is triggered 2 times, one for each.

Now, click AddItem and see the console.

The transform function is triggered 2 times, one for each.

Conclusion

Comparing with Pure with Impure Pipe, using Impure Pipe triggered 8 times the transform function first, and on clicking AddItem, 4 times it triggered & also whenever this is a mouse over or user interaction happens it will call multiple times again and again. But using Pure pipe, it triggers 4 times totally.

So, always use the Pure Pipe.

Thanks for reading the article, I hope you liked it!

You can connect with me on Twitter & Github.

Use Array Destructuring like a PRO 😎

Yuvaraj — Mon, 07 Jun 2021 06:16:40 +0000

Hello everyone 👋,

In the previous article, we learned about Object Destructuring with examples. In this article, I'm going to share how to use the Array Destructuring effectively.

Array Destructuring

Array destructuring helps to unpack values from an Array, assign default values to a variable & ignore elements using commas.

Let's learn each of the features with examples.

Unpack values from an Array.

Assume, we have an array which has a list of colors code in it.

const colorsCode = ['r', 'g', 'b'];

You need to create 3 variables and assign the value to them. First, let's see how to do without Array Destructuring.

const red = colorsCode[0]; // r
const green = colorsCode[1]; // g
const blue = colorsCode[2]; // b

This code is perfectly fine and it will work as expected. It took 4 lines to do it. But, with Array Destructuring, it can be written in a single line as,

const [red, green, blue] = colorsCode;

WOW, but what just happened?

The 1st value in the right-hand side array (r) is assigned to the 1st variable in the left-hand side Array declaration(red). Similarly, the rest of the values are assigned.

The variable order should match with the value position in the Array. Let's see what happens if we change the order of the variable during the assignment.

const [red, blue, green] = colorsCode;
console.log(red); // r
console.log(blue); // g
console.log(green); // b

In the above example, we have swapped blue and green on the left-hand side. As we changed the variable order, g is assigned to blue and b is assigned to green. So, make sure you declare the variable name in order as per the right-hand side array value.

Assigning Default value to a variable

You can assign a default value to the variable when the Array is empty or the value is not available.

Example 1:

const [red, green, blue] = []
console.log(red, green, blue); // prints undefined undefined undefined

// assign default value
const [red = 'r', green = 'g', blue = 'b'] = []
console.log(red, green, blue); // prints r g b

Example 2:

const [red, green, blue] = ['r', 'g']
console.log(red, green, blue); // prints r g undefined

// assign default value for a single variable
const [red, green, blue = 'b'] = ['r' ,'g']
console.log(red, green, blue); // prints r g b

Ignore Array Elements

Ignoring elements with Array Destructuring can be done using ,(commas).

When we need only red & blue codes, it is unnecessary to declare green in the syntax.

const [red, blue, green] = ['r', 'g', 'b'];

To avoid creating the unused variable blue, replace blue with , which skips assigning the variable.

const [red, , green] = ['r', 'g', 'b'];

Here is another example of ignoring elements. This creates variables only for even numbers.

const [ ,second, ,fourth, ,sixth, ,eight] = [1, 2, 3, 4, 5, 6, 7, 8];

This will create only 4 variables as second, fourth, sixth & eight. It will assign the respective value to the variable based on the array order.

Object Destructuring + Array Destructuring

Let's see the power of using Object & Array Destructuring simulatenously. (Note: If you haven't read my Object Destructuring article, please read it first)

    const user = {
       firstName: 'John',
       lastName: 'Doe',
       phone: '9999999999',
       address: 'India',
       preferences: {
           mode: 'light', // light (or) dark mode
           autoSave: true,
           bookmarks: [ {name: 'bookmark 1', readCount: 10}, {name: 'bookmark 2'}]   
      }
  }

Our objective is to get only the firstName, phone, address, first bookmark name & the second bookmark readCount. If readCount property is not available, default value 0 to be set to it.

Without destructuring, our code could be,

const firstName = user.firstName;
const phone = user.phone;
const address = user.address;
const firstBookmarkName = user.preferences.bookmarks[0].name;
const secondBookmarkReadCount = user.preferences.bookmarks[1]?.count || 0;
// prints John 9999999999 India bookmark 1 0
console.log(firstName, phone, address, firstBookmarkName, secondBookmarkReadCount);

With destructuring, it can simplied as,

const {
  firstName,
  phone,
  address,
  preferences: {
    bookmarks: [
      { name: firstBookmarkName },
      { count: secondBookmarkReadCount = 0 },
    ],
  },
} = user

// prints John 9999999999 India bookmark 1 0
console.log(firstName, phone, address, firstBookmarkName, secondBookmarkReadCount);

Wow, isn't it wonderful? 😍

All the assignments, default values, alias are done in a single line (if not formatted). Isn't it Amazing?

Let me explain the logic behind getting the name from the first bookmark.

To get the name of the first bookmark, first, we can extract the first element from the Array using Array Destructuring.

const { preferences: { bookmarks: [firstBookmark] } } = user; 
console.log(firstBookmark); // prints {name: 'bookmark 1', readCount: 10},

Then, with object destructuring, the property name can be unpacked from it. Also set an alias key for it.

const { name: firstBookmarkName } = {name: 'bookmark 1', readCount: 10};

By merging the two things, we can simply write it as,

const { preferences: { bookmarks: [{ name: firstBookmarkName }] } } = user;

Similarly, readCount can be fetched with Array destructuring first and then applying Object destructuring.

Yay! It's simplified and much readable with Modern JavaScript. Thanks to Array & Object Destructuring. 😍🎉

BONUS:

You can do array destructuring with Strings as well.

 const [d, e, v] = 'DEV';
console.log(d, e, v); // D E V

Thanks for reading my article. If you like my article, please share it with your friends!

Use Object Destructuring like a PRO 😎

Yuvaraj — Sat, 05 Jun 2021 14:52:42 +0000

Hello everyone 👋,

In this article, I'm going to share how to use the Destructuring assignment effectively with real time example for Objects.

Lets, begin with what is Destructuring Assignment?

From MDN,

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The definition might be confusing for few, so let's break this definition to understand it better. We can break it into 2 parts.

The destructuring assignment syntax is a JavaScript expression.
Makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The 1st part tells that it is an JavaScript expression which is self explanatory and 2nd part tells that it used to unpack values.

What does unpack values mean?

First, let's understand with real world example.

Imagine, you have a bag with lot of items in it which is actually packed. When you unpack the bag, you take some items from it.

Similarly, in JavaScript world, Array/Object is a bag and you unpack(take) some items from it.

Object Destructuring

Object destructuring helps to unpack keys from an object, assign default values to unavailable key and set an alias to the key.

Unpack keys from Object

Imagine you have an user object that has user information like first name, last name, phone and address.

const user = {
     firstName: 'John',
     lastName: 'Doe',
     phone: '9999999999',
     address: 'India',
     preferences: {
         mode: 'light', // light (or) dark mode
         autoSave: true   
    }
}

To get the first name and phone from user object, we used to retrieve with .(dot) notation or user[key-name].

// dot notation
const firstName = user.firstName;
const phone = user.phone;
console.log(firstName); // John
console.log(phone); // 9999999999

// key inside object
const firstName = user['firstName'];
const phone = user['phone'];
console.log(firstName); // John
console.log(phone); // 9999999999

But, with Object Destructuring, we can unpack the firstName and phone in a single line.

const { firstName, phone } = user;
console.log(firstName); // John
console.log(phone); // 9999999999

*Note: * The exact key should be put in the {} to access the specific value. In our example, we have one key as phone. We cannot access phone by writing const { phone } = user;

Wait, but, what will happen if we try to unpack currency from user object? 🤔

Assigning Default value to key

const { firstName, phone, currency } = user;
console.log(currency); // undefined

Since currency is not available in the user object, it gives undefined as a response.

But, you need to handle this scenario to set USD as a default currency value when currency is undefined. To handle this, you would simply write it as,

const currency = user.currency;
console.log(currency); // undefined
if (!currency) {
   currency = 'USD';
}
console.log(currency); // USD

But with destructuring, you can assign the default value to currency as,

const { firstName, phone, currency = 'USD' } = user;
console.log(currency); // USD

Wow, isn't it wonderful? 😍

It's readable, clean and simplified with minimal change. Let's go into little deep.

How about you want to have an alias to a property?

Assigning Alias to key

Previously, we used to achieve this with by creating one more new property in the new line.

const { firstName, phone, currency = 'USD' } = user;
const mobileNumber = phone;
console.log(mobileNumber); // 9999999999

But, with Object destructuring, it can be even simplified as,

const { firstName, phone: mobileNumber, currency = 'USD' } = user;
console.log(mobileNumber); // 9999999999

You just need to put an alias key by adding :(colon) and alias key before the original key.

Destructuring with Nested Object.

Let's go deeper with nested object.

How about accessing the autoSave key inside the preferences?

Without object destructuring, the code can be written as,

const autoSave = user.preferences.autoSave;

With Object destructuring, we can access the nested object by adding {} again after the root key (i.e preferences). So, it can be written as below. Additionally, alias and default values can be set to it.

const { preferences: { autoSave } } = user;

// with default value
const { preferences: { autoSave = false } } = user;

// with alias key
const { preferences: { autoSave: saveAutomatically } } = user;

// with default value + alias key
const { preferences: { autoSave: saveAutomatically = false } } = user;

To sum up everything, let's compare the code without object destructuring and with destructuring.

Without Object Destructuring,

const user = {
     firstName: 'John',
     lastName: 'Doe',
     phone: '9999999999',
     address: 'India',
     preferences: {
         mode: 'light', // light (or) dark mode
         autoSave: true   
    }
};

// Unpacking values
const firstName = user.firstName;
const phone = user.phone;
const currency = user.currency;

console.log(firstName); // John
console.log(phone); // 9999999999
console.log(currency); // undefined

// Assigning default values
if (!currency) {
   currency = 'USD';
}
console.log(currency); // USD

// Setting Alias to a key
const mobileNumber = phone;
console.log(mobileNumber); // 9999999999

// accessing key from nested object
const autoSave = user.preferences.autoSave;
console.log(autoSave); // true

With Object Destructuring,

const user = {
     firstName: 'John',
     lastName: 'Doe',
     phone: '9999999999',
     address: 'India',
     preferences: {
         mode: 'light', // light (or) dark mode
         autoSave: true   
    }
};

// Unpacking values + Assigning default values + Accessing key from nested object
const { firstName, phone: mobileNumber, currency = 'USD', preferences: { autoSave }  } = user;
console.log(firstName); // John
console.log(mobileNumber); // 9999999999
console.log(currency); // USD
console.log(autoSave); // true

Yay! It's simplified and much readable. Thanks to Object Destructuring. 😍🎉

In this article, we learned about Object Destructuring. In this next article, we will learn about Array Destructuring.

Meanwhile, you can Checkout the Object Destructuring demo in CodeSandbox.

Learn React JS - Understanding Components - Part 3

Yuvaraj — Mon, 31 May 2021 15:43:50 +0000

Hello everyone 👋,

In the previous article, we learned about Creating a React App with Create React App tool. In this part 3 of Learn React JS Series, we will cover the following topics.

What is a Component?
When to use a Component?
How to create a Component?
How to separate a big component into smaller components?

1. What is a Component?

Components are independent and reusable bits of code.

Components can be used to reduce the large piece of code into a smaller independent and reusable code.

2. When to use Component?

Developing the entire application in a single component file (App.js) makes the application harder to maintain and test. In order to solve this issue, the entire application can be sub-divided into many independent and reusable components.

In the example below, You can see, all the logic is developed in a single App.js file which is a bad practice (left-hand side).

Instead, we can separate this entire code into multiple components which makes the code reusable and maintainable. See, how we have separated it (right-hand side).

3. How to create a Component?

In React JS, there are 2 types of components. They are

a. Functional Component
b. Class Component.

a. Functional Component

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
Props are like an input value to the component from parent component.

Example of Functional component:

function App(props) {
  return <h1>Learn React</h1>;
}

b. Class Component

It uses the ES6 Class declaration to create the Class Component. To use the Class Component,

extend the class with React.component
overide render method and return the valid JSX.

Example of Class Component:

class App extends React.Component {
  render() {
    return <h1>Learn React</h1>;
  }
}

The above two components are equivalent from React’s point of view.

It produces the same output. We will learn in the next part about Functional vs Class Components.

4. How to separate a big component to smaller components?

Assume, you have been given to develop a component as per the google search results view.

So, usually, beginners who do are, develop everything under the App.js file. The Search box, the search results, pagination, footer, etc.

In the below example, the Search box and search results are developed in the App.js file. This will perfectly work fine!

App.js

function App(props) {
  const data = [
    {
      url: "google.com",
      title: "Technology definition and meaning",
      description:
        "Technology refers to methods, systems, and devices which are the result of scientific knowledge being used",
    },
    {
      url: "reactjs.com",
      title: "React JS is a front end technology",
      description:
        "Technology refers to methods, systems, and devices which are the result of scientific knowledge being used",
    },
  ];
  return (
    <div className="container">
      {/* // enter search query */}
      <input type="text"></input>
      <div className="search-results">
        {data.map((item) => {
          return (
            <div>
              <div className="search-url">{item.url}</div>
              <h2 className="search-title">{item.title}</h2>
              <div className="search-description">{item.description}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

App.css

body {
  margin: 20px 0px 0px 20px;
}

.search-results {
  margin-top: 40px;
}

.search-title {
  margin-top: 0;
}

.search-description {
  margin-bottom: 50px;
}

Output of this code:

But, wait, what would you do, if you want to have this same UI and functionality in another file? Maybe main.js.

So, to do this, we have to move those search results functionality into a separate re-usable component for use in other places.

Follow the below steps to do it.

Create a new file and name it as SearchResult.js. Make it as a functional component and accept props as property.
Cut the below code from App.js and paste in SearchResult.js
After pasting in SearchResult.js, replace item with props. Your final code should be as below image.
In the second step, we have removed search results code and moved it to SearchResults.js. Paste this code in App.js to use Search Results re-usable component. We are passing the data of title, url and description from App.js to SearchResult.js with props.

That's it, we have separated out the code for search results. Now, Search Results component can be used in any other component.

Here's my github repo where you can find all the files in the part-3 branch. Search results and App JS components are available in this branch.

We will keep updating this repo for every part. So, please bookmark it.

yuvgeek / learn-react

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`yarn start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`yarn test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`yarn build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`yarn eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied…

View on GitHub

In the next article, we will learn the difference between Functional and Class Components.

Thanks for reading the article!

Learn React JS - Creating a React App- Part 2 (Series)

Yuvaraj — Tue, 25 May 2021 19:14:47 +0000

Hello everyone 👋,

In the previous article, we learned about the basic concepts of React which covered JSX, React Element, Rendering the element, etc.

In the 2nd part of the Learn React JS series, we will cover on Creating a React App with Create React App tool.

Creating a React App with Create React App

In the 1st part of this series, we have created the React App by adding React & React DOM CDN URL directly in the <script> tag. The reason to use Create React App tool over the above method is, it helps with tasks like

Scaling to many files and components.
Using third-party libraries from npm.
Detecting common mistakes early.
Live-editing CSS and JS in development.
Optimizing the output for production.

Without further delay, let's create an app with Create React App tool.

Run the below command in terminal to install the Create React App package.

npm install -g create-react-app

The below command creates a new app. So, please make sure to update the 2nd argument. It is the application name.

create-react-app first-app

Once its successfully created the app, you can able to see the below screen.
Then, go to the project folder and run the app.

cd first-app
yarn start

The command yarn start will automatically start a server and listen it on port 3000. This will be the first screen you will see in http://localhost:3000/.

To modify the content, open App.js file under src/ folder and start updating the code inside the return block. I've updated the code to keep only h1 tag to show as First app. Save the file and automatically the new changes will be reflected in the UI.

Original Content

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Modified Content

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>First App</h1>
    </div>
  );
}

export default App;

The output with modified content:

Here's my github repo where you can find the files in the part-2 branch. We will keep updating this repo for every part. So, please bookmark it.

yuvgeek / learn-react

In the next article, we will learn how to create components & the difference between Functional and Class Components.

Thanks for reading the article!

Learn React JS - Basic Concepts - Part 1 (Series)

Yuvaraj — Sun, 23 May 2021 18:33:35 +0000

Hello everyone!👋

I hope everybody having/had(depends on timezone) a great weekend.

Let's learn the new technology starting from this week. 😃

In this series,we will cover the main concepts of React JS with multiple parts & this is the first part in the React JS series.

In this first part, we are going to learn the basics of React JS.

The below are the topics to be covered in this part,

What is React JS?
JSX
Expressions in JSX
JSX -> React Elements
Rendering Elements
DEMO

1. What is React JS?

A JavaScript library for building user interfaces.

React JS provides the user to create reusable UI with web components.

2. JSX

React JS utilizes JSX. JSX is the syntax extension to Javascript. You can use the HTML in the Javascript.

Consider the below example. The syntax are neither html nor string, it is JSX.

const element = <h1>Hello, world!</h1>;

3. Expressions in JSX

One can embed the JavaScript expression inside JSX. If you see the example below, variable name is used in the welcomeMessage.

const name = 'DEV';
const welcomeMessage = <h1>Hello {name}</h1>

Here is an another example. The code produces the output as Total is 9.

const result = <h1>Total is {4+5}</h1>

4. JSX -> React Elements

Since browser doesn't understand JSX, Babel first compile JSX to React.createElement & then React.createElement converts the code into an Object, that is called React Elements.

Then React Elements creates the DOM and update it accordingly.

Example:

This is a JSX code,

const welcomeMessage = <h1>Hello DEV</h1>

The output after Babel compilation,

React.createElement("h1", null, "Hello DEV")

Then React.createElement produces the following code,

{
  "type": "h1",
  "props": {
    "children": "Hello DEV"
  }
}

5. Rendering Elements

Let's look how to render React elements to view with React DOM.

React provides a package called react-dom which provides DOM-specific methods.

Assume, we have the following code in index.html & app.js

<div id="root"></div>

const welcomeMessage = <h1>Hello DEV</h1>

In order to render the react element, ReactDOM.render() method to be used.

ReactDOM.render takes two parameters. 1st is the React Element & the 2nd is the DOM reference.

const welcomeMessage = <h1>Hello DEV</h1>
const domRef = document.getElementById('root');
ReactDOM.render(welcomeMessage, domRef);

The React DOM renders the React Element in the mentioned DOM reference.

6. DEMO

To understand the above concepts, lets create a sample react app. In this example, we will not utilize jsx, instead plain JavaScript will be used to demonstrate.

Here, we have 2 files - index.html & index.js.

index.html has

A div with id as root. This will be used for domRef.
Include React & React DOM <script> section.
Include index.js

<!DOCTYPE html>
<html>

<head>
  <title>Learn React - Part 1</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="index.js"></script>
</body>

</html>

index.js

const domRef = document.getElementById('root');
const welcomeMessage = 'Hello DEV';
ReactDOM.render(welcomeMessage, domRef);

Here's the live demo & output in CodeSandbox

Here's my github repo where you can find the files in the part-1 branch. We will keep updating this repo for every part. So, please bookmark it.

yuvgeek / learn-react

If you have looked the 2nd line, we are not using JSX. We are using the string. The reason is, with this simple react setup it is difficult to write the React App.

Let's discuss it in the upcoming parts where we will learn more React concepts!

Thanks for reading the article!

Learn the hidden feature in Git - Stash

Yuvaraj — Sun, 16 May 2021 14:24:20 +0000

Hello everyone 👋,

In this article, Let's discuss about the stash feature in Git. We are going to cover the following topics:

What is Stash?
When to use Stash?
How to use Stash?
How to apply Stash?
How to clear Stash?

1. What is Stash?

The general term of stash means storing something in a hidden place. It is similar in the Git terminology as well. It means moving the changes away from working directory.

2. When to use Stash?

When you don't want to do a commit of half-done work just so you can get back to this point later. The answer to this issue is the git stash command.

3. How to use Stash?

Assume, we have a git repository which has 2 files - index.html & feature-1.js

In the same master branch, a new feature is developed in the feature-2.js file which is not ready yet.

Suddenly you got a call from your team lead about a blocker issue in feature 1 & you are requested to fix it immediately. Now, you have to make changes on feature-1.js without pushing feature-2.js.

This is where git stash will come to the rescue.

In this situation,

First add the unfinished files to the staging area by git add command,

git add feature-2.js

Run the below command to move the files from working directory to stash.

// with -m flag, you can add customized stash message.
git stash push -m "feature 2 in progress"

Then run, git stash list to see the stash list. You will see the stash id along with the message. Here, stash@{0} is the stash id.

stash@{0}: On master: feature 2 in progress

The feature-2.js will not be available in your git status and as well as in your working directory. Now, you can work on feature-1.js and push your fix to the remote repository.

Well Done! 👏

You have successfully fixed issue in feature-1.js.

But, how to bring back feature-2.js to the work copy? 🤔

That brings to the next section on applying stash.

4. How to apply Stash?

Like how the files were moved from working directory to the stash through git stash push command,
one has to use git stash apply command to move the changes from stash to working directory.

To do that, follow the below steps,

To see the list of stashes along with stash id, run the git stash list command. You will see the stash id along with the stash message we have given earlier.

git stash list
stash@{0}: On master: feature 2 in progress

In this case, stash@{0} is the stash id. Use this in below command to apply the changes.

git stash apply stash@{0}

You will see the following output on running the above command

  On branch master
  Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)
    new file:   feature-2.js

In the last line of above log, you can see feature-2.js is bought back from stash. Now, you can work on continue working on Feature 2. 🙌

Lets try run git stash list once more.

stash@{0}: On master: feature 2 in progress

You will be surprised to see the Stash is still there. We have already have feature-2.js file, But, why is still in Stash? We will see how to clear from stash on next section.

5. How to clear Stash?

There are 2 ways to clear the applied stash.

You can remove the stash by id. In our case, stash@{0} is the stash id. This will remove only the specific stash from the stash list.

git stash drop stash@{0}

You can completely remove all the stash in the list. Warning: This will remove all the stashes from the stash list.

git stash clear

That's it!

Thanks for reading my article. I hope you've learned something new day!

Here's the link to my next article on React JS Series

Create a Reusable component with Plain Javascript - Without Angular/React/Vue!

Yuvaraj — Thu, 13 May 2021 19:28:33 +0000

Hello everyone 👋,

In this article, we are going to see how to create a reusable HTML Element/component with only plain JavaScript.

Yes, you heard it right.

In this web development world, everyone might have encountered of creating at least one custom component with Angular/React/Vue. But, have you ever wondered how it is achieved? Let's dive in!

Web Components

Web Components is the basic building logic of creating the custom components.

Here's the definition:

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Most of them aware that, the reason to create a custom component is because the required feature is not available in the existing HTML world. Assume, We can use, <button> tag to render a button and top of it we can add a style as per the need. But, what if, if we need a customized feature, like a common app header that should be re-used in all the applications.

One solution is, we can copy & paste the code in all the projects. But, it leads to the following problem

Adding any new change should be done in all the projects.
Code Repetition.
Non maintainable.

That's where Web Components comes into this picture.

Web components are based on four main specifications:

In this tutorial, we going to see the 1st specification - Custom Elements.

Custom elements lays the foundation for designing and using new types of DOM elements.

Let's begin by creating a reusable AppHeader Custom element.

First, create a new class, let's say AppHeader & extend HTMLElement. Then, call super() inside constructor. The below 2 methods are like lifecycle hook.

connectedCallback is called when the element is added to the DOM.

disconnectedCallback is called when the element is removed from the DOM

Finally, assign the HTML selector with the AppHeader class by

// first parameter is the tag name and second parameter is the class for the new HTML element.
// tag name should always have hyphen(-). In this case, it is app-header. 
customElements.define("app-header", AppHeader);

Here is the complete app.js content:

class AppHeader extends HTMLElement { 
    constructor() {
        super();
        console.log("constructor called");
    }

    connectedCallback() {
        console.log("connectedCallback called");
       // creating a content to user to user
        this.innerHTML =
            "This is the header content rendered from app-header custom element";
    }

    disconnectedCallback() {
        console.log("disconnectedCallback called");
    }
}

// first parameter is the tag name & second parameter is the class for the new HTML element.
customElements.define("app-header", AppHeader); 

// this function is to demonstrate the disconnectedCallback lifecycle
function removeCustomElement() {
    document.querySelector("app-header").remove();
}

Here's the index.html code:

<html>
    <head>
        <title>Custom Component</title>
    </head>

    <body>
        <h1>Custom Components</h1>
        <p>Lets learn how to create custom component.</p>

       <!-- Newly created HTML element with Plain JS -->
        <app-header></app-header> 

        <div style="margin-top:20px">
        <button onclick="removeCustomElement()">Remove Custom Element</button>
        </div>
        <script src="app.js"></script>
    </body>
</html>

Here's the output from the browser:

You can see This is the header content rendered from app-header custom element is rendered from <app-header> component/element. WOW, with Plain JS a custom component is created 🤯 🙌.

If you notice the console tab, you can see only 2 logs are there. First is constructor is called and then connectCallback. But, where is disconnectedCallback log?

If you recall, disconnectedCallback will be called only when it is removed from DOM.

Let's remove from DOM by clicking the button Remove Custom Element.
Now, you can see disconnectedCallback in the console & the <app-header> content is removed from the content.

Thanks for reading the article. We will explore more the other 3 specification in the upcoming article.