DEV Community: Jaskirat Grewal

There is a saying...

Jaskirat Grewal — Sat, 13 Feb 2021 15:42:17 +0000

In learning you will teach, and in teaching you will learn.

Let's use this post to learn and to teach. We never know what new we will learn and whom we will inspire.

Our Industry is highly based on the realm of community contribution (stackoverflow etc.)
Let's do it here:)

If you have any queries related to #javascript #react #nodejs #typescript #webdev, put it in the comments section.

If you are reading the comment section and find something that you can help with, please do it.

Thanks and Happy Learning!

Any Questions About NestJS? Let's discuss them here:-)

Jaskirat Grewal — Tue, 29 Sep 2020 14:06:30 +0000

Deploying NestJS Application: Easy and Explained

Jaskirat Grewal — Wed, 16 Sep 2020 08:19:06 +0000

Nest: Quick Overview

The biggest rule of programming is--DRY (Don't Repeat Yourself).

If one wants to write a more efficient code whilst developing any kind of application, they must practice DRY and SOLID principles.
These principles are the base of the famous Model-View-Controller (MVC) design pattern. The Angular Framework for building Frontend is entirely based on this design pattern. It uses concepts of components and services to implement DRY and SOLID Principles.
Not only the increase in performance, understanding Angular code is quite easy due to this.
There was no backend framework that makes the task easy in the same way as Angular does in frontend. That's where Nest originated.
Nest is a backend framework that is heavily inspired by Angular.
It uses the concepts of services, controllers, and modules to implement MVC pattern in a way similar to Angular.

I highly recommend using Nest when working on larger projects rather than using Express.

The focus of this article is on the deployment of Nest Applications, if you want me to post beginner or advanced level tutorials on learning Nest.js, comment below:-)

How to Deploy NestJS Application?: The Theory

When we want to deploy Angular App, what we basically do is we compile the application to JavaScript and then host it on any static application hosting provider like GitHub, AWS S3, etc.

We host Nest Application in a similar way. We compile the Nest Application to JavaScript and host it on Dynamic Application hosting providers like Heroku, A2Hosting, AWS EC2, AWS Elastic Beanstalk, etc.

How to Deploy NestJS Application?: The Platform Generic Steps

First, open .gitignore file and remove the following line to enable pushing the compiled javascript files to the remote repository so that we can download them on the server for hosting.

Remove `/dist` from `.gitignore`

In package.json make sure that it contains scripts defined as ```json

"build": "nest build",
"start": "nest start",
"start:prod": "node dist/main",


* Some Hosting Providers use Procfile for running web applications, so create a file in the project folder named `Procfile` and add the following single line to it.
```procfile


web:npm run start:prod

