Create a React App with TypeScript template

Functional Component

Frequently Used

Event Handling

Render List

Conditional rendering

Type 1: If statement style

Type 2: If else statement style







A. Component

B. Function

This is my personal collection of cheatsheet for Excel.

Indian Number Format

Current Day, Month & Year


  • Calculate difference between dates.


Last Value of Column


  • If formula can give error, this will help to handle that error.

Photo by bruce mars on Unsplash

Have you ever tried passing parseInt to array’s map method ?

If not yet, I will say try it now. It’s very interesting.

When we try it for first time, it looks very confusing but once we understand the logic, it becomes easy to understand.

To understand how this works we need to understand how map method and parseInt work.

Map method of Array

It creates a new array after executing a callback function on every array elements. Three parameters are passed to that callback function.

  • Current Object
  • Current Index
  • Source Array

In our case that…

logo of npm

Why to reinvent the wheel ?

Lots of good things are built in the world. If we can use them, why to re-create them every time? We should use those things to create something new.

The same logic is applicable in front end development as well. Whenever we work on any front end project, we use lots of third-party npm packages for various purposes.

One day I was setting up one of my new mini-project to learn Redux Saga. I realized that these npm packages are really cool. Those packages are developed by some developers and used by anyone throughout…

JavaScript Closure by Yuvraj Patil

A wise man once said

“You need to master the closure to be a Guru in JavaScript”.

Code Block from Yuvraj Patil

To achieve anything big in our life we have to be disciplined. We have to set some rules and we have to follow them no matter what happens. So to define strict in simple terms, it’s just rule, rule and rules. These rules help us to avoid the known mistakes.

Similarly in JavaScript, there are many known issues which may occur if we do not follow some rules. To force to follow such rules, there is a mode called strict mode. It imposes rules which help us to avoid upcoming issues.

To declare the strict mode you just have to…

Photo by Michael Winterdal on Unsplash

People do lots of things to get kicks. I am not talking about physical kicks but about mental kicks.

For such kicks someone drinks coffee, someone drinks tea, someone smokes and someone do something unique. Everyone has their own way to get kicks.

Kicks give us instant energy. It makes our mood happy. It increases our productivity for a while. We feel like this is what we needed to feel better.

Sometime in our career, time comes that we need to be at our top speed. At such time what we desperately needs is KICK.

Whenever such time comes to…

Unit Testing Angular Application using Jasmine

Unit testing is one of the most important part of any application development. It helps us to make our source code more robust. Purpose of this article is to cover Jasmine test cases for core component of Angular Application.


  1. You are familiar with Angular.
  2. You have created your project with Angular-CLI. i.e. All dependencies are installed and Karma config is ready.

Step 1: Create Global Mocks

Create a globalmocks.ts which will be keeping all test data and other global mocks. Make sure to export data and mocks. There are different levels of mock in case of callback functions.

Source Code of Global Mocks

Step 2: Test cases for Angular Component

When you…

Component Communication in Angular

In Angular, component communication is a very essential thing. For component communication, we use @Output() and @Input(). This works well if our application is small. But as our application grow, more and more components are added. So we have to add lots of @Output() and @Input() at many levels which becomes very difficult to manage. Debugging an issue in lots of @Output() and @Input() levels is a nightmare.

There are multiple ways to resolve this issue but in this blog we are focusing on component communication using RxJS. (RxJS is simply a library of event management).

This implementation consists of…

Visual Studio Code Extensions for UI development

Visual Studio Code is the best IDE for any front end development. During the code development we do lots of things other than coding. Things like formatting, making builds and much more. To help the developers speed up there are lots of extensions available for Visual Studio Code.

I have listed down extensions which I believe will definitely help during front end development:

1. Partial Diff

Yuvraj Patil

Programmer who loves coding and enjoys learning new technologies. 8 years of experience in JavaScript development. Website:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store