Forem: Bipon Biswas

Connect swagger in NodeJS server

Bipon Biswas — Sun, 09 Jul 2023 05:42:02 +0000

Objective: In this article, you will know how to Create NodeJS server, Connect swagger

Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node.

First step: Init for project starting



npm init -y

Then install for other plugin



npm i express swagger-ui-express yamljs

Also install for Dev dependency



npm i -D nodemon

Configure package.json file



  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },

Create a index.js file and Import necessary plugin which already installed.



const express = require('express')
const swaggerUI = require('swagger-ui-express')
const YAML = require('yamljs')
const swaggerDoc = YAML.load('./swagger.yaml')

Create express server and config few thing into index.js file



//express app
const app = express()
app.use(express.json())
app.use('/docs', swaggerUI.serve, swaggerUI.setup(swaggerDoc))

app.get('/health', (_req, res) => {
    res.status(200).json({
        health: 'Ok'
    })
})

app.listen(4000, ()=> {
    console.log('Server is listening on port 4000')
} )

Create swagger.yaml file. Where insert this basic file.



openapi: 3.0.0
info: 
  version: 1.0.0
  title: Testing Open Api Spec
  description: > 
    I am learning Open API Specification. This is industry standard specification technique for any web service
  termsOfService: https://example.com/terms
  contact: 
    name: Bipon Biswas
    url: https://example.com
    email: support@gmail.com
  license: 
      name: Apache 2.0
      url: http://apache.com
servers: 
  - url: http://localhost:4000/api/v1
    description: dev server
  - url: http://example.com/api/v1
    description: prod server
paths:
  /health:
    get:
      tags: [Health]
      description: this endpoint will test the health of the api
      responses: 
        '200':
          description: it will return a success message
          content: 
            application/json:
              schema:
                type: object
                properties: 
                  message:
                    type: string
                    example: ok
        '500': 
          description: The Server is down
          content: 
            application/json:
              schema: 
                type: object
                properties: 
                  message: 
                    type: string
                    example: server is down

Basic Swagger file

Now run the project



npm run dev

Now hit the URL into browser http://localhost:4000/health

Also hit the URL http://localhost:4000/docs/

Reference

Create a REST API in Node.js

Bipon Biswas — Wed, 07 Dec 2022 07:00:35 +0000

To create a REST API in Node.js, you will need to use a web framework such as Express.js. This framework provides a simple and flexible way to create a REST API that can handle HTTP requests and responses.

Here is an example of how you can create a simple REST API in Node.js using the Express.js framework:

const express = require('express');
const app = express();

// Create a route for the API
app.get('/api/products', (req, res) => {
  // Get the list of products from the database
  const products = getProductsFromDB();

  // Send the list of products as a response
  res.json(products);
});

// Start the server
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, the app.get method is used to create a route for the API that handles GET requests to the /api/products endpoint. When a request is received, the API retrieves a list of products from the database and sends it back as a JSON response.

To make this API more complete, you can add additional routes for other HTTP methods, such as POST, PUT, and DELETE, to handle creating, updating, and deleting products. You can also add more endpoints to the API to support different resources, such as users, orders, etc.

With this approach, you can create a simple REST API in Node.js that can be used to access and manage data in your application.

Build a REST API with Node JS & Express for Beginner

Bipon Biswas — Wed, 07 Dec 2022 06:45:43 +0000

We can create web server using HTTP module

const http = require('http');

const server = http.createServer((req, res) => {
    if(req.url === '/'){
        res.write('Hellow world');
        res.end();
    }
    if(req.url === '/api/customers'){
        res.write(JSON.stringify([1,2,3]));
        res.end();
    }
});

server.listen(3000);
console.log('Listening on port 3000...')

Here we have a callback function that takes two parameters request and response and with this request object we can check the URL of of the incoming request we with this we can define various routes for our application.

So if you have a request for let's say slash API slash customers this is how we're going to respond to the client. Now while this approach certainly works it's not very maintainable because as we defined more routes for our application we need to add more if blocks in this callback function.

That's when a framework comes into the picture framework. A framework gives our application a proper structure so we can easily more routes while keeping our application code maintainable. Now there are various framework out there for building web application and web servers on top of note. The most popular one is Express.

It's also very fast lightweight and perfectly documented.

Now create a restapi folder. Let's go inside this folder and run npm init --yes. So now we have a package JSON file. Finally we can install npm i express.

Build web server using Express

Create new file index.js. Express module so we use our require function give it the name our module which is Express.

require('express') This returns a function we call that express.

const express = require('express')

We need to call this function like this and as you can see this returns an object of type Express by convention we call this object app so we store the result in a constant called app

const app = express();

So this represents our application now app object has bunch of useful methods we have methods like get post put delete

app.get()
app.post()
app.put()
app.delete()

All these methods correspond HTTP verbs or HTTP methods.

You want to HTTP post request to an endpoint you would use app.post().

HTTP GET request so this method takes two arguments the first arguments is the pass or the URL so here I'm going to use slash to represent the route of the website. Now the second argument is the callback function this is the function that will be called when we have an HTTP GET request to this endpoint. So callback function shall have two arguments request request, response. So this goes to a code block now this request object has a bunch of useful properties that gives us information about the incoming request.

When we get an HTTP GET request to the root of our website you're gonna respond with Hello World message. So this is how we define a route we specify the path or the URL and callback function which is also called route handler.

Now finally we need to listen on a given point so we call app that listen we give a port number like 3000 and optionally we can pass a function that will be called when the application stats listening on the given port so once again we use the arrow function syntax to display something on the console.

app.listen(3000, () => console.log('Listening on port 3000'))

Now back in the terminal and run node index.js

Now let's define another route

app.get('/api/courses', (req, res) => {
    res.send([1,2,3])
})

I'm gonna simply return an array of numbers so response that's send and it passed an array of three numbers.

Back in the terminal we have to stop this process and started again. So press ctrl + c one more time node index.js

In this implementation we don't have those if block we define new routes.

Express gives our application is skeleton is structure.

nodemon

So far you have noticed that every time we make a change to this code you have to go back in the terminal and stop this process and started again. I'm gonna show you better way we're gonna install node package called nodemon. Install the command npm i -g nodemon

Instead of running our application using node we use nodemon.
Back to the terminal and run nodemon index.js

Environment Variables

Now one thing we need to improve in this code is this hard-coded value for the port so we have used 3000 as number while this may work on you development machine it's unlikely that this gonna not work in production environment because when deploy this application to a hosting environment the port is dynamically assigned by the hosting environment. So we can't rely on 3000 to be available. So the way to fix this is by using an environment variable.

Outside the application I'm gonna show you how that works. In this application we need to read the value of this port environment variable and the way we do that is by using process object.

