DEV Community: Chinmay Mhatre

Implementing Dark Mode in Next.js with Tailwind CSS

Chinmay Mhatre — Wed, 22 Feb 2023 12:03:41 +0000

Dark mode has become an increasingly popular feature in web applications. With Next.js and Tailwind CSS, adding dark mode to your application is a breeze.

In this post, we'll walk through how to implement dark mode in a Next.js application using Tailwind CSS and the next-themes library.

Setting up the Project

To get started, we need a Next.js application with Tailwind CSS configured. You can use the following command to create a new Next.js app with Tailwind CSS:



   npx create-next-app -e with-tailwindcss appname

This will create a new Next.js app with Tailwind CSS configured.

Implementing Dark Mode

Next.js makes it easy to implement dark mode using the dark variant in Tailwind CSS. You can prepend dark: to properties to indicate that they are for dark mode. For example, you can use dark:bg-gray-900 to change the background color to gray-900 when the theme is set to dark.

By default, Next.js uses the system preferences to set the theme. However, we also need to toggle between light and dark modes. To do this, we can set the darkMode strategy to class in the tailwind.config.js file:



module.exports = {
  darkMode: 'class',
  // ...
}

With this configuration, Tailwind CSS will apply the theme when the dark class is present in the HTML tree.

Using `next-themes`

We need to toggle between and store the current theme somehow so that when user comes back it doesn't reset to default. One way of doing this could be with local storage and doing DOM manipulation.

In this blog, we'll do something way simpler and use next-themes which handles all the toggling and storing of our preference.

To install the library, run:



npm i next-themes

In the _app.js file, wrap your component with the ThemeProvider from next-themes. Set the attribute prop to class to allow the library to apply the theme to the HTML element.



import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ThemeProvider } from "next-themes"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Accessibility Considerations

It's important to ensure that your application is accessible in both light and dark mode. When choosing text and background colors, make sure that they have sufficient contrast. You can test the accessibility of your application using a tool like the Accessibility Insights browser extension.

Adding some Global Styles

We can add some global styles to global.css. Here we set the background of the body to white in light mode and dark gray in dark mode.



@layer base{
    body {
        @apply dark:bg-gray-800 bg-white
    }
}

Adding a Toggle Button

To allow users to toggle between light and dark modes, we need to add a toggle button to our application.

We use the useTheme hook to know what the current theme is, change the current theme using the setTheme method, and the system theme.

Initially, we set the theme to the system theme.

The onclick event on the button toggles between the themes. We add some individual class using the dark: variant for the button.



"use client"
import React from 'react'
import { useTheme } from "next-themes";


const Button = () => {
    const { systemTheme, theme, setTheme } = useTheme();
    const currentTheme = theme === 'system' ? systemTheme : theme;

    return (
        <button
            onClick={() => theme == "dark"? setTheme('light'): setTheme("dark")}
            className='bg-gray-800 dark:bg-gray-50 hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-100 text-white dark:text-gray-800 px-8 py-2 text-2xl md:text-4xl rounded-lg absolute bottom-32'>
            Toggle Mode
        </button>
    )
}

export default Button

Adding Elements to Index.tsx

We add the toggle button to index.tsx.




      <main className="flex items-center justify-center h-screen flex-col">
        <h2 className={`${roboto.className} text-4xl sm:text-6xl md:text-9xl text-center text-gray-800`}>LIGHT MODE</h2>
        <h2 className={`${roboto.className} text-4xl sm:text-6xl md:text-9xl text-center text-white `}>DARK MODE</h2>
        <Button/>
      </main>

Voila! Let there be light...

Find the complete project here.

The Duolingo Drag and Drop Quiz component.

Chinmay Mhatre — Thu, 06 Oct 2022 10:40:34 +0000

I wanted to learn the react drag-and-drop library, so I made the drag and drop style quiz question that Duolingo uses.

The website uses:

react-dnd (implements drag and drop)
tailwindcss (used for styling)

Find the hosted page here : Website

Find the code here: GitHub

Create a Glass Effect Using Only Two CSS Properties

Chinmay Mhatre — Mon, 26 Sep 2022 19:30:35 +0000

We have seen this UI in many website. It is a very simple effect but it looks very cool. Essentially all you need are two CSS properties. So let's get started.

Creating the background

I am using a simple gradient from uigradients.com. You can use any gradient you want. I am using the one called "Cosmic Fusion".

We create a div with class "container".



<div class="container">
</div>

Then we add the following styles to the container.



.container {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #ff00cc;
    background: -webkit-linear-gradient(
        to right,
        #333399,
        #ff00cc
    );
    background: linear-gradient(
        to right,
        #333399,
        #ff00cc
    ); 
}

We make sure the container takes up the whole screen. We align the contents within the container to the center. We also add the gradient to the background using the linear-gradient property.
-webkit-linear-gradient is used for certain browsers. We give a default color in case the browser doesn't support gradients.

linear-gradient

The linear-gradient property takes in a direction and a list of colors. The direction can be specified using the to keyword. The colors are specified using the rgb or rgba function. The rgb function takes in three values for red, green and blue. The rgba function takes an additional value, alpha. The alpha value specifies the opacity of the color. The alpha value can be any value between 0 and 1. 0 means the color is completely transparent and 1 meaning completely opaque.

Adding the circles

We create two div elements with class circle1 and circle2.



<div class="circle1"></div>
<div class="circle2"></div>

We add the following styles to the circles.



.circle1,
.circle2 {
    background: white;
    background: linear-gradient(
        to right bottom,
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.1)
    );
    height: 20rem;
    width: 20rem;
    position: absolute;
    border-radius: 50%;
}

The circles have a height and width of 20rem. We give them a position of absolute so that they can be positioned relative to the container. We give them a border-radius of 50% so that they become circles.

We add a linear gradient to the background of the circles. We give the circles a default color in case the browser doesn't support gradients.

ummmm... I promise the circles are there somewhere.

Positioning the circles

To position the circles we add the following styles to the circles.



.circle1 {
    top: 10%;
    left: 10%;
    transform: translate(-10%, -10%);
}

.circle2 {
    top: 70%;
    left: 80%;
    transform: translate(-50%, -50%);
}

We give the first circle a top value of 10% and a left value of 10%. It moves the circle 10% from the top and 10% from the left. We then use the transform property to translate the circle by -10% in both the x and y direction. This is done so that the circle is positioned relative to the top left corner of the container.

A similar thing is done with the second circle.

Adding the glass card

We create a div element with class glass-card within the container. We add the following styles to the glass card.



.glass-card {
    background: white;
    background: linear-gradient(
        to right bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.2)
    );
    backdrop-filter: blur(1rem);
    width: 60%;
    height: 60%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

And here they are.... The two properties used to create the glass effect.

linear-gradient
backdrop-filter

