Aparna Joshi

Postgresql for dummies

aparnajoshi.88@gmail.com — Wed, 09 Dec 2020 00:00:00 GMT

Installation

Postgres is an open-source RDBMS that can be hosted independently on a machine, or hosted via a database service using EDB. PostgreSQL can be installed in different ways depending on the operating system that is being used.

macOS: There are 3 main ways of installing Postgres on macOS - Installation via interactive EDB, installation using postgres.app made specifically for macOS, or installation using homebrew. More details can be found on this link
Windows: Postgres can be installed on Windows using the EDB installer. Follow this link to get more information.
Linux: Postgres is available as a package that can be installed using the package management systems provided by Linux. This link provides basic information for the installation procedure.

Running the system

This section will discuss how to run PostgreSQL on Mac, and how to initiate the DB via the command line.

The Postgres usually keeps all its data in the path /usr/local/var/postgres. This path must be initiated so that the DB would start storing the databases and relations in this path.
```
initdb /usr/local/var/postgres -E utf8
```
Run Postgresql on MacOS
```
brew services start postgres
```
During the initdb phase, a database with the name <user> should be created. If this is not created, a manual creation would be necessary.
```
createdb <user>
```
The psql acts like a command-line client to issue commands to your database. This can be started using the command
```
psql
```

Create a new user and grant permissions

By default, all the databases under Postgres will be created under the main user. This main user contains superuser permissions. Normally you would want to create a database and give permissions to access DB at various levels.

Create a new user by issuing the following command:

CREATE USER <username>

Set a password to this user by the following command:

ALTER USER <username> with encrypted password '<password>';

Provide permissions to this user using the command:

ALTER USER <username> with CREATEDB;

The other permissions that can be added to the user include the following:

LOGIN / NOLOGIN: Allow (or not) to login to PostgreSQL
SUPERUSER/NOSUPERUSER - Provide (or not) superuser permissions on the user. A database superuser will bypass other permission checks, except for LOGIN.
CREATEROLE - Allow (or not) the user to create various roles with different permissions on the DB
CREATEDB/NOCREATEDB - Allow (or not) the user to create new Databases.
REPLICATION - Grant (or not) replication permissions
CREATEUSER / NOCREATEUSER: Allow (or not) the ability to create new users.

Createrole and alter role permissions

Sometimes we require a group of permissions to be given to several users. Instead of adding individual permissions to each user, a role can be created. Any new user that is created can be assigned a particular role.

Create a new role:

CREATE ROLE <groupname> WITH <role1>, <role2>;

The GRANT command can be used to provide a role to the user.
```
GRANT <groupname> TO <username>
```
The REVOKE command can be used to remove a role from the user.
```
REVOKE <groupname> TO <username>
```

Play with PSQL

Command-line tools are especially helpful when you are trying to visualize your database. You'd want to check what databases are present, what type of relations are present in your database. Note that all these commands should be used in PSQL

List all your users in the system use
```
\du
```
List all the databases using the command
```
\l
```
To select a database and list the relations in the database
```
\c <database name>
\dt
```
When a database owner is a different user, the psql command-line interface should be launched with different user permissions. This can be done using
```
psql -h localhost -p 5432 -U postgres
```
To understand the schema of any given relation within a database
```
\d "<relation name>"
```

And finally, now that you know the basics of working with Postgres, it is time to create new databases and explore various functionalities on your own. Just write your queries in a .sql file and execute it using the command:

psql -f <filepath> -q <dbname> <username>

That's all for today, see you in the next article.

Data Science: Regression

aparnajoshi.88@gmail.com — Sun, 29 Nov 2020 00:00:00 GMT

Background

In the previous article, we analyzed the data representing the statistics of javascript during the year 2019. The data visualization showed us how various types of javascript developers are distributed across the countries. In this article, we will look at linear and logistic regression mechanisms that can be applied to the data to predict the type of javascript developers and the various technologies that will gain more usage in the future. We will particularly look at using several descriptive features given by the users to predict whether they work in AngularJS or not.

Data Preprocessing

The combineddf used for visualizing various charts to see the data distribution will be again used for regression. Since most of the descriptive features are categorical we will be using LabelEncoder to transform this to Numerical data. This can be done in two ways:

Use the LabelEncoder method from sklearn.preprocessing library:

encoder = LabelEncoder()
df_LE = combineddf.apply(encoder.fit_transform)
print('Replacing categories by numerical labels: ')
print(df_LE.head())

This method would replace all the categorical columns/features with numeric features.

Use replace to find the various categories and replace them with appropriate numeric value:

filtered_df = combineddf[combineddf["yearly_salary"].notna()];
cleanup_nums = {"yearly_salary": { "work_for_free": 0, "0_10": 1, "10_30": 2, "30_50": 3, "50_100": 4, "100_200": 5, "more_than_200": 6}}
filtered_df.replace(cleanup_nums, inplace=True)
print(filtered_df)

This method will transform the yearly_salary column to numeric.

The transformation would be done for yearly_salary, years_of_experience, and job_title categorical features. And these are the features we will be used for classifying the data. We will also transform the column angular to predict how many users would be using angularjs given their descriptive features.

Logistic regression - linear model

The first step is to apply a linear model for logistic regression. This means we would try to see if the data can be fit using a straight line. The logistic regression would give out a function that separates the two output classes of data (In our case whether the person codes/uses AngularJs or not). Using a linear model, we would get a function that represents a straight line.

from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
import seaborn as sns
from sklearn import metrics

data_req = filtered_df[:1000]

feature_cols_react = ['yearly_salary', 'years_of_experience', 'backend_proficiency', 'css_proficiency']
X = data_req[feature_cols_react] # Features
y = data_req['angular'] # Target variable

X_train ,X_test ,y_train ,y_test = train_test_split(X,y,test_size=0.2,random_state=0)

logreg = LogisticRegression(solver = 'lbfgs', C=1e5);
logreg.fit(X_train,y_train);


y_pred=logreg.predict(X_test)
cnf_matrix = metrics.confusion_matrix(y_test, y_pred)
print("confusion matrix \n", cnf_matrix)
print("Accuracy:",metrics.accuracy_score(y_test, y_pred))
print("Precision :",metrics.precision_score(y_test, y_pred))
print("Recall:",metrics.recall_score(y_test, y_pred))

In the above code:

We are first selecting the set of columns to be used as descriptive features. These include an array having the values 'yearlysalary', 'yearsofexperience', 'backendproficiency', and 'css_proficiency'.
Next we select the target we want to predict 'angular'.
The data is now split into a training set and test set.
The logistic-regression function from sklearn.linear_model is now used to fit the training data.
The test set can be used for the prediction and verification of our model.

Following are the metrics obtained:

Accuracy of the classification: 81%
Confusion matrix:

We can see that the model is overfitting, and is classifying every data point to be an angular js user. In other words, the number of false positives in the predicted data is very high.

Logistic regression - Polynomial model

The linear model used for classifying data is overfitting. The simpler way to solve this would be to provide different attributes as descriptive features and check their effect on the model. The reason for overfitting can be:

The amount of data used for training is less
The Data has too many 1's compared to 0's for the Brown frogs.
The logistic regression is also sensitive to the outliers.

We can either use a different algorithm or try the polynomial logistic regression function.

from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
import seaborn as sns
from sklearn import metrics
from sklearn.preprocessing import PolynomialFeatures
from sklearn.pipeline import Pipeline

data_req = filtered_df;

feature_cols_react = ['yearly_salary', 'css_proficiency']
X = data_req[feature_cols_react] # Features
y = data_req['angular'] # Target variable

X_train ,X_test ,y_train ,y_test = train_test_split(X,y,test_size=0.2,random_state=0)

poly = PolynomialFeatures(degree = 2, interaction_only=False, include_bias=False)
X_poly = poly.fit_transform(X_train)

logreg = LogisticRegression(solver = 'liblinear', multi_class = 'ovr');
logreg.fit(X_poly,y_train);

X_poly_test = poly.transform(X_test);
y_pred = logreg.predict(X_poly_test)

y_pred=logreg.predict(X_poly_test)

cnf_matrix = metrics.confusion_matrix(y_test, y_pred)
print("confusion matrix \n", cnf_matrix)
print("Accuracy:",metrics.accuracy_score(y_test, y_pred))
print("Precision :",metrics.precision_score(y_test, y_pred))
print("Recall:",metrics.recall_score(y_test, y_pred))

The training set obtained by splitting the data is now transformed into the set of polynomial features of degree 2. This increases the number of features that would be used as independent variables.
The logistic regression function can now fit the model and predict the data.

Following are the metrics obtained:

Accuracy of the classification: 69%
Confusion matrix:

We can see that the model is also overfitting, however, its accuracy has come down to 69%. But note that this model is predicting the values in both categories and is not completely biased to one side. This shows that logistic regression is sensitive to outliers is not the best type of algorithm that can be used for prediction. We can use better ML algorithms. In the next post let us explore SVMs and how they can be used to better predict the values from the same data.

Data Science: Data Visualization on Javascript

aparnajoshi.88@gmail.com — Sat, 21 Nov 2020 00:00:00 GMT

Data Science and Javascript

I have been using javascript for pretty much my whole career, and have started embarking on a new journey of becoming a data scientist. Along with the exciting new things I have been learning, I felt the need to revisit some of the old classics and try to make sense of the survey data.

This survey was conducted this year and it reached nearly 21,717 people. The survey has collected a wide range of data starting from the general demographics of the population using javascript such as the country they live in, the job specifications of the people working with javascript, and what is their proficiency level in frontend or backend development. It also collects the data about the different syntax used by the developers, various frontend frameworks and libraries preferred.

Let's being by applying some of the basic data visualization techniques available in python and go to the more advanced versions.

Prerequisities

A basic knowledge of programming. It is enough if you know how to code in any programming language
Anaconda installed in your system. Please refer to this link to download anaconda for your system and install it. https://www.anaconda.com/products/individual
Jupyter notebook running on your browser. Open a new file untitled.ipynb. This is where we will make the code changes.
Dataset downloaded and converted to JSON or CSV or both. The javascript dataset for 4 years is present in the link https://www.kaggle.com/sachag/state-of-js-2019. Please download this data. The data is in ndjson format, which is usually used for collecting streaming JSON data. Please use the npm package ndjson-to-json to convert it to JSON format and store it in a file. Let's call it state_of_js.json.
Convert the file to CSV, it is much easier to use pandas with CSV.

import pandas as pd
pd.read_json("./state_of_js.json").to_csv("state_of_json.csv")

Sampling the data

The survey data usually obtained in real life will be huge, generally in the range of a few ten thousand. The initial task is to look at sample data and identify the structure of the data. The easiest way is to use the following function:

data = read_dataset("state_of_js.csv");
print(data.head())

However, printing this in jupyter notebook doesn't give a better holistic look at the data. A better way would be to sample out a couple of hundred rows and save it in a CSV file.

import pandas as pd

def read_dataset(dataset):
    data = pd.read_csv(dataset);
    return data

data = read_dataset("state_of_js.csv");
sample_data = data[:1000];

def write_csv(filename, data):
    data.to_csv(filename);
    return;

write_csv("sample_state_of_js.csv", sample_data);

Now we can visualize the data to see the type of values, and the organization of rows.

Looking at the sample data we can see that the following categories of data are present. In other words, the descriptive features of the data are as follows:

source: The origin of the survey, how the user found out about the survey and where did they take it from?
user_info: This the object containing different types of information. country of origin, device used by the user, job_title of the survey taker, backend frontend and css proficiency of the user are some of the values that can be inferred from the data.
features: This is also an object containing multiple types of data, the various features present in the javascript programming language, and how many of these are used by the user. The type of features ranges from arrow_functions, destructuring, spread_operator, async_await, decorators, promises, proxies, maps, fetch, local_storage, etc.
tools: This has information given by the users regarding different frameworks and libraries that they are used over the years during their work with javascript. closure, purescript, reason, typescript, angular , react, vuejs, etc.

For this article, we will focus on the demographics and the tools being used by the people, and try to visualize them.

Data preprocessing

One of the important tasks for data visualization and manipulation is to preprocess the data and convert them to the required format. Sometimes it is also better to remove certain columns (descriptive features) from the data that are currently not required.

In the next step, we are doing the following:

Consider only two main descriptive features required for our data visualization: user_info and tools.
The data inside the user_info and tools are in string format. We will then convert them into its own DataFrames. This will help in the direct manipulation of the data in these columns and we can use them for charting out few beautiful visuals. We are converting the data in each row under user_info into columns.

import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import numpy as np
import json

def read_dataset(dataset):
    folder = "./";
    data = pd.read_csv(dataset);
    return data

data = read_dataset("state_of_js.csv");
userdf = pd.DataFrame();
toolsdf = pd.DataFrame();
combineddf = pd.DataFrame();
for index, row in data.iterrows():
    user_info = row["user_info"];
    tools = row["tools"];
    if(isinstance(user_info, str) and isinstance(tools, str)):
        tempjsonuser = eval(user_info);
        tempjsontools = eval(tools);
        for key, value in tempjsontools.items():
            tempjsontools[key] = value['experience'];
        tempjsoncombined = {**tempjsonuser, **tempjsontools}
        userdf = userdf.append(tempjsonuser, ignore_index=True);
        toolsdf = toolsdf.append(tempjsontools, ignore_index=True);
        combineddf = combineddf.append(tempjsoncombined, ignore_index=True);

We have the following content on which data manipulation can be done:

userdf represents the DataFrame of each row under the user_info column.
toolsdf represents the DataFrame of each row under the tools column.
combineddf represents the DataFrame of each row under both the columns combined.

Sources of the Survey

We have the userdf DataFrame which contains the data of the user. The column of interest under this DataFrame is source_normalized. This shows the various sources from which the survey was taken. We first filter out the data to remove rows with missing values and then plot a bar graph.

filtered_df_source = userdf[userdf["source_normalized"].notna()];

fig, ax = plt.subplots(figsize=[96, 64])
sns.countplot(ax = ax, data=filtered_df_source, x="source_normalized")
plt.savefig("source.png");

Distribution by country

The user dataframe also contains information about the country from which the survey was taken. Let us plot this by filtering the data and plotting a bar graph.

filtered_df_country = userdf[userdf["country"].notna()];

fig, ax = plt.subplots(figsize=[96, 64])
sns.countplot(ax = ax, data=filtered_df_country, x="country")
plt.savefig("country.png");

Salary distribution of the users based on the country

We have two non-numeric data country and yearly_salary. Usually, the bar graphs and stacked graphs are formed on top of numeric data. However, it is possible to transform the data and grouping them by country and yearly_salary.

sample_data = filtered_combineddf_country[:1000]
df_plot = sample_data.groupby(['country', 'yearly_salary']).size().reset_index().pivot(columns='country', index='yearly_salary', values=0)
fig, ax = plt.subplots(figsize=[12, 8])
df_plot.plot(ax=ax, kind='bar', stacked=True, rotation=40, ha="right")
plt.savefig("country_salary_stacked.png")

The following observations can be made:

Most of the salaries fall between $50k to $100k and $100k to $200k.
Most of the salaries reported show higher no of people working in the United States.
The second and third highest countries are Spain and France.

There can be another type of representation for the distribution of salary based on country:

fig, ax = plt.subplots(figsize=[12, 8])
sns.stripplot(ax = ax, x ='country', y='yearly_salary', data = filtered_combineddf_country[:1000],  jitter = True, hue ='yearly_salary', dodge = True) 
plt.savefig("country_salary.png");

No of users of React, Angular, and VueJs

In the following representation, we have 3 different columns of categorical data. These are for Angular, React and VueJs usage. The data represents 5 different levels of experience users have. There are two options to approach this problem:

Convert the different levels from 1 to 5, that way the data can be considered numeric, and BarPlot or StackedPlot can be used on them
Plot the data individually on the same graph.

sample_data = filtered_combineddf_country[:1000]

fig, ax = plt.subplots(figsize=[12,8])

ax = sns.countplot(x=sample_data.angular, color='green')
ticks = ax.get_xticks()
ticklabels = ax.get_xticklabels()
lim = ax.get_xlim()

sns.countplot(x=sample_data.react, color='red')
ax.set_xlim(lim)
ax.set_xticks(ticks)
ax.set_xticklabels(ticklabels)

sns.countplot(x=sample_data.vuejs, color='blue')
ax.set_xlim(lim)
ax.set_xticks(ticks)
ax.set_xticklabels(ticklabels)
ax.set_xlabel('languages')
plt.savefig("languages.png");

In the above plot, we are counting the different values under Angular, React and VueJs, and stack them together under the same graph.

Distribution of Angular JS usage by the country

We can now plot the count of different types of angular js users, distributed by their region of work. This would be similar to how the country-wise salary distribution was plotted.

sample_data = filtered_combineddf_country[:1000]
df_plot = sample_data.groupby(['angular', 'country']).size().reset_index().pivot(columns='angular', index='country', values=0)
fig, ax = plt.subplots(figsize=[24, 16])
df_plot.plot(ax = ax, kind='bar', stacked=True)
plt.savefig("country_angular_stacked.png")

From the graph:

There is a higher distribution of Angular JS users in Spain, France, and India.
Australia, Germany, Spain, France, Great Britain, India, Russia, United States. are some of the countries where no of people using AngularJs is more.

In this article, we explored some real time data collected about the usage of javascript and applied data visualization techniques to it. This will be a continuous series where more number of statistical analysis would be done on the same data. If you need any further information on data visualization refer to Seaborn and Matplotlib

Javascript: Pipe and Compose functions

aparnajoshi.88@gmail.com — Wed, 04 Nov 2020 00:00:00 GMT

Why do we need pipe or compose?

In one of the previous articles, we discussed the need for chaining several functions, and how to do them using the this operator. While this works fine, there are several drawbacks to using this method:

One has to keep track of this. And the value must be stored in the this operator so that the functions chained later on gets to access this value.
The syntax is not quite intuitive. If there are many functions, it would look something like this -> functionA().functionB().functionC().functionD().......functionZ().

To reduce the effects of these two caveats, the implementation of pipe() and compose() functions can be used.

pipe()

The Pipe is a function implementation that is called with a list of functions and a starting variable. The functions provided in the pipe are called in the same order as they appear. There are two types of implementation for this, with Unary implementation only allowing one variable to be sent, and implementation of multiple variables.

Unary implementation:

pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);

pipe(
    add,
    multiply,
    double,
    divide
)(5)

Let's break down the above implementation:

The reduce method provided in javascript's array implementation is being used here. The basic syntax f!or this implementation is as follows: [1,2,3].reduce((av, val) => av + val, x). Here, the function starts with an initial variable x, and then it traverses through the array and calls an anonymous function with 2 values, the accumulated value and the current value. The function implementation is dependant on the user.
The spread operator is used to transform the input list of functions into an array. It helps in the implementation of the reduce function.
When the function reduce is called, the next function in the list becomes the current value, and the value returned from the previous function becomes the accumulated value.
The array is iterated through until it reaches the end.
Multiple operator implementation:

pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));

pipe(
    add,
    multiply
)(10, 10);

In this case, since no initial value is supplied, the first argument (function add) is considered as the accumulated value for the first iteration. Hence, the current value naturally becomes the function multiply. We supply the list of arguments ...args to the accumulated value (function add), and the output from the function is then given to the function multiply.
If several arguments must be received by the second function, ensure returning a list of arguments from the first function

compose()

Compose is another pattern for executing multiple functions in a row. It is similar to the pipe function, except that the methods are executed in the reverse order to that of the pipe method.

compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

compose(
    divide,
    double,
    multiply,
    add
)(5)

The method reduceRight is also provided as one of the standard Array iteration implementations. This parses the values from right to left.
The list of functions is taken in as an array, and the processing starts from the bottom function add.
The implementation shown above works the same as the pipe() implementation.

Note that compose() and pipe() are the programming pattern derived out of the existing javascript implementation, much like currying. These functions are not native to javascript, and cannot be used directly without defining the implementation first.

ReactJS: Multiple refs for handling form elements using react hooks

aparnajoshi.88@gmail.com — Thu, 08 Oct 2020 00:00:00 GMT

Handling forms in React

Dynamic web applications require data to be sent to and fro from the server. Consider any web application that is used in day to day life. The user information is sent to the server via HTML form elements such as inputs (user name, user email), radio buttons (selecting a choice), checkboxes (agreeing to terms and conditions), etc. React library also has its way of handling forms to collect user data. Before we understand how useRef can help in handling forms, let's see what are the common methods in which form elements and data can be handled in a React web application.

Controlled v/s Uncontrolled elements

In React, there are two distinct patterns for handling and updating the form elements that are rendered inside a component:

Controlled elements: The recommended pattern for handling forms in React is using the controlled elements. In this case, we maintain a state that would get updates every time the user changes the value within the form element. The onChange attribute will be provided with a change handler function that would take care of updating the state.
UnControlled elements: The more natural way the form elements get updated is by letting the form element gets updated by default browser behavior.

While the recommended way is using controlled elements, the amount of re-render increases dramatically when a user has to type in a lot of information. In such cases, providing references and using uncontrolled components would help in the reduction of re-renders.

useRef for handling a single input element:

import React, { useEffect, useRef } from react;

const SingleInput = ({ name }) => {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
    if(name) {
      inputRef.current.value = name;
    }
  }, []);
  console.log("Rendering...");
  return(
      <form onSubmit={() => {/* inputRef.current.value */}}>
        <input ref={inputRef} placeholder='Name'></input>
      </form>
  );
}

export default SingleInput;

In this example, there is a single input component handled using ref, and when the user types in the input, the component is not re-rendered for every change. The handleSubmit function can use inputRef.current.value to get the value entered by the user. If any predefined value must be loaded, the useEffect method takes care of it by setting the inputRef.current.value before the component is mounted.

useRef for handling a multiple input element:

import React, { useEffect, useRef } from react;

const MultipleInput = ({ firstName, lastName, Email }) => {
  const inputRef = useRef({});
  useEffect(() => {
    inputRef.current['first_name'].focus()
    inputRef.current['first_name'].value = firstName;
    inputRef.current['last_name'].value = lastName;
    inputRef.current['email'].value = Email;
  }, []);
  console.log("Rendering...");
  return(
      <form onSubmit={() => {/* inputRef.current.value */}}>
        <input ref={el => inputRef.current['first_name'] = el} placeholder='First Name'></input>
        <input ref={el => inputRef.current['last_name'] = el} placeholder='Last Name'></input>
        <input ref={el => inputRef.current['email'] = el}  placeholder='Email'></input>
      </form>
  );
}

export default MultipleInput;

When using multiple form inputs, we have two options:

Create a new ref for every form element present, and attach it to the input. This will increase the code and also the number of variables (refs) being handled.
Create an object or an array using useRef. The inputRef.current will now be an object, with each key being referenced to a unique input element being handled.

When submitting the form, the same keys can be used to access the value entered by the user. This pattern of using an object for handling multiple input elements can also be implemented with the help of useState. However, with every user input, the number of component renders will increase.

ReactJS: Hooks 101

aparnajoshi.88@gmail.com — Thu, 08 Oct 2020 00:00:00 GMT

Hooks

React hooks, which got introduced in 16.8 versions, are a new way of using state, and others react lifecycle methods in functional components. React hooks were introduced to solve 3 major problems in the earlier versions of react:

Resuing logic: When multiple components need to share logic, using Higher-order components or Render props is the first approach that comes to mind. However, as the app grows, adding more and more higher-order components is not only difficult, but it also leads to wrapper hell.
Gaint components: A class component contains a lot of code to be executed in its life cycle methods, and sometimes a similar set of logic circles around componentDidMount, componentDidUpdate and componentWillUnmount.
Confusing classes: Understanding ES6 classes the right way can be tricky, and also has additional boilerplate code, just to convert a functional component into a class component.

React hooks were introduced to reduce these problems by providing a stateful primitive simpler than a class component.

Implementation - Using the React hooks

useState:

A simpler way of declaring a state, and state handler in React functional components. useState lets you define an initial value for your state, and provides a state variable and handler function.

const App = () => {
    const [name, setName] = useState('Jackson');
    return(
        <input value={name} onChange={(e) => setName(e.target.value)} />
    );
}

The state, need not be a primitive variable, it can also be an object, however, when an object is being updated, care must be taken to destructure and update all the keys.