We have this global object called process this object has bunch of property.

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`))

The name of our environment variable in this case port so if this is set we're gonna use this otherwise we're gonna use 3000. Now we can store the result in a constant called port.

Finally let's delete this and finally we need to replace with port and also change message accordingly.

Handling GET request

Create a route to get a single course.

app.get('/api/courses/:id', (req, res)=> {
    res.send(req.params.id)
})

Could be course ID or courseId but ID is shorter and more conventional now we had our route handler function.

Now we have two endpoints what to get all the courses and the other two get a single course.

app.get('/api/courses', (req, res) => {
    res.send([1,2,3])
})
// /api/courses/1
app.get('/api/courses/:id', (req, res)=> {
    res.send(req.params.id)
})

app.get('/api/courses/:id', (req, res)=> {
    // res.send(req.params.id)
   const course = courses.find(c => c.id === parseInt(req.params.id))
   if(!course){
       res.status(404).send('The course with the give ID was not found')
   }
   res.send(course)

})

Handling POST request

So far we have created two routes that respond HTTP GET request and use this route to get all the courses as well as single course.

We use an HTTP POST request to create a new course.

app.post('/api/courses', (req, res) => {

})

In this route handler we need to read the course object that should be in the body of the request use these properties to create a new course object and then add that course object to our courses array.

app.post('/api/courses', (req, res) => {
    const course = {
        id: courses.length + 1,
        name: req.body.name
    }
})

We need to call app that app.use(express.json()). Adding a piece of middleware. To use this middleware in the request processing pipeline again.

app.post('/api/courses', (req, res) => {
    const course = {
        id: courses.length + 1,
        name: req.body.name
    }
    courses.push(course)
})

And finally by convention when we post an object to the server when the server creates a new object or new resources you should return that object in the body of the response.

app.post('/api/courses', (req, res) => {
    const course = {
        id: courses.length + 1,
        name: req.body.name
    }
    courses.push(course)
    res.send(course)
})

we can see the status of the request is 200 which means the request was handled successfully. Also see body of the response.

We send to the server so this is how we test HTTP service is in Postman.

We have assumed that there is an object with name property in the body of the request what if the client forgets to send this property or send an invalid name.

Input validation

As a security best practice you should never ever ever trust what client send you. You should always validate the input.

app.post('/api/courses', (req, res) => {
    if(!req.body.name || req.body.name.length < 3){
    }
})

Doesn't exist or request that body the name that length is less than 3 then we're gonna an error to the client.

The restful convention is to return a response with the HTTP status code or 400 that means bad request.

app.post('/api/courses', (req, res) => {
    if(!req.body.name || req.body.name.length < 3){
        res.status(400).send('Name is required and should be minimum 3 character.')
    }   
    return;
    const course = {
        id: courses.length + 1,
        name: req.body.name
    }
    courses.push(course)
    res.send(course)
})

validation with joi npm i joi
Store it in a constant called Joi

const Joi = require('joi')

So we have this Joi class now packing our route handler now with Joi first we need to define a schema. Schema defines the shape of our objects.

const schema = {
        name: Joi.string().min(3).required();
    }
    Joi.validate(req.body, schema)

This validate method returns an object let's store that in a constant result

Handling PUT request

Update a course so let's add a new route handler app we use the put method for updating resources.

app.put('/api/courses/:id', (req, res)=> {
    // look up the course
    // if not existing, return 404
    const course = courses.find(c => c.id === parseInt(req.params.id))
    if(!course){
        res.status(404).send('The course with the give ID was not found')
    }
    // validate the coruse
    // if invalid, return 400 - Bad request
    if(!req.body.name || req.body.name.length < 3){
        res.status(400).send('Name is required and should be minimum 3 character.');
        return;
    } 

    // update course
    // return the update course
   course.name = req.body.name;  
   res.send(course)
})

Handling DELETE request

It is very simple and similar to what we have done so far. We need to find the index of this course in our courses array. We can use this splice method to remove and object from our courses array.

app.delete('/api/courses/:id', (req, res)=> {
    // look up the course
    // if not existing, return 404
    const course = courses.find(c => c.id === parseInt(req.params.id))
    if(!course){
        res.status(404).send('The course with the given ID was not found')
    }
    // delete course
    const index = courses.indexOf(course)
    console.log(index)
    courses.splice(index, 1)
    // if not delete otherse return the same course
   res.send(course)
})

index.js file

const Joi = require('joi')
const express = require('express');
const app = express();
app.use(express.json())

const courses = [
    {id: 1, name: 'course1'},
    {id: 2, name: 'course2'},
    {id: 3, name: 'course3'},
]

app.get('/', (req, res) => {
    res.send('Hello World!!')
})
app.get('/api/courses', (req, res) => {
    res.send(courses)
})
// /api/courses/1
app.get('/api/courses/:id', (req, res)=> {
    // res.send(req.params.id)
   const course = courses.find(c => c.id === parseInt(req.params.id))
   if(!course){
       res.status(404).send('The course with the given ID was not found')
   }
   res.send(course)

})
//http://localhost:3000/api/courses/2018/1
app.get('/api/courses/:year/:month', (req, res)=> {
    res.send(req.params)
})
// Query params:  http://localhost:3000/api/courses/2018/1?sortBy=name
app.get('/api/posts/:year/:month', (req, res)=> {
    res.send(req.query)
})

app.post('/api/courses', (req, res) => {
    // const schema = {
    //     name: Joi.string().min(3).required()
    // }
    // const result = Joi.validate(req.body, schema);
    // console.log(result);

    if(!req.body.name || req.body.name.length < 3){
        res.status(400).send('Name is required and should be minimum 3 character.');
        return;
    }   

    const course = {
        id: courses.length + 1,
        name: req.body.name
    }
    courses.push(course)
    res.send(course)
})


app.put('/api/courses/:id', (req, res)=> {
    // look up the course
    // if not existing, return 404
    const course = courses.find(c => c.id === parseInt(req.params.id))
    if(!course){
        res.status(404).send('The course with the given ID was not found')
    }
    // validate the coruse
    // if invalid, return 400 - Bad request
    if(!req.body.name || req.body.name.length < 3){
        res.status(400).send('Name is required and should be minimum 3 character.');
        return;
    } 

    // update course
    // return the update course
   course.name = req.body.name;  
   res.send(course)
})

app.delete('/api/courses/:id', (req, res)=> {
    // look up the course
    // if not existing, return 404
    const course = courses.find(c => c.id === parseInt(req.params.id))
    if(!course){
        res.status(404).send('The course with the given ID was not found')
    }

    // delete course
    const index = courses.indexOf(course)
    console.log(index)
    courses.splice(index, 1)
    // if not delete otherse return the same course
   res.send(course)
})


// port
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`))

RxJS Map, Tap and Take in Angular

Bipon Biswas — Sat, 03 Sep 2022 12:06:57 +0000

To pipe each emitted value through a sequence of operators, we call the pipe method. Be sure to insert it before the subscribe.

Now we specify the operators. First let's transform the values.

Which operators do we use to transform the values ? If you said map, you are correct. We'll use map to transform the emitted value, multiplying it by 2.

The observable pipe method take any number of operators separated by commas.

Let's add a second map operator to transform the value again, subtracting 10. We now see the transformed items in the console.

    from ([20, 15, 10, 5]).pipe(
      map(item => item * 2),
      map(item => item -10)
    ).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

To log the originally omitted item as well, let's add a tap at the beginning of the sequence.

Now see our originally omitted item along with resulting transformed item.

Notice the 0 we see here in the result.

    from ([20, 15, 10, 5]).pipe(
      tap(item => console.log(`emitted item ... ${item}`)),
      map(item => item * 2),
      map(item => item -10),
      map(item => {
        if(item === 0){
          throw new Error ('Zero detected');
        }
        return item;
      })
    ).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

Let's try error handling and add a check for 0. We'll use a map operator for our error handling. The map takes in the item. We want to execute multiple lines, we need a function body defined with curly braces. That turns our single line arrow function into a multi-line arrow function.
We'll use an if statement to check for a value of 0 and throw an error if a 0 is detected. Otherwise, we return the item.

Note that we need the return keyword in this case. One-line arrow function have implied return.

When we use a multi-line arrow function, we need and explicit return statement.

Take
lastly, let's add a take and take only three of the items. We no longer see our error. We take the first three items and complete before the item with the error is emitted.

  from ([20, 15, 10, 5]).pipe(
      tap(item => console.log(`emitted item ... ${item}`)),
      map(item => item * 2),
      map(item => item -10),
      map(item => {
        if(item === 0){
          throw new Error ('Zero detected');
        }
        return item;
      }),
      take(3)
    ).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