The linear gradient create a semi transparent white background.

The backdrop-filter property is used to apply graphical effects like blur and saturation to the background of an element. It is supported by most modern browsers. It is not supported by Internet Explorer.

We add a blur effect whose value can be changed according to requirement.

In order to make sure the circles are behind the glass we add the z-index property which moves the card above the circles.

Adding the content

We add a simple heading to the glass card.



            <h1>Glass UI</h1>

We add some styling to the heading to make it look pretty.



.glass-card h1 {
    font-size: 5rem;
    color: white;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}

Voila! We are done.

Try it out for yourself. You can find the full code here.

Also check out this amazing video by dev ed, A complete glass UI dashboard.

Create Your First Smart Contract

Chinmay Mhatre — Mon, 19 Sep 2022 07:48:07 +0000

I wrote my first smart contract in Solidity. Here is how you can do it too!

What are Smart Contract?

Smart contract are function and data that are deployed at a particular address on the Ethereum blockchain. They are immutable and cannot be changed once deployed. They are written in a solidity.

As an example, in a backend developed using Nodejs or Python, we use functions to do specific activities and store data in the database. In the case of smart contracts, these functionalities and databases are stored on the decentralized blockchain rather than a centralized server.

Your First Smart Contract

We use the Remix IDE to compile and deploy the smart contract without any local setup.

We create a new file with the .sol extension.

Solidity is an object-oriented, statically typed language used to write smart contracts.

Code explanation

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

contract MyContract {
    uint public count = 0;

    function incrementCount() public {
        count++;
    }
}

The Remix ide requires a license identifier to be present in the contract. We use the MIT license identifier.

We use the pragma keyword to specify the version of solidity we are using. This is done to avoid breaking changes in the future versions.

We use the contract keyword to create a new contract. We can think of this as a class in object oriented programming.

We create a variable count of type uint . uint is an unsigned integer. We initialize it to 0.

When we use the public keyword, it creates a getter function for the variable. This means that we can access the value of the variable from outside the contract, using count().

The incrementCount function increments the value of the count variable by 1. Deploying the contract and using the increment function costs gas.

Gas can be thought of like the toll you pay for using a bridge or a road. Since, computing the contracts requires resources, each transaction requires a certain amount of gas to be paid. The gas is paid in ether which is the currency of the Ethereum blockchain.

Executing the contract

We compile our contract by navigating to the compile tab and clicking on the compile button.

We then navigate to the deploy tab we can use the Remix VM as the test environment.

We get access to a list of accounts that we can use to test our contract.

Once we deploy our contract we can see that an amount of gas has been used.

We can also see the address of the contract.

We can now access our two functions, count and incrementCount.

We run the count function to see the value of the count variable. We can see that the count is 0.

Now we run the incrementCount function to increment the count by 1.

Now, the value of the function becomes 1.

There you have it. You have written your very first smart contract.

In the next lesson, We'll learn how to add rules to the contract so that only the user who created the contract can perform certain action. Since, in this contract, anyone can access and update the count variable.

Getting Started With TypeScript

Chinmay Mhatre — Tue, 09 Aug 2022 10:52:00 +0000

I'll proceed with the blog assuming you have previously worked with JavaScript. Knowing JavaScript would have you catch on to TypeScript concepts pretty easily.

Typescript has gained a lot of popularity over the years since it was made.

credits: The State of the Octoverse

Looking at issues you might run into in JavaScript

Let's start with a simple problem. Say we have a object that has these properties.



    const person = {
        name: 'John',
        age: 30,
        hobbies: ['Sports', 'Cooking']
    }

After writing plenty of code we wanted to access a property of this object. We forgot the object doesn't have a property called "lastName" but we tried to access it anyways.



    const lastName = person.lastName;

JavaScript won't throw an error but it will return undefined. Now imagine, the variable getting passed through multiple layers of functions .
Locating the point of error would drain the life of our finitely mortal life.

We can solve this problem by using TypeScript.

being able to access a variable not present.
multiple null.

fixes JavaScript problems with types.

Types

Types are basically the kind of data that a variable can hold. Some primitive types of types are: Integers, Strings etc.

If anyone comes from a C++, C or a Java background, they would know about types.

In JavaScript when we declare a variable



    let name = 'John';
    const age = 30;

Here in both age and name any kind of data can be stored. While this may seem convenient to a developer in the beginning is a nightmare while debugging if you input a wrong type of data.

Static type checking

Typescript is what we call a static type checker. It
checks for errors relate to types before we run our code.
TypeScript doesn't really run our code. It performs this type checking before we run our code using JavaScript.

After compiling Typescript is compiled to JavaScript which can be executed as usual.

If we take the above example in TypeScript we can see the compiler warn us before even running our code.

Running TypeScript

TypeScript cannot be run directly through the browser or node. TypeScript is compiled to JavaScript. To do so, we install typescript globally using npm.



npm i -g typescript

Once we have installed TypeScript globally, we get access to the tsc command.

We'll look at running TypeScript and it's many features in the next blog.

Fingerprint authentication in expo

Chinmay Mhatre — Sun, 07 Aug 2022 14:21:00 +0000

We have seen apps that use Biometric Prompts as a layer of security in the application.

Implementing this in expo is really easy. You can find the complete code for this at this link.

Screens

This app will have two screens.

Home
Start

To give a brief, the Start screen will have the authentication button. When the user clicks on this button, the app will ask for the biometric prompt. If the user successfully authenticates, the app will navigate to the Home screen.

App.js

App.js is used to setup our stack navigator between the two screens Home and Start.



<NavigationContainer>
    <Stack.Navigator initialRouteName="Start">
        <Stack.Screen
            name="Start"
            component={Start}
            options={{ headerShown: false }}
        />
        <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
</NavigationContainer>

`Start.js`

We will import the expo-local-authentication package . This package allows you to use faceID and TouchID in IOS devices and Biometric Prompt in Android devices.



import * as LocalAuthentication from "expo-local-authentication";

We create two states to check if the device supports biometric and if any fingerprint is saved in the device.



const [isBiometricSupported, setIsBiometricSupported] = useState(false);
const [fingerprint, setFingerprint] = useState(false);

We use the hasHardwareAsync method to check if the device supports biometric authentication. isEnrolledAsync checks if any fingerprint is saved in the device.



useEffect(() => {
    (async () => {
        const compatible = await LocalAuthentication.hasHardwareAsync();
        setIsBiometricSupported(compatible);
        const enroll = await LocalAuthentication.isEnrolledAsync();
        if (enroll) {
            setFingerprint(true);
        }
    })();
}, []);

We create a simple page with a button to authenticate the user.
In case Biometric is not supported or doesn't have any registered fingerprints, we show a message.