const App = () => {
    const [{name1, name2}, setName] = useState({'Jack', 'Jill'});
    return(
        <>
            <input value={name1} onChange={(e) => setName(currentState => ({ 
                name1: e.target.value,
                name2: currentState.name2
            })} />
            <input value={name1} onChange={(e) => setName(currentState => ({ 
                name1: currentState.name1,
                name2: e.target.value
            })} />
        </>
    );
}

useEffect:

useEffect function gets called every time a render takes place. This can also be executed conditionally upon any changes to a specific state variable created by the hooks (via dependency array). Note that, the dependency array passed is only looked for a shallow comparison, and changes to the nested objects will not be considered.

const App = () => {
    useEffect(() => {
        console.log('name variable changed')
    }, [name]);

    const [name, setName] = useState('Jackson');
    const [name2, setName2] = useState('Jill');
    return(
        <>
            <input value={name} onChange={(e) => setName(e.target.value)} />
            <input value={name2} onChange={(e) => setName2(e.target.value)} />
        </>
    );
}

The infamous lifecycle methods can also be replicated with the help of useEffect hook by passing an empty dependency array. Note that when multiple useEffect functions are registered, they are called in the order in which they were registered.

const App = () => {
    useEffect(() => {
        console.log('rendering...');

        return () => {
            console.log('unmounting');
        }
    }, []);

    const [name, setName] = useState('Jackson');
    return(
        <input value={name} onChange={(e) => setName(e.target.value)} />
    );
}

Any API calls or eventHandlers can be set or unset using this pattern.

useRef:

useRef is the compliment of createRef from the class components. Just declare the ref, and use it to get a reference to a DOM entity.

const App = () => {
    const [name, setName] = useState('Jackson');
    const inputRef = useRef();
    return(
        <>
            <input ref={inputRef} value={name} onChange={(e) => setName(e.target.value)} />
            <button onClick={() => inputRef.current.focus()}>focus</button>
        </>
    );
}

The main advantage of useRef is that these variables are not tied to component rendering, and can be used as normal class variables. This can also be often used to check whether a state update is happening while the component is unmounting. This could happen when an API call is slow to return, but the user already moved away from the component.

const App = () => {
    const [name, setName] = useState('Jackson');
    const isMounted = useRef(true);

    useEffect(() => {
        return () => {
            isMounted.current = false;
        }
    }, [])
    return(
        <input ref={inputRef} value={name} onChange={(e) => {
            isMounted.current && setName(e.target. value);
        } />
    );
}

useLayoutEffect:

This hook works similarly to the useEffect hook, however, it is triggered whenever a DOM nodes properties change.

const App = () => {
    const [name, setName] = useState('Jackson');
    const [rect, setRect] = useState({});
    const inputRef = useRef();

    useLayoutEffect(() => {
        setRect(inputRef.current.getBoundingClientRect());
    }, [])
    return(
        <>
            <pre>{JSON.stringify(rect, null, 2)}</pre>
            <input ref={inputRef} value={name} onChange={(e) => setName(e.target.value)} />
        </>
    );
}

useCallback:

This hook is used to prevent re-rendering a child component when the parent reloads(if the child component has dependant functions). Especially when using React.memo. If an array is being iterated over, instead of adding function logic to be handled during the iteration, the method can be passed down to the child component and it can implement the caller logic. This way, multiple method creation can be prevented.

const App = () => {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(c => c+1);
    }, [setCount])
    return(
        <>
            <Hello increment={increment} />
            <div>count: {count}</div>
        </>
    );
}

const Hello = React.memo({ increment }) => {
    useEffect(() => {
        console.log('renders');
    });

    return <button onClick={increment}>increment</button>
}

The component Hello is rerendered only once, after that, even if the App component is rerendered, Hello remains the same.

useMemo:

Essentially used when the computations must be optimized. Let's say you have a function that recomputes the same value on every render, this process would be tedious and slow. Such recomputations can be avoided with the help of useMemo.

const computeSomethingTedious = (arr) => {
    arr.forEach(nextDigit => {
        if(Math.square(nextDigit) > 45) {
            finalDigit = nextDigit + Math.random(0, nextDigit);
        }
    })
}

const App = () => {
    const finalDigit = 0;
    const [count, setCount] = useState(0);
    const longestWord = useMemo(() => computeSomethingTedious(data), [finalDigit, computeSomethingTedious])
    return(
        <>
            <div>count: {count}</div>
            <button onClick={() => setCount(c => c+1)}>increment</button>
            <div>Computed value: {finalDigit} </div>
        </>
    );
}

The function will not be computed every time the component renders when count updates.

useReducer:

This is an alternative to useState hook and behaves quite similarly to how redux reducers work. The method returns a dispatch function and a value. The dispatch function can be used for updating any value changes that are required.

const reducer = (state, action) => {
    switch(action.type) {
        case 'INCREMENT': return state + 1;
        default: return state
    }
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, 0)
    return(
        <>
            <div>count: {count}</div>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>increment</button>
        </>
    );
}

useContext:

If the data must be shared throughout the application without necessarily sharing data throughout all the children.

import { createContext } from 'react';
export const UserContext = createContext(null);

// App component
import { UserContext } from '../userContext';
const App = () => {
    return(
        <UserContext.Provider value="Hey, this is context">
            <Home />
            <About />
        </UserContext.Provider>
    );
}

// Home component
const Home = () => {
    const msg = useContext(UserContext);
    return(
        <div>Home Message: {msg}</div>
    );
}


// About component
const About = () => {
    const msg = useContext(UserContext);
    return(
        <div>About Message: {msg}</div>
    );
}

Custom Hooks:

Apart from using the predefined hooks provided by react, we can also create our custom hooks as per the application requirements.

export const useForm = (initialValues) => {
    const [values, setValues] = useState(initialValues);

    return [values, e => {
        setValues({ 
            ...values,
            [e.target.name]: e.target.value
        })
    }]
}

In the above example, useForm can be used to create a bunch of form variables like email, password, name etc. These values can all be handled by just one custom hook instead of writing multple functions and updating them multiple times.

Caveats

While react hooks are pretty amazing, they do have some limitations:

Conditional statements or loops cannot be used inside hooks.
Not all packages can be used directly with the components implementing hooks. A custom hook must be developed for the sake of usage.
Testing with hooks can be tricky.

Javascript: How to create chainable functions

aparnajoshi.88@gmail.com — Thu, 01 Oct 2020 00:00:00 GMT

What is the need to chain a function?

Functions are the first-class citizens in javascript. Every method or pattern implementation is done through functions. Many times in programming, we face a situation where we need to call a series of functions one after the other, passing the value from one step to the next step. Normally, handling such a sequence of function calls looks something like this:

const finalResult = function1(
  function2(
    function3()
  )
);

OR

const result3 = function3();
const result2 = function2(result3);
const finalResult = function1(result2);

In both cases, we are trying to pass the output of the innermost function to its immediate outer function. While this works well for three functions, imagine a scenario where there are multiple function calls to be repeated this way.

Pattern one would lead to callback hell, resulting in unreadable code.
Pattern two would lead to unnecessary variables stored in memory, leading to a slow, unresponsive website.

The solution to these two problems is writing methods that can be chained to the next method in the sequence. If you have used any of the built-in array methods in javascript, you have surely come across chainable functions.

var arr = [10, 20, 33, 45, 56, 60, 70, 46, 23, 34, 98, 67];

var doubleArr = arr.filter(val => val > 50).map(val => val*2);
// (5) [112, 120, 140, 196, 134]

Chainable functions in javascript is a design paradigm in which the output of one function is sent as the input to another. In the above code, the arr is sent to the filter function, this filters out elements with value more than 50. The filtered shorter array values are then passed to the map function, which doubles each value and returns. Let's see how the chainable functions can be created.

This - makes chainable functions possible

In javascript, the keyword this acts as a reference to the object which is being executed in the current context. The next piece of the article assumes that you are familiar with this and how it works in javascript. To understand more, refer to Javascript understanding this

Consider the following code:

function function1() {
  console.log("i am function 1");
  return this;
}

function function2() {
  console.log("i am function 2");
  return this;
}

 function function3() {
  console.log("i am function 3");
  return this;
}

function1().function2().function3();

As you can see, the above functions can be chained together. However, we still aren't passing values from one function to another. To do this, we should add the functions under a single class, and manipulate the instance properties. Since any given instance will have a unique value, and the value can be accessed using this inside the methods belonging to the instance, we make use of the instance properties for function chaining.

Consider the following class:

class Roots {
  constructor() {
    this.value;
  }

  data(val) {
    this.value = val;
    return this;
  }

  sq() {
    var val = this.value
    this.value = val*val;
    return this;
  }

  cube() {
    var val = this.value
    this.value = val*val*val;
    return this;
  }

  sqRoot() {
    this.value = Math.sqrt(this.value);
    return this;
  }
}

var calculate = new Roots();
var result = calculate.data(2).sq().cube().sqRoot();
// result = { value: 8 }

The main idea behind chaining functions is to store the value as a property inside this and any changes should be applied to the stored value. The value stored is passed to the functions that are chained. Writing chainable methods to operate on similar types of objects can help improve the readability and memory in javascript programming.

Javascript: Generator functions

aparnajoshi.88@gmail.com — Thu, 24 Sep 2020 00:00:00 GMT

What is a generator function?

Generator functions are a new class of functions that were introduced by the EcmaScript 2015 standard. A generator is a function that can be paused mid-way at any point during the execution and resumed whenever required. The best part about the generator functions is that they preserve the execution context until they reach the end of the function. The variable values within the generators remain intact until the function execution is concluded.

How does a generator function work?

A normal function in javascript cannot be paused halfway through the execution. The control enters a function, executes it till the end and then the control goes out of the function.

function normalFunction() {
    console.log("I am executing");
    var data = 3;
    console.log("I am still executing", data);
    data = 4;
    console.log("I am done executing", data);
}

Two things to be noted here:

The control goes out of the function only after it is fully executed.
The function execution starts from the very first line, regardless of where it is called from.

Generator function:

Generator functions behave in an unorthodox way. These functions can be exited mid-way through, and the function execution can be resumed from a different line of code, not necessarily from the beginning. A generator function has the following characteristics:

Generator function can be exited before it fully completes execution.
Generator function execution can be resumed from any line, not necessarily the first line.
Generator function returns an iterator object. The object can be used to execute the function call multiple times.
Generator function returns a sequence of values instead of a single value

How to create and use a generator function

The syntax for the creation of a generator function is to use "*" (an asterisk) before the function name. The generator function also comes with two new keywords that are not commonly used:

yield: The place where yield is used is the place where the function pauses the execution. This keyword can also be used to return any data.
next: The next acts much like a callback function. When it is called, the generator function resumes its execution.

Let's look at an example:

function * generatorFunc() {
    var value = "value";
    console.log("I am starting my execution ", value);
    yield "value1";

    console.log("I am resuming execution after first pause ", value);
    yield "value2";

    console.log("I am resuming execution after second pause ", value);
}

const generator = generatorFunction();
console.log(generator.next().value); // I am starting my execution value 
// vaule1
console.log(generator.next().value); // I am resuming execution after first pause value
// value2
console.log(generator.next().value); // I am resuming execution after second pause value
// undefined

The generator function is like any normal function, with the yield keyword where the function needs to be paused.
The first call to the generator function doesn't start the execution of the code inside the function, however, it instantiates the function returns a generator object.
The subsequent calls to the generator function is made by calling the next() function on the generatorObject that was returned from the function.
The value returned from the yield comes back to the main control.
The variable values within the generator function is preserved throughout the execution.

Uses of generators

The implementation of the generator function seems a little unorthodox, however, generator functions have many use cases:

Using generators as iterators:

Since a generator function can be repeatedly called, these functions can be used as iterators. While normally iterators can be implemented using an object and looping through the object, generator functions can simplify this.

function * loopme() {
    yield "One";
    yield "Two";
    yield "Three";
}

for(const val of loopme()){
    console.log(val);
}

// One
// Two
// Three

A generator function inside a for--of loop can be iterated. This way, the return values can be used much like any other for loop implementations.

Async functions:

The normal way of handling asynchronous functions is using promises and chaining then() to a promise.

function foo() {
    return new Promise((resolve, reject) => {resolve(3)});
}

foo()
.then((val) => console.log(val))
.catch((err) => console.log(err));

The same can be implemented using generator function as follows:

function foo() {
    return new Promise((resolve, reject) => {resolve(3)});
}

function *asyncFunc() {
    var data = yield foo();
    console.log(data);
}

This looks similar to async-await implementation. Instead of using async, we are using yield. The asyncFunc can be now called like any normal promise using next().

var asyncFuncObj = asyncFunc();
var promiseObj = asyncFuncObj.next().value;

promsieObj
.then((val) => console.log(val))
.catch((err) => console.log(err));

When the asyncFunc is called, the object returned is similar to the "pending state" of a promise.

Note that the function is in a suspended state.

Advantages of generator functions

Lazy evaluation:

The generator functions implement a lazy evaluation technique. This means the values inside the generator functions are only computed when they are needed. Let's look at an example

function * lazy() {
    var x = 2;
    var y = yield x;
    return y + x;
}

var lazyObj = lazy();
lazyObj.next()
console.log('sum: ', lazyObj.next(3).value);

Here, the value of y is computed only when the generator function is executed for the second time. Until then, y is not evaluated. Since the values are computed on the fly, the generator functions are memory-efficient. Only the required values are stored in memory.

It is important to note that, once the generator function has completed its execution, it cannot be iterated using the same object again. A new object must be created to iterate through the function again.

How to use Lambda functions in Netlify

aparnajoshi.88@gmail.com — Fri, 18 Sep 2020 00:00:00 GMT

What is a lambda function?

By definition, lambda functions are anonymous functions that are not bound to any identifiers. These functions are usually passed as arguments to other higher-order functions. However, when it comes to Netlify or any cloud provider, lambda functions take a different meaning. Lambda functions are a great way to define a small chunk of serverless code to run on your applications' behalf. Let's say you have an application running purely on the client-side, and you need a small chunk of code to be executed on the server-side, bringing up a whole new server, and deploying just to perform one small task seems a bit of overhead. In such scenarios, the lambda function comes to the rescue.

Netlify lambda

Netlify is a cloud offering that also provides lambda functions, without an AWS account, and with function management handled directly within Netlify. These serverless functions are version-controlled, built, and deployed along with the rest of the Netlify site.

In this tutorial, we will implement a lambda function to handle a POST call coming from your site. This call makes another call to a public API and returns the data to your website.

Go to the root folder of your project and install the following package:

npm install netlify-lambda

This package helps you to build your lambda function locally so you can make API calls and test the functionality.

Open netlify.toml file and add the folder path where is lambda function resides. It is essential to add this under the build step of your netlify file. This will ensure that the lambda function gets built every time to build and deploy your changes.

// netlify.toml
[build]
  publish = "public"
  command = "yarn run build"
  functions = "lambda"

Now that we have the build path ready, its time to write lambda functions. Create a new folder lambda and an index.js file. Add your lambda function.

// lambda/index.js

const { REVUE_KEY } = process.env;
const fetch = require("node-fetch");

const API_ENDPOINT = "https://someendpoint";

