DEV Community: Bhavesh Kasturi

JavaScript Promise methods Explained!

Bhavesh Kasturi — Thu, 15 Jul 2021 10:00:17 +0000

What is Promise?

The Promise is a simply improved version of callbacks, and JavaScript's Promise is effectively the same as Promise in real life. You make a promise to do something, and either does it and succeed or do not do it and fail. That is how JavaScript's Promise works.
A Promise is essentially saying, "Hey, I'm going to execute some code, and if I'm successful, I'll let you know and give you the result," and "If I'm unsuccessful, I'll let you know and just tell you the error that goes with that code."

const promise = new Promise((resolve, reject) => { 
// resolve- happens when you successfully complete the promise
// reject - happens when you failed to complete the promise
const sum = 10 + 10
if (sum === 20) {
        resolve("Success");
    } else {
        reject("Error");
    }
});

promise
    .then(message => {
    console.log(message);
}) 
    .catch(message => {
    console.log(message);
})

// Output -> Success

Let's look at Promise methods

Promise.all()

→ Promise.all() is used to run multiple promises, we need to pass an array of different promises, and then we can do things based on whether they all fail or some of them fail or they all succeed or some of them succeed.

resolve() → returns a successful promise.

reject() → returns a failed promise.

Promise.all([
    Promise.resolve("1"),
    Promise.resolve("2"),
    Promise.resolve("3"),
]).then(messages => {
    console.log(messages)
})

// Output -> ["1", "2", "3"]

In the above code snippet, all three Promise have been successfully resolved and they have the message "1", "2", "3" inside of them. The messages array is the return value of all our promises in order from top to bottom.

Promise.all([
    Promise.resolve("1"),
    Promise.resolve("2"),
    Promise.reject("Error on 3"),
    Promise.reject("Error on 4"),
]).then(messages => {
    console.log(messages)
}).catch(error => {
    console.error(error)
})

// Output -> Error on 3

In the above code snippet only the rejected value is printed from the .catch() block and nothing gets printed from the .then() block.

This happens because the Promise.all() only calls .then() when every single Promise inside it succeeds or is resolved. If one of them fails it will call .catch and print the result of the first failed or rejected Promise.

Promise.any()

→ It takes the array of multiple promises and It returns any of the first Promise that gets succeeds or resolved, you can imagine a bunch of different Promise taking various amount of time to execute, the first one to get executed will return the value in .then()

Promise.any([
    Promise.resolve("1"),
    Promise.reject("Error on 2"),
    Promise.reject("Error on 3"),
    Promise.resolve("4"),
]).then(message => {
    console.log(message)
}).catch(error => {
    console.error(error)
})

// Output -> 1

Promise.any([
    Promise.reject("Error on 1"),
    Promise.reject("Error on 2"),
    Promise.resolve("3"),
    Promise.resolve("4"),
]).then(message => {
    console.log(message)
}).catch(error => {
    console.error(error)
})

// Output - 3

Promise.race()

→ It takes an array of multiple promises, It is like Promise.any() but instead of getting the first promise that succeeds, Promise.race() returns the first Promise that finishes whether or not it succeeds or fails.

Promise.race([
    Promise.reject("Error on 1"),
    Promise.reject("Error on 2"),
    Promise.resolve("3"),
    Promise.resolve("4"),
]).then(message => {
    console.log(message)
}).catch(error => {
    console.error(error)
})

// Output -> Error on 1

Promise.race([
    Promise.resolve("1"),
    Promise.resolve("2"),
    Promise.reject("Error on 3"),
    Promise.reject("Error on 4")
]).then(message => {
    console.log(message)
}).catch(error => {
    console.error(error)
})

// Output -> 1

The code above is not asynchronous it is getting executed from top to bottom but if were to imagine it has the timeout and it took a given of time to succeed or fail. The example is given below.

