DEV Community: Ritik Ambadi

Essential Concepts in JS

Ritik Ambadi — Sat, 28 Aug 2021 18:36:27 +0000

For first-timers , Javascript might seem easy at first with its C-like syntax...

However the way it runs, the constant changes that are made to the language (ESNext) and its frameworks might overwhelm a beginner.
I'm here to clear the confusion surrounding what I think is a beautiful , but most importantly , a highly lucrative language.

Highly Lucrative because JS can do almost anything you want it to do today with much ease.

Want to build a Web Application? No Problem.
Want to build a CLI Tool? No Problem.
Want to build a Desktop App? Puh. Easier done than said!

The increasingly vast amount of packages and libraries being made available daily indicate how abstract JS is when it comes to building a software application.

JS however seems to receive a lot of hate , mostly because of how unconventional it is when compared to its rivals. It is confusing for anyone who might miss out on the theoretical aspects of JS.

A lot of people overlook the theoretical aspects of Javascript before diving into the language. These concepts help us wrap our head around the different paths and patterns we take when building Javascript Applications. These patterns exist across every framework in JS Land so it makes a lot of sense to go through these concepts before learning the language itself.

Features Of JS

(1) Multi-paradigm

Javascript supports procedural , object-oriented and event-driven functional programming!
Getting to grips with JS' Object Oriented Style of Programming can prove to be extremely beneficial.

Object Oriented Programming helps programmers visualise components of a Software Application much more easily.
Furthermore , learning Typescript (Javascript with Types) allows programmers to implement the best design patterns in the industry with much ease. These design patterns are used to solve the most common problems encountered in software programming in the most efficient manner possible.

This versatility makes Javascript very approachable but also very powerful.

(2) Interpreted

Javascript is different from C/C++ wherein , rather than a program being read at once , It is interpreted line-by-line. This is to say that JS will be slower than compiled languages like C/C++.

Warning: Javascript is infamous for being an extremely passive language during runtime. Troubleshooting for errors is extremely difficult.

Don't be disheartened however. With time and practice , you'll learn how to comfortably sail through. The most common error involves your variables returning NULL values. When such issues do creep up , head onto Stack Overflow because I guarantee you , you're not the first to get stuck with an error , no matter how niche it may be. It's always a good idea however to use the console.log() liberally while your projects are undergoing development. This helps you pick out exactly the moment in your program's lifecycle , where your variable might have flaked out.

(3) Single-Threaded

Javascript can only perform one single task at a time. It queues different tasks into different queues based on type.
In the most abstract sense , Javascript will basically group Synchronous tasks and Asynchronous tasks and queue them separately.

Synchronous tasks are statements that are processed the moment they're encountered , i.e they run instantly. These tasks include log statements , variable declarations , conditional checking etc.

Asynchronous tasks involve tasks that may take a variable amount of time to return an output. An example for asynchronous tasks may be requesting information from Web APIs.

Additionally, Javascript also has a Job Queue which is used to deal with a JS Feature called Promises.

You can practically see Javascript's single threaded nature by right clicking on this web page and hitting the inspect tab. Next , go to the console tab on the window that has just opened. Type the following code and hit enter.

while(true) {}

You can now observe that this page has become completely unresponsive. This is because the Javascript on this page is now busy running the infinite while loop that we executed above.

(4) Non-Blocking

We've discussed about Asynchronous tasks before. Since JS runs in a single-threaded environment , by default , it waits for nobody!

Asynchronous code blocks are executed only after all the Synchronous code blocks are executed irrespective of the code's position in the program.


console.log("I'm the first statement")

setTimeout(()=> {
console.log("I'm the second statement")
},1000)

console.log("I'm the third statement")

Here console.log() logs the statement inside it to the console.
The setTimeout() function described above runs the second statement after one second.

On examining the output

I'm the first statement
I'm the third statement
I'm the second statement

We can see that the third statement was logged before the second statement. This is because of JS's inherent method of handling Sync and Async code blocks.

(5) High-level

Javascript is a high-level language. High-Level languages could simply mean that they're much more closer to the language humans speak. High-level languages are capable of offering more features to help programmers better express what they're trying to build.

This high-level nature of Javascript helps it best serve the client-side portion of the web. A major limitation for JS used to be that it could only be served on the client-side and couldn't do file manipulations like most server-side languages could.

However this has changed with NodeJS that allows developers to use Javascript to build Backend Servers. Therefore with just one language , a software developer can operate on both the server and client-side. This has led to Full Stack Engineers becoming prominent.

(6) Dynamically Typed

Javascript is a dynamically typed language. This means that unlike C where we need to specify the datatype for a variable , we can instead use type-inference in Javascript to automatically sense the type of data , a variable holds.

// In C variables must have datatypes. In order to change datatypes from one type to //another , we need to use type-casting
int a = 5;
char b = "a";
float c = 7.036;

In Javascript , we use let and const to declare either variables or constants respectively.

let a = 5
console.log(a) // 5
a = 'Hello World'
console.log(a) // Hello World

const b = 'JS is awesome' 
console.log(b) // JS is awesome

b = 'I changed my mind'
console.log(b) // Error: const cannot be changed

While type inference may seem like a plus point because of its ease of use , it immediately becomes a con for larger projects that require type safety as a feature.

For this reason , larger projects use TypeScript which is just a wrapper over Javascript that provides types , interfaces and various other features.

Learning Strategy

It takes a while to settle in JS Land but I have a simple checklist that serves as Minimum Requirements for learning frameworks like Express or ReactJS.

First off , do not rush towards learning these frameworks. Take your time mastering Vanilla Javascript .

The Basics

Variables and Constants
Conditional Blocks (if-else)
Loops (for, while , forEach)
Switch Case
Functions

These are your essential programming fundamentals.

The Advanced Part (Minimum Requirements)

Async/Await
Promises
Classes in Javascript
Rest/Spread Syntax
Array/Object Iterators
Array Destructuring
Modules (import,export)

Continue learning as you build projects and soon enough , you'll have a pretty strong grasp on the language.

Prisma for beginners

Ritik Ambadi — Sat, 28 Aug 2021 18:31:01 +0000

About Prisma

Prisma is an ORM with an introspect and migrations feature that reflects changes across SQL definitions and GraphQL Types.

When you're working with GraphQL , it can become tedious to make changes to your Type Schema and subsequently make those very same changes to your Database Schema. Therefore it becomes a necessity to find a tool that can persist these changes.

However , Prisma needn't always be used with GraphQL. It's a great tool on its own even if you're building standard REST APIs.