<View style={styles.start}>
    <View style={{ justifyContent: "center", flex: 1, alignItems: "center" }}>
        {isBiometricSupported && fingerprint ? (
            <TouchableOpacity onPress={handle}>
                <Text style={styles.button}>Go to home</Text>
            </TouchableOpacity>
        ) : (
            <View>
                <Text>fingerprint not supported/ allocated</Text>
            </View>
        )}
    </View>
</View>

handle is a function that will authenticate the user.



const handle = async () => {
    try {
        const biometricAuth = await LocalAuthentication.authenticateAsync({
            promptMessage: "Login with Biometrics",
            disableDeviceFallback: true,
            cancelLabel: "Cancel",
        });
        if (biometricAuth.success) {
            navigation.replace("Home");
        }
    } catch (error) {
        console.log(error);
    }
};

aunthenticateAsync is a method that will authenticate the user. we pass the following parameters.

promptMessage: This is the message that will be displayed to the user.
disableDeviceFallback: This is a boolean value that will disable the fallback option. When we fail to authenticate with fingerprint for several attempts the device falls back to the default password if disableDeviceFallback is set to false.
cancelLabel: This is the label for the cancel button.

If the authentication is successful we navigate to the Home screen. navigation.replace is a method we use so that the user doesn't see a back button to go back to the Start screen. unlike navigation.navigate which will push the new screen on top of the current screen, navigation.replace will replace the current screen with the new screen.

My Favorite VS Code Extensions

Chinmay Mhatre — Tue, 31 Aug 2021 05:52:02 +0000

Hey Everyone! I wanted to show you all some of the vscode extensions I use and found really useful.

indent-rainbow by oderwat

As the name suggests this extension adds colors to the indentations in your code which can be useful to format your code .It can especially help you in writing python .This is a really useful and interesting extension.

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

polacode by P & P

This is an amazing extension if you want to post snippets of your code on your blog or twitter. Polacode makes it really easy to get pretty code snippets of your code.
All you have to do is run polacode from your vscode command palette, paste your code and click the capture button to download the image.

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

REST Client by Huachao Mao

This is a really convenient extension for api developers .You can use this extension as an alternative to postman.

One can make a file with the extension .http and test out their api in vscode itself. It supports all GET,POST,UPDATE and DELETE request.

The benefit can be pushing the .http file to your GitHub repo so that other team members can contribute to the file.

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Here are some other vscode extensions you might find useful

Would love to know What other extension do you all use in vscode ? Let me know in the comments!!

this keyword in JavaScript

Chinmay Mhatre — Tue, 29 Jun 2021 11:09:13 +0000

Introduction

Hey everyone !
I have been recently learning ReactJS. While learning about class based components I stumbled across the bind keyword.

this.somefunction = this.somefunction.bind(this)

While trying to understand this line of code, I realized that the binding of the methods is not a React specific thing, It is a JavaScript thing .

I also realized that to understand the trio of call, apply and bind which basically do similar things, we need to understand the this keyword in JavaScript.

So, today I'd like to discuss about :

What is this ?
this in global scope
this within an object
this within a function
this within classes
The call, apply and bind methods

By learning about all these things we get to know why we bind methods in ReactJS.

Alright! let's get going.

So what is `this` all about ?

When we use 'this' in our daily conversations it always has a context attached with it, right? For instance, the sentence "This is my house" can only make sense in two ways when you are inside the house or you point to the house you are talking about.

If in the middle of the street you say "This is my house" it doesn't really make sense, because 'this' isn't really pointing to anything. If you have a picture of your house then regardless of the location you can point to the picture and attach the context to 'this', it will be like 'this house(in the picture) is my house'.

Similarly in JavaScript, this keyword will point to something according to the context it is in or we can point it to the thing we want using call, apply and bind . This will make better sense when we see the different contexts this can be defined in.

In Global Context

When we create a JavaScript file, even if there are zero lines of code written in the file a few things are created. One of the things created is the window object. The window object contains different properties and methods including things related to DOM.

When we write the this keyword in a global context ( outside any kind of function ), by default it points to the window object.

If we create a variable like this

this.thing = "window thing"

we could access it using this.thing as well as window.thing since this points to the window object.

    console.log(this.thing)
    // # "window thing"
    console.log(window.thing)
    // # "window thing"

Strict Mode

Before we proceed to the context of a function, we need to understand strict mode.

In simple words, strict mode apply more restrictions and rules to JavaScript. Certain things would be allowed in non-strict mode but throw an error in strict mode.

We can enable strict mode using the statement "use strict" in the JS file .

Within a function

From here onwards, things will get a little weird, so stick with me.

function printsomething(){
    console.log(this) // Window object
}
printsomething()

When we call this in a function in non-strict mode it points to the window or the global object. In strict mode this is undefined and it looses the context.

"use strict"
function printsomething(){
    console.log(this) // undefined
}
printsomething()

Within an object

When we call the this keyword in an object method, this points to the object it was defined in.

For Example :

this.name = "Some other movie"
const movie = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}

movie.print()

// OUTPUT
// Peanut Butter Falcon

In the above example, we define a method called print within the object movie. The object movie has a property called name.

In print we call console.log(this.name) which would basically point to the name property of the movie object.

It will not print "Some other movie" since the print function is in the context of the object movie.

The weird part

Remember when I told you that the value of this depends on the way it was called?
Let us use the same object we used previously to understand this.

What if we assign the method print to another variable called globalprint?

this.name = "Rocky"
const movie = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}
const globalprint = movie.print

globalprint()
//output : Rocky

Now, the context of this has changed to the global context since globalprint is not a method of the movie object, it is an independent function as we have seen in the function section, points to the global context in non-strict mode and is undefined in strict mode.

So, the output would be "Rocky" instead of "Peanut Butter Falcon".

This also applies to callback functions.

this.name = "Rocky"

const movie = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}

setTimeout(movie.print , 1000 ); // Output : Rocky

We can try to fake a setTimeout method to look at how this works.

function setTimeout(callback, delay){

   //wait for 'delay' milliseconds
   callback();

}

setTimeout( movie.print, 1000 );

Internally the setTimeout method assigns the movie.print to it's callback argument.

callback = movie.print

As we saw before, assigning a method to another variable changes it's context. Thus print will be "undefined" in strict mode and in non-strict mode
it will print "Rocky".

Within class methods

class theatre {
    constructor(person,movie){
        this.person = person
        this.movie = movie
    }
    display(){
        console.log(`${this.person} is watching ${this.movie}`)
    }
}

const peter = new theatre("peter","interstellar")
const jack = new theatre("jack","inception")

jack.display()
//output : peter is watching interstellar
peter.display()
//output : jack is watching inception

Within a class this point to the current instance of the class.
Here the instances being jack and peter.

However, the class methods like display will lose context if passed as a callback function or assigned to another variable like we saw in the functions section.

Class expression and methods such as the constructor or any class methods are always executed in strict mode.