exports.handler = async (event, context) => {
  const headers = {
    'Access-Control-Allow-Origin': '*',
    //  Add any other headers as per requirement
  };

  if (event.httpMethod === 'OPTIONS') {
    callback(null, { statusCode: '204', headers });
    return;
  }

  if(event.httpMethod === 'POST') {
    const { email } = JSON.parse(event.body) || "";
    const { name } = JSON.parse(event.body) || "";

    return  fetch(`${API_ENDPOINT}/api/v2/subscribers`, {
        method: 'POST',  
        headers: {
            'Authorization': `Token ${ENDPOINT_KEY}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "email": email,
            "name": name,
            "double_opt_in": true
        })
    })
    .then(() =>  ({ statusCode: 201 }))
    .catch(error => ({ statusCode: 422, body: String(error) }));
  }
};

The lambda functions are basically any javascript function that works on top of events. When a http method is called, you determine the type of method and perform an appropriate action.

In the above lambda function, we are handling requests to two methods. OPTIONS and POST. This execution of the methods remain same as any other asynchronous function.

Calling lambda function

Once you write the lambda function, it is important to call it and ensure it works as intended. All lambda functions deployed in netlify can be accessed under the URL base_url/.netlify/functions/lambda_function_file_name. Use this URL and make a POST call to your method.

Start your lambda function by using the following command:

netlify-lambda build <folder>
netlify-lambda install [folder]

Once the lambda function is running, you can call it using fetch just any other API call.

fetch(`${base_url}/.netlify/functions/index`, {
        method: 'POST',  
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "email": email,
            "name": name
        })
    })

Push your changes and deploy them on netlify.

If you followed through the tutorial, then voila!!! You have a lambda function running in Netlify. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/explained. Please feel free to ping me if you have any doubts. Cheers!!!

What is Blockchain? Your blockchain 101

aparnajoshi.88@gmail.com — Thu, 10 Sep 2020 00:00:00 GMT

What is Blockchain technology?

A blockchain is a distributed database that is used to maintain a continuously growing list of records called blocks. But what does this mean? Consider a decentralized database that is managed by multiple participants, this can also be called as Distributed Ledger. Blockchain is a type of Distributed Ledger, containing blocks of transactions. These transactions are recorded with an immutable cryptographic signature called hash. Not all distributed ledgers apply this concept of sequence of blocks being connected via cryptographic signatures. Blockchain is a type of distributed ledger designed to record transactions digitally without the need for third-party interference.

What is the need for blockchain technology?

Blockchain technology is useful because it eliminates the need for a trusted third party to take care of the bookkeeping. Consider a scenario in which a set of transactions need to take place. If both parties keep their books containing the details of the transactions, anyone can tamper it and claim that their version of the transaction is true. This calls for a trusted authority trying to safeguard the source of truth. Blockchain eliminates the need for such a middleman while handling transactions. Blockchain provides a distributed, immutable, tamper-proof way of recording transactions digitally.

How is blockchain secure and immutable?

Two of the most common terms revolving around blockchain are secure and immutable. While secure and immutable have different meanings, concerning blockchain technology, one is dependant on the other. Blockchain technology is secure because it is immutable, and this immutability provides the ultimate security of having transactions that will always speak the truth, no matter where it is accessed from.

To understand why blockchain is immutable, let's look at the structure of a blockchain and how transactions occur:

Structure: Every block in a blockchain contains the following details

Index: The position of the block in the blockchain
Previous hash: This contains the cryptographic hash of the previous block in the blockchain
TimeStamp: This contains the timestamp of when the block was added to the chain
Hash: The cryptographic hash of the current transaction
Data: The actual data stored on the block (Note that this data is public)
Nonce: How many iterations occurred before finding a valid block (More on this later)

How does a transaction occur?:

Every blockchain starts with the genesis block. This is the beginning of the blockchain and contains the basic details. The previous hash and index of this block will be 0.
Now we know that, when a new block is added, the following data is added: index, previous hash, timestamp, data, hash and nonce. Except for the hash and the nonce, the rest of the data is fixed. Let us see how these values are calculated.

Calculation of hash:

A hash is a value that is uniquely calculated based on the index, previous hash, timestamp, data, and nonce as input

hash = SHA256(index, prev_hash, timestamp, data, nonce)

But what makes the hash valid in a given blockchain? In any given blockchain, there is a set agreement that the hash must contain a given number of preceding zeros. For example: 0000132243352353523535 has 4 preceding zeros.

While all the other data is fixed, finding the perfect nonce to match these criteria is an important step in the blockchain. A given block is valid only if the hash containing the given number of preceding zeros can be generated using the nonce and the rest of the data. Also, as the number of 0's increases, the number of possible valid hashes for the given data decreases, and hence the complexity increases.

This is also called as block mining, and the procedure implemented to mine a block is called Proof of work system

How does this make blockchain immutable?

Imagine we have 3 blocks in our blockchain: A -> B -> C

Block A has the previous hash 0, a nonce and a unique hash having four 0s
Block B has previous hash equal to block A's hash, Block B has its own hash generated using the previous hash (block A's hash) and unique nonce.
Block C has previous hash equal to block B's hash, Block C also has its own hash generated using previous hash (block B's hash) and unique nonce.

Let's say, someone, tampers with the data in block A:

The hash in block A becomes invalid for the given nonce because the data changed.
The hash in block B also becomes invalid because its previous hash (block A's hash) changed.
The hash in block C also becomes invalid and so on.

The only way to successfully mutate one block is to mine the block again and every block after the given block. The blockchain is distributed and the new blocks keep getting added all the time. Because of this, it is impossible to mutate blockchain.

Types of blockchain

The common types of blockchain include public and private blockchains:

Public blockchain: The ledger is not owned by anyone. There is no consent required to mine the blocks. Anyone in the world can participate and maintain the blockchain.
Private blockchain: Only the trusted parties can take part in the transactions occurring in the blockchain.

What does native currency mean?

You might have heard of bitcoin, ethereum, ripple network, etc. These are different blockchains, in the sense, their underlying implementation has slightly differed from one another. The native currency of a blockchain is an accepted currency that was instantiated when the blockchain originated, and this currency can be added (this is equal to mining and adding a block to update the existing value). For example, the ethereum blockchain has ether as its native cryptocurrency. The ether supply has crossed over 100M now and it is constantly mined by the miners.

What are Smart Contracts?

While the initial intention of blockchain was to record purely financial transactions, as the blockchain grew, the need for customizable transaction increased. To serve the need for customizable transactions, smart contracts were introduced. Smart contracts are simple executable code that also lives in the blockchain. However, they contain specific instructions to add or update transactions.

What is tokenization?

With the advent of smart contracts, it became possible to introduce new types of currencies within a given blockchain. Such currencies introduced are called tokens. Ethereum blockchain contains nearly 7 types of accepted tokens and several others that were proposed and got rejected. ERC-20, ERC-721, ERC-777, ERC-1155 are only few tokens that have gained popularity. Think of the tokens as a new type of currency introduced with a set of guidelines given that dictates how the currency can be used.

While this article has mainly talked about blockchain technology and has closely associated it with cryptocurrencies, and financial transactions, those are not its only uses. Blockchain is used in the field of networking, trustless authentication, supply-chain management, and many other fields, sky is the limit :)

Trustless Authentication system with NodeJS and NuID

aparnajoshi.88@gmail.com — Thu, 03 Sep 2020 00:00:00 GMT

What does trustless mean?

The daily interactions we have either with real people or with our devices and applications require some level of trust between the interacting parties. When we create an account in Google, we are trusting our details such as username, mobile number, password with google to store it securely, preserve it, and use it whenever as per our instructions. However, there is a factor of trust involved here. Now imagine a system that doesn't need your true identification, a system where individuals can be completely anonymous and exchange value or information without requiring the factor of trust with one another or with a third party. Such a system is truly #trustless

The best example of a trustless system that has recently gained a lot of traction is blockchain based applications

Trustless authentication

How does a normal authentication system work? The user chooses an Id and Password he wishes to authenticate with. These passwords are stored in the database of an application(usually a hashed version of it). Every time the user needs to be authenticated, the passwords are compared.

While the traditional authentication systems are simple and amazing, it puts the user accounts at jeopardy. Nearly 81% of data breaches that happened over the last few years are due to stolen and weak passwords.

Now think of a system where the passwords or its hashes are not stored. A system where the user's password is used similar to a private ssh key. The key is never shared, nor it is stored anywhere but the user's local storage (in this case, it's the user's mind). In such a system, the user's id would be public (similar to a public ssh key), but it reveals no information about the user whatsoever. Such a system provides a truly trustless authentication and NuID has made it possible for us. NuID leverages a zero-knowledge cryptographic algorithm and distributed ledger technology to remove the need to store passwords in your system. The following datahseet clearly describes how they are achieving a trustless authentication system with the help of a zero-knowledge proof protocol.

Implementing trustless authentication with NodeJS and NuID

Prerequisites: You need a basic understanding of how a NodeJS application works. Please refer to this tutorial to understand how to set up and work with a NodeJS application

NuID: Signup to the developer portal of NuID. Once you login, you'll be provided with NuID API key. Copy the API key into your .env file at the root of your project.

NUID_API_KEY=<Your NuID API Key>

Install the following dependencies into your NodeJS project.

npm i --save @nuid/zk node-fetch express body-parser mongoose dotenv

Note that we are not using any libraries to implement an authentication system in nodejs. This will be handled by @nuid/zk package and their APIs instead.

Create an index.js file at the root of your directory, and add the following code to it.

const DEFAULT_PORT = process.env.DEFAULT_PORT || 8001;
const HOST = process.env.HOST || '0.0.0.0';

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import dotenv from 'dotenv';


import connect from './src/models';
import { router as authRoutes, setUserModel } from './src/routes/auth';

dotenv.config();

const app = express();

const DB_URI = process.env.DB_URI;
connect(DB_URI);
const User = mongoose.model('User');
setUserModel(User);

app.use(morgan('dev'));
app.use(bodyParser.json());

app.use('/nuid-auth', authRoutes);

app.listen(DEFAULT_PORT, HOST, err => {
  if (err) {
    return console.log(err);
  }
  console.log('\n\tStarting server...');
  console.log(`Running locally at ${HOST}:${DEFAULT_PORT}`);
});

This file is trying to set up a simple express app. The part of the implementation to focus on is the route nuid-auth. This route will be handling all the authentication logic for you.

Add the database models in the project. We are using MongoDB. To install MongoDB on your system, refer to this link.

Create a new file index.js under /models folder and add the following code:

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  email: { type: String, unique: true, require: true },
  nuid: { type: String, unique: true, required: true },
});

const connect = (uri) => {
  mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true });
  mongoose.Promise = global.Promise;

  mongoose.connection.on('error', (err) => {
    console.error(`Mongoose connection error: ${err}`);
    process.exit(1);
  });

  mongoose.model('User', UserSchema);
};

export default connect;

The next step is to add the singup route for your users. Create a file auth.js under /routes directory and add the following code:

import { Router } from 'express';
import Zk from '@nuid/zk';
import { createCredentials } from '../utils/nuid';

let User;
const router = new Router();

const setUserModel = (userModel) => {
  User = userModel;
};

router.post('/signup', async (req, res) => {
  try {
    let verifiableSecret = Zk.verifiableFromSecret(req.body.password);
    let credentials = await createCredentials(verifiableSecret);

    let id = credentials['nu/id'];
    const newUser = new User({
      email: req.body.email,
      nuid: id
    });
    await newUser.save();
    return res.status(200).end();
  } catch(err) {
    console.log(err);
    res.status(400).send(err);
  }
});

module.exports = {
  setUserModel,
  router
};

Create a /utils folder where we add the methods to handle API calls to NuID's servers. Create a nuid.js file under this folder and add the following code

import fetch from 'node-fetch';

const apiRootUrl = 'https://auth.nuid.io';
const apiKey = process.env.NUID_API_KEY;

const createCredentials = (verifiable) => {
  const body = JSON.stringify({
    'nuid.credential/verified': verifiable
  });

  const opts = {
    method: 'POST',
    headers: getHeaders(),
    body: body
  };

  return fetch(`${apiRootUrl}/credential`, opts).then(res => res.json());
}

const getHeaders = () => {
  const headers = {
    'X-API-Key': apiKey,
    'Content-Type': 'application/json'
  };

  return headers;
}

module.exports = {
  createCredentials
}

When the user signs up, the user's public credentials will be created using the cryptographic proof provided by the user. Once the credentials are created, we are only storing the nu/id of the user in the system. This nu/id is similar to a public ssh key. One cannot determine any information about the user by obtaining this id. It is also publically available. When the user profile is created, the public credentials are also added to ethereum's rinkeby network (This is available only during preview time).

Now that we have the public credentials of the user-created, let's try to authenticate the user. Add a new route in the auth.js file for the user login.

router.post('/login', async (req, res) => {
  try {
    const user = await User.findOne({ email: req.body.email.trim() });
    if (!user) {
      return done('Wrong Credentials');
    }

    // Get credentials of the user using public id
    let credentialResponse = await getCredentails(user.nuid);
    console.log(user.nuid)
    let nuidCredential = credentialResponse['nuid/credential'];
    
    // Challenge the credentials obtained using id. This step is required as the /challenge endpoint works with the credentials not registered with NuID
    let credentialChallengeResponse = await challengeCredentials(nuidCredential);
    let nuidJwt = credentialChallengeResponse['nuid.credential.challenge/jwt'];
    let challenge = decodeJwtPayload(nuidJwt);

    // Verify the user's secret with their token obtained from "challenge" step
    let proofForVerification = Zk.proofFromSecretAndChallenge(req.body.password, challenge);
    let verifiedProof = await verifyProof(proofForVerification, nuidJwt);

    if(verifiedProof.status === 200) {
      let localJwt = sign({ id: user.nuid }, process.env.ACCESS_TOKEN_SECRET);
      return res.status(200).json({
        jwt: localJwt
      });
    }    
  }catch(err) {
    console.log(err);
    res.status(400).send(err);
  }
});

Also, add the corresponding methods to make API calls to the NuID's servers. Add the following code in the nuid.js file

const getCredentails = (id) => {
  const opts = {
    method: 'GET',
    headers: getHeaders()
  };

  return fetch(`${apiRootUrl}/credential/${id}`, opts).then(res => res.json());
}

const challengeCredentials = (credential) =>  {
  const body = JSON.stringify({
    'nuid/credential': credential
  });

  const opts = {
    method: 'POST',
    headers: getHeaders(),
    body: body
  };

  return fetch(`${apiRootUrl}/challenge`, opts).then(res => res.json());
}

const verifyProof = (proof, jwt) => {
  const body = JSON.stringify({
    'nuid.credential.challenge/jwt': jwt,
    'nuid.credential/proof': proof
  });

  const opts = {
    method: 'POST',
    headers: getHeaders(),
    body: body
  };

  return fetch(`${apiRootUrl}/challenge/verify`, opts).then(res => res);
}

const decodeJwtPayload = (jwt) => {
  let payloadBase64 = jwt.split('.')[1];
  let json = Buffer.from(payloadBase64, 'base64').toString();

  return JSON.parse(json);
}

This is how the verification stage works:

The user's public id (nu/id) will be posted to /credential/${id} obtain the user public credential data. This is done using await getCredentails(user.nuid);
The user's credential data is then challenged by hitting the /challenge endpoint to obtain a short-lived token.
This token is decoded and used to obtain proof from the user's password.
The proof and the token is finally used to verify the authenticity of the user via /challenge/verify endpoint.

Once you have successfully registered a user, check your database system. Note that only the nu/id is stored in them, and it doesn't contain any of the secrets from the user.

If you followed through the tutorial, then voila!!! You have a trustless authentication system at your hand. If you want to check how you can add authorization to your endpoints using this method or you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/nodejs-nuid. Please feel free to ping me if you have any doubts. Cheers!!!

MongoDB: 101 - Getting Started

aparnajoshi.88@gmail.com — Thu, 27 Aug 2020 00:00:00 GMT

MongoDB: Popular among the NoSQL databases.

MongoDB has certainly grown its popularity among the NoSQL databases out there. MongoDB is a document-oriented database system that uses JSON-like documents to store data. This article quotes a brief introduction providing all the details required to get started with MongoDB database in any project.

Installation:

MongoDB: Please install MongoDB in your system using this link. The installation has 2 parts. The MongoDB database that runs on your operating system as a service and Mongo shell that is an interactive JavaScript interface to work with MongoDB.
MongoDB Compass: Compass is a GUI that represents data present in your MongoDB database in a user-friendly way. This interface also allows you to query data, view it, update the data, and inspect its structure. Once you launch compass, provide the local database URL mongodb://localhost:27017/ and hit CONNECT. This should show the default DBs present. Once the compass is connected, this is how it represents your databases and collections.

The schema under a given collection in MongoDB compass represents different types of data present and their distribution.

Note that by default all the data is stored under the folder /db/data. This can be changed by providing --dbpath when starting the service.

Create DB, Collection

To create a new database simple use the command:

use exampledb

This command creates the database and also loads it under db variable.

List your dbs, using this command:

show dbs

List collections under the given database, use this command:

show collections

CRUD operations in MongoDB

Note that if you are using NodeJs to connect to your DB, this exact code can be used in your project to perform any of these operations.

Create: Create operation selects a particular collection under a given database and adds an entry to it. If the collection is not present, it simply creates the collection and adds data. Every entry in the collection should have a unique key. This key is automatically created when an entry is inserted into the collection under the name _id. Note that MongoDB insert would fail if the keys that are marked to be unique are duplicated.

// example - Add a single entry in a collection
use `<dbname>`
db.`<collectionname>`.insertOne({
  title: "Star trek",
  year: 1982
})

// result
{
	"acknowledged" : true,
	"insertedId" : ObjectId("5f468855ff5e6c2525281024")
}

//  example - Add multiple entries in a collection
use `<dbname>`
db.`<collectionname>`.insertMany([
  {
    title: "Star trek",
    year: 1982
  },
  {
    title: "Star wars",
    year: 1983
  }
])

// result
{
	"acknowledged" : true,
	"insertedIds" : [
		ObjectId("5f46887bff5e6c2525281025"),
		ObjectId("5f46887bff5e6c2525281026")
	]
}

Read: Read operation selects a particular collection under a given database and retrieves the data based on a given set of conditions. If the collection is not present or the condition is not met, no data is provided.

// example - Read from a collection
use `<dbname>`
db.`<collectionname>`.find({title: "Star trek"})

// result
{ "_id" : ObjectId("5f468855ff5e6c2525281024"), "title" : "Star trek", "year" : 1982 }
{ "_id" : ObjectId("5f46887bff5e6c2525281025"), "title" : "Star trek", "year" : 1982 }

Update: As the name suggests the operation selects an entry under a collection and updates its value. It also returns how many items under the collection was updated.

// example - Update single entry in a collection
use `<dbname>`
db.`<collectionname>`.updateOne(
  {title: "The Martian"},
  {
    $set: {
      poster: "poster details"
    }
  })

//result
{ "acknowledged" : true, "matchedCount" : 1, "modifiedCount" : 1 }

// example - Update multiple entries in a collection
use `<dbname>`
db.`<collectionname>`.updateMany(
  {rated: null},
  {
    $set: {
      rated: "5"
    }
  })
{ "acknowledged" : true, "matchedCount" : 4, "modifiedCount" : 4 }

Delete: Delete operation deletes an entry in a collection based on the given condition. It also returns how many items under the collection was updated. It returns the number of items that got deleted from the operation performed.

// example - Delete a single entry in a collection
use `<dbname>`
db.`<collectionname>`.deleteOne({_id: ObjectId("5828035230585")})

//result 
{ "acknowledged" : true, "deletedCount" : 1 }

// example - Deletes a multiple entries in a collection
use `<dbname>`
db.`<collectionname>`.deleteMany({year: 1957})

//result
{ "acknowledged" : true, "deletedCount" : 3 }

You can use these CRUD operations to interact with your database and collections. This is only the tip of an iceberg called MongoDB. Several query operations can be performed on your data. To learn more on MongoDB you can visit: https://university.mongodb.com/

Deploy NodeJs API using docker

aparnajoshi.88@gmail.com — Thu, 20 Aug 2020 00:00:00 GMT

Prerequisites

Before we get to this tutorial, you need a basic setup of nodejs and mongodb application. If you don't have any setup, please refer to the NodeJS authentication with Passport, JWT and MongoDB Part1 for reference.

Adding Docker to your project

First thing you need to do is install docker desktop. Docker provides a pretty documentation to install and run docker in your machine. Please follow the link given below to install docker engine and docker compose in your local environment.

Windows users: You can use the instructions given in the link to download docker desktop and install it on your windows machine. Both docker engine and docker compose comes with this installation.
Mac users: Follow the link to download docker desktop and install it on your MacOS. Both docker engine and docker compse comes with this installation.
Linux - Ubuntu: Follow this link to install docker engine. And follow this link to install docker compose

Adding Dockerfile

The dockerfile contains the instructions on how your project must be built inside its containers.

Create a new file with the name Dockerfile inside the root directory of your project and add the following code to it.

// Dockerfile

FROM node:12
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8001
CMD [ "npm", "run", "start" ]

Behind the scenes these are the instructions we are giving docker.

Docker downloads a base image containing nodejs version 12.
Docker sets its working directory under usr/src/app inside the container.
Docker copies the package.json file from our local project directory to app directories root folder.
Docker then runs npm install in the root directory and installs required node_modules.
Docker then copies all the files under the project into app directory.

Docker then exposes port 8001 to the host machine.
It sets the execution command to be npm run start

Adding docker-compose file

The docker-compose file helps in bringing up multiple containers together using one command. In this file, one can add details regarding different services the project depends on such as Databases, Logging tools, etc.

Adding the docker-compose.yml file at the root of your project.

// docker-compose.yml

version: '3.8'
services:
  api:
    build:
      context: .
    ports:
      - '8001:8001'
    depends_on:
      - mongo
  mongo:
    image: mongo
    ports:
      - '27017:27017'

This file has listed mongodb as one of the dependencies for the project.

Change the .env file and add the DB_URL parameter value equivalent to dockers internal IP address

DB_URI=mongodb://host.docker.internal:27017/demo

Now that all the files are added, run the following command to build the docker image:

docker-compose build

Finally run:

docker-compose up

This should bring your application up and run it on port 8001. Congratulations, you have successfully added built and deployed your app using docker. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/nodejs-authentication-api/

Docker fundamentals: Everything you need to know about docker

aparnajoshi.88@gmail.com — Wed, 12 Aug 2020 00:00:00 GMT

What is docker?

Over the years, we have had many definitions for docker. The simplest one is that it is a product that provides OS-level virtualization. The difference between docker and traditional virtual machines is that docker runs on the host OS. It doesn't spin up and operating system.

The traditional virtual machines run on a Hypervisor installed on top of the host OS, however they spin up their own operating systems. This also means that the code complied/built on these systems can run only in the given environment. They cannot be executed on any given operating system out there.

Dockers (technically known as docker containers) however run on a platform called docker engine. The docker engine also runs on a host OS, however, it is the docker engine that is OS dependant. The code compiled/built inside the docker containers is not dependant on OS. As long you have the compatible version of the Docker engine running on any given OS, your code can be executed inside the docker engine.

This offers a very handy way of managing and shipping the code from the developer's laptop directly into a production environment. This tutorial introduces the fundamental concepts required to use docker even in your development environment and easily manage the images and containers.

Some basic concepts and handy docker commands

To understand docker, you first need to understand the most basic concept in it. Images and Containers are the building blocks of docker.

Images in docker are nothing but built piece of software that can be run on any docker-engine regardless of the environment. These images can be locally built, or they can be simply downloaded from the docker registry (if they are already present). The docker registry is a storage space for docker images. Docker registry contains a bunch of ready to use basic development environment images such as Nodejs. Any image specific to your project can be built from these basic images.

One can use a DockerFile to configure and build an image specific to your project.

To list the images present on your machine run the following command:

// List all active images
docker images

Many times, certain intermediate images are built while building an image for a given project. To list all the images present on your machine, including intermediary and dangling images, run the following command:

// List all images, including dangling and intermediary
docker images -a

Containers are the running instances of docker images. Your code that is already built in the docker image creation phase will be run inside the container.

To list the set of running containers in your machine run the following command:

// List running containers
docker ps

To list the containers, including the ones that have stopped running, use the following command:

// List all the containers on the host machine
docker ps -a

If you already have an image downloaded in your local machine or the public docker registry, you can use the Docker command-line interface to spin up the instance.

// Run a given image
docker run -d -p 27017:27017 --name mongodb mongo

docker run, along with the name of the image is sufficient to bring up a container. However, if you want to run this as a background process, you use the flag -d. To expose a particular port inside docker to your host machine, you use the flag -p port:port. To name your container, you can use the flag --name <container name>.

If you want to take control of your container and use its command line directly on your host machine, use the following command

// Run a containers bash
docker exec -it <container name> /bin/bash

Understanding docker and host IP addresses

One of the common frustrating experiences with docker is not being able to figure out how the docker and host IP addresses work.

Docker to Host: Any image running inside the docker will be available to the host machine at the localhost address, provided the docker is exposing the port to the host machine.

If your container is running MongoDB, and you have exposed it as -p 27017:27017, which means, the 27017 port of docker is linked to 27017 port of host machine. You can access this database on your host machine at localhost:27017.

Host to Docker: Any image running on a host (This could also include an image that is running in docker, which is exposed to the host), can be accessed inside docker via host.docker.internal:port.

Let's say, you have a Redis instance running in your local machine on port 6379, and you want to access it inside your docker container running a nodejs application. You can use host.docker.internal:6379 to connect to your Redis instance.

Docker to docker: If you want to directly communicate between 2 docker images, you can set up a bridge network and link these images to the network. This way all the docker containers running on the network can access each other's resources: https://docs.docker.com/network/bridge/

Understanding dangling images

One of the reasons why docker might seem to be an overhead is due to the creation of dangling images. To understand what are dangling images, let us understand how an image is built using a docker engine.

Docker takes a base image from the registry and starts building your image.
During the process, docker sometimes creates multiple intermediate images. Intermediate images are created when docker tries to install a bunch of packages (For example npm modules). These images are tagged as <none>:<none>. These are required images and the docker will have internal links to these images. Every time you rebuild your docker image using the same code, the intermediate images are reused, and hence the build process takes less time. In the case of a production build however, these images can be discarded/deleted.
Docker finally builds an image and tags it with the appropriate image name. This is the final image that is ready to run as a container.

Dangling images are created when the final images lose the link to the intermediate images. This could happen because you deleted the final image, and left out the other images linked to it. Dangling images take a huge part of your hard disk space and can be deleted using the following command:

// remove all dangling images
docker rmi $(docker images -f "dangling=true" -q)

DockerFile explained

Dockerfile is used to instruct the docker engine on how an image must be built. This file commonly lists the following details:

FROM : Specifies the base image using which the image must be built
WORKDIR : Specifies the working directory inside the docker.
COPY : Specifies the project path in the host machine that must be copied inside the docker.
RUN : Specifies the commands to run to install dependencies inside docker.
EXPOSE : Specifies the port on the docker container that must be exposed to the host machine.
CMD []: Specifies the exact command that must be run to start an application.

Docker compose explained

While the image built using Dockerfile can be easily run using docker CLI, it is handy to use docker-compose instead. This especially helps while deploying code to production environments, since docker-compose is a YAML file.

Docker-compose files usually start by specifying the version of docker to be used, the services that must be built, and the corresponding dockerfiles to build them. It also lists the depending service. One of the advantages of using dockerfile is the fact that any depending service will be automatically spun up and connected to your main service. This avoids the need to use a bridge network for manually connecting them.

Run the following commands to build and bring up your containers

// run docker compose
docker-compose -f <docker compose file> build
docker-compose -f <docker compose file> up

Docker v/s Kubernetes

We have understood much of what docker is, it is finally time to understand another term that is closely used with docker. Docker and Kubernetes are completely different. Docker is a platform that facilitates containerization, while Kubernetes provides an orchestration layer for these containers. In other words, docker brings up containers and Kubernetes handles them.

NodeJS authentication with Passport, JWT and MongoDB Part2

aparnajoshi.88@gmail.com — Fri, 07 Aug 2020 00:00:00 GMT

Prerequisites

Before we get to this tutorial, you need a basic setup of nodejs and mongodb application with passport-local authentication strategy integrated to it. If you don't have this setup, please refer to the part1 of this tutorial.

Adding a new endpoint and middleware to check user authentication

Before hitting any endpoint and performing a database query to get the data, it is essential to understand the user context. This could be to limit or block an unknown entity from accessing our endpoints, or to get user context for retrieveing relevant data. In nodejs it is easy to add an authentication or authorization middleware for the endpoints that you choose to secure.

Let us begin by adding a middleware which takes a bearer token in the Authorization header and returns appropriate response. Create a new folder middleware and add the following file to it.

// /middleware/authenticate.js

import mongoose from 'mongoose';
import { verify } from 'jsonwebtoken';

const authenticate = (req, res, next) => {
  const unauthenticated = () => res.status(401).end();
  const unauthorized = () => res.status(403).end();

  const authHeader = req.headers.authorization;
  if (!authHeader) {
    return unauthenticated();
  }

  const token = authHeader.split(' ')[1];
  if(!token) {
    return unauthenticated();
  }
    
  verify(token, process.env.ACCESS_TOKEN_SECRET, async (err, decoded) => {
    if (err) {
      return unauthorized(); 
    }

    const { id: userId } = decoded;

    try {
      const user = await mongoose.model('User').findById(userId);

      if (!user) {
        unauthorized();
      } else {
        req.user = user;
        next();
      }
    } catch (e) {
      unauthorized();
    }
  });
};

export default authenticate;

The idea is to use the as a middleware through which the request will be routed from anytime our endpoints are hit.

Let us now add a custom endpoint which needs to be authenticated. Add a new file under the routes folder and add the following code.

// /routes/posts.js

import { Router } from 'express';

const router = new Router();

const posts = [
  {
    name: "Test",
    showTitle: "popeye the sailor man"
  },
  {
    name: "tom",
    showTitle: "tom and jerry"
  }
]

router.get('/posts', (req, res) => {
  res.json(posts.filter(post => post.name === req.user.name));
});

module.exports = { router };

This endpoint is simply filtering an array of posts to return back the post the user requested. In a much more complicated scenario, this could be an endpoint request all the posts written by the user. In such scenario, we would first authenticate the user, get the userId and then query for the posts belonging to this userId.

Add the following code to our index.js file (server file), to add our authentication middleware.

// index.js

import authenticate from './middleware/authenticate';
import { router as postRoutes } from './routes/posts';
app.use('/api', authenticate, postRoutes);

If you try to hit /api/posts endpoint without any authorization, the server will return a 401 claiming that the user is unauthorized.

If you login to your server and use the accesstoken in the Authorization header and hit this endpoint, you should be able to get the results.

Congratulation, you have successfully added a middelware to check the user authentication before making any API calls. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/nodejs-authentication-api/

NodeJS authentication with Passport, JWT and MongoDB Part1

aparnajoshi.88@gmail.com — Thu, 30 Jul 2020 00:00:00 GMT

NodeJs as a microservice.

Node.js is an open-source, JavaScript runtime environment that executes JavaScript code outside a web browser. While NodeJs is only an engine where javascript can be executed, several frameworks can be used on top of nodejs to build robust web applications and APIs.

In this article, we will be using the express framework on NodeJs to provide authentication endpoints that can be plugged into any frontend application. We will use passport-local strategy to set up a local authentication middleware, MongoDB for storing user data, and JWT for authenticating users.

Prerequisites

Before we get to coding, you need to install NodeJs and MongoDB on your system. Please install NodeJs by referring to the official nodejs downloads page (It is better to install the latest LTS version of NodeJs on your machine).

MongoDB has many editions, please download the MongoDB community edition to follow this tutorial.

Authentication using session v/s JWT

When using passport-local, there are two ways in which user information can be exchanged between the APIs.

Sessions: In this approach, the server creates a session when the user logs in, provides the corresponding sessionid to the user. The user can then send this sessionid in the subsequent requests. The drawback of using this approach is the fact that the session identifier must be kept in memory and we need to make sure that the client hits the same server for every request. It also poses certain challenges when we want to implement API to API authorization in a microservice architecture.
JSON Web Tokens(JWT): JWTs are nothing but encrypted tokens containing some information regarding the user. These tokens are created by the server, providing minimal user information (such as userID) and sent to the client. It is the responsibility of the client to store this token and send it along with every request. JWTs are excellent for API to API authorization, however, they also provide certain challenges. When using JWTs, the token must be stored securely and additional mechanisms should be implemented to invalidate tokens and refresh them periodically to maintain its trust and safety.

Onward to the code

Once you have the prerequisite setup ready, start the code by creating a space for a new node app:

npm init

You'll be prompted to provide some information regarding the project, once this step is complete, a package.json file will be created in your project.

Let us add express and certain related npm packages required for setting up basic server and authentication.

npm install --save express body-parser mongoose passport passport-local morgan dotenv bcryptjs jsonwebtoken

Now that required packages are installed, add the index.js file where the main code for API setup will go.

// index.js

const DEFAULT_PORT = process.env.DEFAULT_PORT || 8001;
const HOST = process.env.HOST || '0.0.0.0';

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import morgan from 'morgan';
import passport from 'passport';
import dotenv from 'dotenv';

import connect from './models';
import { router as authRoutes, setUserModel } from './routes/auth';
import getLocalSignupStrategy from './passport/local-signup';
import getLocalLoginStrategy from './passport/local-login';

dotenv.config();

const app = express();

const DB_URI = process.env.DB_URI;
connect(DB_URI);
const User = mongoose.model('User');
setUserModel(User);

app.use(morgan('dev'));
app.use(bodyParser.json());

app.use(passport.initialize());
passport.use('local-signup', getLocalSignupStrategy(User));
passport.use('local-login', getLocalLoginStrategy(User));
app.use('/auth', authRoutes);


app.listen(DEFAULT_PORT, HOST, err => {
  if (err) {
    return console.log(err);
  }
  console.log('\n\tStarting server...');
  console.log(`Running locally at ${HOST}:${DEFAULT_PORT}`);
});

We begin by creating an express app. The DB_URI is the connection string to connect to MongoDB. We also need to import the usermodel that is used for adding users to our database and set them for further use in authentication routes and passport.

Morgan is a package used to control the nodejs logging. BodyParser helps in parsing JSON sent to our server.

We then set up passport in our app and use two strategies for user signup and user login.

The app.listen will officially start our server in the given port. If you start the server, it will now throw an error since we have a lot of components to be added to our project.

The next step is to add the dotenv file to our project and add a few required env variables.

// .env

DEFAULT_PORT=8001
HOST=0.0.0.0
DB_URI=mongodb://localhost:27017/demo
ACCESS_TOKEN_SECRET=mysecret

Let us now begin by adding our Database user model. Create a folder named models and add the following files in it.

// models/index.js

import mongoose from 'mongoose';

import UserSchema from './schemas/user';

const connect = (uri) => {
  mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true });
  mongoose.Promise = global.Promise;

  mongoose.connection.on('error', (err) => {
    console.error(`Mongoose connection error: ${err}`);
    process.exit(1);
  });

  mongoose.model('User', UserSchema);
};

export default connect;

Now create a new folder in models called schemas and add the following schema for the User.

// models/schemas/user.js

import mongoose from 'mongoose';
import {
  compare,
  genSalt,
  hash,
} from 'bcryptjs';

const UserSchema = new mongoose.Schema({
  email: { type: String, unique: true, require: true },
  password: { type: String, required: true },
  name: String,
  resetPasswordToken: String,
  resetPasswordExpires: Date
});


UserSchema.methods.comparePassword = function (password) {
  return compare(password, this.password);
};

UserSchema.pre('save', async function (next) {
  if (!this.isModified('password')) {
    return next();
  }

  try {
    const salt = await genSalt();
    this.password = await hash(this.password, salt);
    next();
  } catch (e) {
    next(e);
  }
});

export default UserSchema;

Now we have a basic model, schema, and methods for creating and adding users to our database. The next step is to add passport authentication strategies.

Create a folder passport and add the following files for user login and signup.

// passport/local-signup.js

import { Strategy as PassportLocalStrategy } from 'passport-local';

const getStrategy = (User) => new PassportLocalStrategy({
  usernameField: 'email',
  passwordField: 'password',
  session: false,
  passReqToCallback: true
}, async (req, email, password, done) => {
  const newUser = new User({
    email: email.trim(),
    password: password.trim(),
    name: req.body.name.trim(),
  });

  try {
    await newUser.save();
    done(null);
  } catch (err) {
    console.error(err);
    done(err);
  }
});

export default getStrategy;

// passport/local-login.js

import { Strategy as PassportLocalStrategy } from 'passport-local';
import { sign } from 'jsonwebtoken';

const getStrategy = (User) => new PassportLocalStrategy({
  usernameField: 'email',
  passwordField: 'password',
  session: false,
  passReqToCallback: true
}, async (req, email, password, done) => {
  try {
    const user = await User.findOne({ email: email.trim() });

    if (!user) {
      return done('Wrong Credentials');
    }

    const matched = await user.comparePassword(password.trim());

    if (!matched) {
      return done('Wrong Credentials');
    }

    done(null, 
      sign({ id: user._id }, process.env.ACCESS_TOKEN_SECRET));
  } catch (e) {
    console.error(e);
    done('Some unknown error');
  }
});

export default getStrategy;

The final step is to add routes for authentication. Create a folder routes and add the following file inside it.

// routes/auth.js

import { Router } from 'express';
import passport from 'passport';

let User;
const router = new Router();

const setUserModel = (userModel) => {
  User = userModel;
};

router.post('/signup', (req, res, next) => {
  return passport.authenticate('local-signup', (err) => {
    if (err) {
      return res.json({
        error: err
      });
    }

    return res.status(200).end();
  })(req, res, next);
});

router.post('/login', (req, res, next) => {
  return passport.authenticate('local-login', (error, accessToken) => {
    if (error !== null) {
      return res.json({
        error: err
      });
    }

    return res.json({
      payload: {
        accessToken,
      },
    });
  })(req, res, next);
});

module.exports = {
  setUserModel,
  router
};

Now to run the server lets add some babel packages which would transpile our ES6 code.

npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env nodemon

Add the .babelrc file at the root of your project folder.

{
  "presets": [
    "@babel/preset-env"
  ]
}

Add the following script under package.json file. This would be used to start your server.

"start": "nodemon --exec babel-node --use_strict ./index.js"

Now let's run npm run start. You should see the following screen on your terminal.

Use postman, try to hit the http://localhost:8001/auth/signup endpoint with the details of your email-id and password. This request should be successful.

Use the same email-id and password and hit the /login endpoint. Your response should be successful and should contain accessToken assigned for your userid.

Congratulation, you have successfully created a nodejs application with passport-local and JWT for authentication. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/nodejs-authentication-api/

Redux for server side rendering

aparnajoshi.88@gmail.com — Thu, 23 Jul 2020 00:00:00 GMT

Redux: A predictable state container for javascript apps

Redux is a state management system that is used by javascript apps to provide a centralized system for managing applications state. Redux stores the application state in one place and provides access to use and manipulate this state anywhere in the application. Hence, redux maintain a single source of truth using which different parts of the page will be loaded.

In the previous article, we provided a basic setup for routing on the server-side app. Now that we have an app with certain routes set up, the next step would be to add a state management system that can be leveraged across the application.

In this article, we will go through our previous application and add redux to the nodejs react app.

Basic setup:

Let us begin the setup by adding react-router-dom to our project.

npm install --save redux react-redux redux-devtools-extension

Step1: The first step is to create a store and add a preloadedState. The preloadedState is not mandatory, however, if your application requires predefined data, they can be added in the preloadedState. Create a store folder and add the following files.

// src/store/preloadedState.js

export default {
  count: 34
};

// src/store/index.js

import { createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducers from "../reducers";
import preloadedState from "./preloadedState";

export default createStore(reducers, preloadedState, composeWithDevTools();

The composeWithDevTools is used to provide redux state access to browser dev-tool-extension. The dev-tool-extension can be used to trace when, where, why, and how your application's state changed.

Step2: Next step is to add actions. Create a new folder to add actions and add the following files.

// src/actions/countAction.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = (number) => {
  return { type: INCREMENT, number };
};

export const decrement = (number) => {
  return { type: DECREMENT, number };
};

Actions are the files that perform data transformations, API calls, and then provide this data to the reducers. It is the responsibility of actions to perform any data manipulations required and provide final data to the reducers.

Step3: The next step is to add reducers to our application. Create a new folder for containing reducers and add the following files.

// src/reducers/countReducer.js

import { INCREMENT, DECREMENT } from '../actions/countAction';

const countReducer = (state = {}, action) => {
  switch (action.type) {
    case INCREMENT:
      return action.number ? state + action.number : state + 1;
    case DECREMENT:
      return action.number ? state - action.number : state - 1;
    default:
      return state;
  }
};

export default countReducer;

// src/reducers/index.js

import { combineReducers } from "redux";
import countReducer from "./countReducer";

const reducers = combineReducers({
    count: countReducer
});

export default reducers;

Reducers are the files that contain functions to update data. Reducers are the only place where the state of the application should be updated. Apart from updating the state, reducers should not perform any other operation.

Step4: Now we will plug actions into the Home component and add functions to call them upon button click.

// src/Home.js

import React from 'react';
import { connect } from 'react-redux';
import Nav from './Nav';
import { increment, decrement } from './actions/countAction';

const _Home = (props) => {
  return (
    <div>
      <Nav />
      I am home
      <div>Current number: {props.number}</div>
      <input type="button" value="Increment number" onClick={() => props.incrementNum(20)} />
      <input type="button" value="Decrement number" onClick={() => props.decrementNum(20)} />
    </div>
  );
};

const mapStateToProps = (state) => ({
  number: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  incrementNum: (num) => dispatch(increment(num)),
  decrementNum: (num) => dispatch(decrement(num)),
});

export const Home = connect(mapStateToProps, mapDispatchToProps)(_Home);

Step5: The final step is to wrap both our client-side and server-side app in Redux Provider. Our App.js file will be wrapped with the Redux provider.

import React from 'react';
import { Provider } from 'react-redux';
import Routes from './routes';
import store from './store';

const App = () => {
  return (
    <Provider store={store}>
      <Routes />
    </Provider>
  );
};
export default App;

On visiting localhost, you should be able to see the following screen

Now, upon the click on the Increment number button, countAction will be dispatched and the number will get incremented by 20. Upon click on the Decrement number button, the number will be decremented by 20. (The number is incremented or decremented by 20, as that's the value we are supplying to the action).

Congratulation, you have successfully added redux to your server-side rendered react application. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/ssr-react-and-node

Routing with React and Nodejs

aparnajoshi.88@gmail.com — Fri, 17 Jul 2020 00:00:00 GMT

Routing: Client-side and Server-side routes

In the previous article we provided a basic setup for server side rendering with react and nodejs. Once we have the application running, we need to add routes to our application to handle different pages displaying various contents to the user. In a traditional application, these routes were individual HTML pages added to handle each route of a given application. In the modern single-page applications built with a javascript framework, such routing is handled using a router such as react-router-dom.

In this article, we will go through our previous application and add routes that can be handled by both client and server.

Basic setup:

Let us begin the setup by adding react-router-dom to our project.

npm install --save react-router-dom

On the client-side, simply wrap the main App component with BrowserRouter.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

On the server-side, we will use the stateless StaticRouter component and provide it with location and context information.

// server/server.js

import path from 'path';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from '../src/App';
import { indexHtml } from './indexHtml';

export const app = express();

// Serve generated assets
app.use(express.static(path.resolve(__dirname, '../build')));
app.use((req, res) => {
  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const fullMarkup = indexHtml({
    markup,
  });
  res.status(200).send(fullMarkup);
});

The StaticRouter component expects a location and context prop. The location would be the current URL which is part of our request object. The context prop can be used for storing information about the route that is being rendered.

Adding routes:

Let us first add a couple of pages to which the router should redirect when a link is provided.

// src/Home.js

import React from 'react';
import Nav from './Nav';

const Home = () => {
  return (
    <div>
      <Nav />
      I am home
    </div>
  );
};
export default Home;

// src/Page1.js

import React from 'react';
import Nav from './Nav';

const Page1 = () => {
  return (
    <div>
      <Nav />
      React App Page1
    </div>
  );
};
export default Page1;

// src/Page2.js

import React from 'react';
import Nav from './Nav';

const Page2 = () => {
  return (
    <div>
      <Nav />
      React App Page2
    </div>
  );
};
export default Page2;

Once this is done, we will also add a component that handles navigation for these routes.

// src/Nav.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const Nav = () => {
  return (
    <div>
      <ul>
        <li><NavLink to="/home">Home</NavLink></li>
        <li><NavLink to="/page1">Page1</NavLink></li>
        <li><NavLink to="/page2">Page2</NavLink></li>
      </ul>
    </div>
  );
};
export default Nav;

Now that we have the components ready, we can add the routes which would render the component based on the route hit by the user.

// src/routes.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" render={() => <Home />}/>
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Switch>
  );
};

export default Routes;

We are using the Switch component to render only one matching route. The router scans through the routes in the given order, and renders the first matched route.

The prop exact is used only for the path /. This is because / matches every possible route. And hence, we ask the router only to go to the Home page if the URL matches the exact location given in the path.

The final task is to add a 404 route handler, which would redirect all the invalid routes to a 404 page.

// src/Notfound.js

import React from 'react';

const Notfound = () => {
  return <div>Page not found :(</div>;
};

export default Notfound;

We will modify the router and add the following code towards the end.

// src/routes.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';
import Notfound from './Notfound';

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" render={() => <Home />}/>
      <Route path="/page1" component={Page1} />
      <Route path="/page2" component={Page2} />
      <Route component={Notfound} />
    </Switch>
  );
};

export default Routes;

This would mean any unhandled route would be finally redirected to the NotFound page.

We will now add the Routes component to the App.js file. The URL being accessed by the browser will first hit the route component, and the correct page is displayed.

Build your project using npm run build. You will have a build and a dist folder created at the root of your project.

Run your server using npm run server. This will bring your server up and running at port 5001.

Navigating to http://localhost:5001/ should display the Home page
Navigating to http://localhost:5001/page1 should display the Page1 content
Navigating to http://localhost:5001/page2 should display the Page2 content

Congratulation, you have successfully added routes to your server-side rendered react application. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/ssr-react-and-node

Server side rendering with React and NodeJs

aparnajoshi.88@gmail.com — Thu, 09 Jul 2020 00:00:00 GMT

Why do we need server-side rendering?

Over the past decade, javascript has grown to be the most popular and powerful language of the web. The javascript libraries and frameworks have made it possible to generate and render an entire webpage on the client without having to send the generated HTML content from a server. Libraries such as ReactJs has optimized the way HTML content is rendered on a client to a great extent, due to which, many people are moving towards client-side rendering only.

However, the old way of rendering HTML content via server (server-side rendering) has its benefits and advantages.

Server-side rendering has faster initial page load: Since the HTML is served directly from the server, the browser need not wait until the javascript is downloaded and processed before painting the page. It ensures that an initial layout of the web page is available quickly.
Server-side rendering ensures better SEO: The search engines often crawl through your routes to analyze the content and update its ranking. If the webpage is rendered completely on the client, the search engines will get dummy content when they try to crawl through the webpage routes. Server-side rendering provides better information about the webpages to the crawlers.

Creating your app with React and Nodejs

For this article, we will start from scratch without using any boilerplates such as creat-react-app. However, the following instructions can be followed to render an existing app from the server-side. Please note that this article only covers the production mode configuration for javascript files. Any stylesheets added to the app will fail. We can further enhance the config to accommodate styles as well.

Let us go to our project folder and do an npm init. Provide the default information to the questions asked to create the config. When it is done you should have a package.json file in your project folder.

We will start by installing some of the basic packages required for a react and nodejs application.

npm install --save react react-dom express

Create a folder to contain all your client-sside files

mkdir src && touch src/index.js

Here is the entry point of our client application:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(
  <App />,
  document.getElementById('root')
);

The App is the root component containing all your client-side code. This would include your routes, any state management libraries such as redux. ReactDOM.hydrate is used when the app is rendered on the server-side as well. This will ensure that react will only hydrate the content already rendered by the server. React will attempt to attach event listeners and any other client-side enhancements to the existing markup.

Next, we add the root file containing all the clientside code:

// src/App.js

import React from 'react';

const App = () => {
  return (
    <div>React App</div>
  );
};
export default App;

Create a folder to contain your server-side code. This will be divided into 3 parts so that the server-side content is better managed.

indexHtml.js: A javascript file containing our base HTML markup. This will contain a function which will take the server-generated markup, attach it to the main div and provide back the HTML content as a string
server.js: This file contains server-side code to generate the markup and serve it as a response.
index.js: This file will start your server on a given port.

Let us go ahead and add these files to our project.

mkdir server && touch server/index.js && touch server/indexHtml.js && touch server/server.js

The HTML basic markup would contain the following code

// server/indexHtml.js
export const indexHtml = ({ markup }) => {
  return `
    <!doctype html>
    <html lang="en">
      <body>
        <div id="root">${markup}</div>
        <script type="text/javascript" src="js/main.js" defer></script>
        <script type="text/javascript" src="js/vendors~main.js" defer></script>
      </body>
    </html>
  `;
};

Add the following code to server.js. This is used for building server-side HTML and serving it.

// server/server.js

import path from 'path';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../src/App';
import { indexHtml } from './indexHtml';

export const app = express();

app.use(express.static(path.resolve(__dirname, '../build')));
app.use((req, res) => {
  const markup = ReactDOMServer.renderToString(<App />);
  const fullMarkup = indexHtml({
    markup,
  });
  res.status(200).send(fullMarkup);
});

Finally, add the following code to the index.js file which would be used to start our server.

// server/index.js

const { app } = require('../dist/server');
const PORT = process.env.PORT || 5001;
const HOST = process.env.HOST || '0.0.0.0';

app.listen(PORT, HOST, (err) => {
  if (err) {
    return console.error(chalk.red(err));
  }

  return console.info(
      `Server running on port ${PORT}`
  );
});

We are using two unknown folders build and dist. When the webpack is used to bundle our files, the build folder will contain javascript files for client-side rendering, and the dist folder will contain server files for server-side rendering.

Adding babel and webpack

We have the react and nodejs app is ready, however, they are not bundled yet to be served using Nodejs. Add babel related packages and config to ensure our ES6 code is transformed into commonjs which can be rendered by nodejs. Add webpack related packages and config to provide instructions on how the project should be built.

Install some of the basic packages required for babel and webpack.

npm install --save @babel/core @babel/preset-env @babel/preset-react babel-loader babel-plugin-dynamic-import-node core-js 

npm install --save webpack webpack-node-externals webpack-cli

Add .babelrc file at the root of your folder. This file will contain the configurations which will enable babel to transpile your code.

// .babelrc
{
  "presets": [
     [
         "@babel/env",
         {
            "useBuiltIns": "usage",
            "corejs": "3.0.0",
            "targets": {
                "browsers": ">1%, not dead, not ie 11, not op_mini all",
                "node": 10
            }
         }
      ], 
      "@babel/react"
  ],
  "plugins" : [
      "dynamic-import-node"
  ]
}

Add webpack.config.js file at the root of your folder. This file will contain the configurations using which webpack will build your project.

// webpack.config.js

const path = require('path');
const TerserJSPlugin = require('terser-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = [
  {
    mode: 'production',
    devtool: 'source-map',
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
      path: path.resolve(__dirname, './build'),
      filename: 'js/[name].js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        }
      ],
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
      minimizer: [new TerserJSPlugin({})],
    },
  },
  {
    mode: 'production',
    target: 'node',
    node: {
      __dirname: true,
    },
    entry: path.resolve(__dirname, './server/server.js'),
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'server.js',
      libraryTarget: 'umd',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
      ],
    },
    externals: [nodeExternals()],
  }
];

To understand each configuration in the webpack file, please refer to the following article: Webpack: Server side rendering with React and NodeJs

Ready to build and serve

Now that we have all the configurations and files required for our server-side rendered project, we will add scripts to our package.json file to build our project and serve it.

Add the following scripts to package.json file

// package.json

"scripts": {
  "build": "webpack",
  "server": "node server/index.js"
},

Build your project using npm run build. You will have a build and a dist folder created at the root of your project.

Run your server using npm run server. This will bring your server up and running at port 5001.

Visit your website by hitting http://localhost:5001/

Let us now confirm that your website is server-rendered.

Disable javascript on your browser: Go to settings on your browser. Under debugger you will find a check box stating Disable javascript. Check this option

Reload your browser window. You should see the javascript disabled icon as your page reloads.

If you can see the same content and experience before you disabled javascript, then congratulations. You have a fully functioning server-side rendered react application. If you had any difficulties in following this tutorial, please refer to my GitHub repository: https://github.com/AparnaJoshi007/ssr-react-and-node

Webpack: Server side rendering with React and NodeJs

aparnajoshi.88@gmail.com — Thu, 02 Jul 2020 00:00:00 GMT

Webpack: A bundling tool for javascript

Webpack is a module bundler mainly used for bundling javascript files to be used in the browser. In recent years, the javascript has grown to an extent where it has become the preferred language of choice for web development, both client and server-side.

As web development evolved from using static HTML pages towards the dynamic generation of markup through javascript, the amount of javascript files also started to increase. If your project is using different packages and libraries for frontend development, you will need a tool that bundles all your modular code and dependencies together in one file. Webpack is an efficient tool for bundling your javascript code used for client-side development.

In this article we will go through the step by step implementation for server-side and client-side rendering of a React and NodeJs app.

Client-side v/s Server-side rendering

In server-side rendered web applications, the server processes the javascript code and generates the HTML markup. This markup is sent to the client, which is immediately processed and rendered by the browser. In this scenario, the browser never waits for any javascript files, it processes the markup and renders the web app. The initial render time taken by a server-side rendered web app is quite less. Since the server provides the generated markup, search engines can easily crawl through the site-related data. Any changes to be applied on top of the server-rendered web app based on user interaction will be handled by the client-side code.

In a pure client-side rendered web applications, the server would only send an empty HTML along with the relevant javascript files. The client upon downloading the javascript file will start processing it and generates markup on the fly. After the markup is generate, the content will be rendered on the web browser. In this scenario, the browser will wait for the javascript files to be downloaded, and then it processes these files to generated the markup and then renders the web app. The initial render time taken by a client-only web app is more. The client-side rendered web applications also arent good for SEO as the search engines will get only the initial empty markup being sent by the browser.

Since the same code can be rendered via the server, instead of using a third-party hosting service, one can use NodeJs to server the web application. To use NodeJs for serving the content, one should bundle the javascript files in a compatible manner for both client and the server. Webpack is a tool that comes in handy for this purpose.

Let's start coding: Production Mode

Let's look at the webpack config required for the client and server in production mode.

Common config

{
  mode: 'production',
  devtool: 'source-map'
}

Production mode ensures that the webpack optimizes code over the build time.

Client config - load files

{
  entry: path.resolve(__dirname, '/path/to/your/index/file'),
  output: {
    path: path.resolve(__dirname, '/path/to/your/build/folder'),
    filename: 'js/[name].[chunkhash:8].js',
  },
}

The chunkhash provided with filename ensures that each time the name of the file generated via build is different. This will bypass any javascript file caching done by the browsers.

Client config - rules for parsing files

{
  test: /\.(js)$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
},
{
  test: /\.(css|s[ac]ss)$/i,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
  ],
},

This suggests that any javascript file would be parsed using babel-loader. Any stylesheets would be parsed using css-loader and sass-loader(if sass files are present). The MiniCssExtractPlugin extracts css from the javascript and adds it to a different file. This can be loaded eventually by the server.

Client config - optimize bundle

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

This is the basic level of optimization done to our bundle. The webpack will separate the main file containing our code, and all the javascript coming from npm packages into separate files. Using this we can ensure that the code responsible for painting the webpage contains minimum size possible.

Client config - plugin details

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].[contentHash:8].css',
  }),
  new ManifestPlugin({
    fileName: 'asset-manifest.json',
  }),
],

The ManifestPlugin will generate a manifest file containing the details of our hashed file names to be included in our project.

We have our client config to generate client-side code, let us now look at generating server-side bundle to be served by nodejs

Server config - load files

target: 'node',
entry: path.resolve(__dirname, '/path/to/your/server/index/file'),
output: {
  path: path.resolve(__dirname, '/path/to/your/server/build/folder'),
  libraryTarget: 'umd',
},

The libraryTarget denotes how the module definitions are supported. umd is a universal pattern that supports the module definitions from both commonjs (used in NodeJs) and Asynchronous (used in frontend libraries) pattern. To learn more on this, please refer to this article

Server config - rules for parsing files

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    plugins: [
      [
        'css-modules-transform',
        {
          camelCase: true,
          extensions: ['.css', '.scss'],
          generateScopedName: '[hash:base64]',
        },
      ],
      'dynamic-import-node',
    ],
  },
},
{
  test: /\.s[ac]ss$/i,
  use: [
    {
      loader: 'css-loader/locals',
      options: {
        localsConvention: 'camelCase',
        modules: true,
      },
    },
    'sass-loader',
  ],
},

This configuration would support the usage of .css files as modules inside javascript files.

Server config - bundle external nodejs dependencies

externals: [nodeExternals()]

Now that we have both client and server config, webpack-cli can be used to build our files compatible with both client and server. Once these files are generated they can be served via a plain HTML template using nodejs.

How to host a blog using GatsbyJs

aparnajoshi.88@gmail.com — Fri, 12 Jun 2020 00:00:00 GMT

GatsbyJs: An open-source framework to build blazing-fast websites

GatsbyJs is a free open source framework based on ReactJs that helps developers build websites within a matter of seconds. The GatsbyJs website provides pretty good documentation on how to build your website from scratch. GatsbyJs has rich open source support, and support of many npm packages for setting up content, SEO, styling, search, pagination, analytics, deployment, etc.

One can always use the Gatsby CLI and start building your website from the ground up, this would take some significant amount of time. However, I would recommend the easy way of using one of the gatsby starters.

Gatsby provides a wide range of starter websites for you to choose from. You can select whichever content format you are most comfortable with, select an easily usable hosting platform and a theme that agrees with your taste. Once you select a good starter website, do the following steps to get your site running

Run the following command in your terminal gatsby new gatsby-starter-blog <your chosen starter>
You can find the site config under the /data/SiteConfig.js file. Change the contents of the file as per your requirements.
The images and icons related to your site will stay under /static folder. You can make changes to this folder to add your assets.
If your site is using a markdown, you can find the blog content under the /content folder. Change these markdowns with your blogposts. If your starter pack is using one of the CMS tools, create your API keys, and replace them in the config.
Push all these changes to GitHub .
Find the hosting platform used and provide it your GitHub codebase link. This will get your site up and running within minutes.

In this blog, I will provide brief instructions on how I set up my blog using GatsbyJs.

How I used Gatsby and configure this website?

Pick a starter and create a new gatsby project: For my project, I have used to following starter pack. You can either visit the GitHub page and clone this project or use Gatsby CLI to set up the project locally

gatsby new gatsby-markdown-blog-starter https://github.com/ammarjabakji/gatsby-markdown-blog-starter

Understanding project structure: GatsbyJs isn't that difficult to understand. The project has a set of predefined folder structure and config files which can be changed to configure the site as per your requirements.

Understanding important files

package.json // This file contains the list of all packages required for the project. It also contains certain scripts that are used to build and run the project
netlify.toml // This file contains instructions for deploying the project on netlify
gatsby-config.js // This file contains the metadata, plugins, and other general configuration. GatsbyJs uses various packages to support different features.
gatsby-node.js // Gatsby provides several node APIs. These API functions can be used to configure and create pages for your site.
gatsby-browser.js // This file helps in creating a wrapper element using which we can define functions to handle and respond to actions coming from the browser.
gatsby-ssr.js // This file helps in altering static HTML files as they are being Server-Side Rendered (SSR) by Gatsby

Understanding important folder structure

static/ // This folder contains static files such as images and icon which can be served directly 
data/ // This folder generally contains a site config file required for SEO
content/ // This folder contains markups that can be used to create blog content.
src/templates/ // This folder contains javascript files which are used to create an HTML template for rendering dynamic data in the same format
src/pages/ // Every file in this folder acts as a new page
src/layouts/ // This can be used to add common UI components such as header and SEO related content
src/components/ // This folder contains all the building block UI components for the site

Personalising site config: The next step is to personalize site data. This can be done by altering the configuration provided in the data/siteConfig.js file.
Editing markdowns for blogs: Start editing files inside the content folder. These files will be manifested as each blog.
Adding pagination: Edit gatsby-node.js file to add the following config for pagination. This would create a list of pages that can be queried using page numbers from Graphql. Each page would contain the given number of posts

const postsPerPage = 9;
const numPages = Math.ceil(postsEdges.length / postsPerPage);
Array.from({ length: numPages }).forEach((x, i) => {
  createPage({
    path: i === 0 ? `/blog-list/` : `/blog-list/${i + 1}`,
    component: blogListPage,
    context: {
      limit: postsPerPage,
      skip: i * postsPerPage,
      numPages,
      currentPage: i + 1,
    },
  });
});

Edit the blog-list.js template file to add the pagination component along with the list of blog posts at the bottom. This need not be necessarily blog-list.js file. You can edit any template file and add pagination to it.

<ul className={styles.pagination}>
    {!isFirst && (
    <li>
        <Link to={prevPage} rel="prev">
        ← Previous
        </Link>
    </li>
    )}
    {Array.from({ length: numPages }, (_, i) => (
        <li>
        <Link key={`pagination-number${i + 1}`} to={`/blog-list/${i === 0 ? "" : i + 1}`}>
            {i + 1}
        </Link>
        </li>
    ))}
    {!isLast && (
        <li>
        <Link to={nextPage} rel="next">
            Next →
        </Link>
        </li>
    )}
</ul>

Adding Search: To add a search to your gatsby project you can use a wide variety of plugins and packages. I would recommend using elastic-lunr. Install @gatsby-contrib/gatsby-plugin-elasticlunr-search npm package into the project.

Edit the gatsby-config.js file and add the following configuration:

{
    resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
    options: {
    // Fields to index
    fields: [`title`, `categories`, `tags`],
    // How to resolve each field`s value for a supported node type
    resolvers: {
        // For any node of type MarkdownRemark, list how to resolve the fields` values
        MarkdownRemark: {
        title: node => node.frontmatter.title,
        categories: node => node.frontmatter.categories,
        tags: node => node.frontmatter.tags,
        path: node => node.frontmatter.slug,
        },
    },
    // Optional filter to limit indexed nodes
    filter: (node) =>
        node.frontmatter.tags !== 'exempt',
    },
},

Edit the query in pages where you want the search to work by adding the following query to the existing graphql query:

siteSearchIndex {
    index
}

Also, add the following data to the pages to initialize elastic-lunr search.

import { Index as ElasticIndex } from "elasticlunr"
const searchIndex = data.siteSearchIndex.index; // Note: siteSearchIndex comes from the graphql query we edited
const getOrCreateIndex = () => {
    return ElasticIndex.load(searchIndex);
  }
const index = getOrCreateIndex(); // This index must be used by the search component

Finally Add the function to query the search data and display the results:

const search = e => {
    const query = e.target.value
    const results = searchIndex.search(query, {}).map(({ ref }) => 
    searchIndex.documentStore.getDoc(ref));
}

Deploying to Netlify: GatsbyJs provides support to a wide variety of static web hosting services, however, netlify has been easiest of them all. Login to netlify and link your GitHub account. Choose your GitHub repository containing the GatsbyJs project. With one click your website will be deployed.

Adding new features

I have given examples on how to add certain important features required by any blogging website, however, the GatsbyJs project can be further enhanced to add Google Analytics, Google AdSense, Amazon ads, Newsletter etc. My github project has all these configurations setup. You can either clone my project and edit the siteconfig.js file to launch your blog or refer to my project to add these additional features to your site. Happy blogging :)

Amazing Tech: Sisyphus table

aparnajoshi.88@gmail.com — Thu, 11 Jun 2020 00:00:00 GMT

Sisyphus and the mythology behind it

According to Greek mythology, Sisyphus is a king of Corinth, which became infamous for his trickery and cheating death twice. He ultimately got his divine punishment when the Greek god Zeus condemned him with the eternal punishment of forever rolling a boulder up a hill in the depths of Hades(Underworld).

A technology inspired by Greek mythology

Sisyphus table was built by the Sisyphus industries to bring forth Art through technology. It provides a unique combination of kinetic art, technology, and design blending together to form a stunning meditative beauty. The Sisyphus table contains a metal ball rolling through the sand infinitely creating and erasing beautiful patterns. Lovers of art, technology, and meditation would certainly be drawn to this piece of magical art.

Artist of the hour

Bruce Shapiro is the artist behind the build and design of the Sisyphus table. He quit his job as a practicing physician in-order to follow his passion for technology and art. He wanted to use computer-controlled machines to create art. Initially, Bruce discovered that industrial giants like 3M and Honeywell sold their used automation equipment cheaply on the local surplus market, allowing him access to uber-expensive components at pennies on the dollar. Where the companies had seen tools for mass producing floppy disks and sticky notes, he saw a new art medium. In 1995, Bruce registered his website: "The Art of Motion Control."

Bruce has been creating Sisyphus sculptures for nearly 20 years and has 3-meter diameter permanent installations in Switzerland, Germany, and Australia. He spent the past 25 years dedicated to exploring motion control as a new medium for artistic expression, building art tools and kinetic sculpture that combined his love of art, science, and education.

The bot that does it all

The Sisbot is the hardware sitting below the Sisyphus table which enables the metal ball to create the sand art.

source

The Sisbot controls a magnet that pulls the metal ball along a programmed path of polar coordinates. The Sisbot incorporates two types of motors based on the material of the table itself.

The metal-base Sisyphus tables feature stepper motors, which are precise, and perfectly suited for the smaller diameter art pieces.
The wood-base tables feature powerful servo motors, which are quieter and more precise at higher speeds, making them better suited for the larger sizes.

Each Sisbot is built by hand and individually tested before placement in the tables.

Sisyphus: How to use?

The Sisyphus table is shipped with a standard list of more than 25 tracks. Each track is like music for the eyes, drawing the musical patterns on the sand placed on the table. It doesn't contain any on/off switch. The table needs to be plugged in, and it automatically calibrates itself, loads the default list of tracks, and begins playing. Sisyphus also provides an app for controlling the playlist. Using this app, one can select favorite tracks, create custom lists, pause or change the speed, and dim the table lighting. It is also possible to download tracks shared by others online, or create your own Sisyphus tracks using popular drawing programs like Adobe Illustrator, and send the saved files to your table.

Get your own blog: A comparison between Gatsby, NextJs, Hugo, and Jekyllrb

aparnajoshi.88@gmail.com — Thu, 11 Jun 2020 00:00:00 GMT

Blogging platforms: Traditional v/s Modern

Blogging has been one of the most relaxing and intriguing professions of all time. A lot of us do blogging as a hobby project because we are fascinated by a concept and want to share it with the world. Whether you are a professional blogger or a hobbyist, I am sure you must have had many choices put forth ahead of you before you choose one platform for blogging. The trends in blogging have continuously changed over the years. What was once being put out as static pages hosted using 3rd party platforms have changed to personal self-hosted blogging sites. Hence, today we have two big choices when we want to choose a way to blog.

Traditional platforms: The traditional platforms include the 3rd party hosted blogging sites. Here we choose a blog hosting platform such as Wordpress, Blogger, Wix, Squarespace, etc. We don't have to worry about the technical part of creating a static website for a blog (unless you want to customize the site by writing your code). These platforms provide 1000s of free and paid themes to choose from and start to blog. We also need not worry about hosting the pages, taking care of security, adding in analytics to check the viewer traffic, etc. I would highly recommend you choose this platform if you have no prior knowledge of coding, or you do not wish to learn to code.
Self-Developed, Self-Hosted blogs: If you are a programmer, or have even slightest interest in learning how the inner mechanics of a static blog works, I suggest you take the second approach. It is much easier to customize and add your features to the blog if you develop a blog and host it yourself. You also won't have to rely on a 3rd party customer service to fix your blog if the servers are down for some reason.

In this article, I will be discussing the features of 4 main tools that can be used to set up a self-developed, self-hosted blogging site, almost as quickly as you'd set up a Wordpress blog.

GatsbyJs

Gatsbyjs is the framework using which this blog was built, it is also one of the easiest and intuitive ways to get your blog running. To develop your blog with gatsby, you should have some minimum knowledge of how HTML, CSS, and React works. Reacts official website ReactJS.Org was also built using gatsby, which makes it all the more appealing.

Here are some information on major working parts of a GatsbyJs site:

Content: Content is the king of any blogging platform. With GatsbyJs, you can either use content from CMS such as Drupal, Wordpress, Contentful or write [markdown] content which can be stored within the codebase itself. If you have a backend service or a database containing data, you can use them too.
Build: Gatsby has a powerful frontend stack with ReactJs, with Graphql working as a backend query language. In this case, backend means the place where your data is stored. Graphql helps in querying data either from CMS, or a markdown, or from a public API.
Web Hosting: Gatsby also provides a wide range of plugins to host in various static webhosting platforms such as Netlify, AWS Amplify, Github Pages, Surge.sh, Aerobatic, etc.

NextJS

NextJs is a react based framework building production-ready, pre-rendered apps. To develop your blog with NextJs, you should have some minimum knowledge of how HTML, CSS, and React works. NextJs has a great documentation showing step by step procedures to get your blog page running.

Here are some information on major working parts of a NextJS site:

Content: While NextJS supports various CMS platforms such as Wordpress, Sanity, Contentful, Agility for getting the content, it lacks documentation on specific usages. However, it provides example sites which can be used as a starter package to build your application.
Build: NextJs has a powerful frontend stack with ReactJs, NextJs API working as the backend query language. NextJS provides APIs such as getStaticProps, getStaticProps, and getServerSideProps, helps in querying data either from CMS, or from a markdown, or a public API.
Web Hosting: NextJs provides its own hosting platform such as Vercel. However, other hosting platforms like Netlify, Github Pages, Surge.sh, Aerobatic, etc, using Static HTML Export.

Hugo

Huge is a command-line framework that can be used to quickly generate static sites. To develop your blog with Hugo, you should have some minimum knowledge of how HTML and CSS work. You also need some knowledge of how the navigation and multi-page website development work.

Here are some information on major working parts of a Hugo site:

Content: You can use command-line options to generate a new markdown that serves as content for the Hugo website.
Build: Hugo provides various built-in themes that you can adopt to generate the basic structure of your static website. This way you would have a full-fledged themed website, and you will have the power to customize it as per your requirement.
Web Hosting: Hugo site provides various methods of deployment since it is a multipage static web application. You can use Hugo's documentation and choose your favorite platform for deployment.

Jekyll

Jekyll is a framework built on top of Ruby. To develop your blog with Jekyll, you should have some minimum knowledge of how HTML and CSS works. You also need some knowledge of how navigation and multi-page development works.

Here are some information on major working parts of a Jekyll site:

Content: The recommended way of providing content to the Jekyll website is by the usage of markdowns.
Build: Jekyll provides various gems to generate and structure your static website. It also provides gems to query your markdown content and display it on your site. The entire site is built on top of a structured format of folders.
Web Hosting: Since the sites generated using Jekyll are like multipage server-rendered websites, it can be deployed in any of the cloud hosting platforms. Jekyll provides various alternatives and documentation to follow steps and easily deploy your static site.

Whether you use a CMS to build your blog or use one of these modern frameworks for building websites, the quality of content is what matters to the users. There is of course a third way of doing things, which is building your website ground up and using a server-side framework like dotnet, java springboot or nodejs(https://nodejs.org/) to serve it. I hope this article provided you with enough information to make a reasonable choice to build your blog. Cheers!

Cross-Origin Resource Sharing: A complete tutorial

aparnajoshi.88@gmail.com — Wed, 03 Jun 2020 00:00:00 GMT

CORS: What it is and why do we need it?

Cross-Origin resource sharing is a protocol that allows the client from one origin to interact with the resources residing on a different origin. When we say resources, it is things like API calls to fetch some data, images downloads, icons, etc. We need CORS to overwrite the same-origin-policy followed by XMLHttpRequest and fetch. This means that Javascript can only make calls to the URLs that are hosted on the same origin(domain) as that of the script itself. However, there are many scenarios when we would want to use the services belonging provided by a different domain and in such scenarios, cors would come in handy.

Same-origin policy

Browsers implement a security mechanism called same-origin policy. This policy was implemented to fight one of the most common cyber-attacks out there: cross-site request forgery. During cross-site request forgery, a malicious attacker/website tries to hijack the browser's cookie system and attempt to steal resources in the name of an authentic website.

Browser Cookie Policy: Every time an HTTP request is made to a domain from the browser, it attaches any cookie that is stored in the browser related to that domain. This is useful for authentication and for establishing the session. For example: When you log in to https://example.com, the server will set certain session related cookies for https://example.com domain in the browser. Every time you revisit https://example.com or make any API calls to https://example.com the session cookies will be sent along with the request. The API will recognize this cookie and allow access without signing in again and again.

Since the browser automatically attaches all the relevant cookies of a domain during any request, a malicious website would try to send requests to https://example.com from the browser. In such a scenario, the cookies stored in the browser for https://example.com domain will be sent. If the cookies are valid, the malicious website gains access to https://example.com and its resources. This way, a user's account will be subjected to a cross-site request forgery attack.

To prevent this, the browsers have implemented same-origin policy. This means that any requests made from the browser from a given website to the same domain will be allowed. It will stop requests coming from a different domain under same-origin policy.

Why do browsers give CORS error? We know that the Cross-origin requests are usually blocked by the browsers due to security purposes. A webserver not only contains publicly accessible assets such as images and fonts but also contains sensitive information such as personal information of a user. These web servers sometimes provide publicly accessible APIs for other websites to consume and interact with their resources. This could be a form of service being provided by one server to another. Following are the few reasons why cross-origin requests are usually blocked by the browsers:

The API being requested doesn't allow cross-origin resource sharing
The API exposed allows certain qualified domains to send cross-origin resource sharing
The API requires certain headers to be sent to allow cross-origin resource sharing

CORS errors and ways to resolve it

If you have involved in web development for any amount of time, I am sure you must have encountered the following error:

Every time you tried to work with external APIs, you might have faced this error. You might have also tried sending headers such as 'Access-Control-Allow-Headers': '*', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': true along with the request and could find no luck in resolving the CORS error:

Most of the time, this error can be resolved by adding certain headers like Access-Control-Allow-Origin: "https://example.com". This essentially means that the API server hosted in a different domain trusts our domain and is willing to share its resources. The APIs are built for a common purpose, and APIs cannot start whitelisting every new domain that comes up on the internet. Also, there is no guarantee that the domain which has established the trust today won't turn malicious tomorrow.

So what to do now? Do we give up? What are the ways to resolve this issue?

There are several ways in which cors error can be resolved:

1. Installing Allow-origin plugins in the browser:

If you are only testing an API and want to use its data without dealing with the CORS issue, it is possible to install CORS plugin and make API calls from the browser as if it were requesting the resources from the same domain. Note that the plugin is only a fix in your local machine. The plugin will essentially add Access-Control-Allow-Origin: * header to the response coming from the cross-origin server and tricks the browser into allowing the request to pass through.

2. Use a third-party proxy:

The requests going from our browser can be sent through a proxy server which attaches Access-Control-Allow-Origin: * header to every response it sends back. The cors-anywhere server acts as an intermediary proxy between the client and the server.

In this case, if you want to request to https://example.com, the request would be sent to https://cors-anywhere.herokuapp.com/, along with the information about the original server you want to hit. This solution is a great use-case when we don't want to burden ourselves with any backend programming. We will be making use of cors-anywhere and turning the (browser-server) request into (server-server) request.

3. Build a proxy server.

One of the problems with using a third-party proxy server is the dependency. We cannot confirm its availability and its scalability. We also cannot trust it completely and send client secrets to the proxy server. A better approach is to build a proxy server and host it along with the frontend codebase. This way the requests will be first made to our server residing in the same domain, and then it will be forwarded from our server to https://example.com. This would establish a (server-server) communication and the request will be fulfilled.

CORS errors can be troublesome to front-end developers, especially when we don't have any knowledge regarding backend. In the case of simple applications, we can make use of third party proxy servers and fulfill our requests.

Javascript Async Operations: Make your web dynamic

aparnajoshi.88@gmail.com — Mon, 01 Jun 2020 00:00:00 GMT

Asynchronous tasks in Javascript:

One of the most powerful features of javascript is its ability to execute code asynchronously. Most of the programming languages are designed in such a way that the code is executed as soon as it is found. Asynchronous execution simply means that a piece of code is executed at a later point of time when a certain asynchronous task is performed. This asynchronous task could be anything:

A countdown from a timer ended
A user performed a specific action
An API call returned the data

In many scenarios, once an asynchronous task is performed, we would want to perform another operation to handle what happens next. This could include things like reloading page, refreshing content, changing the webpage styles, etc. In this article, we will see different ways in which asynchronous tasks can be handled.

Call back functions: The old way

One of the early ways to handle async operations was to provide an anonymous callback function which could be executed once the task was completed. While this looks like a quick and easy solution, it leads to confusion when we have to deal with multiple callbacks, nested one inside another.

const makePizza = () => {
    getDough(function(dough) {
        getCheese(dough, function(cheese) {
            bakePizza(dough, cheese, function(pizza) {
                return pizza;
            })
        })
    })
}

makePizza();
//Callback Hell

This is what programmers call the CallBack Hell. The nested loop of anonymous functions to be executed one after another increases the complexity of the code. We can however try to reduce this complexity to some extent by modularizing the code. Here's an example of how this could be achieved.

const makePizza = (nextStep) => {
    pizza = nextStep(getCheese);
}

function getDough(nextStep) {
    const dough = getDoughFromShelf();
    nextStep(dough, bakePizza);
}

function getCheese(dough, nextStep) {
    const cheese = getCheeseFromShelf();
    nextStep(dough, cheese)
}

function bakePizza(dough, cheese) {
    const pizza = makePizza(dough, cheese);
    return pizza;
}

makePizza(getDough);

While this can be used to solve the problem of callback hell, if there are too many operations nested, this list of functions becomes hard to maintain. ES6 provided an easier way to deal with callback hell with the introduction of Promises.

Promises: Deal with nested callbacks flatly

ES6 provides promises to deal with callback functions. By using then and chaining the nested functions, we can provide a list of anonymous callback functions to execute in the given order.

function makePizza() {
    const pizza = getDough())
                    .then((dough) => getCheese(dough))
                    .then((dough, cheese) => bakePizza(dough, cheese));

    return pizza;
}
 
makePizza();

We can also write functions to be executed and pass them as parameters to then. This would ensure the reusability of code. While this provides a neat way of dealing with async operations, we can still see that the functions chained one after another, and it is hard to debug the data coming from these callbacks.

Async Await: The new way to handle asynchronous tasks

ES2017 introduced asynchronous functions. With this, our call back functions can be labeled async, and these functions can be called with await keyword just like calling synchronous function. However, the change here is that the next line of code will be executed only after the async function returns data or errors out.

async function makePizza() {
    const dough = await getDough();
    const cheese =  await getCheese(dough);
    const pizza =  await bakePizza(dough, cheese);
    return pizza;
}

makepizza();

The functions getDough, getCheese and bakePizza should be defined as async functions. The makePizza function executes each await operation and stops the rest of the execution until the operation/function returns any data.

Parallel execution of asynchronous functions

So far we have seen that the asynchronous functions are executed one after another in the order in which they are called. However, in some cases, we might want to execute asynchronous functions parallelly because their execution doesn't depend on each other.

Promise.all: Promise.all() can be used to execute async functions parallelly.

const asyncFunction = () => {
    return new Promise((resolve) => {
        console.log("I am executed parallelly")
        setTimeout(resolve, 1000)
    })
}

const promise1 = asyncFunction();
const promise2 = asyncFunction();

Promise.all([promise1, promise2]).then(() => {
   console.log("I am executed in the end");
});

When you execute the above code, the asyncFunction is called at the same time, and the function exits after the setTimeout is completed.

async-await: async-await can also be used for parallel execution of functions.

const asyncFunction = () => {
    return new Promise((resolve) => {
        console.log("I am executed parallelly")
        setTimeout(resolve, 1000);
    })
}

async function parallel() {
    const await1 = asyncFunction();
    const await2 = asyncFunction();
    await await1;
    await await2;

    console.log("I am executed in the end");
}

parallel();

The await1 and await2 holds the promise returned by the asyncFuntion. Note that the function execution won't stop the flow. The await keyword stops the follow and waits until the async function has returned. In the above example, both the functions are fired at the same time, and hence they are parallelly executed.

Handling errors in asynchronous operations

Asynchronous operations are usually performed to get the data from an external resource. This has an enormous chance of failure due to a variety of reasons. The errors given by the async operations must be handled properly.

Using catch in promises: Just like the Promises provide then to chain the callback functions and get the data from the asynchronous operation, they also provide a catch block. This can be used to catch the error returned during execution. Note that if there are several then operations chained together, the first error will call the catch block and stop further execution.

function makePizza() {
    const pizza = getDough())
                    .then((dough) => getCheese(dough))
                    .then((dough, cheese) => bakePizza(dough, cheese))
                    .catch((err) => console.log(err));

    return pizza;
}
 
makePizza();

If getDough() fails, the catch block is executed immediately. The chained then callbacks won't be executed.

If getDough() is successful, the next then block is executed.

Using try-catch block: This is the more popular and common way to handle errors in asynchronous operations. The piece of code executing the async function will be wrapped inside a try-catch block. Any error will stop further execution and immediately jump to catch block

async function makePizza() {
    let pizza;
    try {
        const dough = await getDough();
        const cheese =  await getCheese(dough);
        pizza =  await bakePizza(dough, cheese);
    } catch(err) {
        console.log(err);
    }

    return pizza;
}

makepizza();

Promises v/s Asynchronous functions:

The Asynchronous functions provided with ES2017 are not a replacement for the promises. Asynchronous functions are simply an alternative to the promises. When several callbacks could be nested, async functions provide a better, cleaner way of handling code. We can use both of these implementations in the code depending upon the coding standards used. Since asynchronous functions are provided with ES2017, certain browsers might not fully support it, and a polyfill might be required.

Machine Learning: Cost Function

aparnajoshi.88@gmail.com — Fri, 22 May 2020 00:00:00 GMT

Machine Learning - The Supervised kind

Machine learning is the ability of computer algorithms to improve continuously through experience. One of the most common types of machine learning techniques include supervised learning. In learning algorithms, we have two sets of values - the Input Features and the Output Variables. Most of the supervised learning algorithms are classified into two types of problems:

Regression: In regression problems, we have a set of continuous input features, mapped against the output variables. The problem is to predict a real-valued output against an anonyomous input feature, as close to the actual value as possible.
Classification: In classification problems, we have a set of inputs belonging to a given category. The problem is to map anonymous input values into discreete categories.

In this article, we shall discuss about the Regression type problems in machine learning, the definition of cost function and the need for minimizing it.

What is Regression? What scenarios require regression method of problem solving in machine learning?

Regression is a mathematical problem solving method in which a we try to formulate a function through which an unknown variable can be predicted, whose value depends upon the values of known variables.

Assume that we have the problem of predicting the monetary value of house based on three factors: Dimensions, Number of bedrooms, and Age of the house. One can say that, the value of the house increases if the Dimensions and Number of bedrooms increases. On the otherhand, the value of house decreases if the Age increases

In this problem,

Unknown/Dependent variable(y): Value of the house
Known/Independent variable/s(x₁, x₂, x₃): Dimension, Number of bedrooms, Age
Regression function example: f(x) = θ₁x₁ + θ₂x₂ + θ₂x₂

Where, x₁, x₂, and x₃ represent Dimension, No.of bedrooms and Age respectively. y is the correct value of the house. The co-efficients θ₁, θ₂, and θ₃ of the independent variables x₁, x₂, and x₃ will change according to the training samples given while formulating the regression function f(x).

If we have only one independent variable(x), we call this as linear regression. For the sake of simplicity, I will be using linear regression in the rest of the article.

Cost of the hypothesis function

source

Consider the linear regression problem containing only one independent variable. Let's define the linear regression function by:

f(x) = θ₀ + θ₁x

This function is a hypothesis function in which we say that, for certain value of θ₀ and θ₁, given the value of x, we get the predictions of f(x) very close to the actual value.

Let us consider two graphs. Graph 1 contains the plot of output y versus the input values x as dots on a graph. Graph 2 contains the plot of hypothesis function f(x) plotted on the graph as a straight line. If we merge these two graphs and represent them in a single graph, the distance between the predicted value(a point on the hypothesis function) and the actual value(training sample value) represents the cost of individual predictions.

Let us view this graph:

In the above graph:

Individual points on the graph represent each training sample y v/s x.
The line on the graph represents the hypothesis function f(x)
The distance between the points and the line represents the cost for the individual training sample

Cost representation: We have seen the representation of cost graphically. Let us try to derrive a mathematical equation out of this graphical representation. We define the following parameters used in the cost funciton.

J(θ_i) => Individual Cost function.
f(x_i) => Hypothesis function for i_th training set.
y_i => i_th value in training set.

The individual costs can defined as the difference between the value of hypothesis function and the actual value: J(θ₁) = f(x₁) - y₁, J(θ₂) = f(x₂) - y₂

The total cost of all the values present in the training set can be represented as: Total cost = Σ_0-i (f(x_i) - y_i)

Minimizing cost function: We don't wana spend too much now, Do we?

The final goal of linear regression is to find the hypothesis function using training samples, such that the final total cost of the hypothesis function is minimal. Let us derrive the equation that represents cost function to be minimized.

We know that the total cost of the hypothesis function, given a training set can be defined as: Total cost = Σ_0-i (f(x_i) - y_i)
We want the cost to be minimum, in other words, the difference between (f(x_i) and y_i) should be minimum. Note that when we square an integer, its value increases, however, if we square a fraction, its value decreases. Squaring the the difference will make sure that the cost is at its absolute minimum: Total cost = J(θ_i) = Σ_0-i (f(x_i) - y_i)²
Let us consider that the training sample has m number of values in it. The average cost can be represented as: (Σ_0-i (f(x_i) - y_i)²)/m

Hence the average cost function to be minimized can be represented as: J(θ) = (Σ_0-i (f(x_i) - y_i)²)/m

If we substitute the hypothesis function with the actual values of θ and x, we get the cost function as:

J(θ) = (Σ_0-i ((θ₀ + θ₁x_i) - y_i)²)/m

There are many algorithms that can be implemented to minimize this cost function. Gradient descent is one such algorithm commonly used, however, note that there are more than one ways to reduce the cost function. I hope this article gave an insight on understanding how the average cost function is derrived from the hypothesis function in linear regression.

Javascript Memoization: An Optimization technique

aparnajoshi.88@gmail.com — Thu, 21 May 2020 00:00:00 GMT

Javascript Memoization:

Memoization is a programming technique in which expensive function calls are cached such that their repeated usage can be served from the cache instead of running the function again and again. An expensive function is considered a function that takes some significant amount of computation time. Memoization is especially useful with recursive function calls in which the same function is repeatedly called with the same arguments. The cost of the recursive function increase with the input value sometimes, and the memoization technique can save a lot of time. Since the output of the calculation is the same, it can be cached and returned directly instead of calculating.

source

In simple words, memoize is a technique used to reduce repetitive computations. Consider the factorial function implemented using recursion:

function factorial(n) {
    if(n === 1) return 1;
    return n * factorial(n-1);
}

If we want to compute factorial(3), it would internally call factorial(2) and factorial(1). If these values were already stored, we could easily return it from the cache. The real value of memoization is realized when we compute factorial(25). Instead of running factorial function 24 times, we could return factorial(24) stored in memoize function and save the computing time.

Before understanding how to implement memoize, one should be familiar with javascript closures and higher-order functions.

Memoize example

A memoize function makes use of the concept of higher-order functions and closures to accept the base function, cache its value, and return the results.

Consider the following function:

function memoize(recursiveFunction) {
    var cache = {};
    return function() {
        var key = JSON.stringify(arguments);
        if(cache[key]) {
            return cache[key];
        }
        else {
            var val = recursiveFunction.apply(this, arguments);
            cache[key] = val;
            return val;
        }
    }
}

We can memoize the factorial function using the following code:

var factorial = memoize(function(n) {
    console.log("computing factorial of: ", n);
    if(n === 1) return 1;
    return n * factorial(n-1);
});

console.log("output - ", factorial(3)); 
// computing factorial of: 3
// computing factorial of: 2
// computing factorial of: 1
// output - 6

console.log("output - ", factorial(3));
// output - 6

console.log("output - ", factorial(5));
// computing factorial of: 5
// computing factorial of: 4
// output - 120

Let's go through each part of the memoize function and understand what's happening.

Memoize function is a higher-order function that takes in the recursive function to be memoized as an argument.
A cache is initialized inside the memoize function, this cache is an object and hence it would hold key-value pairs.
A closure function is created that holds the logic for implementing the caching technique.
The first part of the function computes the key and checks if the cache object holds the value for the given key. If the value exists, it is returned and the function exits.
The second part of the function executes the actual recursive function and stores its output in the cache with the computed key.
The closure function holding the logic for the caching technique is returned.
The memoized function can be now used to get the results in an optimized way.

Note that memoization is only creating an object and storing the pre-computed values as key-value pairs. However, memoization must be carefully used because it stores large amounts of data. Also note that, if the function executed inside memoization contains the usage of this, its value must be carefully handled. It is best to implement memoization only for pure functions which contain repetitive calculations.

Javascript Functions: Higher-order Functions

aparnajoshi.88@gmail.com — Tue, 19 May 2020 00:00:00 GMT

Javascript Higher-order functions:

A higher-order function is any function which either takes an argument as a function or returns a function. If you have been following any of the blog posts in the javascript series, you must have already encountered higher-order functions. The opposite of higher-order functions is first-order functions, which don't take any functions as arguments or return functions as output. In this post, we will look at some of the common scenarios higher-order functions are used, and how to implement them.

source

Higher-order functions: Common examples that don't catch our eyes

We already know the definition of a higher-order function, but the most common use-case of these functions include using them as callback functions. Using the built-in methods such as setTimeout, map, filter, addEventListener, etc, are some of the most common use cases of higher-order functions which are implemented as part of our everyday code.

Consider the following first-order examples:

Example1:

const getSquaredArray = array => {
  const squaredArray = [];
  for (let i = 0; i < array.length; i++) {
    const number = array[i];
    squaredArray.push(Math.pow(number, 2));
  }
  return squaredArray;
};
getSquaredArray([4,5,6,2,7]);

Example2:

const getCubedArray = array => {
  const cubedArray = [];
  for (let i = 0; i < array.length; i++) {
    const number = array[i];
    cubedArray.push(Math.pow(number, 3));
  }
  return cubedArray;
};
getCubedArray([4,5,6,2,7]);

In the above examples, we are trying to input an array and get a new array with updated values. Most of the operations here are duplicated. The basic functionality here is to iterate through each element of the array and perform an update operation and return the new array with the same number of elements as before.

We can observe a pattern here, two things are repeated twice in the above example:

Iteration of array elements
Assigning the updated value to a new array and returning the new array

Only the update part is different in both cases. Since in javascript, functions are first-class objects, meaning they can be used exactly like objects,

We can assign the function to a variable.
We can assign the function to the property of an object.
We can send a function as a parameter to another function.
We can return a function from another function.

In our above example, we can create a higher-order function, and pass the update function to it as a call back. The higer-order function can perform the repetitive operations, and execute the callback function when required. Consider the following code:

const higherOrderFunction = (array, callback) => {
  const newArray = [];
  for (let i = 0; i < array.length; i++) {
    const arrayValue = array[i];
    if(typeof callback === 'function') {
      newArray.push(callback(arrayValue));
    }
  }
  return newArray;
};
higherOrderFunction([4,5,6,2,7], (value) => Math.pow(value,2)); // [16, 25, 36, 4, 49]
higherOrderFunction([4,5,6,2,7], (value) => Math.pow(value,3)); // [64, 125, 216, 8, 343]

We can see that most of the repetitive functionality is abstracted by the higher-order function, and the anonymous function handles the local tasks.

If you have worked with arrays in javascript before, you must be aware that this is the functionality of map() function in javascript.map() acts like a higher-order function, taking an anonymous function as an input, and let it perform a particular operation for each element of the array and return some result.

Things to note before implementing Higher-order functions:

A callback function can be either named or anonymous. Most of the time callback functions are used locally and in asynchronous scenarios, and hence they remain anonymous.
A callback function will usually receive certain parameters from the higher-order function. The callback function must be designed to work with these parameters.
A callback function's this value might change since it is executed from the higher-order function. Care should be taken to preserve its this value. To know more about different ways to handle this please read javascript-this and javascript-apply-call-bind
A higher-order function should check whether the callback parameter is a function before executing it. This can be done using typeof callback === 'function'

This article painted a brief picture of how higher-order functions can be implemented, and why they are required. Higher-order functions are mostly used in creating middlewares for web apps, which handle common functionality of incoming or outgoing API calls. I would like to conclude by saying that, one should make use of the functional programming pattern of javascript to its highest advantage.

Javascript Events: Capture, Target, Bubble

aparnajoshi.88@gmail.com — Mon, 18 May 2020 00:00:00 GMT

Javascript events and event handling:

Events are actions occurring on a webpage due to various types of interaction from the user. These include interactions such as mouse click, keypress, scroll, resize, etc. The user interactions are usually performed on an HTML element, and when any type of interaction is performed, an event is fired. This event will simply follow its life cycle(event propagation) unless an event-handler is registered to perform any operation in response to the event.

The standard DOM Events has 3 phases of event propagation:

Event Capturing phase: the event goes down to the element.
Event Target phase: the event has reached the element.
Event Bubbling phase: the event is bubbled up from the element.

Note that not every DOM event bubbles up. There are some exceptions to this. The focus event doesn't bubble up the DOM tree.

source

In this article, we will understand the life cycle of the events, the execution phase of event handlers, and how to manipulate default browser behavior when an event is fired.

Event Capture

Event capture is the first phase of event propagation when a user interaction happens in the browser. In this phase, the user event propagates down the DOM tree until it reaches the target node which generated the event. During this phase, the event is transferred through the DOM chain passing through every node which is the parent of the target event.

Generally when event handlers are added to HTML code, they are not triggered during the event capture phase unless it is explicitly specified. We can do this while registering an event handler. Consider the follow code:

<div id="div1">
    <button id="button1"></button>
</div>

const divElement = document.getElementById("div1");
const buttonElement = document.getElementById("button1");

divElement.addEventListener(<eventname>, <callback>, {capture: true});

The following piece of code will fire the callback function during the event capture phase. This means that the callback function is executed even before the event has reached the buttonElement.

Event Target

The event.target is the innermost DOM element which caused the event to be fired. Since an event is captured and bubbled up, it is important to know the value event.target holds.

In javascript, an event is also an object which is propagated through the DOM tree. This object holds 2 important values:

event.target: This is the target element that caused the event. Its value doesn't change no matter where in the DOM tree the event resides currently.
event.currentTarget/ this: This is the element that currently contains the event. It can be either the during capture phase or bubble phase. It's value changes based on which element is currently having the event in possession.

source

Event Bubbling

Once the event has reached its target(event.target), the same event starts bubbling up the DOM tree. Any event handlers attached to the event will be now triggered by default. Note that, all the event handlers attached to the elements in the DOM tree will be triggered.

const divElement = document.getElementById("div1");
const buttonElement = document.getElementById("button1");

divElement.addEventListener(<eventname>, <callback2>);
buttonElement.addEventListener(<eventname>, <callback1>);

When the corresponding event attached to the listeners is triggered, both the callback functions will be executed in the following order: 1. callback1 2. callback2

To sumup the whole flow of event propagation, consider the following code:

const divElement = document.getElementById("div1");
const buttonElement = document.getElementById("button1");

divElement.addEventListener("click", alert(Capture: Div), {capture: true});
buttonElement.addEventListener("click", alert(Capture: Button), {capture: true})

divElement.addEventListener("click", alert(Bubble: Div));
buttonElement.addEventListener("click", alert(Capture: Button));

When the click event is fired on the button, the following alerts are fired in the given order:

alert(Capture: Div)
alert(Capture: Button)
alert(Bubble: Button)
alert(Bubble: Div)

Note that, the event is only propagated until the target element which caused the event to be fired. If the user clicked on the div instead of button, only the event handlers attached to the div will be executed, in the following order:

alert(Capture: Div)
alert(Bubble: Div)

Overriding browser defaults

The default behavior of the event lifecycle includes capture, target, and bubble-up, however, these behaviors can be overridden with the builtin methods given by javascript.

stopPropagation(): event.stopPropagation() will stop the event from bubbling up the DOM tree. When one of the child elements handling the event uses stopPropagation, the event stops and the parent element will no longer handle the event. stopPropagation while useful, can be a double-edged sword. Sometimes events such as load are fired at the page level, and it is good not to stop its propagation.

const divElement = document.getElementById("div1");
const buttonElement = document.getElementById("button1");

divElement.addEventListener("click", alert(Bubble: Div));
buttonElement.addEventListener("click", function(e){
    alert(Capture: Button));
    e.stopPropagation();
}

Since stopPropagation() is used, only alert(Bubble: Button) method will be executed.

stopImmediatePropagation(): If multiple event handlers are attached to the same event, the handlers are called in the order in which they are registered. event.stopImmediatePropagation() prevents other listeners of the same event from being called.
preventDefault(): Certain events like radio/checkbox clicks, input keypress, performs default action. event.preventDefault() will stop the default behaviour. This is generally used to build controlled forms in libraries such as ReactJS

<form>
  <label for="checkbox1">Checkbox:</label>
  <input type="checkbox" id="checkbox1"/>
</form>

const checkBoxElement = document.getElementById("checkbox1");

checkBoxElement.addEventListener("click", function(e){
    e.preventDefault();
}

In the above example, event.preventDefault() will prevent the checkbox from even being in checked state by user clicks. PreventDefault works only if the event is cancelable, to check whether an event is cancelable, use event.cancelable

It is important to understand the direction, timing, and purpose of events to perform better event handling in webpages. I hope this article provided all the information you needed regarding event propagation.

DOM: Javascript's primary use

aparnajoshi.88@gmail.com — Sat, 16 May 2020 00:00:00 GMT

Document Object model: An introduction

A Document Object Model(DOM) is an interface which provides a set of utilities to manipulate XML and HTML documents. Before providing any functionalities to modify DOM, it converts HTML and XML files into tree of objects.

Consider the following snippet:

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>Header</h1>
        <div id="div1">
            <p>paragraph</p>
        </div>
    </body>
</html>

Its corresponding document tree can be represented as:

You can see that all the elements present in the HTML code have been converted into a tree. Individual tags, attributes, and text used in HTML act as the nodes of that tree. The Document Object Model contains several types of nodes:

Document which is the root node of all XML (HTML) documents.
Element which represents a tag
Attr which is a key-value pair representing an attribute key and its corresponding value for a tag.
Text which represents the content of a node.
Comment which represents XML/HTML comments.

Every node present on this DOM tree contains a list of properties. You can obtain this list from MDN

Access and Modify Nodes:

The DOM is essentially an Object-oriented representation of the web-page and hence it can be modified with any scripting language such as Javascript. Before understanding how to manipulate the DOM, we need to understand the different ways of accessing each node:

document.getElementById(id: string): This returns an element and all the children inside the element. Note that the id used in the HTML elements must be always unique.
document.getElementsByClassName(classname: string): This returns a HTMLCollection containing all the elements matching the classname attribute. The classname attribute is usually repeated across the elements.
document.getElementsByName(name: string): This is similar to getElementsByClassName, but returns the NodeList matching the name attribute.
document.getElementsByTagName(tag: string): This returns a HTMLCollection containing all the elements of the given tag.
document.querySelector(selector): This returns the first element matching the given selector. The selector can be an id(#id), classname(.classname), or a tag(li).
document.querySelectorAll(selector): This returns a NodeList containing all the elements matching the selector.

Note that these queries can be used for any part of the node selected from the HTML document. The queries don't need to be made only on top of the document object.

const wrapperElement = document.getElementsByClassName('some-class');
const paraElement = wrapperElement.getElementsByTagName('p');

Getting and Setting Attributes:

The getAttribute, setAttribute, and removeAttribute methods can be used on an element to manipulate the attribute values.

// Consider the following element:
<img id="title" class="old-class" />

const element = document.querySelector('#title');
const classAttr = element.getAttribute('class'); // old-class
element.setAttribute('class', 'new-class'); // <img id="title" class="new-class" />
element.removeAttribute('class'); // <img id="title" />

Create, Modify, and Replace Nodes:

The HTML nodes can be created and appended to an existing DOM. An existing node element can also be removed or replaced with a new node. Consider the following example:

<div id="div1">
    <span>text</span>
</div>

// Create and append to an existing node
const p = document.createElement("p");
const text = document.createTextNode("text1");
p.appendChild(text);

const element = document.getElementById('div1');
element.appendChild(p);

// Replace an existing node
const element = document.getElementById('div1');
const oldChild = element.firstChild;
const span = document.createElement("span");
const text = document.createTextNode("text1");
span.appendChild(text);
element.replaceChild(span, oldChild);

// Remove an existing node
const element = document.getElementById('div1');
const childElement = element.firstChild;
element.removeChild(childElement);

Events on Nodes:

One of the important uses of DOM is to capture user-generated events and handle them. This includes user inputs, clicks, scrolls, drag-drop, etc. To capture and handle the events, we should first attach an event handler to an element. This event handler will take a callback function which will be executed when the event is fired. This function can be used to handle the event, set data, or make any API calls.

There are several types of user-generated events which can be handled:

Mouse Events: click, dblclick, mousedown, mouseup, mouseout, mouseover, mousemove.
Keyboard Events: keydown, keyup, keypress.
DOM Events: DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved.
HTML Page Events: load, unload, abort, error, resize, change, submit, reset, scroll, focus, blur.

Consider the following example:

<button id="button1">
    <span>Click me</span>
</button>

const button = document.getElementById('button1');
button.addEventListener('click', handleClick);
function handleClick(event) {
  console.log('This button is clicked');
}

This represents the easiest way of adding an event listners and handling those events. Note that there are several javascript libraries (JQuery, ReactJs, AngularJs, VueJs) out there and each provides their way of capturing and handling events.

Javascript's ABC: Apply, Bind and Call

aparnajoshi.88@gmail.com — Fri, 15 May 2020 00:00:00 GMT

The need for Apply, Bind and Call in Javascript

Functions in javascript are nothing but objects, and hence every function has this parameter. They also come with a set of built-in methods, including Apply, Call, and Bind. Before deep-diving into the uses and application of these methods, one should understand the concept of this in javascript. this in javascript generally holds the context in which the function is being executed, and the Apply, Call, and Bind methods helps us to modify this context. In this article, we will learn about the application of these methods and the different scenarios in which these methods would come in handy.

source

Applications of Bind method:

We use the Bind() method in javascript to call a function with the value of this set explicitly. The Bind() method allows us to specify which object will be bound to this when a function is executed. This might seem unnecessary since the value of this is usually set when a method is executed, however, in certain contexts this object might not be the same as what is expected, and we need to explicitly bind its value to a particular object type.

Let's consider the following example: Callback functions

var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    fullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}

setTimeout(person.fullName, 1000); // undefined undefined
setTimeout(person.fullName.bind(person), 1000); // Jensen Ackles

There are several more cases when bind is used to fix the calling method's context:

Callback functions in event handlers: User-generated events are usually handled by passing a callback method as an event handler. Refer to the following link to understand how bind works inside a callback function : JSFIDDLE LINK

Usually, when callback methods are executed, they are executed on top of a global variable (window in case of the browser). Hence, the context of this changes to global scope(to know more click here). When a bind method is used, it fixes the context of the function permanently, preserving the values of the object upon which the function should operate on.

Borrowing methods: This context of a method also changes when it is borrowed from another object. We can use bind to set the value of this to the object of interest.

Applications of Apply and Call:

Apply and call methods work similar to each other, with a slight variation in the syntax. They are usually used to borrow functions temporarily from one object to another. Consider the following example:

var person1 = {
    firstName: "Jensen",
    lastName: "Ackles",
    showFullName: function (message) {
        return message + " " + this.firstName + " " + this.lastName;
    }
}

var person2 = {
    firstName: "Dean",
    lastName: "Winchester",
}

person2.fullName = person1.showFullName("Hello");
console.log(person2.fullName); // Hello Jensen Ackles - this refers to person1 object
person2.fullName = person1.showFullName.apply(person2, ["Hello"]); 
console.log(person2.fullName); // Hello Dean Winchester - this refers to person2 object
fullName = person1.showFullName.call(person2, "Hello"); // Hello Dean Winchester - this refers to person2 object

Apply is usually used when a method operating on an array must be executed in a given context.
Call is used when a limited set of parameters are to be supplied to a function to be executed in a given context.

Apply, Call, and Bind methods are one of the oldest feature addition to javascript, and they are still used in the modern-day javascript programming. Even the most powerful libraries such as ReactJs make use of bind when defining functions on its classes.

Javascript understanding `this`

aparnajoshi.88@gmail.com — Wed, 13 May 2020 00:00:00 GMT

Javascript's this and that, and few others:

The this keyword in javascript is perhaps the most ambiguous thing to follow through when we are writing code. It sometimes confuses even the most experienced javascript developers. This article aims at explaining all the concepts related to this in javascript, especially the parts were understanding the mechanism of this becomes tricky. Sit back and enjoy the journey.

this in javascript is used similarly to how pronouns are used in the English language. Usually, we write "Jensen is studying javascript because he wants to learn web development". In the given example, note the usage of pronoun he to refer to John. The pronoun he acts as a referent to the person John. Similarly in Javascript, the keyword this acts as a referent to the object which is being executed in the current context.

source

Consider the following example:

 var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    fullName: function () {
        //using this
        console.log(this.firstName + " " + this.lastName);
        // using object name
        console.log(person.firstName + " " + person.lastName);
    }
}

person.fullName();

In the following code both this and person works, however, using the keyword this to refer to object is favored for two reasons:

A global object with the same name person could be present, and the code might try to access the global object.
Sometimes the name of the object is not known to the code which is executing it, this keyword simplifies it by bringing in the reference to the object which holds the current context.

Note that, this keyword can be used globally, however, in strict mode, this holds the value of undefined in global functions and in anonymous functions that are not bound to any object.

Basics of `this`: Clarifying misunderstandings

All javascript functions have properties, just like objects contain properties. Whenever a function is executed, it gets this property assigned to it with the value of the object that invokes the function. The property this ALWAYS holds the reference to the object, and it is usually used inside the function to access the properties and methods on the object.

If we consider the above example, the fullName function is executed from the object person. The property this used inside the fullName function now refers to the object person.

Big principle: The biggest concept to understand about the property this is the fact that, the value of this is not assigned until an object invoked the function. Even though it appears as if the value of this should be equal to the value of the object inside which the function is defined, that is not true. Until an object invokes the function where this is used, the value is not assigned, and the value of this is equal to the value of the object invoking the function in most circumstances. However, there are certain exceptional scenarios when this doesn't have the value of the invoking object, and these scenarios will be explained later.

This in global scope:

The value of this as explained earlier contains the value of the invoking object. In the global scope, the code is executed in the browser, and all global variables and functions are defined on the window object. Therefore, when this is used inside global functions, it holds the value of window object. Consider the following example:

var firstName = "Dean";
var lastName = "Winchester";
function showFullName() {
    console.log(this.firstName + " " + this.lastName);
}

var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    showFullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}