Prerequisites

PostGRES Installed locally (psql)
NodeJS Installed
npm Installed

Setting up Prisma

Initialise a Node Project using npm.

npm init -y

Install the Prisma CLI Tool that is used to generate the schema.prisma
file.

npm install @prisma/cli --save-dev

Install the Prisma Client that is used to interface with the Database

npm install @prisma/client

Let's generate a Prisma project next.

npx prisma init

This generates a prisma folder containing the schema.prisma file.

Prisma differs in the sense that it offers its very own schema.prisma file with a specialised syntax for defining your schema. However , we'll not be editing this schema file now. We'll generate a schema using SQL first.

We've also generated a .env file. You can edit the DATABASE_URL variable to connect to your PostGRES Database.

#.env

DATABASE_URL="postgresql://username:password@localhost:5432/dbname?schema=public"

Replace username , password with your PostGRES credentials and replace dbname with any name you wish to give to your Database. (Database does not have to be created yet) I will name this Database as 'test'.

Migrations and Introspection

Prisma offers two approaches to persist changes across Type Schema and Database Schema.

Introspect (SQL → Data Model)
Migration (Data Model → SQL)

Migration

Let's generate a Data Model in our schema.prisma file first , using SQL.
Login to psql. Create the Database first.

-- Create a Database
CREATE DATABASE test

Connect to the database using \c test. Proceed to execute the following SQL commands to generate our users and posts table along with our custom user type.

-- Create a custom type
CREATE TYPE "user_role_enum" AS ENUM ('user', 'admin', 'superadmin'); 

-- Create a table
CREATE TABLE "users"(
    "id" BIGSERIAL PRIMARY KEY NOT NULL,
    "name" VARCHAR(255) NOT NULL,
    "email" VARCHAR(255) UNIQUE NOT NULL,
    "role" user_role_enum NOT NULL DEFAULT('user')
);

-- Create a table
CREATE TABLE "posts"(
    "id" BIGSERIAL PRIMARY KEY NOT NULL,
    "title" VARCHAR(255) NOT NULL,
    "body" TEXT,
    "userId" INTEGER NOT NULL,
    FOREIGN KEY ("userId") REFERENCES "users"("id")
);

Generating Data Models using Introspect

Once the table has been succesfully created , run the introspect command to generate Prisma Models.

npx prisma introspect

This will generate an equivalent Data Model in the schema.prisma file.

//schema.prisma
model posts {
  id     Int     @id @default(autoincrement())
  title  String
  body   String?
  userId Int
  users  users   @relation(fields: [userId], references: [id])
}

model users {
  id    Int            @id @default(autoincrement())
  name  String
  email String         @unique
  role  user_role_enum @default(user)
  posts posts[]
}

enum user_role_enum {
  user
  admin
  superadmin
}

As you can see , with the introspect feature , we've managed to convert our SQL commands into an equivalent Data Model.

Prisma also provides a GUI tool called prisma studio to view and interact with our Database.

npx prisma studio

This will open the GUI tool in your browser.

Migrations in Prisma

We've seen how we can convert our SQL commands to Data Models. Now let's look at how we can do the opposite. Delete your Database.

DROP DATABASE test;

This would have deleted the Database. Enter \l into psql to check if it has been successfully deleted.

Migrations are used to generate SQL commands for given Prisma Data Models. Describe your model in the schema.prisma file as necessary.


model User {
  @@map(name: "users")
  id Int @default(autoincrement()) @id
  uuid String @default(uuid()) @unique
  email String @unique
  name String?
  role UserRole @default(USER)
  createdAt DateTime @default(now()) @map("created_at") 
  updatedAt DateTime @updatedAt @map("updated_at")
  posts Post[]
}

model Post {
  @@map(name: "posts")
  id Int @default(autoincrement()) @id
  uuid String @default(uuid()) @unique
  title String
  body String?
  user User @relation(fields: [userId], references: [id])
  createdAt DateTime @default(now()) @map("created_at")
  updatedAt DateTime @updatedAt @map("updated_at")
  userId Int
}

enum UserRole {
  USER
  ADMIN
  SUPER_ADMIN
}

You can read more about the Data Model's syntax here

The Model above is a slightly modified version of the model we generated previously.
Let's generate a table and its equivalent SQL commands next.

Run the following command to generate a Prisma migration.

npx prisma migrate dev --preview-feature

You can give your migration any name you wish to. This will generate a migrations folder with all the necessary documentation and commands that were run in sequence to generate the SQL tables.

Migration can create a Database if the Database doesn't exist already

We can check if our tables were successfully created using psql.

Therefore we've looked at the two main approaches to persisting changes in schema.
Finally , Let's look at the Prisma Client.

Prisma Client

Run the following command to generate a Prisma Client

npx prisma generate

The Prisma Client helps us interact with our PostGRES Database.

const { PrismaClient } = require("@prisma/client");

const prisma = new PrismaClient();

async function main() {
    const users = await prisma.users.findMany();
    console.log(users);
}

main();

We can send queries to perform CRUD operations on our Database. Read more about these operations here.

Note: Don't forget to generate the Prisma Client every time an introspection or migration is performed.

Where do I go from here?

Ritik Ambadi — Sun, 16 Aug 2020 17:06:15 +0000

Hey there! I'm a Computer Science student currently in my third year. I've always wanted to be a web developer and I started on it the day I began college. I'm done with

HTML/CSS (Sass,Variables,Responsive)
Web components
Javascript
ReactJS , SvelteJS , ElectronJS
NodeJS (Express - Rest APIs and SSR Apps,Authentication,CLI Tools)
Golang (Fiber,Cobra)
MySQL , MongoDB , CouchDB , PostGREs
Python,Java,C/C++ for problem solving

Where do I go from here? I wanted to gain some exposure working on the production side of things but been having difficulty getting an internship. Can someone guide me through what are the technologies that I should tackle next?

Also can someone guide me through the lifecycle of building a complete web application that is secure , stable , scalable and maintainable? i.e an Application that if I make , I can be proud to sell to a potential client.

Setting up Auth Routes with Express

Ritik Ambadi — Sat, 15 Aug 2020 18:02:59 +0000

In the previous part , we learnt how to connect to MongoDB with Mongoose. We also defined our basic User Schema.

In this part , we're going to setup our /login and our /registration routes. These API endpoints are going to allow our client-side applications to send POST requests to register new users as well as to allow existing users to login to their account.

Setting up our Routes ✨

Let's start by creating a new folder in our project directory called routes.

