DEV Community: Tanjir Ahmed

Node JS

Tanjir Ahmed — Thu, 23 Dec 2021 12:47:15 +0000

CRUD Operations
Crud stands for Create Read Update and delete operations. According to the definition crud operation means the way to create an object then read the object then update that if needed a finally delete all data after use. Crud operation is used to make those changes to storage systems.
JWT
JWT The JSON web tokens are known as secure identification for websites which helps to make sure that the requests getting from the user side are originally from a valid user or not. Jwt is basically a json object that holds user information and matches with the information that the user provides on the website.
For an example

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
Is a token when we decode the token we get
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}

The object that holds information
Mongoose
Mongoose is a node-based library for MongoDB. The main objective of mongoose is to provide developers to enforce a specific schema at the application.
Relational database (MySql)
My Sql is a popular database system for storing data. All the datas are stored is a table row everytime in my sql database.My sql uses structure query language (SQL).in MySQL one can access associated data using joins which minimizes duplication.
Where mongo DB or any othe no sql databases stores data in json formate but my sql stores data on table raw basis.
NODE js
Node js is an asynchronous backend related javascript run time. Node js is used to create scalable live application.Node.js takes the event model a bit further. It presents an event loop as a runtime construct instead of as a library. In other systems, there is always a blocking call to start the event loop.

React redux and context API

Tanjir Ahmed — Wed, 22 Dec 2021 15:08:38 +0000

Redux

What is redux?
Redux is a state management library for react based web applications. Redux makes a react app to manage states available from any component without the hassle of prop drilling. Redux was initially introduced by Andrew Clark in 2015.
What redux does?
Redux actually creates a store where all the states are kept for availability from any components. instead of sending data from state to state redux can send data to any components.
Install Redux

There are two ways to install redux in web apps
With npm
npm install redux
npm install @reduxjs/toolkit
With yarn
yarn add redux
yarn add @reduxjs/toolkit
Sometimes it becomes necessary to install the react-redux package by npm Install
React-redux

Creating store. In order to store data on the store, we have t create one first. To create a store in redux we need to create some files with javascript codes .with that code we call the create store function Which returns a store that is basically a javascript object. And later with the help of the reducer, we can get data stored in the store very easily and effectively.
1. Store State in redux store Redux is used for state storing for components. Once we need to load data in a simple react app we used to store them in state and share the states through components to components. But in redux we don’t need to use state instead we store our state to the redux store with a unique name to be identified quickly. We do that with a hook called use dispatch. Dispatch function creates a space in the redux store and sends the required data
2. Get stored data from store To acces stored data we need to acess thw states that are create in the redux store. In order to do that we have to use the redux useSelector hook. const products=useSelector((state)=>state.allProducts.products) useSelector hook make a connection to the reduces and the reducer calls the store that gves a state object.insiede that state object the related state is stored. We can use that state from any component and any where any time.

context API
Context API is a system to create a way to send data among all the parent and child components. With the help of context When we need to use a single state to multiple components then we use context API make it easy to share . for that propose we need to wrap all the needing components with context Provider component and make all other components its children component to pass data through Context value.
To create context We use createContext Hook
ANd to get value from the context

Have to use Context Hook.

Things one needs to know as a javascript developer-part-2

Tanjir Ahmed — Tue, 21 Dec 2021 12:12:38 +0000

