DEV Community: Md. Akramul Hoque

Node CRUD Operations

Md. Akramul Hoque — Thu, 23 Dec 2021 16:44:42 +0000

CRUD (create, read, update, delete) is an acronym that refers to the four functions. There are different requests for each issue. For querying, we have GET requests, for sending data we have POST requests. These are called HTTP requests. They enable interactions between client and the server and work as a request-response protocol.

The HTTP requests are:

GET is used to request data from a specified resource.

POST is used to send data to a server to create/update a resource.

HEAD: Same as GET, but it transfers the status line and the header section only.

PUT: Replaces all the current representations of the target resource with the uploaded content.

DELETE: Removes all the current representations of the target resource given by URI.

CONNECT: Establishes a tunnel to the server identified by a given URI.

PATCH: The PATCH method applies partial modifications to a resource

Route definition takes the following structure:

app.METHOD(PATH, HANDLER)

Where:

app is an instance of express.
METHOD is an HTTP request method, in lowercase.
PATH is a path on the server. (URL path)
HANDLER is the function executed when the route is matched. (Handler function)

For GET method:

app.get('/save', function(req, res) {
       // write query here
});

For POST method:

app.post('/save', function(req, res) {
       // write query here
});

For PUT method:

app.put('/save/:id', function(req, res) {
       // write query here
});

For DELETE method:

app.delete('/save/:id', function(req, res) {
       // write query here
});

React Context API

Md. Akramul Hoque — Thu, 23 Dec 2021 15:05:06 +0000

Context API is a way to produce variables that can be passed around without having to pass props down manually at every level.

Syntax is React.createConetxt(Provider, Consumer). It returns a provider and consumer. A provider provides the state to its children. It will be the parent of all the components and store all. Consumer is a component that consumes and uses the state.

Let’s explore how we would handle common problems without the React Context API:

App.js

class App extends Component {
    state = {
        cars: {
            car01: { name: 'Honda', price: 100 },
            car02: { name: 'BMW', price: 150 },
            car03: { name: 'Mercedes', price: 200 }
        }
    };
    incrementCarPrice = this.incrementCarPrice.bind(this);
    decrementCarPrice = this.decrementCarPrice.bind(this);

    incrementCarPrice(selectedID) {
        // a simple method that manipulates the state
        const cars = Object.assign({}, this.state.cars);
        cars[selectedID].price = cars[selectedID].price + 1;
        this.setState({
            cars
        });
    }

    decrementCarPrice(selectedID) {
        // a simple method that manipulates the state
        const cars = Object.assign({}, this.state.cars);
        cars[selectedID].price = cars[selectedID].price - 1;
        this.setState({
            cars
        });
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to my web store</h1>
                </header>
                {/* Pass props twice */}
                <ProductList
                    cars={this.state.cars}
                    incrementCarPrice={this.incrementCarPrice}
                    decrementCarPrice={this.decrementCarPrice}
                />
            </div>
        );
    }
}

ProductList.js

const ProductList = props => (
    <div className="product-list">
        <h2>Product list:</h2>
        {/* Pass props twice */}
        <Cars
            cars={props.cars}
            incrementCarPrice={props.incrementCarPrice}
            decrementCarPrice={props.decrementCarPrice}
        />
        {/* Other potential product categories which we will skip for this demo: */}
        {/* <Electronics /> */}
        {/* <Clothes /> */}
        {/* <Shoes /> */}
    </div>
);

export default ProductList;

Cars.js

const Cars = props => (
    <Fragment>
        <h4>Cars:</h4>
        {/* Finally we can use data */}
        {Object.keys(props.cars).map(carID => (
            <Car
                key={carID}
                name={props.cars[carID].name}
                price={props.cars[carID].price}
                incrementPrice={() => props.incrementCarPrice(carID)}
                decrementPrice={() => props.decrementCarPrice(carID)}
            />
        ))}
    </Fragment>
);

Car.js

const Cars = props => (
    <Fragment>
        <p>Name: {props.name}</p>
        <p>Price: ${props.price}</p>
        <button onClick={props.incrementPrice}>&uarr;</button>
        <button onClick={props.decrementPrice}>&darr;</button>
    </Fragment>
);