In this folder , we're going to create our Auth.route.js file. We're going to define all our Routes in this file and later import it in our server.js file.



const express = require('express');
const router = express.Router();

const User = require('../models/User.model');

router.post('/register',async(req,res) => {
  try {
   res.json({message:"This is the register route!"})
  }
  catch(err) {
   console.error(err.message)
  }
})

router.post('/login',async(req,res) => {
  try {
   res.json({message:"This is the login route!"})
  }
  catch(err) {
   console.error(err.message)
  }
})

In the code above , we require('express') and then instantiate Router which is built into Express.

Router helps us build out our routes. We can handle get , post , patch , delete and most other HTTP request methods for our routes by chaining the required type of request to our router object. i.e



router.get('/[our-required-route]',() => {
  //This is a callback function
})

We're going to define what should be done when the route is hit, inside the callback function.

In our first code snippet , our callback function is async. This will make our life easier later when we need to interface with MongoDB to fetch and post data.

For the sake of testing , we will send back json data , with a message key containing a string value using res.json.

The callback functions come with a req and res parameter which help us interact with a user's request and the response we can send back respectively.

Let's finally add this route to our server.js file. Add the following code before the require('./helpers/initDB')() line.

We will require our Auth.route file and initialise it to AuthRoute. We will finally use the AuthRoute by making use of the use method that Express provides. We'll also define the parent route to be /api/auth. This means that if we want to hit our register route , we'll actually have to hit /api/auth/register.



...

const AuthRoute = require('./routes/Auth.route');
app.use('/api/auth', AuthRoute);

...

Installing REST Client on VSCode to test our APIs ☀️

If you want to test the APIs we've just built , you can download the REST Client by going to the Extensions tab on VSCode. You can additionally download Postman or Insomnia as well to test your API.

Let's make a POST request to our APIs that we defined earlier.
In our routes folder, create a new file called route.http. Then write the following line into this file.



POST https://localhost:5000/api/auth/register

You'll see a Send Request label pop up just over this line now. Click on it.

This will now open a tab on the side with a JSON response.
This response should be



"message" : "This is the register route!"

Make sure your server is running before making the request. You can do this by using npm start.

Analysing our Login/Registration workflows

Before we can Login or Register users , we need to break down what we need to do step-by-step.

Let's look at our Registration workflow.

Validate the received registration details
If there is an error in received registration details , then return 400 status code and the error message.
Check if email exists. (400 if error)
Check is username exists. (400 if error)
Salt and then hash the password. (Read Part One)
Save our user in the database.

Let's break down our Login Workflow next.

Validate the received login details.
Check if user with given email exists. (400 if error)
Check the received user password against the hashed DB password using bcrypt.compare().
Return Success message if password matches , else return invalid details message. (Additionally provide a JWT Token which we will discuss in part 4)

In both the workflows described above , we need to validate the details that we receive from the client side. This involves a lot of string handling which can be tedious work.
However , in this tutorial we're going to use a ready-made package for validation called Joi.

We're also going to install another package called bcrpyt. Bcrypt provides ways to salt , hash and compare passwords with its built in methods.

Let's install them both. Exit your server using Ctrl+C or Cmd+C and run the following npm command.



npm install @hapi/joi bcrpyt

Writing our Joi validation schemas 🌈

Let's get started on writing our Joi validation schemas. Writing a Joi Validation schema is very easy. We define a Joi object and define the requirements that our data in this Joi object should have. We can do this by chaining together the built-in methods that Joi provides.

Want to check if a string has at least 6 characters and can only be alphanumerical?

We can achieve this simply with the following code



ourString: Joi.string().min(6).alphanum(),

Joi will return an error message if the ourString value does not pass the conditions.

Let's now go ahead and build out our validation schemas for the auth-api.

Create a validator.js file in your /helpers directory.
Add the following code to this file.



const Joi = require('@hapi/joi');

const registrationValidator = (data) => {
    const schema = Joi.object({
        username: Joi.string().min(6).required().alphanum(),
        email: Joi.string().min(6).required().email(),
        password: Joi.string().min(6).required(),
        role: Joi.string()
    })
    return schema.validate(data);
}

const loginValidator = (data) => {
    const schema = Joi.object({
        email: Joi.string().min(6).required(),
        password: Joi.string().min(6).required()
    })
    return schema.validate(data);
}

module.exports.registrationValidator = registrationValidator;
module.exports.loginValidator = loginValidator;

Finally let's require this file in our Auth.route.js file.



const { registrationValidator, loginValidator } = require('../helpers/validator');

Building our Register Route 🌈

Inside our try block , lets start by processing the data that we receive by using req.body.



try {
const { error } = registrationValidator(req.body);
if (error) {
return res.status(400).send(error.details[0].message);
}
}

We pass req.body to our registrationValidator function that we previously defined our validator.js file.

If our validator encounters an error in the receiver data , we're going to return the error message with a status code of 400.

You can test if the API works so far by going to the rest.http and adding the following



POST https://localhost:5000/api/auth/register
content-type: application/json
{
    "email":"test@test.com",
    "username":"test",
    "password":"test",
}

After hitting the Send Request button , you'll see that we get an error message with a 400 status code. This is because both our username and password are only 4 letters long.

Now that validation is done , We can check if the username or email already exist in the database.

Checking if username and email already exist

Add the following code next ,



//EmailExistCheck
const emailExists = await User.exists({ email: req.body.email });
if (emailExists) return res.status(400).send('Email already exists.');


//UsernameExistCheck
const userNameExists = await User.exists({ username: req.body.username });
if (userNameExists) return res.status(400).send('Username already exists.');

We use the exists method that MongoDB provides to check if a document containing the given data exists.

We'll return the error message with a 400 status code if either values exist.

Salting and hashing our passwords before storing

Let's make use of the bcrypt library that we had installed earlier. Make sure you've imported the bcrypt library with the following code.



const bcrypt = require('bcrypt');

Next , let's generate a salt using the in-built genSalt() method inside bcrypt.



   const salt = await bcrypt.genSalt(10);

If you're unaware about salting or hashing , read the first article of this series.

The bcrypt genSalt() method generates a salt for us that we'll now use with our password. Let's use the bcrypt.hash() method to hash our salted password. This method takes the base password and the generated salt as its parameters.

Go ahead and add the following code to your file next.



 const hashPassword = await bcrypt.hash(req.body.password, salt);

Now that we have hashed our password , let's go ahead and construct our new user object with the newly hashed password.



     const user = new User({
                username: req.body.username,
                email: req.body.email,
                password: hashPassword,
            });