Promise.race([
     Promise.resolve("1"), // 100 ms
     Promise.resolve("2"), // 400 ms
     Promise.reject("Error on 3"), // 200 ms
     Promise.reject("Error on 4") // 20 ms
]).then(message => {
    console.log(message)
}).catch(error => {
    console.error(error)
})

// Output -> Error on 4

The above code snippet will print Error on 4 because it will be the first one to finish its execution.

Promise.allSettled()

→ It takes an array of multiple promises, Promise.allSettled() waits for all the Promises to finish whether they get rejected or they get fulfilled it doesn't matter it waits for every single Promise to finish.

Promise.allSettled([
    Promise.resolve("1"),
    Promise.resolve("2"),
    Promise.reject("Error on 3"),
    Promise.reject("Error on 4")
]).then(messages => {
    console.log(messages )
}).catch(error => {
    console.error(error)
})

/* Output -> (4) [{…}, {…}, {…}, {…}]
0: {status: "fulfilled", value: "1"}
1: {status: "fulfilled", value: "2"}
2: {status: "rejected", reason: "Error on 3"}
3: {status: "rejected", reason: "Error on 4"}
length: 4
*/

As you can see Promise.allSettled() prints the 4 objects and
the object contains the status which is rejected or fullfilled.
reason if the status is rejected
value if the status is fulfilled.

Promise.allSettled([
    Promise.reject("Error on 1"),
    Promise.reject("Error on 2"),
    Promise.reject("Error on 3"),
    Promise.reject("Error on 4")
]).then(messages => {
    console.log(messages )
}).catch(error => {
    console.error(error)
})

/* Output -> (4) [{…}, {…}, {…}, {…}]
0: {status: "rejected", reason: "Error on 1"}
1: {status: "rejected", reason: "Error on 2"}
2: {status: "rejected", reason: "Error on 3"}
3: {status: "rejected", reason: "Error on 4"}
length: 4
*/

In the above code snippet as you can see it still calls the .then() even after all the Promise got rejected, because Promise.allSettled() will always call .then even if the Promise gets fulfilled or rejected.

Thank you for making it till the end!

Closure Explained!

Bhavesh Kasturi — Wed, 14 Jul 2021 16:23:04 +0000

Let's Define Closure

A closure is a function that makes use of variable defined in outer functions that have previously returned. What does this mean, Let's quickly look at an example.

function outer(a){
    return function inner(b){
        return a + b;
    }
}
outer(5)(5); // 10

In the above code snippet, the function inner uses the variable "a" declared in a function named "outer," and when the function inner is called, the function outer returns the function called "inner," and this is called as a closure!

A few things to note:

We have to 'return' the inner function for the above example to work.
We can call the inner function right away by using an extra ().
We don't have to name the inner function (we just called it "inner" for learning purposes)

How Closures Work

Only variables used in the inner function are stored!
Closures don't remember everything from an outer function - just the variables they require!

Why do I need to know this?

Private Variables

Variables that cannot be updated externally are supported in other languages. These are referred to as private variables, although they are not included in JavaScript. No need to be concerned - closures can assist!

function counter(){
    let count = 0;
    return function(){
        count++;
        return count;
    }
}

const counter1 = counter();
counter1(); // 1
counter1(); // 2

const counter2 = counter();
counter2(); // 1
counter2(); // 2

counter1(); // 3 this is unaffected by counter2.

console.log(count); 
// Uncaught ReferenceError: count is not defined - because it is private!

TL;DR

Closure is when an inner function makes use of variables declared in an outer function that has previously returned.
JavaScript will only remember values that are being used inside of the inner function, not all variables defined in the outer function.
Closures allow us to define private variables and write cleaner code that separates our logic from our application.

Thank you for making it till the end!

How to Eliminate Render Blocking JavaScript using async and defer?

Bhavesh Kasturi — Mon, 31 May 2021 07:43:58 +0000

What is Render Blocking Resources?

Render blocking resources are static files, such as fonts, HTML, CSS, and JavaScript files, that are vital to the process of rendering a web page. When the browser encounters a render blocking resource, it stops downloading the rest of the resources until these critical files are processed.