app.component.ts file

import { Component, VERSION, OnInit } from '@angular/core';
import {of, from, map, tap, take} from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  ngOnInit(){
    from ([20, 15, 10, 5]).pipe(
      tap(item => console.log(`emitted item ... ${item}`)),
      map(item => item * 2),
      map(item => item -10),
      map(item => {
        if(item === 0){
          throw new Error ('Zero detected');
        }
        return item;
      }),
      take(3)
    ).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

  }
}
```




**Map operator internals**


```
import { Observable } from 'rxjs';

export function map(fn) {
  // function
  return (
    input // takes an input Observable
  ) =>
    new Observable((observer) => {
      // creates an output Observable
      return input.subscriber({
        // subscribes to the input Observable
        next: (value) => observer.next(fn(value)), // transform item using provided function and emits item
        error: (err) => observer.error(err), // emits error notification
        complete: () => observer.complete(), // emits complete notification
      });
    });
}

```

RxJS Of and From in Angular

Bipon Biswas — Sat, 03 Sep 2022 07:09:11 +0000

We will add code directly to the app.component.ts file. We start by importing of and from from the RxJS library import {of, from} from 'rxjs'

Next, we implement the OnInit lifecycle hook and the appropriate import.

then we create ngOnInit method. In ngOnInit, let's create an observable using of and define a set of numbers. Notice that each number is defined as an argument passed to the creation function.

Now what ?

How do we make the observable go?

To start this observable and begin receiving emitted items, we subscribe.

of(2,4, 6, 8).subscribe((item) => console.log(item));

We could pass an observer object into the subscribe with methods for next, error and complete.
But since we only want to implement the next method, we can pass it directly.

The argument to the next method is the emitted item, so we specify that first, then the arrow then the logic we want executed each time the item is emitted. Every time the observable emits the next value, we want to log it, so we'll call console.log.

Of automatically completes, so we don't need to unsubscribe.

Output

We have created an observable that emits for number and completes.

Now let's try the from create function.

Notice that we defined the numbers in an array and again call subscribe to start this observable and begin receiving emitted items. This time, let's pass in an observer with next, error and complete methods.

The next method provides the emitted item, and we log it.

    from ([20, 15, 10, 5]).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occurred ${err}`),
      complete: () => console.log('Completed')
    })

The error method provides the error, and we log that. And complete method has no argument, so we specify empty parentheses and display message.

Notice I'm using the backtick to define TypeScript template strings for string interpolation of the log message.

We see the array elements logged the to the console and the complete message.

We again created an observable that emits four numbers and completes.

app.components.ts file

import { Component, VERSION, OnInit } from '@angular/core';
import {of, from} from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  ngOnInit(){
    of(2,4, 6, 8).subscribe((item) => console.log(item));
    from ([20, 15, 10, 5]).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

of('Apple1', 'Apple2', 'Apple3').subscribe({
  next: (apple) => console.log(`Appled emmitted ${apple}`),
  error: (err) => console.log(`Error occured: ${err}`),
  complete: ()=> console.log('No more apples, go home')
})

  }
}

The subscribe starts the observable, which then emits those string. The observer reacts to those emissions, logging the result.

Summary

Observable

Collection of events or values emitted over time

Observer

Observes notifications from the Observable
Methods to process notification: next(), error(), complete()

Subscriber

And Observer that can unsubscribe

Subscription

Tells the Observable that the subscriber is ready for notification
subscribe() returns a Subscription

Thanks for reading.

Map, Filter, and Reduce in JavaScript

Bipon Biswas — Fri, 22 Jul 2022 11:53:31 +0000

Map, Filter, and Reduce in JavaScript

The syntax for map is shown below.

array.map(function(currentValue, index, arr), thisValue)
// return element for newArray, after executing something

The map() method creates a new array and performs a function on each array element

Under the hood, map passes three arguments to your callback:

the current item in the array
the array index of the current item
the entire array you called map on

Let's look at some code

map in Example

// Durations are in minutes 
const tasks = [
  {
    'name'     : 'Write for Learning',
    'duration' : 120
  },
  {
    'name'     : 'Work out',
    'duration' : 60
  },
  {
    'name'     : 'Watching Movie',
    'duration' : 60
  }
];

Let's say we want to create a new array with just the name of each task, so we can take a look at everything we've done today. Using a for loop, we'd write something like this:

const task_names = [];
for (let i = 0; i < tasks.length; i +=1){
    task_names.push(tasks[i].name)
}
console.log(task_names) // [ 'Write for Learning', 'Work out', 'Watching Movie' ]

JavaScript also offers a forEach loop. It functions like a for loop, but manages all the messiness of checking our loop index against the array length for us:

const task_names = [];

tasks.forEach(function (task) {
    task_names.push(task.name);    
});

console.log(task_names) // [ 'Write for Learning', 'Work out', 'Watching Movie' ]

Using map, we can simply write:

const task_names = tasks.map(function (task, index, array) {
    return task.name; 
});
console.log(task_names) // [ 'Write for Learning', 'Work out', 'Watching Movie' ]

An even more succinct way of writing map in modern JavaScript is with arrow functions

const task_names = tasks.map(task => task.name)

console.log(task_names) // [ 'Write for Learning', 'Work out', 'Watching Movie' ]

Arrow functions are a short form for one-line functions that just have a return statement.

let map = function (array, callback) {
  const new_array = [];

  array.forEach(function (element, index, array) {
    new_array.push(callback(element));
  });

  return new_array;
};

This code accepts an array and a callback function as arguments. It then creates a new array, executes the callback on each element on the array we passed in, pushes the results into the new array, and returns the new array.

More Details

Filter
It does exactly what it sounds like: It takes an array and filters out unwanted elements.

The syntax for filter is:

array.filter(function(currentValue, index, arr), thisValue)
// return element for newArray, if true

const words = ['Python', 'Javascript', 'Go', 'Java', 'PHP', 'Ruby'];
const result = words.filter(word => word.length < 8);
console.log(result);

Using forEach, we'd write:

const difficult_tasks = [];

tasks.forEach(function (task) {
    if (task.duration >= 120) {
        difficult_tasks.push(task);
    }
});
console.log(difficult_tasks)

With filter, we can simply write:

const difficult_tasks = tasks.filter((task) => task.duration >= 120 );
console.log(difficult_tasks)

avoid mutating an array inside a forEach or for loop
assign its result directly to a new variable, rather than push into an array we defined elsewhere

Reduce
map creates a new array by transforming every element in an array individually. filter creates a new array by removing elements. reduce, on the other hand, takes all of the elements in an array and reduces them into a single value.

reduce in Practice

let numbers = [1, 2, 3, 4, 5],
    total = 0;

numbers.forEach(function (number) {
    total += number;
});
console.log(total); // 15

While this isn't a bad use case for forEach, reduce still has the advantage of allowing us to avoid mutation. With reduce, we would write:

const total = [1, 2, 3, 4, 5].reduce(function (previous, current) {
    return previous + current;
}, 0);
console.log(total); // 15

First, we call reduce on our list of numbers. We pass it a callback, which accepts the previous value and current value as arguments, and returns the result of adding them together. Since we passed 0 as a second argument to reduce, it'll use that as the value of previous on the first iteration.

With arrow functions, we would write it like this:

const total = [1, 2, 3, 4, 5].reduce((previous, current) => previous+current),0;
console.log(total) // 15

If we take it step by step, it looks like this:

Another example

let num1 = [2, 3, 4, 5, 6, 7];
let num4 = num1.reduce(sum)
         function sum(total, value){
             return total + value;
         }
document.getElementById("demo").innerHTML = num4; // 27

Programming Fundamentals using JavaScript