Finally , let's save this user into our Database using the save() method.



   const savedUser = await user.save();
            res.send(savedUser);

Let's send back the user that we have saved just now as our response with the res.send() method.

Finally , go back to the rest.http file and make a POST request with three valid user credentials defined by our Joi Schema.

If everything went well , you should see the saved user's details containing the hashed password in your response.

You can additionally also go to your Mongo Atlas Client to see if the user's details were registered.

With this , we've finished the process of registering our user.

Let's move on to building out the /login route next.

Building our Login route 🌈

Building the login system involves the same validation process as registering our users. Go ahead and paste the following code in your file inside the try block of your login route.

We're also going to use MongoDB's findOne() method to extract the credentials of the corresponding email that the user had entered. We will store this inside a user variable.



    //Use Login Values Validator
            const { error } = loginValidator(req.body);
            if (error) return res.status(400).send(error.details[0].message)

            //UserExistCheck
            const user = await User.findOne({ email: req.body.email });
            if (!user) return res.status(400).send('Account does not exist with provided email and password combination.');

Comparing the hashed password with the entered password

To compare our passwords, we're going to make use of bcrypt's .compare() method. This method takes the user's entered password as its first parameter and the hashed password stored in the DB that we extracted earlier.



const validPassword = await bcrypt.compare(req.body.password, user.password);
            if (!validPassword) return res.status(400).send('Incorrect Password');

The code above stores the bool result of the bcrypt.compare() method. If the password is invalid , we return a message "Incorrect Password" with a status code of 400.

Finally , we'll return a success message back to the user to simulate a successful login attempt using the res.send() method.



res.send("Login Successful!")

Finally . you can test this out in your rest.http file by making a POST request to /api/auth/login with valid credentials. If all goes well , you should now see the "Login Successful" message!

Congratulations! 🎉

You've just built a login/registration system using Express and MongoDB.

In the next part , we're going to deal with JWTifying our Authentication/Authorisation process. 👨🏻‍💻

Build a Weather CLI Tool using NodeJS , Inquirer and WeatherAPI

Ritik Ambadi — Thu, 23 Jul 2020 16:30:42 +0000

CLI Tools are pretty cool! ✨

They give you a very "hacky" feel , but what is also really cool about CLI tools is that

They're fast and functional.
They're really easy to build

Today we're going to build a Weather CLI Tool using an npm package called Inquirer. We're also going to use another package - Boxen to draw boxes in our Terminal and finally axios to make HTTP requests to Third-party APIs.

What you'll learn in this project ☀️

What are APIs? How to use APIs in our Frontend Applications. (Making HTTP requests using axios)
Object Destructuring (ES6)
How to build a CLI tool that can be used globally.

Steps involved 🌈

Initialize a NodeJS Project using npm init
Installing necessary packages.
Interfacing with a Geolocation API that returns our Location Coordinates.
Interfacing with the Weather API.
Setting up Inquirer and Boxen.
Displaying Weather Details on the Terminal.

The Github Repo

Github Repo

Let's get started!

Setting up NodeJS and installing necessary packages.

To begin , create a project directory.

> mkdir weather-cli

cd into this project directory.

> cd weather-cli

Run

> npm init -y

to setup a NodeJS project.

Let's install the necessary dependencies next.
Run

> npm i axios boxen inquirer

Set up CLI tool to run globally 🌈

Create a folder with a file called weather.js in our project directory. We'll write all our code in this file.

> mkdir bin && touch bin/weather.js

Add the following code to your weather.js file.

#!/usr/bin/env node

console.log("Hello World");

The line #!/usr/bin/env node is used to tell our system that this file is a node-commandline script.

Next ,
in your package.json file , change "main": "index.js", to

"main": "bin/weather.js",

Finally , add the following to the end of your package.json just after dependencies.

 "bin": {
    "weather": "./bin/weather.js"
  }

Finally your package.json should look like this.

{
  "name": "weather-cli",
  "version": "1.0.0",
  "description": "",
  "main": "bin/weather.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "boxen": "^4.2.0",
    "chalk": "^4.1.0",
    "inquirer": "^7.3.2"
  },
  "bin": {
    "weather": "./bin/weather.js"
  }
}

Now , to run your CLI tool , run the following command

> node .

This should display the Hello World message.

> node .
 Hello World

To use this package globally ,
you can install it using

> npm install -g .

Let's however do this at the final stage.

What is an API? 🌈

An API is basically a kind of a "Menu-card" for Client-side applications.
Backend applications can be thought of as the "chef" that can cook up dishes.

Let's take this analogy , and talk in terms of data.

Backend services can provide different kinds of data.

Web Applications provide an API (Menu-card) for developers like us so that we can make applications off of their data.

Web Applications typically do this to avoid developers from scraping data off of their pages and overloading the page or to charge developers upfront.

The Physical Manifestation of an API

An API is simply a URL to which we make HTTP requests ,

eg. https://api.getweather/current.json?q=London

By making an HTTP GET request to this URL , we can get the Data that this URL provides in the form of JSON/XML.

Let's break down the URL that I've defined above.

https://api.getweather/current.json is our base-uri

If we want the current weather for London , after our base-uri , we append a ? and then our query-string or params in the form of ?key=value pairs.

If we want the current weather for London for the next 7 days , we can chain our params using &. i.e

https://api.getweather/current.json?q=London&days=7

Why do we need a Geolocation API?

In order to request for Weather Data from our WeatherAPI , we need a set of our Location Coordinates (Latitude , Longitude).

Luckily , we can obtain our Location Coordinates using our IP Address.

Making a `GET` Request to our Geolocation API using axios.

Add the following code to your weather.js file.

const axios = require('axios');
const GL_API = 'http://ip-api.com/json/';

const getGeoLocation = async () => {
    const response = await axios.get(GL_API);
    return response.data;
}

In the code above , I have declared the GL_API constant which is the base-uri for our Geolocation API. I have also required axios and set it to const axios.

You can read more about this API here.

I have added an async function called getGeoLocation. This is because axios.method_name returns a promise that we can easily handle using await.

Let's look at the data that's returned.

{
  status: 'success',
  country: 'India',
  countryCode: 'IN',
  region: 'TG',
  regionName: 'Telangana',
  city: 'Hyderabad',
  zip: '500003',
  lat: 12.346,
  lon: 43.4574,
  timezone: 'Asia/Kolkata',
  isp: 'BSNL Internet',
  org: '',
  as: 'AS9829 National Internet Backbone'
}