Thus callbacks, instead of taking the global context, will be undefined.

const callback = jack.display
callback() // "this" will be undefined

We will be learning about bind method shortly to fix this problem. To give you an idea , bind will basically glue value of this to the display function and it will always be called in that context, fixing the problem of the context getting lost.

Remember the house analogy I used in the beginning?
We'll now understand the pointing at the picture of the house part, that is basically telling javascript explicitly where you want this keyword to point rather than JavaScript assigning it for you.

call

call method is used to call a function with the this pointing to a thing of your choice.

Syntax

call(thisArg, arg1, ... , argN)

thisArg helps the call function to knw on which this should the function be called.
Rest arguments are the arguments passed to the function.

Let's understand the use case with an example.

const movie = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}

Remember this object?
What if we create two movie objects with different movies?

const movie1 = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}
const movie2 = {
    name : "The imitation game",
    print : function (){
        console.log(this.name) 
    }
}

We can see here the print function is repeated. If there were more of these
objects, we would have to write the same print function multiple times.

We could use a call method in this case.

We would remove the print method out of the objects and make it as a separate function .

const printThings = function (){
        console.log(this.name) 
    }

const movie1 = {
    name : "Peanut Butter Falcon"   
}
const movie2 = {
    name : "The imitation game"
}

Now, we will use the call method on the printThings function with reference to whichever this value we want

printThings.call(movie1) // output : "Peanut Butter Falcon"
printThings.call(movie2) // output : "The imitation game"

printThings.call(movie1) tells JavaScript that we want the above function's this to point to movie1 object and similarly for movie2.

It is as though the function is inside the object like given below.

const movie1 = {
    name : "Peanut Butter Falcon",
    print : function (){
        console.log(this.name) 
    }
}

What if there are parameters in the function, how do we pass those ?

const printThings = function (person){
        console.log(`${person} is watching ${this.name}`) 
    }

const movie1 = {
    name : "Peanut Butter Falcon"   
}
const movie2 = {
    name : "The imitation game"
}

The printThings function now has an parameter called person.

So how do we use the call method and pass the arguments?

printThings.call(movie1,"James") // output : "James is watching Peanut Butter Falcon"
printThings.call(movie2,"Peter") // output : "Peter is watching The imitation game"

The first argument is always the this argument , Rest can be passed after it like it is done in the above example.

Let's take one more example :


const printprintThings = function (fname, lname){
        console.log(`${fname} ${lname} is watching ${this.name}`) 
    }

const movie1 = {
    name : "Peanut Butter Falcon"   
}
const movie2 = {
    name : "The imitation game"
}

printThings.call(movie1,"James","Bond") // output : "James Bond is watching Peanut Butter Falcon"
printThings.call(movie2,"Peter", "Pan") // output : "Peter Pan is watching The imitation game"

This example just has one more parameter than the previous one.

apply

The only difference between call and apply is that apply method calls a function with a this value and arguments as an array instead of passing the arguments individually like the call method.

apply(thisArg,argArray)

We could use the previous example and use apply on it instead of call.

const printThings = function (fname, lname){
        console.log(`${fname} ${lname} is watching ${this.name}`) 
    }

const movie1 = {
    name : "Peanut Butter Falcon"   
}
const movie2 = {
    name : "The imitation game"
}

printThings.apply(movie1,["James","Bond"]) // output : "James Bond is watching Peanut Butter Falcon"
printThings.apply(movie2,["Peter", "Pan"]) // output : "Peter Pan is watching The imitation game"

It gives the same result.

bind

Bind is different from call and apply in the sense that bind returns a new function instead of calling the existing function immediately.

Syntax

bind(thisArg, arg1, ... , argN)

Now, we could bind the function to a this value .

    let printThings = function (fname, lname){
        console.log(`${fname} ${lname} is watching ${this.name}`) 
    }
    printThings = printThings.bind(movie1,"James","Bond")

printThings()
// output : "James Bond is watching Peanut Butter Falcon"

Thus we bind the printThings function to movie1 and we can call it whenever we want.

Let us take one more example.

    "use strict"
    this.movie = "Saving Private Ryan"
    const outerFunction = function(){
        const innerFunction = function (){
            console.log(this.movie)
        }
        innerFunction()
    }
    outerFunction()

From what we have seen, the above code won't work, right? Since the context is lost.

Let us bind the outerFunction and use call on the inner function and give them the this value

    "use strict"
    this.movie = "Saving Private Ryan"
    let outerFunction = function(){
        const innerFunction = function (){
            console.log(this.movie)
        }
        innerFunction.call(this) 
        //Here "this" means the outerFunction
    }
    outerFunction = outerFunction.bind(this) 
    // Here "this" means the global context
    outerFunction()

    //Output : "Saving Private Ryan"

Finally, Let's try to fix the class which we made in the Within a class section. click here to take a look at it again

class theatre {
    constructor(person,movie){
        this.person = person
        this.movie = movie

    }
    display(){
        console.log(`${this.person} is watching ${this.movie}`)
    }
}

const jack = new theatre("jack","inception")

const callback = jack.display
callback()

The only thing we have to do to get this working is to bind the method display to the this value of the class.

We can do this either in the constructor

    class theatre {
        constructor(person,movie){
            this.person = person
            this.movie = movie
            this.display = this.display.bind(this) // Here
        }
        display(){
            console.log(`${this.person} is watching ${this.movie}`)
        }
    }

    const jack = new theatre("jack","inception")

    const callback = jack.display
    callback()

or bind it while passing it as a callback.

setTimeout(jack.display.bind(jack),1000)

//output : jack is watching inception

const callback = jack.display.bind(jack)
callback()
//output : jack is watching inception

Arrow Functions

Arrow functions are another way to solve the binding problem.

Arrow function have something called as a "lexical scope".

What that means is that arrow function does not have it's own this context, it borrows the context from the parent element or the context it was defined in.

Hence, in the above example the outer function will get it's context from the global context and the inner function will get it's context from the outer function .

"use strict"
    this.movie = "Saving Private Ryan"
    const outerFunction = () => {
        const innerFunction = () => {
            console.log(this.movie)
        }
        innerFunction()
    }
    outerFunction()
    //Output : "Saving Private Ryan"

`bind` in ReactJS

We have already seen all the javascript specific reasons we bind a function or a method. The same applies for ReactJS.

In React we generally call a class method using an event handler like onClick, we pass the method we want to execute as a callback to the handler function.

That is why the value of this is lost .

By binding it explicitly we make sure it doesn't happen.

I hope you learnt something from this blog.

Let me know in the comments if you found this helpful .

See you in the next one :)

Crash course in Asynchronous JavaScript (Part 2)

Chinmay Mhatre — Tue, 04 May 2021 04:16:32 +0000

Introduction

