DEV Community: Kaniz Mokammel Mim

CRUD Operations…

Kaniz Mokammel Mim — Thu, 23 Dec 2021 15:16:27 +0000

CRUD Operations…

Everything that contains information or images on a website is stored in a database.The method by which we do this is called CRUD Operations. CRUD is an acronym.
Here,C stands for create , R stands for read , U stands for update , D stands for delete.These are the four most basic operations in database systems. CRUD operations are the backbone for interacting with any database.There are many databases where we can store data, some of which I will mention below:
Oracle 12c, MySQL, Microsoft SQLServer, PostgreSQL, MongoDB, MariaDB, DB2, SAP HANA. Today I will discuss MySQL and mongoDB.

MySQL : MySQL is an open-source relational database management system.
MySQL is one of the most popular databases for web-based applications. It's free for the user.Here SQL means Structured Query Language. SQL is a language programmers use to create, update ,read and delete from the relational database, and also control user access to the database. If a user wants to use a MySQL database s/he has to set up XAMPP, without XAMPP any can not use a local server.

This is an inner look of MySQL. Here any one can create tables for storing data or information.
In SQL this process is used to Insert data.

Here * means get all data from the database.

This query use to update a data

And this one for delete data.

MongoDB: MongoDB is a document database.The main purpose of making MongoDB is designed to make scaling easier.MongoDB documents are similar to JSON objects. So it is easy to access the API . MongoDB has both local and cloud-hosted deployment. It is also free for all. MongoDB is a tool that can manage document-oriented information, store or retrieve information. MongoDB is a NoSQL database management program. Here NoSQL databases are useful for working with large sets of distributed data. This is the inner look of MongoDb.

CRUD operation using MongoDB
InsertOne is used to add new data in the database.
.

updateOne is used to update or change an existing data in the database.

Find use to search a data from database

DeleteOne is used to delete a specific data from a database realtion.

React.js,PropTypes,State-props,JSX,Hooks,custom hooks…

Kaniz Mokammel Mim — Wed, 22 Dec 2021 14:53:08 +0000

React.js,PropTypes,State-props,JSX,Hooks,custom hooks…

There are currently a number of web development frameworks in react.js.React is a free and open-source front-end JavaScript library [3] that builds user interfaces based on UI elements.It is invented by Meta (formerly Facebook) in 2013 .React is currently managed by Facebook's developers.React can be used as a base in the development of single-page or mobile applications.React depend on state management and rendering that state to the DOM.If a beginner wants to create a website with React, I will discuss about the issues that need to be known.

PropTypes: React props, which stands for “properties,” are used to send data from one component to another.React has an internal mechanism for props validation called PropTypes.Props and PropTypes are important processes because they work pass only readable features in the feedback elements.
Benefits of PropTypes : PropTypes makes it easy to catch bugs caused by passing data of data type .

State-props: Props are short for properties. Props are used to pass data between React components. Mainly react data flow between components is unidirectional . It can pass data from upper level to lower level.React maintains inheritance

Here data is being passed from the previous component to the following component through props.
State allows elements to create and manage their own data.State on the other hand is still a variable, but directly initialized and managed by the component.

JSX: JSX stands for JavaScript XML.HTML can be written or added to React via JSX.JSX can easily convert HTML tags by responding to elements.It's faster than regular JavaScript.

Here

, ,

these are all HTML tags used in React in JSX.

Hooks: Hooks are backwards-compatible,which means it does not contain any breaking changes. This page provides an overview of Hooks for experienced React users. This is a fast-paced overview.

Here, useState,useEffect are basic hooks.usestate use to declare a state in React app. UseEffect allows us to perform side effects in the function components.
**custom hooks: **A custom hook is a JavaScript function whose name starts with "use" and it can call another hook. When using react, the user can make hook calls for his work needs.
In this picture usecart is a custom hook.This hook I used to calculate the price of the product

Scope, Block Scope, Global Scope, Global Variable,Double equal (==) vs Triple equal (===)

Kaniz Mokammel Mim — Tue, 21 Dec 2021 14:57:03 +0000

Scope, Block Scope, Global Scope, Global Variable,Double equal (==) vs Triple equal (===)

Scope : Scope is very important in programming. Scope refers to everything contained within "{}". Variable functions within a scope can only be accessed within that specific scope .

Everything contained in the picture in this image is bound within this particular scope. No access will be available to them outside the scope.

Whenever I try to log the console outside the scope of the "result" within the, the result is not defined as being outside the scope. So variables declared within a JavaScript function, become Local Scope to the function.

Global Scope and Global Variable : If a variable is declared inside a JavaScript file outside of a local scope, it may be accessible from all locations in that file, this is called global scope. In this picture, we can see the “first” variable is declared on top of the function and it is not bound by any "{}". So we can use the "first" variable anywhere in the file So. it is within the global scope and the variable is a global variable.