Let’s explore how we would handle common problems with the React Context API:

1. Initialize the Context

First, we need to create the context, which we can later use to create providers and consumers.

MyContext.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. Create the Provider

Once that’s done, we can import the context and use it to create our provider, which we’re calling MyProvider. In it, we initialize a state with some values, which we can share via value prop our provider component.

MyProvider.js

import MyContext from './MyContext';

class MyProvider extends Component {
    state = {
        cars: {
            car01: { name: 'Honda', price: 100 },
            car02: { name: 'BMW', price: 150 },
            car03: { name: 'Mercedes', price: 200 }
        }
    };

    render() {
        return (
            <MyContext.Provider
                value={{
                    cars: this.state.cars,
                    incrementPrice: selectedID => {
                        const cars = Object.assign({}, this.state.cars);
                        cars[selectedID].price = cars[selectedID].price + 1;
                        this.setState({
                            cars
                        });
                    },
                    decrementPrice: selectedID => {
                        const cars = Object.assign({}, this.state.cars);
                        cars[selectedID].price = cars[selectedID].price - 1;
                        this.setState({
                            cars
                        });
                    }
                }}
            >
                {this.props.children}
            </MyContext.Provider>
        );
    }
}

To make the provider accessible to other components, we need to wrap our app with it. While we’re at it, we can get rid of the state and the methods because they are now defined in MyProvider.js.

App.js

class App extends Component {
    render() {
        return (
            <MyProvider>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo" />
                        <h1 className="App-title">Welcome to my web store</h1>
                    </header>
                    <ProductList />
                </div>
            </MyProvider>
        );
    }
}

3. Create the Consumer

We’ll need to import the context again and wrap our component with it which injects the context argument in the component. Afterward, it’s pretty straight forward. We use context, the same way we would use props. It holds all the values we’ve shared in MyProducer, we just need to use it.

Cars.js

const Cars = () => (
    <MyContext.Consumer>
        {context => (
            <Fragment>
                <h4>Cars:</h4>
                {Object.keys(context.cars).map(carID => (
                    <Car
                        key={carID}
                        name={context.cars[carID].name}
                        price={context.cars[carID].price}
                        incrementPrice={() => context.incrementPrice(carID)}
                        decrementPrice={() => context.decrementPrice(carID)}
                    />
                ))}
            </Fragment>
        )}
    </MyContext.Consumer>
);

Then we wrap the Cars.js component inside the ProductList.js component. The component is simplified because it only needs to render a few components.

const ProductList = () => (
    <div className="product-list">
        <h2>Product list:</h2>
        <Cars /> 
    </div>
);

Notes:

1. What is the context in React?

Ans: React's context allows us to share information to any component, by storing it in a central place and allowing access to any component that requests it. Usually we are only able to pass data from parent to child via props.

2. What is a provider?

Ans: The provider acts as a delivery service. When a consumer asks for something, it finds it in the context and delivers it to where it's needed.

3. What is a consumer?

Ans: A consumer is where the stored information ends up. It can request data via the provider and manipulate the central store if the provider allows it.

Javascript API Concept

Md. Akramul Hoque — Tue, 21 Dec 2021 14:22:46 +0000

API: API stands for Application Programming Interface. An API is a set of defined rules that explain how computers and application servers communicate with each other. API can transfer data between an application and a web server.

REST API is an API that uses HTTP requests for communication with web services and must comply with certain constraints.

CRUD and types of requests: CRUD contains create, read, update, and delete actions that can be performed on a data source. In a REST API, these actions correspond to Four types of requests:

POST: Create action. Using this type of request, we can add new data to our server.
GET: Read action. This is the most common type of request. Using it, we can get the data we are interested in from those that the API is ready to share.
PUT: Update action. Changes existing information. Using this type of request, we can update/modify the value of our existing data.
DELETE: Delete action. Deletes existing information.

**GET vs POST:**

Get method is used to show data in the frontend and the post method is used to insert/update data.
In the get method, data is sent to the header and for that limited amount of data to send. On the other hand, in the post method data is sent to the body and for that large amount of data to be sent.
Get is not secured and post is secured because data is exposed in the url bar or not.
Get will ignore the second request until the first is required (idempotent). But post can not do it (non-idempotent).
Get is more efficient than post.