Bipon Biswas — Fri, 22 Jul 2022 09:28:24 +0000

Programming Fundamentals using JavaScript

Today we will learn about the origin of the fundamentals of programming languages. If we know about the origin, we don't have to worry about these things anymore. The fundamentals of programming languages are:

Variables
Operators
Conditions
Loops
Arrays
Objects
Functions
Expression vs Statement

Variables

We know variable means variable. Beginners have a problem where to take variables and where not to take them. There are some tricks for this. Before that we need to know what is the function of the variable? Simply put, variables help us make anything dynamic. That's the only job. Apart from this, the variable has no other function. It's more like a pot. The larger the container, the more space it will take. It means more memory is needed. So what is the need for extra memory? It is possible to take variables less. Then our application will be much lighter. But still we have to take variables. As if we will drink water. How will this water come to us? First, the water from below the ground is stored in a tank under the house through pipes and pumps. Then through another pump it goes on the roof and is stored in another tank. From there it is distributed from house to house through piping. Tap at home Through that water we accumulate in the filter. After filtering, we take that water in a jug or bottle. Then when we need to drink water, we drink water from a jug or bottle into a glass. Our purpose is to drink water, so it is necessary to store water in the middle? If we could not keep the tank, it would not be possible to distribute it to everyone's house. If I didn't put it in the filter, I couldn't purify the water. So variables are also like that. They store data. If we don't take the variable then we can't use the data a second time. It was not possible. If I didn't put it in the filter, I couldn't purify the water. So variables are also like that. They store data. If we don't take the variable then we can't use the data a second time. It was not possible. If I didn't put it in the filter, I couldn't purify the water. So variables are also like that. They store data. If we don't take the variable then we can't use the data a second time.

console.log('Bipon Biswas', 'Bipon Biswas'.length); // Bipon Biswas 12

In the above example if we want to do it with any other name then it is not possible. To do that, you have to drop the current name. Because in case of static code nothing can be changed at runtime. Now the question may come runtime and compile time?

console.log('Bipon Biswas', 'Bipon Biswas'.length); // Bipon Biswas 12 
throw new Error('Something wrong'); // Error

There is nothing wrong with the program here. But while running the program it shows an error. This is called runtime error. The time the program runs is called runtime.

console.log('Bipon Biswas', 'Bipon Biswas'.length); // Bipon Biswas 12
121354644dsfsdf

In this case the first code will not execute. will show error directly. Means he got error in code while compiling. This is called a compile time error.

Now we can change many things dynamically at runtime. Like can give some input, can fetch something from internet, can click with mouse. All this happens at runtime. But when we work with static data like in the first example, we cannot change the data inside the log in any way. For that we need to take variables. Whenever we look at the data we will take a variable.

let name = 'Bipon Biswas';
console.log(name, name.length); // Bipon Biswas 12

Variables have some advantages. The first benefit is that we took this data for Bipon Biswas. Now I want to take for Mehdi Hasan, or take for Mead Ahmed Fahim. In that case, only name the data in it is changed. Another advantage is that it is used name in only two places. It could have been two thousand or two hundred thousand. Now if I want to change the data for some reason, is it possible for me to change two lakh places? In that case, if we take variables, we will change only one place. No need to run to the remaining two lakh places.

Another example will make it clear how to dynamically change data at runtime through variables.

const names = [
    'Bipon Biswas',
    'Aditya Chakraborty',
    'Abu Rayhan',
    'Shaker Hossain',
    'Akib Ahmad',
    'Alvi Chowdhury',
];
let index = -1;
let person = names[++index];

setInterval(() => {
    person = names[index++];
    console.log(person, person.length);

    if (index === names.length) {
        index = 0;
    }
}, 1000);

Now if you run the program you will see that the names will change one after the other after 1 second. When it is finished, it will start again from the beginning. There will be no end to it. Now if we just set a name without using variables, then only that name will be printed repeatedly. Dynamic is no more. And we program to make everything dynamic. So wherever we see the data we will assume the variable. Let's go to the extra memory.

Now let's take two important terms let and const. When let and when const to use. We will use it when we see that no data is being updated in the const future. Then we can't update that data whether we want to or by mistake. If you try to do it, an error will appear. And we will use the data which has a chance to be updated later let. names Now here updating in the example above . So we const used But index and person we updated later. So we let used there. The rule is that we assume everything first const. After that if any data update is seen we will do it later let. By doing this, we will have less chance of making mistakes.

So it appears that variables are used to dynamically update data at runtime.

Operators

We are all familiar with the operator. From childhood we add, subtract, multiply, divide. There we used some mathematical operators. Operators in programming are also the same. Operators are used in programming languages to perform mathematical calculations. There is no more work. Operators are basically functions. In languages that have operator overloading, we create functions to perform operator operations. such as

add();
mod();
lessThan();

add We can create and use functions to add . mod Using the function we can perform modulus operation, lessThan we can check if our value is small or not. But there is no operator overloading in JavaScript. So we don't need to create functions. JavaScript has already created these functions through some symbolic representation, so that our work is much easier. add()Instead of we + use , mod() instead of %, lessThan instead of we < use . When it comes to operators, there is not much to say about the details.

Conditions

The condition is called the brain of the computer. Based on this condition the computer decides what action to take. Although the computer has no power to take decisions. We write various logics to make the computer take a decision. Now to write logic we need condition. We are constantly using the condition in our daily life. For example, if the sky is cloudy then I will go out with an umbrella, otherwise I will not go out with an umbrella. It is a condition. Again suppose my office is at 9 o'clock. Now if I can leave the house by 8 o'clock then I will go by bus or take CNG. It is also a kind of condition. Again, since today's class will teach basic, I will not join today's class, if advanced will be taught then I will join. Now let's see how we can convert this condition into code.

if (studyBasic) {
    wontJoin();
}

if (studyAdvanced) {
    join();
}

if (teacherSpeaks) {
    silent();
}

if (!teacherSpeaks) {
    shout();
}

We try to understand it a little. I will not join today's class if basic is taught. I will join if advanced teaching. If the teacher speaks, we will all be silent. If he doesn't talk we all talk together. This is how we find conditioning in our daily activities. Everything is frozen except the condition. 50% of programming language is condition, and 50% is loop.

Now the condition can be written in 3 ways. That is, it has 3 scenarios. Let's look at the following code a little earlier. I will explain later.

// Scenario 1 - Single branch
// if condition
if (hasMoney) {
    buyPhone();
}

// Scenario 2 - Two branches
// if else condition
if (toss === 'head') {
    win();
} else {
    loss();
}

// Scenario 3 - Multiple branches
// else if
let a = 1,
    b = 2;
if (a > b) {
    big();
} else if (a < b) {
    small();
} else {
    same();
}

Scenario - 1: It is single branch. There cannot be more than one case here. In that case we will use this scenario. if condition It is called It is said here that I will buy a phone if I have money. If not, it will go as it is. More than one case is not needed here. So here we if condition will just use
Scenario - 2: It basically depends on two branches, i.e. it will have maximum two outcomes. if else condition It is called In such a scenario, more than two conditions will never be possible. Like if the toss comes head then I win the toss or lose. There is no possibility of more than these two results.
Scenario - 3: It is multiple branches. If there is more than two possible outcomes then we will use it. This type of scenario is else if condition called ie if a > b a is greater than b. If a < b so then a will be smaller than b. Otherwise both will be equal. There are more than two outcomes here. So here we used multiple branches.

The condition depends mainly on the outcome. I have to write the condition in such a way that how many outcomes can occur.

Loop