What is `async` and `defer`?

async and defer attributes are two different ways of loading JavaScript.

To understand async and defer first we need to understand how the HTML is parsed.

HTML is parsed from top to bottom and if there is an
<img src="img.jpeg" /> tag in between it starts downloading the image in the background and the parsing will continue till it reaches the end.

When it comes to JavaScript it acts a little differently, parsing starts from top to bottom but if it encounters <script src="script.js"></script> tag in between the script file gets downloaded and it stops HTML parsing until it executes the script.

async and defer attributes allow us to modify how this flow works.

Normal Parsing -

In Normal parsing HTML file is parsed from top to bottom and when it reaches the script tag it stops HTML parsing and downloads the script file and executes the script file, after downloading and executing it then continues parsing the HTML file.



<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js"></script>
    </head>
  <body>
    ....
  </body>
</html>

Note: When you're not using the async or defer attribute it is advised that you should use the <script></script> tag before the </body> closing body tag.

Async Parsing -

In async parsing HTML file is parsed from top to bottom and when it reaches the script tag instead of stopping, script file is downloaded in the background and it continues to parse the HTML file
While the script file is being downloaded in the background, as soon as the script file is downloaded, HTML parsing is stopped and script file is executed and then it continues parsing the HTML file till it reaches the end.

script with async attribute can run anytime, there is no guarantee for when it runs, and it can run in any order because they are just downloaded in the background asynchronously, and as soon as they are done downloading they run immediately.



<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js" async></script>
    </head>
  <body>
    ....
  </body>
</html>

Defer Parsing -

Parsing with defer attribute is very similar to async parsing, HTML file is parsed from top to bottom and when it reaches the script tag script file gets downloaded in the background and HTML parsing continues but instead of executing the script file after getting downloaded it waits until the entire page of HTML is parsed before it actually executes the script file.
Execution is deferred at the end with defer attribute.



<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document</title>
      <script src="script.js" defer></script>
    </head>
  <body>
    ....
  </body>
</html>

So who's the winner? -

It depends,
use defer when the order of execution of scripts is important.
use async when the order of execution of scripts is not important.

Summary

async and defer are the great script tag attributes that allow you to speed up the page loading.
Both async and defer have one common thing: downloading of such scripts doesn’t block page rendering. So the user can read page content and get acquainted with the page immediately.

async	defer
`async` attribute blocks the parsing of the page.	`defer` attribute never blocks the parsing of the page.
Execution of scripts can be non-sequential.	Execution of scripts is sequential.
Execution of scripts leads to pausing of HTML document parsing.	Execution of scripts is done when HTML document is completely parsed.

Thank you for making it till the end!

What is SASS?

Bhavesh Kasturi — Sat, 10 Oct 2020 11:30:25 +0000

Once you’re comfortable with CSS, the next natural step is to use a preprocessor. The biggest advantage is not having to repeat yourself. “Don’t Repeat Yourself” or "DRY" is a principle in software development aimed at reducing repetition of code, and using SASS we can have the advantage of keeping our CSS Dry.

What is CSS preprocessor?

"A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax." - MDN

Why use preprocessors?

Cleaner code using variables and nesting.
Ease of organizing and maintaining the code as we can separate files into modules.
Ability to implement logic and calculations in stylesheets.
Overall improvement in workflow which can save hours of development time!

What is SASS?

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. SASS is a scripting language that provides us the capabilities which regular CSS doesn't have. Using SASS we can write more maintainable, readable and reusable code.

It gives us various capabilities such as:

Variables
Partials & Imports
Nesting
Functions
Mixins
Control directives
Inheritance

In other words SASS helps us write CSS and organize large stylesheets in more maintainable way.

Thanks for reading!