In JavaScript, it was really important to know how to make HTTP requests and retrieve the dynamic data from the server. JavaScript provides some built-in browser objects and some external open source libraries to interact with the APIs.

Here are the possible ways to make an API call:

XMLHttpRequest
fetch
Axios
jQuery

Today we will discuss about Fetch and Axios:

Fetch- allows us to make an HTTP request but with a straightforward interface by using promises. It’s not supported by old browsers, but very well supported among the modern ones. The fetch API is very powerful. The major disadvantage of fetch API is error handling. We can make an API call by using fetch in two ways.

JSONPlaceholder is a free online REST API that we can use whenever we need some fake data.

Method 1:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(users => console.log(users))

Method 2(using Async and Await):

const getUsers = async() => {
let res = await fetch('https://jsonplaceholder.typicode.com/users');
let data = await res.json();
console.log(data);
return data;
}

getUsers();

Axios- is an open-source library for making HTTP requests and provides many great features, and it works both in browsers and Node.js. It is a promise-based HTTP client that can be used in plain JavaScript and advanced frameworks like React, Vue.js, and Angular.

We can install axios package to using these command:

npm install axios
or
yarn add axios

Then, include it in HTML file like this:

<script src="./node_modules/axios/dist/axios.min.js"></script>

Or, the easiest way to include Axios is by using external CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Let’s open our index.js file and create a function that will print some user information in the console by using Axios.

const getUsers = () => {
 axios.get('https://reqres.in/api/users')
 .then(res => {
  const users = res.data;
  console.log(‘GET users’, users);
})
 .catch(error => console.error(error));
};
getUsers();

The advantages of Axios-

Axios performs automatic transformations and returns the data in JSON format.
Better error handling
Axios has a wide range of supported browsers.

Javascript String Method Concepts

Md. Akramul Hoque — Mon, 20 Dec 2021 14:14:11 +0000

String charAt(position) Method:- The charAt() method accepts the index of specified position and returns the character of this specified position in a string.

Example: 
let a = "This is a string chatAt() method";
let char = a.charAt(0);
console.log(char);

Output: T

String charCodeAt(position) Method:- The charCodeAt() method accepts the index of specified position and returns a number indicating the Unicode value of the character at the given position in a string.

Example: 
let a = "This is a string chatAt() method";
let char = a.charCodeAt(0);
console.log(char);

Output: 84

String concat([string,,]) Method:- The concat() joins two or more strings and returns a new string. This method can be used instead of the plus operator.

Example:
let a = "Javascript";
let b = "String Concept";
let c = a.concat(" ", b);
console.log(c);

Output: Javascript String Concept

String includes() Method:- The includes() method accepts a string and its position and then returns true if a string contains a specified string, Otherwise it returns false. The includes() method is case sensitive. Its syntax is like:

string.includes(searchvalue, start)

Example:
let a = "This is a text string";
let result1 = a.includes("tex", 10);
let result2= a.includes("tex", 5);
console.log(result1);
console.log(result2);

Output: 
True
False

String lastIndexOf() Method:- The lastIndexOf() method accepts a specified string and searches the string from the end to the beginning position. It returns the index from the beginning of this string, otherwise returns -1 if the value is not found. It is also case sensitive. Its syntax is like:

string.lastIndexOf(searchvalue, start)

Example:
let a = "This is a text string";
let result1 = a.lastIndexOf("text");
let result2= a.lastIndexOf("Text");
console.log(result1);
console.log(result2);

Output: 
10
-1

String replace() Method:- The replace() method accepts two specified strings and Search specific string value and replace with specified replace Value string and return new string. Regular expressions can also be used as searchValue. Its syntax is like:

string.replace(searchValue, replaceValue)

Example:
let a = "Please visit my portfolio";
let result= a.replace("portfolio", "website");
console.log(result);

Output: 
Please visit my website

String slice() Method:- The slice() method accepts two indexes as parameters and extracts a section of a string based on specified starting and ending index and returns a new string. Its syntax is like:

string.slice(startIndex, endIndex)