We return response.data for our getWeather function that we will define shortly.

You can console.log(response.data) to see if you're getting your location's coordinates. Don't forget to invoke your function when you're testing.

Interfacing with our WeatherAPI

Before writing any code ,

Go to https://www.weatherapi.com and Create an Account.

We need to do this to get an API_KEY.

After Registering and Logging in , you should see your key on the profile page.

Writing the `getWeather` function

const axios = require('axios');

const GL_API = 'http://ip-api.com/json/';
const W_API = 'http://api.weatherapi.com/v1/current.json?key=<your_api_key>&q='

const getGeoLocation = async () => {
    const response = await axios.get(GL_API);
    return response.data;
}


const getWeather = async() => {
    const {lat , lon} = await getGeoLocation();
    const WeatherURI = W_API + lat + ',' + lon;
    const response = await axios.get(WeatherURI);
    const {temp_c,condition:{text}} = response.data.current;
    console.log(temp_c,text);
}

Let's analyse the getWeather function.

We destructure the lat and lon from the response.data that our getGeoLocationfunction returns.

We construct const WeatherURI in the format below

*W_API(base_uri) + lat(Latitude) + comma(,) + lon(Longitude) *

The URI then becomes ,

http://api.weatherapi.com/v1/current.json?key=<api_key>&q=<lat>,<lon>

We make a GET request to the newly constructed WeatherURI. We store the response in a const.

Let's log the response.data

{
  location: {
    name: 'Hyderabad-Deccan',
    region: 'Andhra Pradesh',
    country: 'India',
    lat: 14.28,
    lon: 41.46,
    tz_id: 'Asia/Kolkata',
    localtime_epoch: 1595516510,
    localtime: '2020-07-23 20:31'
  },
  current: {
    last_updated_epoch: 1595516445,
    last_updated: '2020-07-23 20:30',
    temp_c: 24,
    temp_f: 75.2,
    is_day: 0,
    condition: {
      text: 'Mist',
      icon: '//cdn.weatherapi.com/weather/64x64/night/143.png',
      code: 1030
    },
    wind_mph: 0,
    wind_kph: 0,
    wind_degree: 289,
    wind_dir: 'WNW',
    pressure_mb: 1009,
    pressure_in: 30.3,
    precip_mm: 0,
    precip_in: 0,
    humidity: 94,
    cloud: 75,
    feelslike_c: 25.8,
    feelslike_f: 78.5,
    vis_km: 5,
    vis_miles: 3,
    uv: 1,
    gust_mph: 6.3,
    gust_kph: 10.1
  }
}

Let's destructure temp_c (current.temp_c) and text (current.condition.text). I've used the Object Destructuring syntax here again.

You can now call the getWeather function and you'll now see the temperature and a description of the weather of your location.

> node .
24 Mist

There's a simple weather tool!

Let's add some more functionality to our Weather application now using Inquirer.

Modify the getWeather function to return response.data.current.

const getWeather = async() => {
    const {lat , lon} = await getGeoLocation();
    const WeatherURI = W_API + lat + ',' + lon;
    const response = await axios.get(WeatherURI);
    // const {temp_c,condition:{text}} = response.data.current;
    return response.data.current;
}

Inquirer

Inquirer lets you add prompts to your CLI Tool. You can present questions to the user and then take input from them to execute code accordingly.

You can read about inquirer here ⭐️

Add the following code to weather.js

inquirer
    .prompt([
        {
            type: 'list',
            message: 'Select an option ☀️',
            name: 'source',
            choices: [
                'Temperature in Celsius',
                'Temperature in Farenheit',
                'Wind data',
                'Precipitation',
                'UV Index'
            ],
        },
    ])
    .then(async (answers) => {
        console.log('\n');
        const weather =await getWeather();
        switch(answers.source) {
            case 'Temperature in Celsius':
                console.log(boxen(`Weather : ${weather.temp_c} \u02DAC ${weather.condition.text}\n Feels like: ${weather.feelslike_c} \u02DAC`,{padding:1} ))
            break;
            case 'Temperature in Farenheit':
                console.log(boxen(`Weather : ${weather.temp_f} \u02DAF ${weather.condition.text}\n Feels like: ${weather.feelslike_f} \u02DAF`,{padding:1} ))
            break;
            case 'Wind data':
            console.log(boxen(`Wind Speed: ${weather.wind_mph}mph\nWind Degree: ${weather.wind_degree}\nWind Direction: ${weather.wind_dir}`,{padding:1}))
            break;
            case 'Precipitation':
            console.log(boxen(`Precipitation (mm): ${weather.precip_mm}\nHumidity: ${weather.humidity}`,{padding:1}))
            break;
            case 'UV Index':
            console.log(boxen(`UV: ${weather.uv}\nCloud: ${weather.cloud}`,{padding:1}))
            break;
            default:
            console.error('Invalid Option!')
            break;
        }
    })
    .catch(err => {
        console.error(err);
    });

The code above might look complicated but isn't.
inquirer provides a .prompt method that takes in a few parameters.

We provide the following parameters

type: list
message
name
the choices (array) that you want to be presented on the screen

.prompt returns a promise.
You can handle the promise with a .then
We define an async callback function.

This callback function provides a variable that we can use. We've defined the parameter as answers. We destructure source from the answers variable.

We then use a switch-case construct to handle different user's choices.

switch(answers.source) {
 case 1: 
 statement
 break;
 ...
}

We provide the data that the user needs based on the user's decision by using the weather constant.

const weather = getWeather();

And with this , we've just built our very own Weather CLI tool! 🎉

You can now install this tool globally for personal use.

> sudo npm install -g .
weather

That's all folks! 👨🏽‍💻🌈

You can make your own changes to this project and once you feel like the world is ready to use your awesome project ,

You can read this article from Zell , which details over how you can publish your packages on npm.

Neumorphism in CSS with just two variables!

Ritik Ambadi — Wed, 22 Jul 2020 10:36:13 +0000

Neumorphism in 2020 was touted to be the next big trend in app/web design. Although there have been accessibility concerns , Neumorphism sure is a pretty cool design language. Infact what makes it really awesome is just how easy it is to implement it.

Today , we're going to learn how to implement Neumorphism in CSS with just two variables.

About Neumorphism 🌻

Neumorphism is a hot new take on "Skeuomorphism" which has been around for quite a while. If you've used the older versions of iOS before iOS 7, you would've have noticed that apps on the iPhone are designed to reflect their real life, physical counter-parts.