The loop has only one function. Doing the same thing over and over again. For example, one of our clients came and said that Bangladesh is now 51 years old. We will do something in our application that says 'We love Bangladesh' 51 times. We are very smart, we wrote 51 times in 1 hour and console.log('We love Bangladesh')showed it to the client. The client said no bro 51 times. Since Bangladesh became independent in 1971 we want 1971 times. Now I wrote the same code over and over again for 3 days and showed it to the client in a broken state. The client said, no. Not like this. We will print it 30 lakh times in honor of 30 lakh martyrs. I went and researched and found that there is repeat()a function in JavaScript called Now it's easy. I can write as many times as the client wants by writing just one line of code. I also wrote the following code and took it to the client with great pride in just 10 minutes.

console.log('We love Bangladesh\n'.repeat(10));

I am flying in the sky. Thank you JavaScript for this function. This time the client was very happy. But after a while he said, Well, 30 million times have been printed. How will the user understand it has been done 3 million times. It is better if you give a number before each one. Now it's a hand on the head. How to dynamically do so many numbers? Programming languages have come up with simple solutions for that. That is the loop. With loops we can easily repeat the same task as many times as we want.

for (let i = 1; i <= 3000000; i++) {
    console.log(i, 'We love Bangladesh');
}

Now all problems are solved. Loops make our repetition work a lot easier. Assume that the Carly Brackett block in the loop is a new js file. We can write any valid js code here. But remember that the code inside this block will be executed multiple times.

There are mainly 3 types of loops in JavaScript. Then the number of loops increased to facilitate various tasks. Even if there are multiple IP loops, the problem can be solved by using any one loop.

for loop

range
for in
for of

while loop
do while loop

For Loop

With the for loop, we can do two types of work, while and do while. Why did the for loop come now, what is its function? Let's take our previous example. Here the client asked to print 3 million times. That means I know my range. I know my starting point, and I know where to stop. In this case we will always use a for loop. That means we will use for loop in cases where we know the starting point and ending point. Again there are 3 types of loops within the for loop. One is range related that I saw. Another for in that we can use on arrays or objects. We can work with using in which doesn't have to give a range. We will see that later. Another is the for loop. It came to work easily after iterators. It is also used to work with arrays or any iterator, We will discuss that later. This will be very useful when we work with asynchronous data.

While Loop

We can also do for, do while with while loop. Now why did it come, what is its function? Suppose the client tells us to run the loop randomly. There is no such thing as having to run from 1. There will be just a random number and the words 'We love Bangladesh' will be next to it. There is no description of how long to run. Again the infinite loop cannot be executed. The client said you do a job. My printing will stop whenever the number continuously reaches 71. The following example will be more clear to you:

while (true) {
    let num = Math.ceil(Math.random() * 100);
    console.log(num, 'We love Bangladesh');
    if (num === 71) break;
}

The difference with the for loop is that the for loop had 3 parts. Initialize, condition, increment/decrement. But the while loop has only one part, that is the condition. And condition means either true or false. That means we will use a while loop when I don't know the range, just the condition.

Do While Loop

But with Do While we cannot do for or do while. It is a special type of loop. Why is it used? Suppose in the while loop example the condition is false instead of true. Then it won't show the output even once. I want the output to show true or false at least once. In that case we will use do while loop. This is also possible with a while loop. But it can be done a little better with doo while. Let's see an example.

do {
    console.log('It will run at least once');
} while (false);

Although its condition is false, it will show the output at least once. This is the concept of this loop.

Array

One of the most neglected data structures and one of the most powerful data structures. Using arrays we can create many complex data structures. Like graph, heap, stack, queue. Array is very powerful and perfect data structure to work with 2/3 lakh data. The question is why the array is coming and what is the function of the array? We want to store the names of some people. We can do that with variables.

const name1 = 'Rayhan';
const name2 = 'Alvi';
const name3 = 'Anik';
const name4 = 'Arjun';
const name5 = 'Ayman';

Now I want to convert these names to lowercase. For that we need to capture and convert each one.

console.log(name1, name1.toLowerCase());
console.log(name2, name2.toLowerCase());
console.log(name3, name3.toLowerCase());
console.log(name4, name4.toLowerCase());
console.log(name5, name5.toLowerCase());

Now, instead of 5 names, there could have been 5 lakh names. If you have to capture and convert each of them, then it is an impossible matter. For that we need a way to put all the names in a variable. Now put it in a variable.

const persons = 'Rayhan, Alvi, Anik, Arjun, Ayman';

Now the problem here is that they all become one big string. How to distinguish from here? Let's store separately.

const persons = 'Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman';

But now when we want to run the program, we will get a very big error. To solve this problem we have a data structure called array. [] Just putting something before and after the example above will make an array.

const persons = ['Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman'];

How to extract data from here? Each array element has a position number. This is called index. Index starts from 0. Then the index of the 1st position is 0, the index of the 2nd position is 1, and the index of the 3rd position is 2. Then we get a name of the array and get a number. The advantage of getting numbers is that we can easily calculate here. And that's the power of arrays. Now let's see how to extract the data from the array.

const persons = ['Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman'];
console.log(persons[0]);
console.log(persons[1]);
console.log(persons[2]);
console.log(persons[3]);
console.log(persons[4]);

This way we can extract all the names. Now here it looks all the same except the index is different. It means the same work is going on again and again. So here we can execute a loop.

const persons = ['Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman'];

for (let i = 0; i < 5; i++) {
    console.log(persons[i]);
}

Now if the program is run then it will be seen that all the names will be printed nicely. There is a problem here. We add two more names to understand the problem.

const persons = ['Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman', 'Ayuub', 'Bidyut'];

for (let i = 0; i < 5; i++) {
    console.log(persons[i]);
}

Now if the program is run Ayman the loop will stop as soon as it is seen. Because the range of my loop is given index must be less than 5. To solve this problem we persons.length can replace 5 dynamically. Then the array will be dynamically updated as the length increases. Now if we do the first example with an array and a loop, what will it look like?

const persons = ['Rayhan', 'Alvi', 'Anik', 'Arjun', 'Ayman', 'Ayuub', 'Bidyut'];

for (let i = 0; i < 5; i++) {
    console.log(students[i], students[i].toLowerCase());
}

Then you can understand how powerful the array is. Loops are closely related to arrays. With these arrays and loops we can do many tasks easily and in less time.

What type of data can we store in array? Almost all programming languages have some limitations to storing data in arrays. And only one data type can be stored in an array. In this respect JavaScript has given complete freedom. Any data type can be stored in JavaScript. Even data of different data types can be stored in an array. We can understand if we look down a little.

const nums = [1, 2, 3, 4, 5, 6];
const bools = [true, true, false, false];
const nulls = [null, null, null];
const undefineds = [undefined, undefined, undefined];
const arrayOfArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];
const mixed = [true, null, 'Str', 5, [12, 2, 4]];

Objects and functions can also be stored in arrays. Since we haven't discussed objects and functions yet, we haven't shown them here. An array can store data of different data types, but we will store only data of the same data type in an array. The reason is suppose you created an array of student names. Now if you put their address, phone number there then it will be difficult to find the name. So data of the same type should be stored in an array.

Arrays have some functionalities. We can think of an array as a database. In memory database. Where we can create data, read it, update it if necessary and delete data if we want. This whole operation is called CRUD - Create, Read, Update, Delete operation. CRUD is the function of all the data structures in the world. There is some more discussion about arrays. But to discuss arrays we need to talk about objects first.

Object

In the array we have entered the names of some students. But now if we want to store the information like their email, age and whether they are present in the current class then there is a problem with array. We try to see what the problem is.

const student = ['Abu', 'Rayhan', 'rayhan@example.com', 25, true];
sendEMail(students[0]);

function sendEmail(email) {
    console.log('Sending Email to ', email);
}