Example:
let a = "Please visit my portfolio";
let result= a.slice(7,26);
console.log(result);

Output: 
visit my portfolio

Some CSS Important Topics

Md. Akramul Hoque — Sun, 19 Dec 2021 15:07:01 +0000

Flexbox Layout: The flexbox layout is also known as Flexible Box Layout Module in CSS3. It allows us to design a flexible responsive layout without using any float or positioning property. It can improve the item's alignment, direction and order in a container. The flexbox layout can modify the width or height of it’s children.

Flexbox layout vs Grid layout:

Flexbox layout is a one dimensional system that means it can handle only a column or a row.
Grid layout is a two dimensional system which can handle both columns and rows at the same time.

CSS Position Property:

Static- is the default position of the element which flows into the page as a normal element. The top, right, bottom, left and z-index properties do not apply.
Relative:- position is adjusted to itself without changing the layout.
Absolute:- is a specified position where an element is removed from the flow of the page. Using absolute positioning we can place an element exactly where we want relative to its parent. If it has no parent, then it treats the document body as its parent.
Fixed:- is a specified position where an element is removed from the flow of the page. Using fixed positioning we can place an element where we want relative to the viewport position. These elements don't move when scroll.
Sticky:- is the combination of relative and fixed position. The element behaves as relative position to a certain distance, after passing this certain distance the element behaves as fixed position.

Box Model: A rectangle box is wrapped around every HTML element. The CSS box model is used to determine the height and width of the rectangular box. The different elements of a box model are content, padding, border and margin.

Pseudo Element:- Pseudo element is a feature of CSS which is used to style the given parts of an element.It is used to create items that do not normally exist in the document tree. Some pseudo elements:- ::after, ::before, ::first-letter, ::first-line, ::selection.

Pseudo Class:- Pseudo class is a class that is used to define a special state of an HTML element. It selects regular elements but under certain conditions like when the user is hovering/focusing over the link. Some pseudo classes:- :link, :visited, :hover, :active, :focus.

Transition Property:- The transition property in CSS is used to make some transition effect. Its effect can be defined in two states using pseudo-classes like : hover or: active. Its syntax like:

**transition:** transition-property transition-duration transition-timing-function transition-delay;

The transition is the combination of four properties which are listed below:

transition-property: It specifies the CSS properties to which a transition effect should be applied.
transition-duration: It specifies the length of time a transition animation should take to complete.
transition-timing-function: It specifies the speed of transition.
transition-delay: It specifies the transition delay or time when transition starts.

Transform Property:- The transform property in CSS is used to change the coordinate space of the visual formatting model. This is used to add effects like skew, rotate, translate, etc on elements. The transformations can be of 2-D or 3-D type. Its syntax like:

transform: none|transform-functions|initial|inherit;

Media Query:- Media query is a CSS technique introduced in CSS3.It uses the @media rule to include a block of CSS properties only if a certain condition is true. We can write media queries like:

‘declaration’ only ‘media type’ and (‘specifying amount of screen to cover’) { ‘element/class’ { // styles to apply when all all conditions are met } }

**Example:**  If the screen size is 600px wide or less, hide the element for container class.
`@media only screen and (max-width: 600px) {
  .container {
    display: none;
  }
}`

Font Size Responsive:- We can make font size responsive by using media query. If the screen size is 901px wide or more, set the font-size of the container class to 40px and the screen size is 900px wide or less, set the font-size of <div> to 20px.

@media screen and (min-width: 901px) {
  .container {
    font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  .container{
    font-size: 20px;
  }
}

Overrule Underlining Hyperlinks:- Control statements and external style sheets are used to overrule underlining Hyperlinks.

**Example:**
 p {
text-decoration: none;
}

<p href="about.html" style="text-decoration: none">link text</p>

Box-Shadow:- The box-shadow CSS property adds shadow effects around an element’s frame. We can set multiple effects separated by commas. Below are a few implementations of box-shadow

**box-shadow:** 5px 15px 5px green;
**box-shadow:** 60px -16px teal;
**box-shadow:** 12px 12px 2px 1px rgba(0, 0, 255, .2);
            box-shadow: inset 5em 1em black;