Delete the dist folder and run npm run start in command-line/terminal to create the latest version of compiled output files. (Deleting folder first is not necessary but it has proven helpful in some cases).
Push your changes to GitHub Repository using these three basic commands: ```bash

git add . //Stage All Files including dist folder
git commit -m "Commit Message"
git push

* Setup your cloud instance on any platform:
  * [AWS EC2 Instance](https://www.guru99.com/creating-amazon-ec2-instance.html)
  * [A2Hosting](https://www.a2hosting.in/kb/cpanel/cpanel-software/create-application-with-nodejs-selector)
* Clone the GitHub repository to the instance using the terminal.
* Target your server to launch `dist/main.js` if required to specify.

In this way, your NestJS app will be deployed. 
<hr>
> This process is attested and followed by developers of www.era-co.in

<hr>
Thanks for Reading!
*What should I post about next? Do tell me in the comments. Suggestions, improvements, and additions are invited.*

If you could design a Software Engineering Course, what will it look like?

Jaskirat Grewal — Thu, 02 Jul 2020 19:53:20 +0000

How you doin!

I am a full-stack(MEVN) developer. I have built web apps as part of my personal development. My first project in NodeJS was a path-defining one.

I am graduating in CS with a specialization in Software Development which does not offers any course on what I actually want to learn.

Being honest here, I have found many faults in the course design. I have learned more from my own projects, StackOverflow, this community, Documentations, etc. than I could ever learn from my college which I believe most of you peeps from this community will understand.

The traditional system really needs redefining (coz it sucks! right?).

From your journey as a software developer, how would you design a course that you think will help newcomers to our community in a really efficient way?

Let's discuss our opinions in the comments section and make it a collective conscience for others to tap into.

JavaScript Promises for Beginners

Jaskirat Grewal — Wed, 03 Jun 2020 17:35:34 +0000

To get the most out of this article, please make sure that you know basics about Synchronous and Asynchronous Programming and, if possible, about javascript callbacks.
However, I will try to keep most of the stuff away from these topics so that you can understand atleast 85% of it.

Understanding Promises

Suppose a friend comes to you for financial help and you promise him to give some cash after taking it out from an ATM.
--You go to the ATM, swipe your card, and find out that your account has been frozen due to some reasons and you can't take out your money.
-- Then, you go back to your friend and tell him that you can't give him money because your account is frozen. Hence, breaking your promise.

//You have made promise to your friend and you leave for bank
if (everythingGoesWell) {
return theMoney //Promise is fulfilled
}
else {
return "Account_Frozen" //Promise failed
}

Promises are used in JavaScript to handle async operations. They are special objects that link the actual output (in above example, it's required money) and the reason due to which we may not get the output (Account Frozen).

States of a Promise

A JavaScript promise is either settled or pending. We can use the Promise constructor to create a promise.

var thePromise = new Promise(executor())

The executor function is callback of the promise constructor. It takes two callbacks: resolve and reject, as arguments.

The resolve callback is used when the promise is actually fulfilled. It takes the output value as its argument.
The reject callback is used when the promise couldn't be fulfilled. It takes the reason as its argument.

When we create a promise it initializes in its pending state. Once the executor runs, the state changes to settled which can be either resolved or rejected.

Implementation: Code Snippet

Let's create a promise for our problem here:

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

Promises can be bit of hectic stuff if you don't have experience with callbacks and callback hells. But once you grasp this concept, there is no going back !

The `then` and `catch` clauses

The catch function is attached to promise which executes when the promise is rejected. It takes the error sent through reject method as an argument.
The then function is attached to promise which executes when the promise is resolved. It sends the value sent through resolve method as an argument.
There is a finally clause too. It is executed no matter the promise resolves or rejects. It takes no arguments.

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

thePromise.then(function(money) {
// This function is executed when the above promise resolves and returns an //amount of money
})

thePromise.catch(function(error) {
// This function is executed when the above promise rejects due to an error
})

thePromise.finally(function() {
// This function is executed after the promise is resolved or rejected.
})

Thank You! Feedback, suggestions and corrections are highly appreciated. Please write in comments %-)

Beginners in #webdev can go through my article here to have a look at how to build the base for web-development.

Web Development Roadmap-'The Base-Builder'.

Jaskirat Grewal ・ Jun 1 '20

#beginners #webdev #node #javascript

Web Development Roadmap-'The Base-Builder'.

Jaskirat Grewal — Mon, 01 Jun 2020 15:35:45 +0000

Web development is a rapidly growing field in software development. Every beginner would love to put his hands on this fragment.

If you are currently looking for grasping the concepts and knowledge of this technology for your college or personal project, the following roadmap can help you.

Before moving forward, let's look at a website from very high level.

Websites are not all about entering URL and viewing web pages. To create the full stack of website, you need to know how things actually work. I will not enter into very much technality, but to understand how things work let's look into this picture.

(Img Src: Self Taught Coders)
When you enter URL in your browser(client), it sends a request to the server which then gathers the required data (from database) and sends it as response.

Hence every web application has (atleast) these three parts:

The part which is visible on Client Side (or what we call as FRONTEND).
Server Side (BACKEND).
Database.

Note: This roadmap does not involves very advanced frameworks. It is made for having a good exposure to build the base of a newbie. That's why I have named this roadmap- "The Base-Builder"

Roadmap: Part-1 -> The Front-End

A webpage is built considering three points which are provided by three different technologies:
1. HTML: The most crucial basic building block of a website. It defines the content and structure of the webpage.
2. CSS: The design of the webpage. It tells how the website will look to the viewer. Everything related to design like background, fonts, colors etc. are covered by CSS.
3. JavaScript: The behavior of the webpage. Here you define how website responds with user interaction. For example displaying of popup when hovering over some text etc.

Roadmap: Part-2 -> The Back-End

There are many technologies and frameworks through which you can create the server side of a web-application. I am listing most preferred ones below:

Node.js (JavaScript) or Deno (TypeScript).
PHP.
Python (Django Framework).
Java (Spring Framework).
Ruby on Rails Framework.

You can choose any of the above frameworks according to your comfort.

I have worked on projects using all the above frameworks and I prefer working with Node.js as it is comparatively light-weight, fast, easy to maintain and, most importantly, it's JavaScript. So no need for working on learning different languages for beginners.

Roadmap: Part-3 -> Databases

At the heart of an application, what really takes place is exchange of data.
We know that all the databases store data but the main factor that we should consider while choosing a database for an application is fast retrieval and storage.
There are databases that either store data in form of tables (relational databases) or not (non-relational databases).
For beginners, I would recommend the most popular database in the world i.e. MySQL database. The language syntax and logic is easy to grasp and is very effecient for data handling.

Integrating Database to Server

To integrate database with server, there are many drivers available. To connect a Node.js server to MySQL, we can use the node-mysql package. Similarly to connect Spring Boot to MySQL we can use JDBC driver or JPA. The drivers differ with every technology stack so choose one according to yours and use it to connect server to the database.

"Once I am done with above listed, how can I enhance my skills and technology stack?"

The roadmap above is for very basic full-stack development of a website. Nowadays web development has grown quite complex. There are many libraries, frameworks and technologies used across the world for web development. There is another roadmap; that I call the "STEP-UP" roadmap which will be posted soon :-).
**
This is my first blog post so I will really appreciate your views, corrections and suggestions.
Thank You.
**

DEV Community: Jaskirat Grewal

There is a saying...

Any Questions About NestJS? Let's discuss them here:-)

Deploying NestJS Application: Easy and Explained

Nest: Quick Overview

How to Deploy NestJS Application?: The Theory

How to Deploy NestJS Application?: The Platform Generic Steps

If you could design a Software Engineering Course, what will it look like?

How you doin!

JavaScript Promises for Beginners

Understanding Promises

States of a Promise

Implementation: Code Snippet

The then and catch clauses

Web Development Roadmap-'The Base-Builder'.

Jaskirat Grewal ・ Jun 1 '20

Web Development Roadmap-'The Base-Builder'.

Before moving forward, let's look at a website from very high level.

Roadmap: Part-1 -> The Front-End

Roadmap: Part-2 -> The Back-End

Roadmap: Part-3 -> Databases

Integrating Database to Server

"Once I am done with above listed, how can I enhance my skills and technology stack?"

The `then` and `catch` clauses