Block Scope: Let and const are the two keywords that provide block scope in JavaScript.The new JavaScript ES6 introduces these two important keywords. So the variables using let and const can only be accessed within their scope.

In this picture I am using the const keyword to declare a variable . So this keyword maintains block scope. Since I logged the 'blockVariable' console between {} for which the variable ran on the console.
But when I log the 'blockVariable' console outside of {}, the variable cannot find the console.

Double Equal(==) and Triple Equal(===) : Double Equals ( == ) checks for value equality only. And the other hand, Triple Equals ( === ) will verify whether the variables being compared have both the same value AND the same type .

In this picture , I am declaring two variables, one is number and another is string. Than I am using double equal (==) for compare these two variables. Double equals can not compare them strictly. It just matches them and gives the answer.

On the other hand, when I can using triple equal(===), here the answer is “both numbers are not equal” ,because triple equal(===) can check them strictly.This means both the type and the **value **we are comparing have to be the same.

If we have to compare an argument, we use triple equals, because it also compares type and value.So the result gives absolutely right. That's why programmers use Triple Equal.

Map, Filter, Find

Kaniz Mokammel Mim — Mon, 20 Dec 2021 15:19:39 +0000

Map, Filter, Find

We all use arrays when working with JavaScript. An array is a data structure where the same element can be stored.We use Map, Filter, and Find to get elements from the array. Today I will try to explain Map, Filter, Find in a simple way.

Map:
The function of a map is to take the property from one array and return it to another array.Many may say that "foreach" can also be used to return the property from the array. Yes, that's right, but "foreach" can't automatically return a new array like "map", you have to push the property in an array
Using foreach:

Using Map:

So in the above pictures we can see that using "foreach" we have to push the property in a new array but "map" has made this task easier.

Filter :
Filter returns the properties of an array to a new array like "Map", but in this case we can access the property using the terms. For which only the necessary features can be found in an easy way without accessing an entire array.
In the image below, I did not take all the properties from the same array and only filtered the largest property from 10.

Find:
Find is usually called array method."Find" is used to get a value from an array and it does not return a value to any array. And in case of value return returns the first value like condition.
I am clearing the matter with an example, suppose
Number = [10,12,3,4,6,90], from this array I want to see properties greater than 10, here 12 and 90 have these 2 values as the largest property of 10, but "Find" is only the first Value 12 will be given as a result.

CSS Media Query

Kaniz Mokammel Mim — Sun, 19 Dec 2021 15:11:45 +0000

Usually we do not browse a website through a specific device, when we use the device we have. There are many people who do not have a laptop / computer / tablet, who use a mobile phone, so work or time purpose everyone uses the device is different.So a website 'designer or developer' has to create a website with all types of users in mind. Usually when we design a website, the design is for computers or laptops by default, for which we have to react differently considering other users.And CSS media query is used to make this responsive.

I have given a lot of introductions so far, now let's come to the real thing, I have already said that the design of the website depends on the device, so let's talk a little bit about the device or its measurements, usually 3 types of devices:

Larger devices( desktop, laptop, supercomputer etc).
Medium device(Tablet, iPads etc).
Small device.(Smartphone or any other Mobile Phone etc)

In short, the way I remember the size of these 3 devices is:

Larger devices( minimum width : 1024 px).
Medium devices (minimum width: 768 px and maximum width: 1023 px).
Small devices:(maximum width : 768 px).

Now let me tell you how to make a website responsive for different devices, in this case you can use Vanilla CSS and again you can use their class or component even if you use CSS framework. Today I will try to explain briefly with some examples:

- Vanilla CSS
Only for Small device( Resolutions 768px And Above)
@media only screen (min-width : 768px ){
//code segment
}
Someone time we can use 680 px instance of 768 px
@media only screen (min-width : 680px ){
//code segment
}
Medium device(Resolutions Between 768px And 960px)
@media only screen and (min-width : 768px ) and (max-width: 960px){
//code segment
}

- CSS Framework
Bootstrap, tailwind, material ui are the most familiar of css frameworks.

- Bootstrap:
Here we can make a website responsive using className.

Here sm, md, lg className use to make a site responsive. Sm means small device, md means medium device, lg means large device.

- Tailwind:
sm (resolutions 640px) ,md( resolutions 768px),
lg (resolutions 1024px),xl (resolutions 1280px), 2xl (resolutions 1536px). The tailwind is used as a class like bootstrap.

- Material ui :
UI using Breakpoints layout to make a site responsive.

Here,xs(extra-small: 0px), sm(small: 600px), md(medium: 900px), lg(large: 1200px), xl(extra-large: 1536px).