Welcome back!

Here is what we'll cover in part 2

Promises
Async and Await
Making Http Request
API Project

Let us continue from where we left off. We'll start by escaping the callback hell.

Promises

What is a promise?

Promise in JavaScript is like the word promise in the real world . When we promise something there are two things that can happen either the promise is kept(resolved) or the promise is broken(rejected).

Similarly, The Promise object in JavaScript has 3 states :

pending : initial state, neither resolved nor rejected.

resolved : meaning that the operation was completed successfully.

rejected : meaning that the operation failed.

Definition : Promise in JavaScript is defined as an object that represents the eventual completion (or failure) of an asynchronous operation .

Woah! So lets break that down.

Promise is an object .
It is often used during Async operations.
Promise objects are returned by asynchronous functions which may not have a value initially but will have the value at some point in the future.

Let us understand this with a fake function.

const fakeRequest = (url) => {
    return new Promise((resolve, reject) => {
        const rand = Math.random();
        setTimeout(() => {
            if (rand < 0.7) {
                resolve('YOUR FAKE DATA HERE');
            }
            reject('Request Error!');
        }, 1000)
    })
}

This function is basically trying to simulate a response from a remote server. When we request data from a server, it might take few seconds before it completes or rejects our request. In a sense, the server is promising us to respond with the data .

When the function is called, a Promise is made by the function. It can either keep(resolve) the promise returning the data or break(reject) the promise and throw an error.

This function is generating a random number between 0 and 1. If the number is less than 0.7, it resolves this promise by using the resolve function with the data as parameter, else the promise is rejected with an error in the reject function.

Now that we have created the Promise , How do we consume it?

We use .then() , .catch() on the function calls to consume the promise .

.then

We pass a callback function to .then which is executed when the promise is resolved.

fakeRequest("fakeurl").then((data)=>{
 console.log(data)
})

The 'data' argument will contain 'YOUR FAKE DATA HERE' if the promise is resolved.

.catch

If the promise is rejected, we'll have to catch the error .

We attach .catch() after .then() to catch any rejected promises.

fakeRequest("fakeurl").then((data)=>{
 console.log(data)
}).catch((error){
 console.log(error)
})

If any error is thrown, 'error' argument will have the value 'Request Error!' .
To put is simply .then is for resolve , .catch is for reject.

The main difference between callback functions and promises is that, in promises you attach the callbacks(.then and .catch) to the returned promise object and in callback functions you pass callbacks to the function as arguments(success and failure) .

Do you remember the rainbow function we made using callbacks?
Let's recreate it using promises.

const delayedColorChange = (color, delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}

Now, if we want the colors to appear one after the other, we just chain the .then in order. Since, the code within each .then only runs when the previous promise is resolved, it allows us to perform multiple asynchronous tasks (changing background color) synchronously(one after the other).

Something like this :

delayedColorChange('red', 1000)
    .then(() => delayedColorChange('orange', 1000))
    .then(() => delayedColorChange('yellow', 1000))
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('blue', 1000))
    .then(() => delayedColorChange('indigo', 1000))
    .then(() => delayedColorChange('violet', 1000))

First delayedColorChange will be called for color red.
When it finishes and resolves the promise ".then" delayedColorChange will be called for color orange and so on.

Let's see a real world situation.

Sometimes you may need to make multiple API calls or calls to your database for data one after other.
Lets assume you have to make calls to two APIs 'A' and 'B', but to call 'B' you'll need to pass data that you get from 'A' .
So 'A' needs to be resolved first, right? .then "B" can be called.
We can use our fakeRequest function to make these fake API requestS.
Here is how we do it :

fakeRequest('urlA')
    .then((dataa) => {
        console.log("(urlA) worked")
        return fakeRequestPromise('UrlB')
    })
    .then((datab) => {
        console.log("(urlB) worked")
    })
    .catch((err) => {
        console.log("OH NO, A REQUEST FAILED!!!")
        console.log(err)
    })

This works because .then only runs after promise is resolved . Then we call the urlB API .
Now, the next .then is attached for handling urlB
If any one of the requests fail (promises are rejected), they just fall through to the .catch.
If we want to have more API calls after urlB we just keep on returning the functions and chaining the .then.

fakeRequest('urlA')
    .then((dataa) => {
        console.log("(urlA) worked !!!")
        return fakeRequestPromise('urlB')
    })
    .then((datab) => {
        console.log("(urlB) worked !!!")
        return fakeRequestPromise('urlC')
    })
    .then((datac) => {
        console.log("(urlC) worked !!!")
    })
    .catch((err) => {
        console.log("OH NO, A REQUEST FAILED!!!")
        console.log(err)
    })

The reason for doing this is to simplify the code . We see that both the rainbow function and the fake request function look a lot simpler when we use promises compared to the functions made using callbacks.

Async/Await

Async and Await are what programmers call syntactical sugar.
It is basically an easier way of using promises.

## Async
The async keyword can be placed before a function.

const greeting = async ()=>{
   return "Nice to meet you!!"
}

Writing the async keyword means that now, the function always returns a promise.
No matter what kind of values are returned by the function, it is always wrapped in a promise.
So, now that the function returns a promise, we can call it using .then .

greeting().then((data)=>{
 console.log(data)
})

This will print out "Nice to meet you!!".
Thus we do not need to explicitly resolve the promise .

## Await

Await keyword pauses the code within the async function till the promise is resolved.
Await is only used within an async function .
If we use the Await keyword outside the async function it will be a syntax error.

 let result = await promise;

Let us call our rainbow function delayedColorChange()but now using async and await .
First, we create an async function that will call the functions for the different colors.

const rainbow = async ()=>{

}

Let's call delayedColorChange for the red color .
After the red color, the function should return with "Printed"

const printRainbow = async ()=>{
  delayedColorChange('red', 1000)
  return "Printed"
}

However, if we execute it like this, the function won't wait for the red color to be displayed . It will instantaneously print "Printed".
Thus we must ask the printRainbow function to wait till delayedColorChange('red', 1000) resolves it's promise.
To do this, we put the await keyword in front of the delayedColorChange.
This will ask the printRainbow to wait till the promise is resolved.

const printRainbow = async ()=>{
  await delayedColorChange('red', 1000)
  return "Printed"
}

Let us put the rest of the colors in .

const printRainbow = async ()=>{
  await delayedColorChange('red', 1000)
  await delayedColorChange('orange', 1000)
  await delayedColorChange('yellow', 1000)
  await delayedColorChange('green', 1000)
  await delayedColorChange('blue', 1000)
  await delayedColorChange('indigo', 1000)
  await delayedColorChange('violet', 1000)
  return "Printed"
}

printRainbow().then((data)=>(
  console.log(data)
))

After all the colours are shown the console prints "Printed".

To handle the errors we can use try catch blocks