showFullName (); // Dean Winchester - this refers to global window object
window.showFullName (); // Dean Winchester - this refers to window object
person.showFullName (); // Jensen Ackles - this refers to person object

The context of `this` can be changed

Though we said that the value of this usually holds the value of the object which invokes the function, it can be changed in many scenarios. The common scenarios when the value of these changes are:

Borrowing a method that uses this
Assign a method that uses this
Callback function using this.
this used inside a closure.

Let's look at an example which demonstrates the possibility and then tackle different scenarios where value of this acts differently:

var person1 = {
    firstName: "Jensen",
    lastName: "Ackles",
    showFullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}

var person2 = {
    firstName: "Dean",
    lastName: "Winchester",
}

person1.showFullName (); // Jensen Ackles - this refers to person1 object
person1.showFullName.apply(person2); // Dean Winchester - this refers to person2 object

You can see how the value of this changed simply because we used to apply and forced the context of this to person2

`this` when borrowing methods:

Borrowing methods is a common practice in javascript development. Sometimes methods are defined in a different object, and we would want to use it on our object without repeating the code. Considering the above example:

var person1 = {
    firstName: "Jensen",
    lastName: "Ackles",
    showFullName: function () {
        return this.firstName + " " + this.lastName;
    }
}

var person2 = {
    firstName: "Dean",
    lastName: "Winchester",
}

