Sign in

This is how to debug you React app in VSCode now

Photo by Sigmund on Unsplash

I am big fan of debugging in VSCode while writing web frontend. This article is meant for them who like to debug and add breakpoints on the VSCode IDE.

Previously this can be done via Debugger for Chrome plugin. But this plugin is now deprecated and not working properly.

So now what? Let's start the process of setting up the process of debugging in VSCode.

Step 1

Install things that necessary for the process.

  • Open the extensions view (ctrl+shift+x) and search for @builtin @id:ms-vscode.js-debug
  • Right click on the JavaScript Debugger extension and Disable it.
  • Search for @id:ms-vscode.js-debug-nightly in the extensions view.
  • Install…

How to add authentication in just 2 minutes or less in a React App using AWS Amplify.

Photo by Georg Bommeli on Unsplash

Amazon Web Services offers reliable, scalable, and inexpensive cloud computing services. It provides almost every solution an IT problem may require.

Among them, Amplify is something that provides some out-of-the-box awesomeness to your application.

Here, I will demonstrate how to add authentication in just 2 minutes or less in a React Application.

Step 1

Login to your AWS Account and go to cognito.

The pitfalls of using “var” and the differences between “var” and “let”.

Photo by Pakata Goh on Unsplash

JavaScript is a powerful language because you can write an entire software without adopting any other programming language at all.

var used to be a way to declare variables in JavaScript. However, declaring a variable or object in this way is now very rare due to the nightmare it can create in your JavaScript project.

var obj = {} 
// instead let (or const) is used to declare a variable

Starting with ECMAScript 6, the let statement was introduced.

Here then is a brief overview of why var is no longer or rarely used in JavaScript projects for declaring variables.

This is how some smart developer tried to explain JavaScript closures to a 6-year-old!

An curious  man looking at bioscope.
Photo by PNG Design on Unsplash

This is the traditional way of explanation

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) — Mozila Developer Network

So, there are two things involved:

- A Function
- A Reference to that function's outer scope

Here is a small code snippet that can explain closures:

function makeFunc() {
var name = 'Mozilla';
function displayName() {
return displayName;
var myFunc = makeFunc();
myFunc() // Mozilla

Functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared. …

Things to try in your next JS project

Books on shelf
Photo by Greg Rakozy on Unsplash.

JavaScript is everywhere, from browsers to mobile and even the backend.

In this article, I will try to note a few practices that you can follow to make your code look cleaner.

1. Use Default Arguments Instead of Short-Circuiting or Conditionals

Default arguments are often cleaner than short-circuiting.

Try this instead:

Disclaimer: Falsy values such as '', "", false, null, 0, andNaN will not be replaced by a default value:

2. Handling Multiple Conditions

A much cleaner way would be:

3. Replacing Switch With Dynamic Key-Value Pair (i.e. Object Literal)

Switch version (or replace switch with if/else) :

Dynamic Key-Value Pair version :

4. Avoid Too Many Function Params

Here’s a cleaner way:

5. Set Default Objects With Object.assign

This looks bad and tedious:

When to use Tilde(~) or Caret(^)

Photo by Pankaj Patel on Unsplash
npm install somePackage --save

Everyone who is writing for frontend or node backend, is very much familiar with this right? When we add something like that way, we see something added in our package.json like this

"somePackage": "^3.5.3",

This writing focus on these special characters(~,^ or *) exactly before the version.

What is it?

This character represents the semantic versioning of node and npm. Semver is separate into 3 major sections which is broken by dots.


These different major, minor and patch are using to identify different releases.

Tilde(~) VS Caret(^)

  • ~ freezes major and minor numbers
  • It is used when you’re ready to…

Take a minute to Make a Cross Check!

Hippocratic Oath for SE’s. Photo by Artem Kniaz on Unsplash

Robert Cecil Martin, a very well known personality among developer community. He is the Guru behind the concept clean Code.

He has tremendous contribution to the software engineering people and relevant practices. Its important to note that he is also the one behind agile menifesto.

Recently I have came across his another great work which he refer to The Programmer’s Oath.

Here is the points he suggested we, the software people should do.

In order to defend and preserve the honor of the profession of computer programmers, I promise that, to the best of my ability and judgement :

  • I…

Load Remote Data, Parse, and Render in UI.

Photo by Vojtech Bruzek on Unsplash

We will write an application that loads a list of todos and renders them in a table with line-through on todo title text if already completed.

Here is our remote data URL:

which return something like below

"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false

Below is the mockup design of our exciting application.

Here is one way you can clean up your function parameters

Photo by Curology on Unsplash

Function and passing values to function is something that we all do every day of out software engineering life.

This writing tries to help optimising function argument passed.

The Scenario

Consider this below function. This function takes four arguments.

function myFunction(employeeName,jobTitle,yrExp,majorExp){
console.log(`Meet ${employeeName}`);
console.log(`He is working as ${jobTitle}`);
console.log(`He has ${yrExp} year of Experience`);
console.log(`He is an expert in ${majorExp}`);

This is how we will call this function

myFunction("John","Project Manager",12,"Project Management");

The output is:

Meet John
He is working as Project Manager
He has 12 year of Experience
He is an expert in Project Management

The Problem

Violation of ‘clean code’ principle

This principle suggests that a function…


Software Writer || Javascript Journalist || Now Learning Flutter.

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