const printRainbow = async ()=>{
   try{
        await delayedColorChange('red', 1000)
        return "Printed"
   } 
    catch{
        console.log("error")
    }
}

We can compare it with the callback version of the function .

//Promises (Async and Await)
const printRainbow = async ()=>{
  await delayedColorChange('red', 1000)
  await delayedColorChange('orange', 1000)
  await delayedColorChange('yellow', 1000)
  await delayedColorChange('green', 1000)
  await delayedColorChange('blue', 1000)
  await delayedColorChange('indigo', 1000)
  await delayedColorChange('violet', 1000)
  return "Printed"
}

//Callbacks
delayedColorChange('red', 1000, () => {
    delayedColorChange('orange', 1000, () => {
        delayedColorChange('yellow', 1000, () => {
            delayedColorChange('green', 1000, () => {
                delayedColorChange('blue', 1000, () => {
                    delayedColorChange('indigo', 1000, () => {
                        delayedColorChange('violet', 1000, () => {
                             //This function will be empty since 
                             //we want to end the 
                            //color change
                        })
                    })
                })
            })
        })
    })
});

As we can see it is much cleaner and compact.

Making HTTP request

Let us now understand the final piece in the puzzle of async JavaScript.
We know how to handle the responses coming from APIs using promises and callbacks.
Now, it is time for us to make an actual http request rather than faking it using fakerequest() function.

Request header

HTTP headers are basically ways to pass additional information between the client and server.

We can see additional information about the request that is passed through headers are in the form of key and values.

Types of http requests

GET : Used to "Get" the data from a resource.
POST : Used to send data to a particular destination.
PUT : Used to update the existing data.
DELETE : Used to delete data.

Mostly we will be using GET request, since we want to get the JSON data from the API.

In the Web API section, the request we made through the browser to the Pokémon API was a GET request, since we 'get' the image data from the API server.

However, to use the data from the web API in our own website we have to make requests through JavaScript.

There are different ways to make request to these web APIs Asynchronously through JavaScript.

XMLHttpRequest
Fetch API
Axios

We'll be using Axios for our webpage. However, let's have an overview of XHR and fetch API as well.

XMLHttpRequest

XHR is the original way of making requests using JavaScript.
It is a browser API.
It is not a preferred method since it uses callbacks and does not support promises.

The basic syntax is as follows:

var xhttp = new XMLHttpRequest();//1
xhttp.onload = function() {//4
  const data = JSON.parse(this.responseText);
};

xhttp.onerror = function() { // only triggers if the request couldn't be made at all
  alert(` Error`);
};
xhttp.open("GET", "filename", true);//2
xhttp.send();//3

We create a xhttp object
xhttp.open("GET", "url", true); opens the request by specifying : type of request, url that is to be requested, if we want the request to be async or not.
We use xhttp.send() to send the request.
we setup a method onload that returns responseText with the data from the request.

Fetch API

Fetch makes it easier to make web requests and handle responses compared to the older XMLHttpRequest.

It is a simpler API which uses promises, avoiding callback hell and having to remember the complex API of XMLHttpRequest.

Syntax

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

We pass the URL to the fetch function which returns a promise with the response. However, this is just a HTTP response and not the actual JSON data. To get the JSON content we use .json method on the response. Finally we print the data in the console.

Axios

Axios is a promise based HTTP client for the browser and node.js.
It is an improvement on the fetch api.

Installing

Axios can be added using a CDN as well as through node.js :

Using CDN

We can attach the below script tag to our html document above our own js file to use Axios.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using npm

$ npm install axios

Usage

Get Request

Making a GET request is as simple as writing axios.get(url) . To handle the responses we use .then() and .catch() since axios uses promises.
we do not need to chain another .then like the fetch API.

axios.get('API URL')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

We may also use async await

const main = async ()=>{
    try{
        let result = await axios.get("url")
        return result
    }catch{
        console.log("request failed");
    }
}

Let us make request to a GitHub API using Axios :

axios.get('https://api.github.com/users/mapbox')
  .then((response) => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
  });

// logs:
// => {login: "mapbox", id: 600935, node_id: "MDEyOk9yZ2FuaXphdGlvbjYwMDkzNQ==", avatar_url: "https://avatars1.githubusercontent.com/u/600935?v=4", gravatar_id: "", …}

// => 200

// => OK

// => {x-ratelimit-limit: "60", x-github-media-type: "github.v3", x-ratelimit-remaining: "60", last-modified: "Wed, 01 Aug 2018 02:50:03 GMT", etag: "W/"3062389570cc468e0b474db27046e8c9"", …}

We can also make other requests using Axios .

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

The some parameters are put into square brackets because they are optional.

API Project

Now, it's time to put together everything we have learnt so far .

Here is what we will be building :

What is the project about

This project is a part of Colt Steele's web developer bootcamp course.
It is a website that display tvshows according to the user's input using the tvmaze api.

Code

Here is a link to the completed project : TvShowApi

index.html

We create a form and give it a class of search-form to be used later in JavaScript.
Add a text input to get the data.
A submit button to submit the form.

    <form class="search-form" >
    <input type="text" class="form-control" id="search" placeholder="Search Tvshows">
    <input type="submit" class="form-control mt-2" id="sub" value="Submit">
    </form>

The images that we'll get from the API will be displayed within this div.

<div class="shows">   
</div>

app.js

Select all the required elements using querySelector.

let input = document.querySelector("#search");
let showdiv = document.querySelector('.shows')
let searchForm = document.querySelector('.search-form')

We create an event listener which makes the axios request asynchronously each time the form is submitted.
After getting the data from axios we pass it to a createImages function which is used to display the images of the different shows we get back from the API.

searchForm.addEventListener("submit",async (e)=>{ //e is a event object 
    e.preventDefault(); //Prevents form from refreshing the page.
    if(input.value != ""){ // Checking if the input is empty.
        try {
            let result = await axios.get(`http://api.tvmaze.com/search/shows?q=${input.value}`)
            createImages(result.data)//result.data is an array
            console.log(result); // You can look at the result from the api in the console
        }
        catch (error) {
            console.log(error);
        }
    }
})

Here is how the response from the API looks like:

The createImages function below is used to create the images from the API data.

const createImages = (shows)=>{//shows is an array
    for(show of shows){ 
        if (show.show.image) { // checking if there is an image for the current show
            let image = document.createElement('img')
            image.src = show.show.image.medium // show.show.image.medium contains the url of the image
            showdiv.append(image) //we attach the images to an empty div that we created in html
        }
    };
}

Below image shows the path which we used to get the image url in the createImages function.

Conclusion

I hope after reading this, you'll have a better understanding for the different puzzle pieces in the jigsaw puzzle of Async JavaScript.

Now, the next step from here on out would be to try the different concepts in your own code. You can also try out the different code snippets provided in the article and observe the result you get.