person2.fullName = person1.showFullName();
console.log(person2.fullName); // Jensen Ackles - this refers to person1 object
person2.fullName = person1.showFullName.apply(person2); 
console.log(person2.fullName); // Dean Winchester - this refers to person2 object

Using apply during the execution of the method, and providing the object on which this value must be set will fix the problems when borrowing methods.

`this` when a method is assigned to a variable:

The value of this gets assigned to the context of a different object when we assign a method that uses this to a variable:

var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}

var showFullName = person.fullName;
console.log(showFullName()); // undefined undefined

Instead of getting the value "Jensen Ackles", we got "undefined undefined". This is because, when the method was borrowed, its context is not set to the global variable. Since the global window object doesn't contain the value of firstName and lastName, they are printed as undefined. To fix this problem, we can set the value of this to a particular object indefinitely using bind:

var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}

var showFullName = person.fullName.bind(person);
console.log(showFullName()); // Jensen Ackles

`this` when used inside a method as a callback:

The value of this goes out of context when it is used in a function provided as a callback:

var person = {
    firstName: "Jensen",
    lastName: "Ackles",
    fullName: function () {
        console.log(this.firstName + " " + this.lastName);
    }
}

setTimeout(person.fullName, 1000); // undefined undefined

The above code works similarly to how the context of this changes when it is assigned to a variable. One can assume that the setTimeOut function has a variable that takes the function as a parameter, and then it executes on the global object. Since the global object doesn't contain the definition to firstName and lastName, the value is printed as undefined.