For example, the iOS Notes App was made to look like a real Notepad with a Leather cover.

Neumorphism can be easily understood as 3D over a 2D canvas. We assume that there's a light-source from any one side of the plane.

We present this illusion of a light-source using "directional" shadows. This provides a 3D Effect.

We define height and depth using shadows that fall outward a certain element and shadows inside the element (inset-shadows) respectively.

What are we building today? 🌈

A simple , Neumorphic button.

The CSS Variables

Important
A Golden rule for using Neumorphism in your web-design is to make sure that your background and your components have the same colour. Use a pale-blue or a greyish-white colour for best results.

We can implement Neumorphism using the box-shadow property in CSS. The trick is to target two sides of a Neumorphic component and add a dark shadow to one side and a light shadow to the other side.

:root {
    --nm: 6px 6px 16px 0 rgba(0, 0, 0, 0.2),
    -6px -6px 16px 0 rgba(255, 255, 255, 1);

    --nm-inset:inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2),
    inset -4px -4px 8px 0 rgba(255, 255, 255, 0.8);
}

These are the two variables that I've defined for two different states of a Neumorphic component.

Above plane (height)
Below plane (depressed)(depth)

Let us analyse the variables in greater depth.

The nm variable

This variable is used to make a component project outwards from the surface.

On observing the nm variable , you'll see that the first part contains 6px 6px 16px 0 rgba(0,0,0,0.2)
This part is used to define the black shadow at the corners on the right side of the button.

Make sure that the transparency is set to <0.4. Dark shadows will make your button look like the buttons with the ugly drop-shadows from the early 2000s.

The second part of the box-shadow is used to add a lighter shadow. As you can see, the rgba is set to use a white color with 0.8 transparency. This is because we want the light to provide an illusion of striking the button from the left side. A higher opacity means a brighter light. This also makes your design more visible and distinct from the surface.

The nm-inset variable

This variable is used to make a component project inwards (to have depth rather than height) from the surface. This can be used to create a button-press effect.

We basically want to use the shadows we've defined in our nm variable. However , we want these shadows to be inside our button.

This is very easy to do. Just add the inset property before defining the shadow i.e

inset 4px 4px 8px 0 rgba(0, 0, 0, 0.2)

With this , you have defined two CSS variables that can now be used in any project involving Neumorphism.

Your neumorphic web-design can however be improved further by adding additional box-shadows and tweaking the numbers till you're satisfied with the end result.

Let's make a neumorphic button next.

button {
  font-size:14px;
  font-family: 'Poppins',sans-serif;
  cursor:pointer;
  padding:15px 30px;
  border:none;
  border-radius:4px;
  background-color: var(--bg-color);
  box-shadow: var(--nm);
  transition: box-shadow 0.3s ease-in-out;
}

This adds some basic styling to our Button.

Note that I've set the background-colour to the same colour as my body. I've used CSS variables for easier, modular code.

I have also added a box-shadow and set its value to the variable nm.

The transition property adds an animation when we hover over the button.

Let's add styling to our button hover state next.

button:hover {
 box-shadow:var(--nm-inset);
}

That's it!

It takes one line of CSS to add a button-press effect.

With this , you've learnt how to add Neumorphism to your web project with just two variables! 🎉

Down below , I'm linking a Design Daily Link to a Neumorphic Design and a Github Repo on exactly how I coded the design using this technique.

Design Daily Link 🌈

Github Repo ☀️

That's all for today.

Have a good one folks! 👨🏻‍💻

Connecting to MongoDB using Mongoose 🌳

Ritik Ambadi — Tue, 21 Jul 2020 13:15:38 +0000

This is the second part of the "How to write an Authentication API using MongoDB and Express" series. 🌈

You can check out the First Part here

In this part , I'm going to cover the simplest approach to connecting to MongoDB using the Mongoose ODM.

Mongoose provides different lifecycle methods as well as simple ways to write out elaborate Schemas that interface with your MongoDB collections. We'll make use of this functionality today and define our User Schema using Mongoose.

Setting up a basic server using Express

Prerequisites 🌻

NodeJS installed on your system.
npm installed on your system.
Any Code Editor (Visual Studio Code, Sublime)
Postman for testing out our API. (or Insomnia , VSC REST CLIENT)
Terminal

Initializing a Repository 🌈

cd into your preferred directory and run npm init -y.
The -y flag says yes to all the options when npm prompts you to fill out the package.json file.

npm is a package manager that allows us to add , use and manage libraries , frameworks and additional packages in our Project.

Run npm i express mongoose to install express and mongoose. This will add express and mongoose to your project. You can check if they're installed by inspecting your package.json file.

Let's also install two additional devDependencies. devDependencies are only used for development purposes and are not shipped in production. To install packages as devDependencies, we use the --save-dev flag.
npm i nodemon morgan --save-dev.

We'll use nodemon to reload our server everytime we make changes to our server.js file. we'll use Morgan to monitor HTTP requests made to our server.

Go to your package.json file and add "start": "nodemon server.js", under scripts.

Your package.json should look like this at the end.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.9.25",

  },
"devDependencies" : {
  "nodemon": "^2.0.4".
  "morgan": "^1.10.0"
}
}

Setting up an Express server

Let's set up a simple Express server. In your project directory , create a server.js file and add the following code.

const express = require('express');

const app = express();

const morgan = require('morgan'); 
app.use(morgan('tiny'));

app.listen(5000, () => {
    console.log("Server started on PORT : ", port);
})

In the code above , we bring in the dependencies we require by using the require(<package_name>) syntax and then assign it to a variable.
we invoke the express() function and store it's return value in app.

const app = express()

We also require the morgan package. Since morgan is a middleware , we use it using the app.use(<middleware>) method. We also pass 'tiny' parameter. There are different values you can pass as parameters to the morgan function. You can read more about morgan here.

Go back to your terminal and run npm start to startup your server and you should see the following message.

> npm start
Server started on PORT : 5000

Creating a MongoDB Cluster 🌈

Let's head to https://www.mongodb.com and set up a cluster for personal use.

Create an account and sign in to it. On signing in , you should see a button on the right that says Create a New Cluster

In the next screen , choose any Cloud provider and choose a Region with a free-tier that's closest to you.

Once you're satisfied with your options , proceed to create a cluster. It will take 3-5 minutes to create a cluster and soon , you'll see your newly created cluster on the home screen.

Now , before we can connect to our cluster , we need to make a few more adjustments.

Go to the Database Access tag and click on Add New Database User

Select the method of authentication as Password and fill out a username and password for the DB user.