Let me know in the comments if you found this helpful .

See you in the next one :)

Crash course in Asynchronous JavaScript (Part 1)

Chinmay Mhatre — Tue, 04 May 2021 04:12:21 +0000

Introduction

Asynchronous JavaScript can be a daunting concept to learn. However, it is a essential tool in the toolkit of a JavaScript programmer. It can be used to improve the user experience. We'll understand more about the importance of Asynchronous code as we go along further in the article.

Topics that we'll look into :

Part 1

JavaScript Call Stack
What Does Asynchronous Mean
AJAX
APIs and WebAPIs
CallBacks

Part 2

Promises
Async and Await
Making Http Request
API Project

Prerequisites

Basic knowledge of JavaScript is required.

Note

The goal here is to have an understanding about how all the puzzle pieces fit into the bigger picture.

Let us begin by understanding how JavaScript works .

JavaScript call stack

JavaScript is a single threaded language. It means that JavaScript can only run one piece of code at a time. It does so using something called as the Call Stack.

Call stack is how the JavaScript engine keeps track of its place in the script and also manages the different function calls. Stack is a data structure which operates on the LIFO(Last in first out) principle .

Here we can see "3" comes last in the stack so it will be the first one to be executed and after it is executed it will be popped off the stack.
We can visualize this using a tool called loupe

Here is an example :

    console.log("start");
    console.log("End");

When we run this code the first log goes into the call stack.
After execution, it is popped off the call stack
Then the second log is pushed into the stack.
After execution it is popped off and the program ends

This is what we call synchronous flow (One after the other).
Whenever we search anything on google, we see that the page refreshes and waits for the response. This is the default synchronous behavior. The programs waits for the response.

What does Asynchronous mean

Let us understand Asynchronous with an example :-

Whenever we are searching something on the YouTube search bar, we can see suggestions as soon as we start typing .
This basically means that requests are being made to the server behind the scenes to get the suggestion after each letter you type.
This however, doesn't block the UI of the website improving the experience of the user. This is called as an Asynchronous request.

Let us take an example of the setTimeout function :

console.log("start")
setTimeout(function(){
    console.log("middle")
},1000)
console.log("end")

What do you think is the output of this code ?

start
middle 
end

Since JavaScript as we saw is single threaded, the above output should be correct right? But the output is different from what we might expect .

This is the actual output of the script.

start
end
middle

It seems JavaScript moved ahead by printing start and end first, then the setTimeout ran asynchronously, waited for 1sec and returned the result. So why does this work? How can JavaScript hold the variable and continue executing the code simultaneously?

So the thing is the setTimeout is actually not part of javascript. It is what we call a browser API . We will understand more about APIs in the next section but hang with me for a bit.

Web Browser APIs are like super powers provided to us by the browser. For example it can do something like holding a value with setTimeout for a specific amount of time and then returning the value.

working of the setTimeout function

Line one is pushed into the stack and 'start' is printed in the console.
setTimeout is pushed into the stack.
The call stack pops the function then asks the browser API that "Hey Browser ! Hold the value in the function for 1 sec and remind me to run it after the time is up"
The call stack moves ahead with the next line of code and prints 'end' in the console
After the time is completed the browser API then tell the call stack that "Hey remember the function I was holding, you can execute it now".
Finally "middle" is printed in the console.

Asynchronous however is not limited to setTimeout function.

why do we need asynchronous code

Although some requests may not take much time, some requests like getting data from a database or an API may take a few seconds .
If we make these requests synchronously it will block the UI while getting the data, since JavaScript can perform only one task at a time. This will degrade the user experience.

Some things that may need an Asynchronous request include :

Getting data from a database.
Verify user while login and signup.
Getting JSON data from an external Web API.

AJAX

AJAX stands for Asynchronous JavaScript and XML.
AJAX is not a technology or tool, it is a concept .
It is just a terminology used for describing asynchronous code.
When we asynchronously exchange data with the server it is called as an AJAX request.
We can also update the page without reloading the web page.

So what does the xml part in ajax means?

When we talk about exchanging data with different servers running different technology, there has to be a single format of data that can be understood by all the servers .
XML and JSON provide us these interfaces which let us transfer data in a format understood by all.

XML

XML stands for eXtensible Markup Language .
It is similar to html in the sense that it also uses tags like HTML.
However the key difference is that, HTML is used for displaying data and XML is used for storing and transferring the data.

SYNTAX

<note>
  <date>2015-09-01</date>
  <hour>08:30</hour>
  <to>Tove</to>
  <from>Jani</from>
  <body>This is a reminder</body>
</note>

JSON

JSON stands for JavaScript Object Notation. It also is a format for transferring data. It is an alternative to xml. JSON is really easy to read and understand. Even though it looks like JavaScript objects JSON can be used independent of JavaScript to transfer data . Many programming languages have ability to parse and read JSON.

The two primary parts that make up JSON are keys and values. Together they make a key/value pair.

Key : A key is always a string enclosed in quotation marks.
Value : A value can be a string, number, Boolean expression, array, or object.

JSON is a more popular format than XML.

Anyone who is familiar with JavaScript objects will understand JSON very easily.
modern APIs mostly use JSON to transfer and store data.

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
    }   
  ]
}

What is an API?

API is the acronym for Application Programming Interface.
API is an interface which has a set of functions that allow programmers to access specific features or data of an application, operating system or other services.

Web APIs

Often when we talk about APIs in terms of web development the APIs refer to 'Web APIs'.

Web API as the name suggests, is an API over the web which can be accessed using HTTP protocol.

Typically when we make a request to a webpage we get all sorts of data like html, CSS, JavaScript. On the contrary when we make asynchronous request through JavaScript we might want a particular part of the data.

Web API takes requests from the different type of client devices like mobile, laptop, etc. and sends them to the web-server to process it and returns the desired data to the client.

For example: Twitter's APIs provide access to read and write data using which we can integrate twitter's capabilities into our own application. We could for instance, get data about the users tweets and use it in our own application.

The data given by the API can be anything for example : images, JSON objects etc.

We'll understand these APIs HTTP requests in detail a little later but stick with me for a while .
API requests are like any other HTTP request you make to different websites in the search bar like google, Facebook etc. but response from the API is without the unwanted data (html, css etc.).

Let's take an example to understand this better

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png

This is a Pokémon API .It returns an image of a Pokémon when we send it a request. we have to replace the id with the id of the Pokémon we want . 1 is Bulbasaur etc.

This is what we get when we send a request to https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png .

You all can also give it a try! Just put the above link in the browser and you'll get back the image. You can also try changing the id to see what different results you get.
It is just like any other http request but only with the data(image).

Query Strings

In the URL of the API we had to replace the id of the image according to what we want.
That is basically a query string. It request the data according to the value we pass in the query string .