To fix this, we need to bind the value of this to the object on which it should be applied. This is a pattern most commonly seen when we are defining callback functions to the javascript events.

setTimeout(person.fullName.bind(person), 1000); // Jensen Ackles

`this` when used inside a closure:

Another instance when the value of this is misunderstood is when this is used inside closures.

var person = {
    fullName: "Jensen Ackles",
    getDetails: function () {
        var closureFunction  =  function() {
            console.log(this.fullName); // undefined
            console.log(this); // global window object
        }
        closureFunction();
    }
}

person.getDetails();

The value of this doesn't refer to the person object, rather it refers to the global window object. We have two ways of mitigating this problem:

1. Assign the value of this to an explicit variable, and then use that variable to access the properties.

var person = {
    fullName: "Jensen Ackles",
    getDetails: function () {
        var personObj =  this;
        var closureFunction  =  function() {
            console.log(personObj.fullName); // Jensen Ackles
            console.log(personObj); // person Object
        }
        closureFunction();
    }
}

person.getDetails();

2. Use arrow function provided by **ES6: Arrow function preserves the context of this.**

var person = {
    fullName: "Jensen Ackles",
    getDetails: function () {
        var closureFunction  = () => {
            console.log(this.fullName); // Jensen Ackles
            console.log(this); // person Object
        }
        closureFunction();
    }
}