Now we see what could be the problem here. At first glance there is no way to tell which is which type of information. It means that the code has no readability. When we go to email someone, we need to remember how many numbers index that information. Now, here are 5 data that can be remembered somehow. If it is 5000 then it will be very difficult to remember. To overcome this problem we try to write it differently.

const student = {
    firstName: 'Abu',
    secondName: 'Rayhan',
    email: 'rayhan@example.com',
    age: 25,
    attend: true,
};

sendEMail(students.email);

function sendEmail(email) {
    console.log('Sending Email to ', email);
}

Even if some texts are written more, the code can be easily read to understand which information is which. Now I don't need to remember the index anymore. Just put a dot (.) at the end of the variable name. It is much more readable, much more informative than before.

Now we can store the information of many students in an array if we want. how can i let's see

const student1 = {
    firstName: 'Abu',
    secondName: 'Rayhan',
    email: 'rayhan@example.com',
    age: 25,
    attend: true,
};

const student2 = {
    firstName: 'Alvi',
    secondName: 'Chowdhury',
    email: 'alvi@example.com',
    age: 25,
    attend: true,
};

const student3 = {
    firstName: 'Akib',
    secondName: 'Ahmad',
    email: 'akib@example.com',
    age: 25,
    attend: true,
};

const allStudents = [student1, student2, student3];

for (let i = 0; i < allStudents.length; i++) {
    sendEmail(allStudents[i].email);
}

function sendEmail(email) {
    console.log('Sending email to', email);
}

We will create different objects for each student. We will then store each object in an array. You have also proven that objects can be stored in arrays through this example. Now I want to send the same email to all students together. In that case we can easily send email to all at once as per above code by looping over our array. By running the loop, first we need to grab that data with the index number of the array. After that, according to the rules of the object, put (.) and then give the property name and the work is done. You saw a small example of how we can make programs dynamic by combining arrays and objects. Do this over and over again as you build larger applications.

Functions

The function we make works a lot like a loop. We use loops to do the same thing over and over again. We will also use functions to do the same thing over and over again. So why do we use functions to have loops?

Functions we can use in different places as we like. I can call the function as I like. We can reuse functions because functions have a name. But the loop has no name. So I can't use the loop wherever I want. If the loop starts again, I need to either break it, or let it continue until the loop ends. We have no control over the loop. But we can use the function in different places according to our needs. We can control according to our needs. If I take a few lines from the previous example

for (let i = 0; i < allStudents.length; i++) {
    // sendEmail(allStudents[i].email);
    console.log('Sending email to', allStudents[i].email);
}

// function sendEmail(email) {
//     console.log('Sending email to', email);
// }

We could do the same thing without writing functions. But the line inside the loop will not work anywhere outside the loop. But functions can be called anywhere. Again suppose I need the full name in another place, should I continue that loop again. No, we'll do it with functions. In this case we use a build in function.

allStudents.forEach((item) => console.log('Email ', item.email));
allStudents.forEach((item) =>
    console.log('Full Name ', item.firstName, item.secondName)
);

forEach In this case we used the function instead of repeating the loop . The biggest advantage of the function is that it can be used multiple times anywhere.

When to use function and loop when? Functions when we do the same work in two different places. And if in one place then loop. For example if we are sending an email, and we need the full name in the email, we can do this with a loop. But if we send email in one place, and in other place need full name to create student list then loop will not work. We need to use the function It will be very difficult to understand at first. If you practice slowly, it will get stuck in your head.

The rules for writing functions are given below:

function nameOfFunction() {
    console.log('Hello', 'Bipon');
}

nameOfFunction(); // Hello Bipon
nameOfFunction(); // Hello Bipon
nameOfFunction(); // Hello Bipon

Now every time I call here it gives the same output. If we need this same output in different places then we will create function like this. Now I want to set the name dynamically. The name I input will be there. For this we need to take a variable inside the parenthesis. This is called a parameter. Let's look at that.

function nameOfFunction(name) {
    console.log('Hello', name);
}

nameOfFunction('Bipon'); // Hello Bipon
nameOfFunction('Fahim'); // Hello Fahim
nameOfFunction(); // Hello undefined

When we call the function, we will put our name as an argument in place of that parameter. Parameters are the variables that you pass while writing the function. And argument is what you pass in the form of value when calling the function. If you don't sit now, it undefined will show. Here we can do a simple task if user doesn't give name then we can show him a message to give name. Means can handle an error.

function nameOfFunction(name) {
    if (!name) {
        console.log('Please provide your name');
    } else {
        console.log('Hello', name);
    }
}

nameOfFunction('Bipon'); // Hello Bipon
nameOfFunction('Fahim'); // Hello Fahim
nameOfFunction(); // Please provide your name

Hope everyone can understand this example. See another example of why we need functions. Suppose we want to generate a random number between 1 and 10. Then write a formula to generate random numbers.

const randomNumber = Math.floor(Math.random() * 10);

Now if you want between 1 and 100

const randomNumber = Math.floor(Math.random() * 100);

It should be written like this. Now instead of writing so many times we make it a function.

function generateRandomNumber(max) {
    const randomNumber = Math.floor(Math.random() * max);
    return randomNumber;
}

console.log(generateRandomNumber(10));
console.log(generateRandomNumber(100));
console.log(generateRandomNumber(1000));

Now I can generate random numbers as many times as I want. Now I want to generate a random number between two numbers.

function generateRandomNumber(min, max) {
    const randomNumber = Math.floor(Math.random() * min + (max - min));
    return randomNumber;
}

console.log(generateRandomNumber(5, 10));
console.log(generateRandomNumber(85, 100));

Then understand how functions make our work easier.

Expression vs Statement

Before we understand this, let's look at some examples

const name1 = 'Rayhan'; // Statement
const name2 = 'Alvi'; // Statement
const name3 = 'Anik'; // Statement
const name4 = 'Arjun'; // Statement
const name5 = 'Ayman'; // Statement

const students = [
    'Rayhan',
    'Alvi',
    'Anik',
    'Arjun',
    'Ayman',
    'Ayuub',
    'Bidyut',
]; // Statement

console.log(students[0]); // Expression
console.log(students[1]); // Expression
console.log(students[2]); // Expression
console.log(students[3]); // Expression
console.log(students[4]); // Expression

for (let i = 0; i < students.length; i++) {
    console.log(students[i], students[i].toLowerCase()); // Expression
} // Statement

name1.sendEmail(); // Expression
name2.sendEmail(); // Expression
name3.sendEmail(); // Expression
name4.sendEmail(); // Expression
name5.sendEmail(); // Expression

const nums = [1, 2, 3, 4, 5, 6]; // Statement
const bools = [true, true, false, false]; // Statement
const nulls = [null, null, null]; // Statement
const undefineds = [undefined, undefined, undefined]; // Statement
const arrayOfArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
]; // Statement
const mixed = [true, null, 'Str', 5, [12, 2, 4]]; // Statement

const student1 = {
    firstName: 'Abu',
    secondName: 'Rayhan',
    email: 'rayhan@example.com',
    age: 25,
    attend: true,
}; // Statement

const student2 = {
    firstName: 'Alvi',
    secondName: 'Chowdhury',
    email: 'alvi@example.com',
    age: 25,
    attend: true,
}; // Statement

const student3 = {
    firstName: 'Akib',
    secondName: 'Ahmad',
    email: 'akib@example.com',
    age: 25,
    attend: true,
}; // Statement

const allStudents = [student1, student2, student3]; // Statement

for (let i = 0; i < allStudents.length; i++) {
    sendMail(allStudents[i].email); // Expression
} // Statement

function sendMail(email) {
    console.log('Sending email to', email);
} // Statement