Let take another example

http://api.tvmaze.com/search/shows?q=:query

This is another API that we will be using later.

In the url, ?q=:query is called as the query string and :query is a variable. The response changes according to the value of the query variable.

With the Pokémon API, we took a simple example which returns the data instantaneously. However, some actions like retrieval of information from a database may take some more time or might even get rejected. Thus we have to take into consideration handling the errors that we might get.

We will discuss the various ways to make async request in a few sections.
But before that we'll have to see how to handle the failure of the asynchronous request.

Callback function

Definition

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Whatttttt!!!!

Here is an example :

const success = ()=>(
console.log("success")
)

const fail = ()=>(
console.log("fail")
)

const check = (success,fail)=>{
const a = 2 
if(a == 2){
 success()
}else{
 fail()
}}

check(success,fail)

Let us assume there are 2 functions success and fail
We pass these two function as arguments to a third function called check.
When check is executed it calls the success function if the variable 'a' is equal to 2 else it calls the fail function.
The success and fail function are called as callback functions since they are passed as arguments and invoked within a check function after something happens.

Alright! Let's bring out our friendly neighborhood setTimeout function again.

As we know there are 2 parameters to the setTimeout function . First is a function and second is a delay .

setTimeout(someFunction,delay)

Let us make a function and pass it to setTimeout

const message = function() {  
    console.log("I Have been waiting for 3 sec !!!");
}
setTimeout(message,3000)

The setTimeout which is like an outer function calls the "message" function which is an argument. Here, message function is a callback function.

Let us see how the setTimeout is defined.

setTimeout(message,3000){
/*
some code which will hold the value for 3 secs 
*/
message()
}

We see that the function(message) which was passed to setTimeout as an argument was called within setTimeout.

Passing callbacks may not be the best way

Suppose we want to write a script in which we have to execute multiple async operations but only after the previous operation completes . In this scenario callbacks may not be our best option. Let us see why.
Let's say we are writing a function to change the background colour of the body to the different colors of the rainbow. However, each colour should appear 1 sec apart from each other. For example red appears after 1 sec, orange appears after 2, yellow appears after 3 and so on.

We understand that we can use the setTimeout to delay the colours. However, we cannot just use them independent of each other, since we will have to calculate the delay.

/* assume that red , orange , yellow are
 the functions to change the bg color to the respective colour.*/
setTimeout(red,1000);
setTimeout(orange,2000);
setTimeout(yellow,3000);

We could pass a callback to a function which basically runs the next setTimeout only after the previous setTimeout finishes.
It'll look something like this :

const delayedColorChange = (newColor, delay, doNext) => {
    setTimeout(() => {
        document.body.style.backgroundColor = newColor;
        doNext();
    }, delay)
}

So, how will we go about calling this function?
let's say we want to change the colour to red then to orange.
The "doNext" argument will contain a callback that again calls the delayedColorChange function but now with the colour as orange. something like this

delayedColorChanged("red",1000,()={
  delayedColorChanged("orange",1000,()=>{
   //This function will be empty since we want to end the 
//color change 
    });
})

Now lets say we want to change the colour to yellow after orange.

delayedColorChanged("red",1000,()={
  delayedColorChanged("orange",1000,()=>{
    delayedColorChanged("yellow",1000,()=>{
      //This function will be empty since we want to end the 
      //color change 
    });
  });
})

Let's now make a full rainbow.

delayedColorChange('red', 1000, () => {
    delayedColorChange('orange', 1000, () => {
        delayedColorChange('yellow', 1000, () => {
            delayedColorChange('green', 1000, () => {
                delayedColorChange('blue', 1000, () => {
                    delayedColorChange('indigo', 1000, () => {
                        delayedColorChange('violet', 1000, () => {
                             //This function will be empty since 
                             //we want to end the 
                            //color change
                        })
                    })
                })
            })
        })
    })
});

It gets a little confusing as we go on nesting more callbacks.
Even though we just used one callback function here it got pretty crazy. APIs or any kind of async request will have two of them, success and failure. In that case, there will be a lot of nesting .

Let us assume fakeRequestCallback(url,success,failure) is a fake function that will request the URL for data.
success and failure are two callback functions.
If no error, success is called, else the failure is called.
Here is what happens when we make requests to multiple pages but only after the previous request is successful, similar to the rainbow function.

fakeRequestCallback('books.com/page1',
    function (response) {
        console.log(response)
        fakeRequestCallback('books.com/page2',
            function (response) {
                console.log(response)
                fakeRequestCallback('books.com/page3',
                    function (response) {
                        console.log(response)
                    },
                    function (err) {
                        console.log("ERROR (3rd req)!!!", err)
                    })
            },
            function (err) {
                console.log("ERROR (2nd req)!!!", err)
            })
    }, function (err) {
        console.log("ERROR!!!", err)
    })

Welcome to callback hell .

If there are multiple async operations to be performed and we try to use our good-old callbacks , we’ll find ourselves in the callback hell .

Let us see if there is a better way in part 2.

DEV Community: Chinmay Mhatre

Implementing Dark Mode in Next.js with Tailwind CSS

Setting up the Project

Implementing Dark Mode

Using next-themes

Accessibility Considerations

Adding some Global Styles

Adding a Toggle Button

Adding Elements to Index.tsx

The Duolingo Drag and Drop Quiz component.

Create a Glass Effect Using Only Two CSS Properties

Creating the background

linear-gradient

Adding the circles

Positioning the circles

Adding the glass card

Adding the content

Create Your First Smart Contract

What are Smart Contract?

Your First Smart Contract

Code explanation

Executing the contract

Getting Started With TypeScript

Looking at issues you might run into in JavaScript

Types

Static type checking

Running TypeScript

Fingerprint authentication in expo

Screens

App.js

Start.js

My Favorite VS Code Extensions

indent-rainbow by oderwat

polacode by P & P

REST Client by Huachao Mao

Here are some other vscode extensions you might find useful

Bracket Pair Colorizer 2

Live Server

Auto Rename Tag

Better Comments

ES7 React/Redux/GraphQL/React-Native snippets

Material Icon Theme

Live Share

this keyword in JavaScript

Introduction

So what is this all about ?

In Global Context

Strict Mode

Within a function

Within an object

The weird part

Within class methods

call

Syntax

What if there are parameters in the function, how do we pass those ?

apply

bind

Syntax

Arrow Functions

bind in ReactJS

Crash course in Asynchronous JavaScript (Part 2)

Introduction

Promises

What is a promise?

.then

.catch

Async/Await

Making HTTP request

Request header

Types of http requests

XMLHttpRequest

Fetch API

Syntax

Axios

Installing

Using CDN

Using npm

Usage

Get Request

API Project

Using `next-themes`

`Start.js`

So what is `this` all about ?

`bind` in ReactJS