person.getDetails();

This article has aimed at providing a detailed understanding of how this is used in javascript and has warned about the pitfalls which can be avoided while using this. Using javascript's apply, call, bind and arrow functions, we can control the value of this to meet our needs. As a final note, please remember that the value of this is usually the object on which the function is called.

Object-Oriented programming with Javascript

aparnajoshi.88@gmail.com — Tue, 12 May 2020 00:00:00 GMT

OOPS in Javascript: Why it is required?

The object-oriented programming refers to a paradigm in which structured, reusable pieces of code called objects are created, and its functionalities are borrowed by several other pieces of code. In most of the traditional programming languages, object-oriented programming is implemented with the help of Class. In Javascript, however, OOP is implemented using Function (Usage of ES6 provides class model too, more on that later). Prerequisites:

In javascript objects are the building blocks of our application. Everything translates into an object (Functions, Arrays, Strings, Objects). Since javascript already provides the prototype attribute on every object, using this object-oriented programming can be achieved in javascript. On top of this, ES6 has now introduced a new way of implementing OOP in Javascript.

The 3 main valuable techniques object-oriented programming provides us are

Inheritance: Objects can inherit methods and properties from other objects
Encapsulation: Every object is responsible for handling a complete set of functionalities. Meaning, the object holds data and methods encapsulated inside it to perform all the operations required.
Polymorphism: Objects can share the same interface, however, the way they are accessed defines its underlying functionality.

In javascript, Inheritance and Encapsulation are the two techniques that can be used under the hood of Object-oriented programming. This article will aim at explaining two ways in which OOP can be achieved in javascript.

Function-based inheritance and encapsulation

In the function-based inheritance, we define a constructor function and add the properties(methods and objects) which can be inherited by other constructors. Each constructor function contains all the private methods and variables, along with added inheritable properties to perform a given set of operations. The following code shows how object-oriented programming can be achieved using constructor methods.

function Vehicle(name, cost, engineType) {
    this.name = name || '';
    this.cost = cost || 0;
    this.engineType = engineType || 'petrol';

}

Vehicle.prototype = {
    constructor: Vehicle,
    getEngineType: function ()  {
        return this.engineType;
    },
    calculateEmi: function ()  {
        return this.cost * 0.12;
    },
    setEngineType: function (type)  {
        this.engineType = type; 
    }
}

var vehicle1 = new Vehicle('Lamborghini Gallardo', 20000, 'petrol');
console.log(vehicle1.getEngineType()); // petrol
vehicle1.setEngineType('diesel');
console.log(vehicle1.getEngineType()); // diesel

The above example demonstrates just the encapsulation part of object-oriented programming. The constructor function Vehicle has relevant properties and methods defined to work with its data. Let's use this constructor function to inherit its methods in another object and then go through all the pieces of code.

function Car(model, hasFuel, color, name, cost, engineType ) {
    this.model = model || '';
    this.hasFuel = hasFuel || false;
    this.color = color || '';
    this.name = name || '';
    this.cost = cost || 0;
    this.engineType = engineType || 'petrol';
}

Car.prototype = new Vehicle();
// Car.prototype = Object.create( Vehicle.prototype );
// This works too
Car.prototype.constructor = Car;

var lambo = new Car('gallardo', true, 'yellow', 'Lamborighini', 20000, 'petrol');
console.log(lambo.calculateEmi()); // 2400

The inheritance is created in the following ways:

The Vehicle constructor function is created and it contains a list of properties on its object.
The Vehicle constructor function has sharable methods added to its prototype.
The Car constructor function is created which contains a list of properties on its object.
The prototype of Car is pointed to the instance of Vehicle constructor function. This can be done in several ways, two of the most common ones are highlighted here:
```
Car.prototype = new Vehicle();
Car.prototype = Object.create( Vehicle.prototype );
```
The prototype of Car is overriden, and prototype.constructor now points to Vehicle constructor function.
```
Car.prototype.constructor = Car;
```
This line of code sets the prototype.constructor back to Car constructor function.
The new object created using the Car constructor function contains all the properties and methods present on the Vehicle constructor function.
lambo.calculateEmi() calls the function defined on Vehicle.prototype, the value of this now points to the context of lambo object.
```
calculateEmi: function ()  {
    return this.cost * 0.12;
}
```
In this method this.cost is now equal to lambo.cost. The cost is calculated and returned.

One can notice that the assignment to the properties used in the Vehicle object is repeated in the Car object when we use the prototype for inheritance. There is another alternative method which works in a similar way to implement functional inheritance.

function Car(model, hasFuel, color, name, cost, engineType ) {
    this.model = model || '';
    this.hasFuel = hasFuel || false;
    this.color = color || '';
    Vehicle.call(this, [name, cost, engineType]);
}

var lambo = new Car('gallardo', true, 'yellow', 'Lamborighini', 20000, 'petrol');
console.log(lambo.calculateEmi()); // 2400

In the above example, instead of assigning the Car.prototype object to a new Vehicle instance, we are calling the Vehicle constructor inside our Car constructor function, passing the reference of this. To understand how Function.call(this, [...args]) work, please refer to : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

When a new object lambo is created, both Car and Vehicle are instantiated in the context of lambo. Hence all the properties present on the constructor function are now accessible to the object lambo.

Class-based inheritance and encapsulation: ES6

In the Class-based inheritance, we use the class keyword provided by ES6. The class contains a constructor function where the variables are initialized. It also contains shared methods that behave similarly to the methods added to the prototype. The following code shows how object-oriented programming can be achieved using ES6 Class.

class Vehicle {
    constructor(name, cost, engineType){
        this.name = name || '';
        this.cost = cost || 0;
        this.engineType = engineType || 'petrol';
    }

    getEngineType()  {
        return this.engineType;
    }

    calculateEmi()  {
        return this.cost * 0.12;
    }

    setEngineType(type)  {
        this.engineType = type; 
    }
}

class Car extends Vehicle{
    constructor(model, hasFuel, color, name, cost, engineType) {
        super(name, cost, engineType);
        this.model = model || '';
        this.hasFuel = hasFuel || false;
        this.color = color || '';
    }
}

var lambo = new Car('gallardo', true, 'yellow', 'Lamborighini', 20000, 'petrol');
console.log(lambo.calculateEmi()); // 2400

This example is a replica of the above example demonstrated. However, it is implemented using class. Let's go through the code and see what's happening.

The class Vehicle is created. ES6 provides a separate function called constructor which acts as the constructor function for the given class. If no constructor is defined, this will be an empty function.
The sharable methods are added to this Vehicle class.
The class Car is created. ES6 provides a function super which can be used to invoke the parent function. This is quite similar to using Car.prototype = new Vehicle(). It calls the parent function's constructor.
The new object lambo is created which contains all the properties of Car and Vehicle. When lambo.calculateEmi() is called, it accesses the method present in the Vehicle class and gives the result.

To fully understand the concept of inheritance and implement it without running into any pitfalls, the concept of this must be mastered. This article has aimed at demonstrating some of the popular methods of implementing OOP in javascript and I am hopeful you understood at least the general concepts. Please use these patterns in your JavaScript applications and Happy coding.

Javascript Prototype: Inner workings of Objects

aparnajoshi.88@gmail.com — Mon, 11 May 2020 00:00:00 GMT

Javascript Prototype: First detailed look into objects

Prototype is an attribute every object contains in javascript (unless the object is created using Object.create(null)), however, its inner workings are known to very few. Understanding how the prototype attribute gets assigned is an important concept, using which inheritance can be applied in javascript. Before understanding the prototype, you must know some basic principles and usage of objects. If you aren't familiar with objects, please read my article Basics of javascript objects. In this article, we will deep dive into how prototypes are assigned during object creation, and why this is important.

source

What is the prototype property and what does it contain?

Every javascript constructor function, created using any of the methods available, contains a property. This is the prototype property. It is important to note that, the prototype property is an object in itself.

The prototype property of the constructor function can be used to access/modify the methods, and other properties present in the prototype object which was assigned during its creation.
Every prototype object has a property called constructor. This property points to the Constructor Function itself.

Lets see an example to understand this better:

function Name(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = firstName + " " + lastName
}

var jensen = new Name("Jensen", "Ackles");
console.log(jensen);

If I try to access this console.log, which contains all the properties of the object jensen, we get the following result.

This is how things have worked so far:

Name is a constructor function. It contains the prototype property.
This prototype property has an attribute called constructor which points to Name constructor function itself. Any further attributes can be added to this property.
When the new object jensen was created using the Name constructor, this object got access to all of the properties belonging to Name function, including its prototype.
The prototype of the Name constructor function can be accessed from the new object jensen using __proto__ object.
Since prototype itself is an object, it also contains a prototype attribute. This is how the prototype chain is created.

Several browsers have added support to accessing the constructor function's prototype through the __proto__ object. Even though it's not recommended in javascript programming(This feature is non-standard and might not work as expected in all the browsers), it can be used to check the workings of prototype chain quickly during development.

Another alternative to __proto__ include Object.getPrototypeOf() or objectInstance.constructor.prototype. If you consider the above example, it can be used in the following ways to access the same prototype property:

Object.getPrototypeOf(jensen);
jensen.constructor.prototype;

Prototype chain

When an object is created, it is usually created from some constructor function. If none of the user-defined constructors were used, it means that the object was created using the javascript's Object Constructor. This implies that any object created is ultimately inherited from the javascript's Object constructor.

Let's look at the following object created, and see what their __proto__ object contains.

function Fruit() {
    this.value = 10;
    this.quantity = 35;
}

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype = new Fruit();

var apple1 = new Apple("Apple", "Red");
console.log(apple1);

If we inspect the inner properties of the object apple1, we can observe the following:

The object apple1 contains two main properties - name and color. These properties have the same value which was assigned to them during its creation.
The __proto__ property of the object apple1 points to the instance of the Fruit object. This, in turn, contains two more properties value and quantity.

If we inspect the __proto__ property of the Fruit instance, we see that it ultimately points to the prototype of the javascript's Object.
When a property is not present directly on an object, javascript moves up the prototype chain to find the property in its immediate prototype. Much like the javascript's scope chain, the prototype chain also goes up the ladder until Object.prototype is reached.

Uses of Prototype: Inheritance and Built-in methods

The Prototype is widely used in javascript to implement inheritance. Traditionally javascript was used only for scripting, and it had no requirement to provide object-oriented programming features like other languages. However, the concept of the prototype can be used to inherit methods and properties from one constructor function to another.

Consider the following example:

function Fruit() {
    this.value = 10;
    this.quantity = 35;
}

Fruit.prototype.setValue = function(value) {
    this.value = value;
}

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype = new Fruit();

var apple1 = new Apple("Apple", "Red");
apple1.setValue(20);

console.log(apple1.name); // Apple
console.log(apple1.value); // 20
console.log(apple1.quantity); // 35

In the above example, even though the new object apple1 doesn't have the properties value and quantity, we are still able to access them. Point to be noted that the setValue method added on the prototype property of Fruit constructor is also accessible through the object apple1. This is how inheritance is implemented in javascript.

When objects are created using any constructor, it comes along with certain inbuilt methods that can be applied to the object. hasOwnProperty (), isPrototypeOf (), propertyIsEnumerable (), toLocaleString (), toString (), and valueOf (). are some of the built-in methods which are readily available to all the objects. This is because all objects in JavaScript inherit properties and methods from Object.prototype.

All built-in Constructors such as Array(), Number(), String(), etc were all created from javascript's Object constructor, and their prototype is also assigned to Object.prototype. I

Problems with prototypes

Prototypes in javascript have a lot of uses, it is used for inheriting the methods of parent functions, it can be also used to abstract the data layer and expose only the getter and setter methods to manipulate values belonging to various Objects. However, prototypes have its drawbacks. All the properties added on the prototype object is common to every instance of the object that is created using its constructor Function. Any change in one of the properties will be reflected in all the objects.

Consider the following example:

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype.value = 20;

var apple1 = new Apple("Apple", "Red");
var apple2 = new Apple("Apple2", "Wheatish Red");

console.log(apple1.name); // Apple
console.log(apple1.value); // 20
console.log(apple2.value); // 20

Apple.prototype.value = 40;
console.log(apple1.value); // 40
console.log(apple2.value); // 40

apple1.value = 30;
console.log(apple1.value); // 30
console.log(apple2.value); // 40

In the above example, changes made directly on the constructor's prototype was reflected in all its objects, however, when the property value inside the object apple1 is changed, it doesn't reflect in the other objects. This is because apple1 has now created its own property value, and from this instance onwards apple1.value will always be referenced to its own property value and not the inherited property.

To mitigate this issue, a combination of Constructor - Prototype pattern can be implemented. The data values belonging to the object can be kept private and unique using the Constructor function. The common methods which can be shared among all the objects to manipulate data can be added to the Prototype object.

I hope this article was able to provide a detailed overview of the prototype property and its uses. If you have any questions regarding the concepts described in the article please feel free to reach out to me.

History of Universe: Events that unfolded in first few seconds

aparnajoshi.88@gmail.com — Sun, 10 May 2020 00:00:00 GMT

A brief history of the Universe

For the longest period, scientists believed that the universe was infinite and ageless. In other words, we all believed that the Universe had no beginning, and all the planets, galaxies, and stars moved around a huge infinite space that never changed. However, these assumptions changed quickly when physicists started discovering X-rays, electrons, and radioactivity. They couldn't explain how these particles came into existence with the existing model. However, the answers to these questions and the beliefs around the origins of the universe all came to change in the mid 20th century. This article gives us a brief overview of the history of the universe, and the evidence which supports them.

Theory of Relativity disproving Newtonian laws

In 1915, Albert Einstein put forward the Theory of relativity, which describes the universe as a 4-dimensional entity, having space and time are linked with one another called Space-Time. It also explained that gravity warps the space-time around it, creating a bend/change in the way space and time behave in the universe.

source

Considering this picture, one could say that the Earth orbits around the sun because it is caught in the space-time bend caused by the sun’s mass. Einstein also gave another important piece of formula which changed the way we believed the universe was formed. Einstein said that, if the whole universe was a never-changing infinite space, this static universe would eventually collapse under its gravity. Unless there was an external force that pushed it apart. This constant force keeping the universe stable under the forces of gravity was introduced in the theory of relativity as a Cosmological constant.

Hubble's observations strengthened the idea of an ever-expanding universe, while cosmic radiations proved that the universe had a beginning.

In 1929, Edwin Hubble observed that the stars and galaxies were expanding. The lights emitted by these stars and galaxies showed a redshift, proving that they are moving away from one another. This eliminated the need for Cosmological constant. However, paved a way to the new theory which explained the origins of the Universe.

source

A few decades later, in 1964, cosmic background radiation was discovered by accident. This is a relic of the early universe. Cosmic radiation is simply the electromagnetic waves that were produced nearly 13.8 billion years ago, traveling through the universe. It is present everywhere in the universe like a background. The cosmic radiation is completely uniform --- talk more

source

With the observations from Einstein and Hubble, and the data given by the cosmic radiation, scientists around the world widely accepted the theory called the Big Bang Theory, which says that the universe had a beginning and it was suddenly born out of a big bang. Since this theory was put forward, multiple observations and simulations conducted using the latest technologies like hubble's telescope, and particle accelerators, has given a pretty good picture of how the universe was formed after the big bang.

The first moments of the universe: Speculations that are not well supported

Nearly 13.8 billion years ago, the universe started its formation. Most of the things about the earliest period of the universe is still a mystery to us. Since we know that the universe is expanding, it is fair to say that in the past(I mean nearly 13.8 billion years ago), the universe was much denser, and hotter. A lot of what we understand about the early universe comes from the experiments performed in the particle colliders. When the universe was very small, various particles were colliding into one another at high speed, forming other subatomic particles in the process. This is what the particle colliders simulate.

The universe at the beginning of time was completely different from what it is today. This is because, when more energy and higher temperatures are pumped into the matter, its fundamental physical form itself changes. The amount of energy and heat present during the beginning of the universe was so high that the matter couldn't stabilize itself, so much so that even the protons and neutrons didn't exist. The fundamental forces that we know today, such as gravity, electromagnetism, strong and weak nuclear forces dint exist. Instead, they were all combined into a unified force.

If we try to travel back and analyze the behavior of the universe, so far back, which is equivalent to the instant of the big bang, the moment when the time was zero, our laws of physics cannot explain what happened in the first 10 to the power -43 seconds. However, what happened after that fraction of a second is better understood.

The first 3 minutes of the universe: Subatomic particles coming into the picture

source

Initially, the universe expanded and started cooling down. The forces which were combined into a unified super force separated. The very first subatomic particles were able to stabilize themselves. All of this happened in the very first second after the big bang. Three minutes later, the universe cooled enough so that the subatomic particles could stick together.

In the next 17 minutes, the universe made atoms. During this state, the universe was still very hot, its temperature equal to that of the core of a star. But it is at these temperatures that nuclear fusion can occur. For the first few minutes, the subatomic particles collided against each forming protons and neutrons which later started combining to for the nuclei. At around T+20 minutes, the universe cooled enough so that the fusion could be stopped. At this point, the universe is hotter than the surface of a star, however, the expansion and cooling continued.

Age - 380000 years: Recombination, the first light in the universe

source

The universe remained in a soup of nuclei for nearly 380 millennia. Up until this point, electrons couldn't bind themselves with the atomic nuclei. Every time the electrons would try to bond, the temperature was so hot that the nuclear forces couldn't hold them together. The Universe was completely ionized. But now, the universe had cooled enough that the electrons could combine with the nuclei becoming stable neutral atoms for the very first time. This is an important event in the history of our universe, not only did the universe form stable atoms, but the free electrons, which observes the protons and makes the universe opaque were no longer present. This allowed the protons to travel through the universe, making the universe transparent.

The light emitted during this time is what makes the Cosmic background radiation. The neutral atoms which were formed started emitting light(proton), which has been traveling ever since. This radiation is extremely important as they tell us the state of the universe not long after it was formed. The cosmic radiation looks uniform throughout our universe. It looks smooth, which tells us that the matter and temperature were evenly distributed everywhere around the universe. The radiation coming from nearly opposite sides of the universe, which are very far from one another, having eons of time to completely change, also show the same evenness. This tells us that something occurred during the beginning of the universe which forced the cosmic radiation to distribute evenly.

Inflation: Introduction of dark matter and dark energy

In 1981, Alan Guth proposed new addition to the big bang theory. He suggested that, at some point in time, the space in the universe inflated so fast, increasing the size of the universe by a hundred trillion trillion times. Inflation explains why the universe was smooth at the time of recombination. Space had expanded so rapidly that any lumps of matter or energy got smoothened out. But what could have caused this inflation to occur? Physicists introduced a new theory to explain this strange occurrence, the existence of dark matter and dark energy. Even today, we cannot fully measure and understand the behaviors of dark matter and energy, however, through the gravitational observances, we know that they exist.

The formation of very first stars

At the time of inflation, there were minute perturbations, which got stretched out to macroscopic size. These denser spots eventually grew more and more, their gravity attracting matter, eventually condensing and forming the very first stars, nearly 400 million years after the big bang. These eventually became galaxies and clusters of galaxies.

There are still many unanswered questions in the understanding of cosmology. What is dark energy? What was the role of dark matter in the early universe? Where did the initial hot dense plasma state of matter in the universe come from? Do we have more than one universe? What existed even before the big bang happened? We still don't know the answers to these questions, however, with constant advancement in the field of science, one day we might be able to answer these questions.

Basics of javascript objects

aparnajoshi.88@gmail.com — Sat, 09 May 2020 00:00:00 GMT

Javascript Objects at a glance

Objects are the most fundamental data type present in javascript. Javascript has two types of data. The primitive data type is the immutable data types whose data is stored as values. In other words, any variable holding value of the primitive data type will always have its memory allocated. Number, String, Boolean, undefined, and null are the primitive data types in javascript. In this article, we will understand some basic concepts related to objects and how they can be created and used.

What are objects? An object is a list of items that are stored in the form of key-value pairs. The value stored in the object can be of any valid type in javascript. The keys are usually strings or numbers.

Consider a simple object:

var simpleObject = { firstName: "Jensen", lastName: "Ackles"};

In this object, firstName and lastName are the keys, and Jensen and Ackles are the values. The keys in an object can be either strings or numbers. When numbers are used as keys, the values must be accessed using bracket notation only.

Data stored by value v/s stored by reference

Before we understand what are objects and how they work, we need to understand how data manipulation works when it is stored by value or stored by reference

var variable1 = "Data1";
var variable2 = variable1;

variable1 = "Data2";

console.log(variable1); //Data2
console.log(variable2); //Data1

Data is always stored by value in primitive types. Due to this, each variable has its memory location allocated, and are distinct from one another, even if they are created through the assignment. Any changes made to one variable, will not affect the other unless a reassignment is made.

var variable1 = { name: "Javascript" };
var variable2 = variable1;

variable1.name = "Java";

console.log(variable1.name); //Java
console.log(variable2.name); //Java

Data is stored by reference in objects. Hence, when a new object is created through an assignment, it refers to the existing object from which the data was copied. Any changes in the first object are reflected in the second one. To mitigate this effect, one can use shallow or deep copying of objects.

Attributes of object data properties

Every value present in the object contains 3 more attributes that define how these property values can be used.