Inheritance
Inheritance is a concept of abject oriented programing. With this concept, we can
base a function or class to a new class
class person {
constructor(name, weight) {
this.name = name;
this.weight = weight;
}

In the above code we declared a class of a person that takes persons name and weight as argument. And gives name and weight as value. To implement this in inheritance we need to call the function with the name and value of weight as a parameter of the class. We can create multiple objects from this one constructor.
To initiate the constructor

const person = new person('George', '160Kg');
With the help of inheritance, we can create multiple objects from a single class in javascript.
This Keyword
is a keyword of function that indicates the function where it was declared. This keyword indicates the global object.
The syntax is
“ This “
Example:
Function Func(){this.console.log('This Keyword")}:

The above code prints “this Keyword” from the func function.
DOM
The Full meaning of DOM is the document object model. DOm basically means javascript to interact with HTML documents. with the help o dom-manipulation user, interactive websites can be created. There are a few Built-in Syntax for javascript DOM manipulation.
Document.inner HTML
Document.Inner text
Document. Style
Add event listener
With the help of document. inner HTML we can set HTML code to create a new section or element with javascript. With inner text, we can change the inner value of any Html element.
And with event listener, we add Events to the HTML document to interact with users for this page. Interaction such as onclick, hover and many more.
Fetch
Fetch is a javascript method that makes HTTP requests from the server and loads needed data from the server to document.
API
Full form of API stands for Application Programming Interface. Fetch uses API to make HTTP requests API is like a messenger to the back end and front. Api interacts with the database and gives the required data is needed t perform any operation, its popular lightweight way of transferring data
What is Postman is a Client tool to work with APIs
to send requests to get responses.
Header: exists in both request and response,
is metadata about the request.
Content-Type: in the request header: to specify what kind of data
we are sending to the server
in response header: what was the content type we got a response

Things one needs to know as a javascript developer

Tanjir Ahmed — Mon, 20 Dec 2021 14:26:24 +0000

Scopes
Scopes are basically the address of a variable where it is allocated. javascript always stays on root scope. In other words, Scopes are the boundaries for objects, functions and variables.
There are two types of scops available.
Local Scope: Local scope indicates the variables that are declared inside of a function and can not be accessed from outside.
Global scope: Global scopes are not like local scopes. Global scopes are declared out of function to be accessible from anywhere in the document.

Immediately Invoked Function Expression(IIFE) IIFE goes just as its name indicates it is a function that immediately invokes execution As soon as it is declared The syntax for IIFE is (function () { statements })(); Hoisting Hoisting is basically a way to call a function before it is declared. In javascript through the context of hoisting all the declaration goes to the top of the program. Hoisting is a complicated topic in javascript. Most developer gets unexpected results. As for calling a function before initialization should be an error. But in javascript, we can do that for the concept of hoisting. Closures The closure is a function that is called inside of another function. The closure is used to get the local variable of another function. Callbacks Call back functions are the function that takes a function as an argument and returns another function. In the callback method, a function waits for another function to be called. function greeting(name) { alert('Hello ' + name); }

function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}

processUserInput(greeting);
Async Await
Async await is from es-7.
Async await is a concept of waiting for something to be complete. Async await is kind of similar to promises but it also creates asynchronous operations synchronously
In javascript, async-await is defined by 3 version
Call back. (ES5)
Promises. (ES6)
Async await (ES7)
The syntax for async-await is ;
Function async (){

Const post= await fetch(“URL”)
Await console.log (post)
}.

CSS BLOG

Tanjir Ahmed — Sun, 19 Dec 2021 10:01:18 +0000

CSS Dimension
Css dimension is basically height,width,max-min height,max-min width etc.
Implement css height and width :
.Container{
Height:”30px”
Width:”60px”

}
Width and height take more values like rem, em, pt, cm etc
CSS Media Queries
Media Queries are used to make a responsive web page that can respond in different devices with different type ratios.
The break point for some devices are as follows;
Smartphones (portrait and landscape)
Max-width=480px min-width 320px
Smartphones (portrait)
Max-width=320 px
Tablets
Max-width =786 px
Laptop and desktop
Min-width=1224px
For larger devices
Min width =1824px

CSS Gradiant
CSS gradient is a way to implement animation to an image. there are 2 types of the gradient in CSS. those are linear gradient and radial gradient.
Linier gradient is implemented by
linear-gradient(direction, color-stop1, color-stop2, ...)
Linear gradient style two colours must be declared. The more complex effect may be applied through the linear gradient.
Radial gradient is implemented by
radial-gradient(shape size at position, color-stop1, color-stop2, ...);

CSS CURSOR
CSS cursor property is used to define the specific action based style to the mouse cursor.
There are a few types of cursor effects based on interaction with the website. And they are
Cursor Default
Cursor Pointer
Cursor help
Cursor wait
Cursor progress
Cursor move and so on.