allStudents.forEach((item) => console.log('Email ', item.email)); // Expression
allStudents.forEach((item) =>
    console.log('Full Name ', item.firstName, item.secondName)
); // Expression

function nameOfFunction(name) {
    if (!name) {
        console.log('Please provide your name');
    } else {
        console.log('Hello', name);
    }
} // Statement

nameOfFunction('Murshed'); // Expression
nameOfFunction('Fahim'); // Expression
nameOfFunction(); // Expression

function generateRandomNumber(min = 1, max) {
    const randomNumber = Math.floor(Math.random() * min + (max - min)); // Statement
    return randomNumber; // Expression
} // Statement

console.log(generateRandomNumber(5, 10)); // Expression

The basic difference between Expression and Statement is that Expression returns something at the end of the day, produces data, and stores it somewhere. As such function call is a type of expression. And the statement does not produce any data, cannot be stored anywhere, does not return anything. Function writing is statement, and function call is expression. Because write function doesn't return anything until it is called. Again if the arrow function is written as an expression it is being stored in a variable.

Where to use array and where to use object

Where the terms are singular we will use object. Where Plural we will use Array. Like one phone - object, many phones - array, person - object, people - array, member - object, members - array. Objects where information about someone or something. Where there is more than one person or more than one object, we will use array. Just keep this in mind. Don't confuse arrays with objects in life anymore.

There are certain points to emphasize to get a good grip on JavaScript

Arrays
Objects
Functions and Functional Programming
Basic OOP

25 Useful tools for Frontend Developers

Bipon Biswas — Tue, 19 Jul 2022 16:16:53 +0000

✅ UX challenges:
As the saying goes, practice makes a man perfect. Indeed it is. The more we practice the better we know a subject. Here are various website UX design exercises that you can practice. You can check your skills through challenges. It seems quite useful. uxtools.co

✅ Collect UI:
Designers share their designs here through various challenges. New designs are always updated. You can see the good designs from here and make a good design like your own. collectui.com

✅ PixelSnap:
In the words do not pay pay calculation? But the calculation here is in pixels. It works across the entire screen in all types of applications. You can measure anything. It will come in handy for those who need everything pixel perfect. getpixelsnap.com

✅ Landing Page Checklist:
What is not in it? Landing page has more than 100 tools. Be it from domain name, logo maker, illustration or design software. You can visit. andingpage.fyi

✅ Checklist Design:
Many details of website design have been described so far. It will help to increase the knowledge of web design elements. Must visit. checklist.design

✅ Museum of Websites:
Details of various development stages of UI of popular websites are compiled here. Get a good overview of how to design and develop a website interface. kapwing.com

✅ UI Play Book:
I found this website very useful. Here the description of various parts of UI is given in very organized and detailed manner. uiplaybook.dev

✅ Standard Resume:
If you want to make a resume very simply in a short time, then you can definitely visit this website. Here are various templates and examples from which you can create something unique yourself with an idea. standardresume.co

✅ humaaans:
Websites often require human shapes. You can make different types of human body by remixing yourself through humaaans. It also has different types of templates. It is very easy to make your own custom design. humaaans.com

✅ Get Waves:
Custom wave animation effects for websites can be easily found here. getwaves.io

✅ Animist:
This website will help you to practice the animation effects of the website. Many of us do not know the names of all the effects properly. It can be seen by trying. Fairly well. animista.net

✅ Blobmaker
The blob shapes used on the website can be made with colors and shapes of your choice from now on. You can download and get the svg code too. You can try. blobmaker.app

✅ Code to Go:
Combines snippets to help solve common website development problems. Here you will find the most updated snippets used by JavaScript and React. There are quite good resources, you will understand once you see. codetogo.io

✅ UX Project checklist:
This will help you check if the UX design features are standard or not. uxchecklist.github.io

✅ UX Flow:
Through this, you can easily create beautiful website layouts in sketch, Adobe and figma. There are many tools. You can visit the website. products.ls.graphics

✅ Drawkit:
A good resource of various hand-drawn vector illustrations on the website. drawkit.com

✅ 3Dicons:
A good open source resource of various 3D icons used in website design and development. will benefit 3dicons.co

✅ Web Gradients:
A good resource of different gradient background colors for websites. Many designs are given. webgradients.com

✅ Google Fonts:
A website very familiar to all of us. Various free fonts are available here. fonts.google.com

✅ Very sexy
It is a familiar face to almost all of us. Everyone's first choice for generating dummy text on websites. loremipsum.io

✅ Responsively:
A very useful application to check websites for different devices. I personally like it very much. There are a few different types of functionality that you can explore. responsively.app

✅ UnusedCSS:
Provides a clean CSS file by removing unused CSS properties. unused-css.com

✅ Spline:
A very useful application. Through this it is possible to create 3D effects for websites. From creating different 3D scenes, editing different materials, many things can be done with it. Very good, you can definitely visit. spline.design

✅ Sketch2Code:
Hand drawn designs can be easily converted to html using artificial intelligence. sketch2code.azurewebsites.net

✅ Custom Shape Devider:
A shape divider at different places on the website, at the beginning or at the end of the section, increases the beauty of the design. shapedivider.app

Special Thanks
Jakia Binte Amin

JavaScript Async functions (async/await)

Bipon Biswas — Tue, 19 Jul 2022 15:07:50 +0000

Async and await are built on the top of promise to express asynchronous actions.

Inside the function, the await keyword can be applied to any Promise, which will defer the execution until the promise resolves.

Functions with the async keyword return a Promise. Function with the keyword async can perform asynchronous actions but still look synchronous.

The await method is used to wait for the promise to either get fulfilled or rejected.

General Syntax

Async function function_name(){
  await some_promise()
}

Without async/await

        let result = function(score){
            return new Promise(function(resolve, reject){
                console.log("Calculating results...")
                if(score>50){
                    resolve("Congratulation! You have passed")
                }else{
                    reject("You have failed")
                }
            })
        }
        let grade = function(response){
            return new Promise(function(resolve, reject){
                console.log("Calculating your grade...")
                resolve("Your grade is A. " + response)
            })
        }
        result(80).then(response => {
            console.log("Result Received")
            return grade(response)
        }).then(finalgrade => {
            console.log(finalgrade)
        }).catch(err => {
            console.log(err)
        })

Output

        async function calculateResults(){
            const response = await result(80)
        }

So what the await keyword does. Until the result promise is resolved whatever the promise return get stored variable response.

With async/await

 let result = function(score){
            return new Promise(function(resolve, reject){
                console.log("Calculating results...")
                if(score>50){
                    resolve("Congratulation! You have passed")
                }else{
                    reject("You have failed")
                }
            })
        }
        let grade = function(response){
            return new Promise(function(resolve, reject){
                console.log("Calculating your grade...")
                resolve("Your grade is A. " + response)
            })
        }
        async function calculateResults(){
            try{
                const response = await result(80);
                console.log("Results Received");
                const finalgrade = await grade(response)
                console.log(finalgrade)
            }catch(err){
                console.log(err)
            }
        }
        calculateResults()

Output

JavaScript Closure

Bipon Biswas — Tue, 19 Jul 2022 15:06:57 +0000

What is a Closure?

A closure is a function having access to the parent scope, even after the parent function has closed. Closures in JavaScript is a feature where an inner function has access to the outer function's variables.

A closure has three scope chains