Configurable: Specifies whether a property can be changed or deleted.
Enumerable: Specifies whether the property can be accessed through the for..in loop.
Writable: Specifies whether the property can be changed. These attributes can be used to define certain supporting properties/methods. For example, the array datatype has an inherent length property. However, this is non enumerable, and is often used during array manipulation. Object.defineProperty can be used to set/change these properties.
```
Object.defineProperty( newObject, 'name', {
value: "Jensen Ackles",
writable: true,
enumerable: true,
configurable: true
});
```

Own and Inherited properties of objects

Javascript objects include own properties, as well as inherited properties. Own properties are properties that were defined on the objects, during its creation, or through the assignment. Inherited properties are those which are inherited from the object's Prototype object.

To check whether a property exists on object, in operator can be used.

var name = { fullName : "Jensen Ackles" };
console.log("fullName" in name);  // true - The property is its own property
console.log("lastName" in name); // false - The property doesn't exist
console.log("toString" in name); // true - inherited property

To check whether the object has a particular property as its own, we can use hasOwnProperty method.

var name = { fullName : "Jensen Ackles" };
console.log(name.hasOwnProperty("fullName"));  // true - The property is its own property
console.log(name.hasOwnProperty("lastName")); // false - The property doesn't exist
console.log(name.hasOwnProperty("toString")); // false - inherited property

The enumerable properties associated with an object can be accessed through iteration. for..in loop or regular for loop can be used to access these properties(own/inherited). The ~~non enumerable~~ properties, such as methods inherited from Objects prototype, cannot be iterated.

Primitive ways of creating Objects

Object Literals: The most common and easiest way of creating an object is by using object literal syntax.
```
var movies = {};
var fruits = {
name: "Apple",
color: "red"
}
```
Object constructor: Object constructors can be used to create an object. In this case, we create an empty object and start adding its properties.
```
var movie = new Object();
movie.name = "Memento";
movie.director = "Christopher Nolan";
```

There are two more ways of creating the object, object.create and object.assign. However, these methods are usually used to create an object from an existing object.

Advanced ways of creating Objects

The more programmatic way of creating objects include using either constructor or prototype pattern. Imagine a scenario when an object has certain core property that keeps changing, however, it also requires internal methods to handle and manipulate these properties. Creating a duplicate object consisting of the core properties and methods seems repetitive. Instead, we can use these advanced ways of creating objects and create new objects using a base template(constructor). This is specially used when the same object is used in multiple places. Object inheritance is implemented using these patterns.

Constructor pattern: In the constructor pattern, we can define a function that acts as a constructor, taking in certain properties. The methods common to all the objects created using this constructor can also be defined inside it.

function Fruits (name, color, value) {
    this.name = name;
    this.color = color;
    this.value = value;

    this.getName = function() {
        return this.name;
    }

    this.getValue = function() {
        return this.value;
    }

    this.changeValue = function(newValue) {
        this.value = newValue
    }
}

With the basic constructor in place, we can define/create our own Fruit object with the properties we require anywhere in the code without much repitition.

var apple = new Fruits("Apple", "red", 20);
console.log(apple.getName()); // Apple
apple.changeValue(50);
console.log(apple.getValue()); // 50

Prototype pattern: In this pattern, the initial object is created through a constructor. However, the common methods and properties can be added through the object's prototype property.

function Fruits (name, color, value) {
    this.name = name;
    this.color = color;
    this.value = value;
}

Fruits.prototype.getName = function() {
        return this.name;
    }
Fruits.prototype.getValue = function() {
        return this.value;
    }

We can call the constructor this same way as before. The functions added to the prototype acts as a common function shared between all the objects created using this constructor.

var mango = new Fruits("Mango", "Yello", 70);
console.log(mango.getName()); // Mango
console.log(mango.getValue()); // 70

Accessing properties of an Object

Dot Notation: The most common way of accessing object properties is through dot notation. We use a .(dot) followed by the property name to access its value. Point to be noted that this type of access works only if the property names(keys) are strings without any space.
```
var fruits = {
name: "Apple",
color: "red"
}
console.log(fruits.name); // Apple
console.log(fruits.color); // red
```
Bracket Notation: The most preferred way of accessing object values are through bracket notation. This also confirms uniformity and provides access to all types of keys which can be used in objects. Numbers, string (with or without spaces), even variables containing object property name can be used in this notation.
```
var fruits = {
name: "Apple",
color: "red"
}
var c = "color";
fruits[1] = "fruit value";
console.log(fruits["name"]); // Apple
console.log(fruits[c]); // red
console.log(fruits[1]); // fruit value
```

Shallow Copying v/s Deep copying

In one of the earlier examples, we saw that the objects can be copied from one variable to another. However, this copy exists only by reference. Physically there won't be two different copies in the variables. There are two more ways of copying objects to avoid this reference during copying.

Shallow Copying: Using Object.assign, shallow copying can be implemented when we only want the outermost level to be copied by value. Objects can be nested, and these nested values will still be stored through the reference.

var fruit = {
  name: "Apple",
  valueSimple: 20
};
var fruitCopy = Object.assign({}, fruit);

console.log(fruitCopy); // { name: "Apple", valueSimple: 20 }
fruit.valueSimple = 50;
console.log(fruit); // { name: "Apple", valueSimple: 50 }
console.log(fruitCopy); // { name: "Apple", valueSimple: 20 }

If the above example had a nested object, the change in value would be reflected in all the objects created using Object.assign.

var fruit = {
  name: "Apple",  
  valueNested: {
      inr: 20
    }
};
var fruitCopy = Object.assign({}, fruit);

console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }
fruit.valueNested.inr = 50;
console.log(fruit); // { name: "Apple", valueNested: {inr: 50 } }
console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 50 } } - Nested value are stored by reference.

Deep Copying: Real-life data might contain multiple levels of nesting. One way to completely copy the object, without any reference is through iteration through all the nested levels and using Object.assign. While this is tedious, we have a simple solution. Object.parse and JSON.stringify.

var fruit = {
  name: "Apple",  
  valueNested: {
      inr: 20
    }
};
var fruitCopy = JSON.parse(JSON.stringify(fruit));

console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }
fruit.valueNested.inr = 50;
console.log(fruit); // { name: "Apple", valueNested: {inr: 50 } }
console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }

Objects are first-class citizens in javascript. Almost all complex data types, including functions, are created from the javascript's Object. Understanding the basics of object creation and usage should certainly help in the long run.

Javascript Closures, Partial functions and Currying

aparnajoshi.88@gmail.com — Fri, 08 May 2020 00:00:00 GMT

Closure and Currying: An Introduction

Closures are important concept javascript programmers should understand in order to write better code. While this concept might not be evident, we use it often without understanding its implications. No matter how much experience you have in writing javascript code, you might have created closures without realizing it.

Before understanding closures, you must have knowledge of the concept of scope in javascript.

The closure is an inner function having access to the outer function's variables and parameters. In other words, the inner function has access to its scope chain. What makes things interesting is that the inner function cannot access the outer function's arguments object. However, it can still access the parameters in the outer function's declaration.

function getFullName(firstName, lastName) {
  var introMessage = "Hello ";
  function getName() {
    return introMessage + firstName + " " + lastName;
  }
  return getName();
}

var message = getFullName("Jensen", "Ackles");
console.log(message); // Hello Jensen Ackles

While this might seem like an obvious piece of code, closures have much greater uses. Before the advent of ES6, Closures were sometimes also used to create an object-oriented pattern in javascript. Callback functions provided in an asynchronous method execution are all closures.

Closure properties

Closures have access to the outer function's context even after the function has finished executing. This is because the variable scope which was available during function creation is maintained throughout, even after the function is executed. This concept can be used to create higher-order functions. Data handling libraries such as Redux, even javascript's array manipulating methods such as map and filter use this pattern.

function getFirstName(firstName) {
  function addLastName(lastName) {
    return firstName + " " + lastName;
  }
  return addLastName;
}

var name = getFirstName("Jensen");
var fullName = name("Ackles");

Closures only have access to outer function's values by reference, and not the actual value itself. This means any change in the outer function's values will be reflected inside the closure. This concept can be further enhanced to implement the object-oriented pattern in javascript.

function secretId() {
  id = 1234;
  return {
    getID: function() {
      return id;
    },
    setID: function(var newId) {
      id = newId;
    }
  }
}

var secretInfo = secretId();
secretInfo.getID(); // 1234
secretInfo.setID(5678);
secretInfo.getID(); // 5678

Partial function application and Currying

A lot of people new to javascript get confused about partial function application and currying. In fact, the concept of partial application is used to create curry functions in javascript. Let us understand what is a partial application and see the difference between partial application and currying

[source](https://pixabay.com/photos/thai-curry-green-curry-curry-chili-1736806/)

Partial function application is a concept in which a function takes multiple arguments, operates on a few of these arguments, and returns a function with a lesser number of input arguments for further usage.

function getURI(host, domain) {
  function getURIWithPath(path, port) {
    return host + "://" + domain + ":" + port + path
  }
  return getURIWithPath;
}
var partialURI = getURI("https", "www.google.com");
var getFullURI = partialURI("/api/path/", 3000);
console.log(getFullURI); // https://www.google.com:3000/api/path/

Currying is a special case of partial function application in which, a function takes multiple arguments, but returns a function which takes exactly one argument. Getting square of a function can be one such case where currying could be used.

function powerC(pow) {
  var result = 1;
  function power(val) {
    for(var i = 0; i < pow; i++) {
      result = result * val;
    }
    return result;
  }

  return power;
}

var square = powerC(2);
var result = square(3);
console.log(result); //9

Notice that the power function is enhanced to act as a function which only squares using currying. Also, the function power in the above example acts as a closure. Closure, partial application and currying are the basic concepts in javascript, however, powerful javascript libraries, and utility methods are created using them.

Javascript scope and hoisting: Understanding block scope

aparnajoshi.88@gmail.com — Wed, 06 May 2020 00:00:00 GMT

Introduction to Scope and Hoisting

Every programming language has its own rules regarding the scope of the data being stored during program execution. The term Scope refers to space in the program where the data can be accessed. Traditionally Javascript only had two types of scopes: Global and Function scope. With the introduction of ES6, Javascript is introduced with the third type of scope - Block scope.

Hoisting is a feature unique to Javascript. Hoisting in javascript refers to the variable and function declaration being moved up to the top of the scope.

source

In this article, we will understand the meaning scope in javascript, the implications of ES6 (block scoping), and the effects of hoisting.

Global and Function scope

Javascript mainly has two types of scope: Global and Function scope.

Global scope refers to all the variables declared in a JS file that are not inside any function. These variables have access anywhere in the file. Function scope refers to a limited private scope that the variable gets within the function it is declared. This variable can be accessed anywhere within the function, but not outside it. Let us try to illustrate with an example. Consider the following lines of code:

// Copy paste this block of code in your file to try it out!!!
var globalVariable = "globalVariable is in global scope";

function func1() {
  var variable1 = "variable1 is in func1 scope";
}

function func2() {
  var variable2 = "variable2 is in func2 scope";
  console.log(variable1); //Uncaught ReferenceError: variable1 is not defined
}
console.log(variable1); //Uncaught ReferenceError: variable1 is not defined

In the above code, globalVariable exists throughout the JS file. Hence, it can be accessed anywhere. Since javascript code mostly executes in the browser, it is good to know what global scope means in the context of a browser. In any web browser, the global scope is created for us, and the window object lies in the global scope. Hence in the browser, the globalVariable can be accessed either directly or through the window object window.globalVariable. Since in web development we might have several javascript files, it is important to know that all the variables declared with the global scope in these files are available in the window object. This is an important point to note, if multiple files contain the same variable name declared in the global scope, unexpected code behaviors might arise because the same variable might get overridden in different files.

The variable1 exists only inside the function func1, and it can be accessed only inside this function. The global space and func2 do not have access to this variable. The console.log statements in both places will throw an error.

Scope chain and Variable look-up

Consider next piece of code:

var globalVariable = "globalVariable is in global scope";

function outerFunc() {
  var outerVariable = "outerVariable is in outerFunc scope";

  function innerFunc() {
    var innerVariable = "innerVariable is in innerFunc scope";
    console.log(innerVariable); //Same scope
    console.log(outerVariable); //Parent scope or outer scope
    console.log(globalVariable); //Global scope
  }
}

The above code might confuse those not familiar with javascript. innerVariable is in the scope of innerFunc, however, outerVariable and globalVariable are also accessible here. This is because, javascript first checks for the existence of a variable within the current scope, if the variable is not present, it looks up for the variable in its immediate parent scope, and so on until the global scope is reached. If the variable is not present anywhere during this look up, javascript throws Reference error.

The set of nested scopes forming a scope ladder is called Scope Chain, and this process of checking for a variable through the scope chain in ascending order is called Variable lookup. Note that the variable lookup is unidirectional, and happens only from one scope to its parent scope.

Let and Const

ES6 introduced two new ways of holding data in the application. let and const. These are two additional ways to declare and use data in the JS program. let is quite similar to var. Using let we can declare and use variables anywhere in the program just like var. The value assigned to the variable can also be changed whenever we want as long as the scope of the variable remains valid.

// consider having only the following piece of code in your file.

var variable1 = "This is declared using var";
let variable2 = "This is declared using let";

const is used to define a value, however, this value doesn't change throughout the execution. The values assigned with the const keyword cannot be changed, any attempt made to change this will result in an error. It is also the reason why const must be assigned a value during the declaration phase itself.

var variable1;
let variable2;
const variable3 = "Constant value";
const variable4; // Uncaught SyntaxError: Missing initializer in const declaration

variable1 = "This can be reassigned";
variable2 = "This can also be reassigned";
variable3 = "Cannot be reassigned"; // Uncaught TypeError: Assignment to constant variable.

Note that, even if arrays and objects are declared with const, their inner values can be changed.

ES6(ES2015) and Block scope

With the advent of ES6, javascript was introduced with a new type of scope, let and const allows us to declare and use the variables with block scope. Block scope means that any variable declared within a pair of brackets {} can only be used within those brackets. This also means that the variables declared within if-else blocks, for loop blocks will all have block scoping when they are declared with let or const. It is important to note, however, that ES6 still doesn't give ~~block scoping~~ capabilities to ~~var~~. Since let provides block scoping which is more in line with other object-oriented programming languages, it is preferred over the usage of var Consider the following lines of code:

function func1() {
  var variable1 = "Grapes";

  if(true) {
    var variable2 = "Bananas";
    let apples = "Oranges";
    console.log(apples); // Works - Block Scope
    console.log(variable1); // Works - Function Scope
    console.log(variable2); // Works - Function Scope
  }
console.log(apples); // Doesn't work - Out of the block
console.log(variable1); // Works - Function Scope
console.log(variable2); // Works - Function Scope
}
console.log(apples); // Doesn't work - Out of the block
console.log(variable1); // Doesn't work - Out of the function
console.log(variable2); // Doesn't work - Out of the function

Hoisting and Temporal dead zone

Variable hoisting is important to understand certain unexpected behavior codes have in javascript. All data values declared/defined using var, let, const, and the functions are hoisted in javascript. This means that the declaration is moved up its scope. Javascript is executed in two phases: Parse phase and Execution phase. During the parsing phase, memory allocation, scope creation, and hoisting are carried out. Consider the following example:

function func1() {
  console.log("This is some dummy code");
  var variable1 = "Hoisting Demo";
  let variable2 = "Hoisting";
}

The javascript code translates this peice of code to:

function func1() {
  var variable1;
  let variable2;
  console.log("This is some dummy code");
  variable1 = "Hoisting Demo";
  variable2 = "Hoisting";
}

However, there is a small catch in variable hoisting. During variable hoisting, the variable declared with var is assigned undefined value. However, those declared with const and let are not assigned anything. This leads to the creation of Temporal Dead Zone. Because of this, even if the variable declared with var is used before its declaration, the code doesn't throw any error. However, if the variable declared using let or const is used before they are declared, we get an error.

console.log(variable1); // Works with value undefined
console.log(variable2); // Uncaught ReferenceError: Cannot access 'b' before initialization
console.log(constant1); // Uncaught ReferenceError: Cannot access 'b' before initialization

var variable1 = "Hoisting Demo";
let variable2 = "Hoisting";
const constant1 = "Hoisting Demo";

Final catch

So far we know that var allows function scoping and let allows block scoping. However, there is another difference between the two. If a closure is created within the loop, variables declared using let will be bound to the value during the current iteration of the loop, whereas the value of var variables will be the current value of the variable. Consider the following example:

for(var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The number is ' + i);
  });
}

for(let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The number is ' + i);
  });
}

The for loop created using var will print the number 10, ten times. This is because 10 is the final current value of i. However, the for loop containing let will print the numbers from 0 to 9, this is because the value of let is preserved and is bound to the current iteration value. This is an important concept which will be helpful when dealing with asynchronous functions within the loops.

Variable scope and hoisting are the basic concepts of javascript which help us in building applications. Note that with the addition of let and const we have only introduced the possibility of having block scope in javascript. The global and function scope always remains whether we use var, let, or const. I hope that this article helped you understand the usage of var, let and const at a much deeper level.

Coronavirus Pandemic: A war with the genomes

aparnajoshi.88@gmail.com — Sat, 02 May 2020 00:00:00 GMT

COVID-19: Facts and figures.

COVID-19 🦠is an infectious upper respiratory disease caused by SARS-CoV-2 virus. Most commonly known as Coronavirus, this disease was first identified in December 2019 in Wuhan, the capital of China's Hubei province. Within mere months of its first discovery, COVID-19 has spread all over the world, causing it to become a global pandemic, claiming more than 200000 lives. This article paints a brief picture of how this disease came to be, and what the current situation is.

source

A species barrier was crossed🚧:

December 2019, For the genomes, it was the day to celebrate, as yet another virus from the family of "Coronaviruses" had crossed a new species barrier. Unlike many organisms, the main goal of the viruses is to find a host body, infect, and use their cell's structure to reproduce. The same would be the function of this newfound SARS-CoV-2 virus. Some speculate that it mutated through bats, others say it had infected some other form of life stock in Wuhan market, however, the fact remains that these viruses had mutated, and could now infect humans.

The COVID-19 started spreading amongst the residents of Wuhan district like a forest fire. This was when international travel was still at its peak. Before the China government could confirm its existence and declare this new disease to be an Epidemic in the Hubei province, the viruses had found its hosts from across the world.

The Coronaviruses had already won the first stage of the battle for 2 reasons:

Since this is a new virus, humans knew relatively lesser information about the virus. Every virus contains some kind of genetic information either in the form of DNA or RNA, covered in a protein coating. The viruses cannot replicate on its own, it requires a host cell to latch itself and multiply. The rate at which the virus can spread, and the amount of time viruses can live outside the host cell differs from one virus to another. None of this information was clear at the beginning.

The viruses can enter a human body when the area containing the virus comes in direct contact with the body either through the eyes, nose, mouth, or breaks in the skin. After much research, it has been known that the viruses causing COVID-19 have spiked protein sticking out of their surfaces. These spikes hook onto cell membranes, allowing the genetic material of the virus to enter the human cell. Once infected, these viruses multiply by infecting the neighboring cells. They start by first infecting the lining of your throat, usually showing symptoms of sore throat or a dry cough.

The Coronaviruses have an incubation period(how long the viruses reside in the human body until the person starts showing visible symptoms), and the spread of the virus happened worldwide before these details could be validated and confirmed.

It is now evident that the incubation period of this virus is anywhere between 5 to 14 days. The SARS-CoV-2 viruses continue to infect the human body through airways and lungs. For most individuals, COVID-19 has mild effects. After the incubation, period the very first symptoms of infection might start to show. The core symptoms of the virus include shortness of breath, fever, cough, and fatigue. In some cases, the people with lower immunity levels might develop a more severe case of COVID-19 disease, causing difficulty in breathing, further complications might lead to NCIP(novel coronavirus-infected pneumonia) and death.

Lack of strict measures caused the exponential spread of the viruses

The Coronaviruses are extremely contagious. The viruses spread not only through direct contact with the infected person, but also by respiratory droplets left behind in the air, and through surface contamination. At the beginning of 2020, China's Hubei province had 1000s of infected cases and was under complete lockdown, rest of the world, however, had very few cases of Coronavirus and let the international travel continue. Airports and other public areas had fewer restrictions for people traveling to/from other areas, little did we know that this would be the main cause of the rapid spread of the Virus.

After a couple of months, the stages of COVID-19 spread was narrowed down to 4 stages:

Stage 1️⃣: The disease isn't spread locally. Only the people with travel history to an already infected country are affected.

Stage 2️⃣: The disease starts spreading locally by coming in contact with infected individuals.

Stage 3️⃣: The area starts having community spread. This is the stage when infected individuals cannot be traced back to their hosts.

Stage 4️⃣: The spread of the disease is so high that it is uncontrollable and the country/area starts showing major clusters of injections.

Historical data 📊 to the rescue

Coronavirus is not the first-ever pandemic the world had faced. We have the ancient and vicious Black Death pandemic, Small Pox widespread which was finally eradicated in the 1900s. Spanish flu which claimed the lives of near 50million people. The most recent outbreaks include Ebola, SARS and MERS. The COVID-19 is mostly being compared with SARS and MERS since these viruses come from the same family, and also display similar characteristics.

source

However, care should be taken to understand that COVID-19 is very different from previously seen SARS and MERS. Current studies show that the mortality rate of COVID-19 is around 7%, compared to 9.43% of SARS, and a lot less than the 34.5% mortality rate of MERS. It is important to note that, the spread of COVID-19 is very high, due to which there would be more number of infected individuals, leading to more number of deaths across the world, even with a lesser percentage of mortality rates.

Seeing the patterns of previous outbreaks, we need to realize that the first wave is just the beginning. Unless we take extreme precautions and stop the spread of disease, it could be catastrophic to the whole world (infected patients or otherwise).

Panic 😱 among the individuals due to lockdown: Side-effects of a global crisis

Within the first few months of its origin, CoronaVirus became a global pandemic. Initially, with a lesser number of cases, the mortality rate seemed to be quite low, around 2%. However, as the disease began to spread like a wildfire, it has been noticed that the mortality rate is much higher among individuals with age greater than 50.

The initial stage of panic began when the countries across the world started banning the air travels to and from China. This led to more air travels as people wanted to come back to their hometowns before there would be a complete lockdown, aiding to the spread of the disease internationally.
The next stage of panic included a high number of individuals trying to buy surgical masks in the hopes of evading the virus. This caused a sudden surge in the prices, also a shortage of PPE kits in the hospitals where actual patients reside. A wrong move due to panic which did more harm than good.

source

The third stage of panic was caused due to lockdown enforcements. People all over the world hurried to supermarkets and grocery stores to stock up their supplies and essentials, causing the weaker section of society such as senior-citizens to suffer.

The final ongoing crisis includes a major decline in the sales and profits of many companies across various sectors. Transportation, Entertainment, Hotels, and Restaurants are some of the sectors being hit badly, leading to thousands of individuals losing their jobs. This has caused a huge hit to the economy all around the world, GDP growth rate has turned negative, which might lead to a global recession. This doesn't even compare to the plight of the daily-wage workers.

Governments across the globe are putting in their best efforts to help the people who are the indirect victims of this pandemic. However, this will be more successful if every individual joined hands with the government and the healthcare system in the prevention of the disease.

The pandemic is bad for everyone, whether we are directly infected with the disease, or we are safe at home. However, it is important to understand the need for social distancing. Having too many infected patients will lead to crowded hospitals and cause more severe complications requiring life support systems and ICUs. While the virus may not affect everyone the same way, the children and elderly, and those with lower immunity systems are at the risk of losing lives. We must quarantine ourselves up to 14 days if we suspect the chances of exposure to this disease.

It is also recommended that we all practice Social Distancing. The respiratory droplets from the infected individual do not travel more than 6ft, and hence it is advised to maintain at least 6ft distance between one another. This way we can reduce the spread of viruses by flattening the curve and not letting them breakout exponentially. This will give the healthcare workers and researchers enough time to develop a vaccine to coronavirus.

With the awareness and research, hope to fight COVID-19 is increasing day by day

Countries across the world are coming together in research and development of new vaccine/cure to this disease. This may lead to a stronger and long-lasting collaboration among the healthcare systems of the world.
Social distancing is being practiced and advised in all cities. A few major corporations have taken a significant cut in their profits and are helping fight this pandemic.
We have come to realize that the most essential thing is having good health, some food on the plate, and a roof on our heads. Even the sales of iPhones and other electronic goods are stopped due to pandemic. Amazon and other online e-commerce stores are only supplying essential items to our doorstep.

source

I conclude this article with the hopes that humanity doesn't forget the lessons learned due to the COVID-19 crisis. Giving the whole world, and ourselves a break doesn't seem so bad. We have witnessed first-hand improvements in our nature because of social distancing. With pollution levels decreased both in air and water, we can see mountains from far away, penguins and ducks are swimming freely in places where they were never known to exist before. The birds chirping has increased in the urban areas in recent days. Also, this summer is not as hot as it was expected to be. :)