Make sure to jot down the password and username somewhere for later , when we need to connect to our Database.

Set the user's privileges to Read and Write to Database and click on the Add User Button. You can now see that the user has been added.

Finally, click on the Network Access tab in the left pane and click on the Add IP Address Button.

On the pane , that pops up , click on the Add Current IP Address Button and then click on the confirm button.

With this , we're done with setting up our MongoDB Cluster.

Let's copy our connection string next.

Click on the connect button

Let's connect to MongoDB using their native drivers.

Copy the connection string.

Note ⚠️
I have opted to use the connection string for NodeJS version 2.2.12 or later as opposed to the latest connection string. While not all people would run into this problem , I had troubles connecting with the latest Node connection string when using Mongoose.

Connecting using Mongoose.connect 🌈

Before connecting to our Database , lets install an additional dependency to our project. Stop your server using ctrl + C and run npm i dotenv.

Dotenv is a package that allows us to store sensitive information such as usernames and passwords in a .env file as environment variables.

In your project , create a .env file. To define an environment variable , simple type in the name of the variable , an equal-to sign and then the value.

VARIABLE_NAME = your_password

Now we can use the environment variable anywhere in our project by simply requiring the dotenv package.

require('dotenv').config();

To use an environment variable ,

const port = PROCESS.env.VARIABLE_NAME;

Let's setup our environment variables.
In our .env file , add the connection string , password , username and let's also add a name for our database.

In our connection string , erase the beginning string username:<password>@.

We will pass the username and password separately as parameters when we're connecting to our database.

Define the following env variables and fill in the values as required.

DB_URI = <your_connection_string>
DB_NAME = <any_db_name>
DB_USER = <your_username>
DB_PASSWORD = <your_password>

Note that the username and password are not the username and password of your MongoDB account. They're the username and password you set , when you created the DB user.

We'll now define our initDB.js file. We'll set up a separate file so you can add this file to any future backend projects that require connecting to mongoDB. Separating different aspects of your code also improves readability.

Create an initDB.js file and add the following code to it.

const { connect, connection } = require('mongoose');
const { config } = require('dotenv'); 

/*const {___} = require(<package>) is called Destructuring. 
This makes our code a lot more cleaner.
*/

/*We'll use module.exports since we want to import this file in our server.js*/

module.exports = () => {
 config(); //invoking the dotenv config here
 const uri = process.env.DB_URI;

 connect(uri, {
        dbName: process.env.DB_NAME,
        user: process.env.DB_USER,
        pass: process.env.DB_PASS,
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useFindAndModify: false,
        useCreateIndex: true
    })
        .then(() => {
            console.log('Connection estabislished with MongoDB');
        })
        .catch(error => console.error(error.message));
}

In the code above we've used the connect method that Mongoose provides us.
You can read more about mongoose here.

We pass two parameters to this method.

connect('<connection_string>', { options });

        dbName: process.env.DB_NAME,
        user: process.env.DB_USER,
        pass: process.env.DB_PASS,

We can pass our dbName user and pass as options rather than adding them to our connection string.

        useNewUrlParser: true,
        useUnifiedTopology: true,
        useFindAndModify: false,
        useCreateIndex: true

The options above are passed to avoid any Deprecation warnings. Think of them as nothing more than boilerplate code for now.

Since the connect method returns a promise (Read more about promises here), we can use .then() method to handle our promise and the .catch() method to handle any errors we may encounter.

In our .then() method block , we use a callback function to console.log() that we've connected to MongoDB.

In our .catch() method block , we'll fire another callback function that gives us the error parameter. We'll log this into our console.

console.error(error.message)

We're almost done here. Let's require the initDB.js file in server.js.

//Initialize DB

require('./initDB')();

Run npm start in your terminal and you should see ,

> npm start
Server started on PORT : 5000
Connection established with MongoDB

Adding Mongoose Lifecycle methods

Mongoose provides us with the connection method to interface with the MongoDB connection at different phases

Connected
Disconnected
Error

Let's log different messages to the console based on what part of the cycle , our mongoDB connection is at.

Add the following code to initDB.js after the catch block.

    connection.on('connected', () => {
        console.log('Mongoose connected to DB Cluster');
    })

    connection.on('error', (error) => {
        console.error(error.message);
    })

    connection.on('disconnected', () => {
        console.log('Mongoose Disconnected');
    })

On restarting the Express server , we can now see

> npm start
Server started on PORT : 5000
Connection established with MongoDB 
Mongoose connected to DB Cluster

However , when you stop the server , you'll not see the disconnected message. This happens because we're abruptly stopping the express server at the same time.