nvm command not found :(

Bhavesh Kasturi — Wed, 05 Aug 2020 14:59:06 +0000

Node Version Manager (NVM) is a tool used to manage multiple active Node.js versions.

If you're trying to install NVM(Node Version Manager) in WSL you probably may run into this error.

-bash: nvm: command not found

What is WSL ?

The Windows Subsystem for Linux lets developers run a GNU/Linux environment -- including most command-line tools, utilities, and applications -- directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

How to fix this error ?

Installation

To install nvm use the following cURL or Wget command

bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

nvm command not found :(

Running either of the above commands downloads a script and runs it, but if you type nvm and if you get bash: nvm: command not found it happens because the source is missing from the following profile files

~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc

To fix this simply follow these steps.

Steps

1) Type the following command.

nano ~/.zshrc

2) Add the source lines from the snippet below to the correct profile file at the bottom.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

3) Close and restart the terminal it should fix the error!

The official documentation on GitHub is really helpful.

Thanks for reading!

Time Zone issue with Heroku

Bhavesh Kasturi — Tue, 30 Jun 2020 10:44:36 +0000

I've been using Heroku for a while now, Recently I was working on a project which was a basic chat application, It was built with Nodejs, socket.io, momentjs.

As it was a chat application I used momentjs for the timestamps on the messages, Everything was working fine locally, but when I deployed my app on Heroku I found that messages were not showing the correct time.

As the Heroku's default region is set to US & I was from India that was causing the issue. So basically momentjs was showing US Timezone.

So the problem was with Heroku's Timezone & Luckily Heroku allows us to change the timezone of our app just by simply adding a new config var.
After fixing the problem it was working fine :)

Here's the Solution:

Heroku Dashboard - Website

1- Login into the Heroku from a browser
2- Select your app
3- Go to the setting tab
4- Press "Reveal Config vars" button
5- Set the keys to "TZ" and value of your timezone (Eg: Asia/Kolkata)
6- Press the add button

Heroku CLI

1- Open your Command shell
2- Login into Heroku
3- cd into your App directory
4- Setup TZ

heroku config:add TZ="Asia/Kolkata"

What is correct TZ value of your country ?

You can find your country's TZ value from this wiki page

India uses a single time zone for the whole country.
I looked on the Wiki page List of tz database time zones, but I was unable to find an entry for India.

If you can't find your country's TZ follow this link

Thanks for reading!

Why are my commits aren't showing up on GitHub contributions graph?

Bhavesh Kasturi — Sat, 27 Jun 2020 06:43:11 +0000

So recently, I started using GitHub after building projects & after pushing my code on GitHub I was having an issue with my contributions graph - All of my commits were not showing up.

After lots of googling, support emails & help from people who are knowledgeable about git on discord community I figured out the issue.

There's the official GitHub article on Why are my contributions not showing up on my profile?

Commits

Commits will appear on your contributions graph if they meet all of the following conditions:

The email address used for the commits is associated with your GitHub account.
The commits were made in a standalone repository, not a fork.
The commits were made:

So after going through this GitHub doc, I found that the actual issue was with the Condition 1 -
The email address used for the commits is associated with your GitHub account

The issue I was experiencing was with the GitHub Desktop, email address wasn't matching with my GitHub account.

My GitHub email looked like test.name.ok@gmail.com
My GitHub Desktop email was test-name-ok@gmail.com this was the issue incorrect email!

If you're experiencing the same issue head over to the options tab in GitHub Desktop and make sure your desktop email is similar to your GitHub account.

Steps: File > Options > Git

Once I figured out the cause of the issue, I needed to fix my contributions graph so all of my commits will be back on my graph. I ran this script on each of my repositories to update the user info to the correct email address, voila! my commits were showing on the graph!

How to know if this is the issue you're facing?

Check your commit history for one of your repositories, If you don't see your avatar on your commits next to different commits, but you have avatar on your GitHub profile, you're probably not using the correct email for your commits.

The image above shows a portion of the commit history for one of my repositories. After I fixed the email issue, all of those commits showed my avatar.

After I fixed the email issue, all of those commits showed my avatar, As you can see in below image.