Has access to its own scope [the variable defined within it's curly]
Has access to the variables of the outer functions
Has access to the global variables

var a = 10;
        function first_func(){
            var b = 20;
            function second_func(){
                var c = a+b;
                return c;
            }
            return second_func();
        }
        var sum = first_func();
        document.write("The sum is " + sum + '<br>')

function temporary(){
            let counter = 0;

            return function(){
                counter +=1;
            }
        }
        const add = temporary();
        console.dir(add)
        add();

Output

function temporary(){
            let counter = 0;

            return function(){
                // counter +=1;
                console.log("Death Closure")
            }
        }
        const add = temporary();
        console.dir(add)
        add();

Output

Angular Dependency Injection

Bipon Biswas — Wed, 29 Jun 2022 15:44:27 +0000

Objective: In this article, you will know dependency injection concept, custom dependency injection in Angular.

Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

Dependency Injection

Consider all these components performing common task like accessing the database, rendering images on the view etc.

to avoid rewriting of code, Angular Service can be used
these service can then injected into the components that require that service
Dependency Injection or DI keeps the code flexible, testable and mutable
Classes can inherit external logic without knowing how to create it
DI is benefits directive, pipes and components

Normally, components are used to ensure a good user experience.

In order to execute tasks, using Service is ideal.
A component can delegate tasks like fetching data from the server, validating user input, or logging directly to the console to the Service.

Use Case

Create a Service that performs the task of displaying an employee list
Inject the service into the class using Dependency Injection

At first create a component ng g c emp_info

Next create a service ng g s records

records.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RecordsService {

  info1: string[] = ["John Doe", "E234", "john@gmail.com"]
  info2: string[] = ["Simon Gomez", "E321", "simon@gmail.com"]
  info3: string[] = ["Bipon Biswas", "E123", "bipon@gmail.com"]

  getInfo1(): string[]{
    return this.info1;
  }
  getInfo2(): string[]{
    return this.info2;
  }
  getInfo3(): string[]{
    return this.info3;
  }

  constructor() { }
}

Let's go back to our component .ts file emp-info.component.ts

import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../records.service';

@Component({
  selector: 'app-emp-info',
  templateUrl: './emp-info.component.html',
  styleUrls: ['./emp-info.component.css'],
  providers: [RecordsService]
})
export class EmpInfoComponent implements OnInit {

  infoReceived1: string[] = [];
  infoReceived2: string[] = [];
  infoReceived3: string[] = [];

  constructor(private rservice: RecordsService) { }

  ngOnInit(): void {
  }

  getInfoFromServiceClass1(){
    this.infoReceived1 = this.rservice.getInfo1();
  }
  getInfoFromServiceClass2(){
    this.infoReceived2 = this.rservice.getInfo2();
  }
  getInfoFromServiceClass3(){
    this.infoReceived3 = this.rservice.getInfo3();
  }

}

Service are implemented with the help of Dependancy Injection.

What we need to do. At first import the Service into the emp-info.component.ts file.

Import Service

import { RecordsService } from '../records.service';

emp-info.component.html

<button type="button" name="button" (click)="getInfoFromServiceClass1()">Employee1</button>
<ul>
    <li *ngFor="let info of infoReceived1" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass2()">Employee2</button>
<ul>
    <li *ngFor="let info of infoReceived2" class="list-group-item">{{info}}</li>
</ul>

<button type="button" name="button" (click)="getInfoFromServiceClass3()">Employee3</button>
<ul>
    <li *ngFor="let info of infoReceived3" class="list-group-item">{{info}}</li>
</ul>

Create a three different button for different employees. And user click on the button the data is showing in the UI.

Import into app.component.html

<app-emp-info></app-emp-info>

Angular Components

Bipon Biswas — Thu, 16 Jun 2022 20:03:56 +0000

Objective: In this article, you will know Component.

Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

Component

Create a component
Register it in a module
Add an element in an HTML markup

Objectives and Outcomes

At first you will add the first component to your Angular application and update its template. At the end of this article you will be able to:

Add components to your Angular application
Update the templates of your component.

Adding a Menu Component

Move few images folder containing some PNG files to the Angular project's src/assets folder. These image files will be useful for our exercises.

Next, use the CLI's ng generate command to generate a new component named menu as follows:
ng generate component menu
This will create the necessary files for the menu component in a folder named menu, and also import this component into app.module.ts.
Next, open app.component.html file and add the following after the toolbar:

<app-menu></app-menu>

Creating the Menu

Next, create a folder named shared under the src/app folder. To this folder, add a file named dish.ts with the following code:

export class Dish {
    id: string;
    name: string;
    image: string;
    category: string;
    featured: boolean;
    label: string;
    price: string;
    description: string;
}

Update menu.component.ts as follows to add in the data for four menu items:

import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[] = [
    {
      id: '0',
      name: 'Uthappizza',
      image: '/assets/images/uthappizza.png',
      category: 'mains',
      featured: true,
      label: 'Hot',
      price: '4.99',
      // tslint:disable-next-line:max-line-length
      description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'
    },
    {
      id: '1',
      name: 'Zucchipakoda',
      image: '/assets/images/zucchipakoda.png',
      category: 'appetizer',
      featured: false,
      label: '',
      price: '1.99',
      description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
    },
    {
      id: '2',
      name: 'Vadonut',
      image: '/assets/images/vadonut.png',
      category: 'appetizer',
      featured: false,
      label: 'New',
      price: '1.99',
      description: 'A quintessential ConFusion experience, is it a vada or is it a donut?'
    },
    {
      id: '3',
      name: 'ElaiCheese Cake',
      image: '/assets/images/elaicheesecake.png',
      category: 'dessert',
      featured: false,
      label: '',
      price: '2.99',
      description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'
    }
   ];

  constructor() { }

  ngOnInit(): void {
  }

}

Next, update the menu.component.html template as follows:

<div class="container">
    <div class="row">
        <div class="card col" *ngFor="let dish of dishes">
            <img src="{{dish.image}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{dish.name}}</h5>
              <p class="card-text">{{dish.description}}</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
    </div>
</div>

Next, open app.module.ts and update it as follows:

import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [       
    AppComponent,
    MenuComponent
   ]
})

Output

Selected Image

menu.component.html

<div class="container">
    <div class="row">
        <div class="card col" *ngIf="selectedDish">
            <img src="{{selectedDish.image}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{selectedDish.name | uppercase}}</h5>
              <p class="card-text">{{selectedDish.description}}</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
    </div>
</div>

menu.component.ts

import { Component, OnInit, DebugElement } from '@angular/core';
import { Dish } from '../shared/dish';

const DISHES: Dish[] = [
  {
    id: '0',
    name: 'Uthappizza',
    image: '/assets/images/uthappizza.png',
    category: 'mains',
    featured: true,
    label: 'Hot',
    price: '4.99',
    // tslint:disable-next-line:max-line-length
    description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'
  },
  {
    id: '1',
    name: 'Zucchipakoda',
    image: '/assets/images/zucchipakoda.png',
    category: 'appetizer',
    featured: false,
    label: '',
    price: '1.99',
    description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
  },
  {
    id: '2',
    name: 'Vadonut',
    image: '/assets/images/vadonut.png',
    category: 'appetizer',
    featured: false,
    label: 'New',
    price: '1.99',
    description: 'A quintessential ConFusion experience, is it a vada or is it a donut?'
  },
  {
    id: '3',
    name: 'ElaiCheese Cake',
    image: '/assets/images/elaicheesecake.png',
    category: 'dessert',
    featured: false,
    label: '',
    price: '2.99',
    description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'
  }
]

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[] = DISHES;
  selectedDish = DISHES[0];

  constructor() { }

  ngOnInit(): void {
  }

}

Directives

Angular templates are dynamic
Directive give instruction to Angular on how to render the templates to the DOM
A directive can be defined in Angular as a class with the @Directive decorator
Two other kinds of directive in Angular: Structural and Attribute

Structural Directives

Allows you alter the layout by adding, removing and replacing elements in DOM

Common Structural Directives

ngIf, ngFor, ngSwitch