Add the following code

    process.on('SIGINT', () => {
        connection.close(() => {
            console.log('Mongoose connection closed on Application Timeout');
            process.exit(0);
        })

Now you'll see the Mongoose connection closed on Application Timeout message when you stop the server.

process.on('SIGINT' , () => {..})

The above code is used to interface with the server at exactly the point when it is shut down.

With this you have now successfully connected to MongoDB from your express server using mongoose!

Defining a User Schema 📚

In your project directory , create a folder called models. We'll define any and all models for our Collection in this folder.

Let's also create a file called Users.model.js.

To this file add the following code

const mongoose = require('mongoose');
const Schema = mongoose.Schema;


const UserSchema = new Schema({
    email: {
        type: String,
        unique: true,
        lowercase: true,
        required: true
    },
    username: {
        type: String,
        unique: true,
        min: 6,
        max: 15
    },
    password: {
        type: String,
        required: true,
        min: 6,
        max: 1024
    },
    role: {
        type: String,
        enum: ['user', 'admin'],
        required: true,
        default: 'user'
    },
    date: {
        type: Date,
        default: Date.now()
    }
    // orders: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Order' }]
})

module.exports = mongoose.model('User', UserSchema);

In the code above , we require('mongoose') and initialise the Schema method which is part of the Mongoose package to our own Schema constant.

const Schema = mongoose.Schema

Now with the help of Schema , we can define the structure of what our User's data should look like.

The object defined inside the Schema is self-explanatory.
You can read about the different options you can pass in as part of the object here.

You can see that I have commented out one particular line of code in the definition. Although it is not important to discuss it now , we will be using it to define a foreign key to a different collection.

Finally we'll use the mongoose.model('<name_of_model>',model_Schema) to "package/model" our mongoose schema and export it using module.exports.

With this , we've learnt how to ,

Connect to MongoDB
Define a Schema

That's all for part 2 folks! 🌻

In the next part , we'll set up our API's Routes and set up Validation Schemas to validate data that is posted to our server. 👨🏻‍💻

Authentication and Authorisation on the web

Ritik Ambadi — Mon, 20 Jul 2020 13:55:05 +0000

Introduction 🌈

This is a 4 part series covering all the concepts and code you'll need to build a simple Authentication API with JWT, using Express and MongoDB.

The Naive Approach to building a Login/Registration System.

You've just had an awakening. You've figured out the next billion dollar app idea.

You get down to coding and manage to implement the headline feature of your app.

Now , all that stands in your way is implementing a system for users to register and login to your app. How would you build this system?

Iteration 1

You figure that the best way to do this is to allow users to register with some basic fields.

Their username , email and password.

Once , you receive a user's credentials , your backend processes that data and stores it in a Database.

When a user wants to login , if their email exists, your backend checks if the password entered by the user matches the password in the Database.

If it matches , The user is granted access to their account.

Now the first question that might pop up is,

What if the user refreshes their page? How do we prevent our app from logging them out?

You can manage a user's session with a Database. When a user logs in , store them in a sessions table. Check the sessions table to check if the user is logged in everytime they make a request.

To make this process faster , you can use Redis which is an in-memory key-value store, i.e it does not save values like a traditional database.

Improving our system's design (flaw-by-flaw) 🌈

Saving Passwords in our Database as plain text

When we register users in the system described above , we're storing the user's passwords as they are, without hashing.

This creates a security vulnerability, if say, a hacker were to gain access to our Database.

Hashing Passwords

A hash function generates a key-value pair. The key being a unique identifier and the value , being the original value.

In simple words , a hash function will scramble your original password into something else.
This scrambled value is the key to your original password.

This key will be stored in your database.

Salting

Okay , so now that the password is hashed , are we good to go?

Not really.

What if multiple users have the same password?

If multiple users have the same password , then they will also have the same hash.

If a hacker manages to decrypt the hash of any one user's password , the credentials of all users with the same password are now at risk.

Salting to the rescue ✨

Salting in cryptography refers to simply appending or prepending some text to the original password.

Say , your password was originally 'brownmuffin20'.

After salting , The password becomes 'brownmuffin20qi247mat742' , after appending the salt 'qi247mat742' to the original password.

The real icing on the cake is , even if a different user has the exact same password , the salt is always random.

So while user 1's password after salting will be 'brownmuffin20qi247mat742'

User 2's password after salting would be

'brownmuffin20p423dh92p32f'

Therefore , Users with same passwords have different salts. Therefore they end up with different hashes. So..

Even if a hacker manages to gain access to your Database , your account's credentials will still be safe.

Avoid the overhead cost of using a session store. 🌈

Sessions vs Tokens (The Battle of Authentication) 🙉

What this post has covered so far is "Authorization".

Authorization is basically determining if you are authorised to access some particular data , eg. your Facebook profile.

Authentication is the next step. Authentication is basically checking if you are who you really claim to be.

Let's understand this with a simple example.

Say you've been invited to a conference. The conference is taking place at the Marriott.

At the conference , there are a number of talks and group discussions taking place and to be allowed inside any of these events , you need to be Authorised.

i.e You need to go to the bench and register yourself as an attendee. At the bench , you are registered and written down in a register.

Now , when you wish to attend a talk , a person at the entrance will check your name in the register and allow you inside if your name exists.

Let's say , your friend Alisha is staying at the Marriott too but has not been invited to the conference.

However she knows that you're here for the conference with an invitation and she can enter any talk she wishes to , using your name. This is where authentication comes in.

The people hosting the conference are aware that people staying at the hotel may enter using somebody else's name so , they assign each person registering at the conference , a secret.

Without this secret , people who aren't registered at the conference cannot enter.

Simplifying the authentication process 🌈

If you've gone through the story , you might be thinking to yourself,

Rather than having someone checking if the user exists in the register , everytime they want to attend a talk , Why not give each registered user , an ID card with their photograph (For authentication).

This means , that the people hosting the conference no longer have to keep track of which of their attendees are present at the event.

You might be getting some idea of where I am going with this story.

Is there some kind of system where , every time a user logs in - My server can give them a token that they can store in their browser (Cookies , LocalStorage) , rather than my server having to keep track of logged in users? 🌚

You bet , There is! 🌝

Say hello to Token Based Authentication. 👋🏼

A System that's the perfect example of token based authentication is used widely is JWT.

JWT stands for JSON Web Tokens and we'll learn all about them and how to implement them in the final part of this series.

Read about Tokens vs Sessions here

That's about it for the first part folks! 🌈

In the next part , we'll set up a Simple Express Server and connect it to our MongoDB Database. We'll also learn how to write Schemas using Mongoose (Object Document Mapper). 🌟

Making Sense of the Web (Introduction)

Ritik Ambadi — Sat, 13 Jun 2020 08:48:26 +0000

Welcome to "Making Sense" 🌈

I've been learning web development for close to 3 years now.
It has been quite a challenge , like climbing a mountain. I've not reached the summit yet , but in my hike so far , I've made many mistakes that had almost even halted my progress. I've had to retrace my steps , hike back up but I think I'm beginning to see the horizon , albeit having not reached the summit yet.

This full-stack web development bootcamp is intended to help others hike up , and while doing so , avoid the mistakes I've made.

This course will be delivered bi-weekly in 10-15min long reads starting all the way from the beginning to HTML and CSS ,then through Javascript , Databases and Frameworks like React, Node etc. Each post will be labelled in sequential order as MS [number].

There will also be bonus articles , detailing over UI design , font choices , code editor setups , learning methodologies and so on.

Why Should I learn Web Development? 🌈

Before you start learning anything , you need to understand if it checks the right boxes for you.

If you're artistic or like building things and tinkering with them, Web Development might be for you. A Web page , starts out as a blank canvas , an empty document and if you're enthused at all by the fact , that you have the potential to fill it with beautiful functionality , Web Development's for you.

Web Development is in fact a great career choice too. It's a great freelancing option , and with the sudden explosion of demand for Full-stack web developers since the introduction of NodeJS , the indicators for web development to be a well-paid career choice is stronger than ever.

It's also a great starting point for Computer Science students who are just starting out with college. Web development is a great way to express your ideas.
It's also a great introduction to real-world programming. JavaScript is somewhat of a de-facto language for the web. It's tricky but it's very powerful , but most importantly , it's never going away. It will always stay relevant.

What's next? 🌈

The next part of the course , will introduce you to the mentality that you should adopt while learning to code.