Conclusion

If you are not seeing your contributions on your graph, check that you are meeting all conditions, and be aware that it may be an issue with your email address used/not used correctly in the GitHub Desktop you use for version control on your local development environment.

Thank you for reading

How to use Fetch API for CRUD operations?

Bhavesh Kasturi — Mon, 01 Jun 2020 08:00:05 +0000

What is CRUD Operation?

The acronym CRUD stands for Create, Read, Update and Delete.

Create: Inserts a new data
Read: Read the data
Update: Update the existing data
Delete: Delete the existing data

List of HTTP Request methods

GET - is used to request data from a specified resource.
POST - is used to send data to a server to create a resource.
PUT - is used to send data to a server to update a resource.
DELETE - is used to delete the specified resource.

What is REST API Server

If you're performing CRUD operation using Fetch API you're going to need a REST API server
For learning purposes we can use jsonplaceholder

JSONPlaceholder is a free online REST API that you can use whenever you need some fake data. It's great for learning, tutorials, testing new libraries, sharing code-examples.

Fetch API

GET Posts

url - https://jsonplaceholder.typicode.com/posts

Console

CREATE a Post

url - https://jsonplaceholder.typicode.com/posts
methods - POST

UPDATE a Post

url - https://jsonplaceholder.typicode.com/posts
methods - PUT

DELETE a Post

url - https://jsonplaceholder.typicode.com/posts/0
0 is a post id, so we are going to delete a post where the id = 0
methods - DELETE

JS HTTP Request Libraries

To help make our experience with AJAX and XMLHttpRequest a nice one. Libraries have been developed to help us make HTTP requests without dealing with complexities of AJAX and XMLHttpRequest.

- Axios

Promise based HTTP client for the browser and node.js

This is a Promise-based HTTP library for performing HTTP requests on both Nodejs and Browser. It supports all modern browser, even an included support for IE8 +.

https://github.com/axios/axios

- SuperAgent

This is a Promise-based light-weight progressive AJAX API perfectly suited for sending HTTP requests and receiving server responses. Like axios, it works in both Node and in all modern browsers.

https://github.com/visionmedia/superagent

- Supertest

Super-agent driven library for testing node.js HTTP servers using a fluent API

This is used for testing Node.js HTTP servers. This library is powered by SuperAgent, it combines its own API and the lower-level API provided by SuperAgent to provide a neat interface for testing HTTP.

https://github.com/visionmedia/supertest

- Qwest

Qwest is a simple ajax library based on promises, and that supports XmlHttpRequest2 unique data like ArrayBuffer, Blob, and FormData.

https://github.com/pyrsmk/qwest

Thanks for reading!

DEV Community: Bhavesh Kasturi

JavaScript Promise methods Explained!

What is Promise?

Promise.all()

Promise.any()

Promise.race()

Promise.allSettled()

Closure Explained!

Let's Define Closure

A few things to note:

How Closures Work

Why do I need to know this?

Private Variables

TL;DR

How to Eliminate Render Blocking JavaScript using async and defer?

What is Render Blocking Resources?

What is async and defer?

Normal Parsing -

Async Parsing -

Defer Parsing -

So who's the winner? -

Summary

What is SASS?

What is CSS preprocessor?

Why use preprocessors?

What is SASS?

nvm command not found :(

What is WSL ?

How to fix this error ?

Time Zone issue with Heroku

Heroku Dashboard - Website

Heroku CLI

What is correct TZ value of your country ?

Why are my commits aren't showing up on GitHub contributions graph?

How to know if this is the issue you're facing?

Conclusion

How to use Fetch API for CRUD operations?

What is CRUD Operation?

List of HTTP Request methods

What is REST API Server

Fetch API

GET Posts

Console

CREATE a Post

UPDATE a Post

DELETE a Post

JS HTTP Request Libraries

- Axios

- SuperAgent

- Supertest

- Qwest

What is `async` and `defer`?