DEV Community: Sawda Hoque

Some Basic JavaScript Concepts .

Sawda Hoque — Sun, 20 Aug 2023 11:26:02 +0000

Primitive Values

There are 7 Primitive data types. They are:

Number
String
Boolean
Undefined
Null
Symbol
BigInt

Example:

console.log(typeof "Sawda Hoque"); //output, "string"
console.log(typeof 12); //output, "number"
console.log(typeof true); //output, "boolean"
console.log(typeof null); //output, "object"
console.log(typeof undefined); //output, "undefined"

Ternary Operator

Ternary Operator is the smallest way for checking conditions. In ternary operator conditional checking using a question mark (?) and a colon (:).First of all, we write the condition, num>6 then we should use a question mark (?), then we write the code if the condition is true, then we should use a colon (:), then we write the code if the condition is false. We can use nested conditions in the ternary operator.

const number1 = 6;
const number2 = 10;
const largeNumber = number1 > number2 ? number1 : number2;
console.log(largeNumber); // output, 10

Double Equal(==) vs Triple Equal (===)

In JavaScript two double equal(==) compare the values. If the value is equal, return true. But triple equal compares(===) the values and compares the data type. If the value is equal and the type is equal, then return true, otherwise, return false.

console.log(5 == "5"); // output, true
console.log(5 === "5"); // output, false
console.log("5" === "5"); // output, true

isNaN() Method

isNaN() Method returns true if the argument is NaN, Otherwise it returns false.

Spread operator

Spread operator or(...) three dots are used for array expression or string to be expanded or an object expression to be expanded in places. You can copy all the elements of an array, all the properties of an object, and all iterable of the string.

const numbers = [9, 10, 15, 99, 22];
console.log([...numbers]); // output, [9, 10, 15, 99, 22]
console.log([...numbers, 55]); // output, [9, 10, 15, 99, 22,55]

IIFE

IIFE full meaning — Immediately Invoked Function Expression

IIFE function is an anonymous function and the function will call Immediately. We can’t call the IIFE function another time.

(function (){
  console.log(2+3); 
})(); // output: 5

#Server-Side Rendering Vs Client-Side Renderin

Sawda Hoque — Fri, 15 Jul 2022 17:24:17 +0000

Server-Side rendering
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="https://www.youtube.com/other.html.">Link</a>
  </body>
</html>

Client-Side-Rendering
client-side rendering means rendering content in the browser directly using JavaScript. This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <div id="root">
    <app/>
  </div>
  <script src="https://vuejs.org" type="text/javascript"></script>
  <script src="location/of/app.js" type="text/javascript"></script>
</body>
</html>

Lazy Loading React Components (with react.lazy and suspense)

Sawda Hoque — Tue, 24 May 2022 15:10:03 +0000

What is React.lazy()
It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later. It is now fully integrated into core react library itself.

Suspense
Suspense is a component required by the lazy function basically used to wrap lazy components. Multiple lazy components can be wrapped with the suspense component. It takes a fallback property that accepts the react elements you want to render as the lazy component is being loaded.

Basic on JWT,MONGOOSE,NODE,EXPRESS

Sawda Hoque — Tue, 01 Mar 2022 06:17:13 +0000

JWT

JSON Web Token is a proposed Internet standard for creating data with optional signature and/or optional encryption whose payload holds JSON that asserts some number of claims. The tokens are signed either using a private secret or a public/private key.

When should you use JSON Web Tokens?

Authorization: This is the most common scenario for using JWT. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token. Single Sign On is a feature that widely uses JWT nowadays, because of its small overhead and its ability to be easily used across different domains.
Information Exchange: JSON Web Tokens are a good way of securely transmitting information between parties. Because JWTs can be signed—for example, using public/private key pairs—you can be sure the senders are who they say they are. Additionally, as the signature is calculated using the header and the payload, you can also verify that the content hasn't been tampered with.

JSON Web Token structure:
Header:The header typically consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.

Payload:The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: registered, public, and private claims.

Signature :To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.

Mongoose

Mongoose is a JavaScript object-oriented programming library that creates a connection between MongoDB and the Express web application framework. Mongoose is a Node. js-based Object Data Modeling (ODM) library for MongoDB. It is akin to an Object Relational Mapper (ORM) such as SQLAlchemy for traditional SQL databases. The problem that Mongoose aims to solve is allowing developers to enforce a specific schema at the application layer.

Mongoose module

Mongoose.module is one of the most powerful external module of the node.js. Mongoose is a MongoDB ODM (Object database Modeling) that is used to translate the code and its representation from MongoDB to the Node.js server.

Advantages of Mongoose module:

Collection validation of the MongoDB database can be done easily.
Predefined Structure can be implemented on the collection.
Constraints can be applied to documents of collections using Mongoose.

Mongoose find() function

The find() function is used to find particular data from the MongoDB database. It takes 3 arguments and they are query (also known as a condition), query projection (used for mentioning which fields to include or exclude from the query), and the last argument is the general query options (like limit, skip, etc).

Mongoose findOne() function

The findOne() function is used to find one document according to the condition. If multiple documents match the condition, then it returns the first document satisfying the condition.

Mongoose update() function

The update() function is used to update one document in the database without returning it.

Mongoose updateOne() function

The updateOne() function is used to update the first document that matches the condition. This function is the same as update(), except it does not support the multi or overwrite options.

Mongoose updateMany() function

The updateMany() function is same as update(), except MongoDB will update all documents that match the filter. It is used when the user wants to update all documents according to the condition.

Mongoose remove() function

The remove() function is used to remove the documents from the database according to the condition.

Mongoose deleteOne() function

The deleteOne() function is used to delete the first document that matches the conditions from the collection. It behaves like the remove() function but deletes at most one document regardless of the single option.

Mongoose deleteMany() function

The deleteMany() function is used to delete all of the documents that match conditions from the collection. This function behaves like the remove() function but it deletes all documents that match conditions regardless of the single option,

Node.js

Nodejs is a server-side JavaScript run-time environment. It's open-source.

Difference between Nodejs and javascript

i.NodeJS is a Javascript runtime environment. But javascript is a programming language that is used for writing scripts on the website.
ii.We can run Javascript outside the browser with the help of NodeJS.But Javascript can only be run in the browsers.
iii.Nodejs does not have capability to add HTML tags,it is mostly used in sever side.
But Javascript is capable to add HTML and play with the DOM,it is basically used in clients side.

Differences between sql and nosql in database

i.SQL databases are relational that means relational database management system (RDBMS), NoSQL database is non-relational or distributed. SQL databases are table-based whereas NoSQL databases are document-based.
ii.SQL database the data is in the form of tables consisting of a number of rows, whereas data in NoSQL has no standard schema. NoSQL database have dynamic schema while SQL databases consist of predefined schema.
iii.Nosql are horizontally scalable while sql database are vertically scalable.

Express.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications. Following are some of the core features of Express framework −

Allows to set up middlewares to respond to HTTP Requests.
Defines a routing table which is used to perform different actions based on HTTP Method and URL.
Allows to dynamically render HTML Pages based on passing arguments to templates.

Learn Something on React JSX and Hooks

Sawda Hoque — Tue, 01 Mar 2022 05:18:01 +0000

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.t is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

Characteristics of JSX:

JSX is not mandatory to use there are other ways to achieve the same thing but using JSX makes it easier to develop react application.
JSX allows writing expression in { }. The expression can be any JS expression or React variable.
To insert a large block of HTML we have to write it in a parenthesis i.e, ().
JSX produces react elements.
JSX follows XML rule.
After compilation, JSX expressions become regular JavaScript function calls.
JSX uses camelcase notation for naming HTML attributes. For example, tabindex in HTML is used as tabIndex in JSX.
Advantages of JSX:
JSX makes it easier to write or add HTML in React.
JSX can easily convert HTML tags to react elements.
It is faster than regular JavaScript.
As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions.
JSX prevents XSS (cross-site-scripting) attacks popularly known as injection attacks.
It is type-safe, and most of the errors can be found at compilation time.

Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.
When to use a Hooks
If you write a function component and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code.
These rules are:
i.Only call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.

ii.Only call Hooks from React functions
You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.

Hook State

Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state.

Custom Hooks

A custom Hook is a JavaScript function. The name of custom Hook starts with "use" which can call other Hooks. A custom Hook is just like a regular function, and the word "use" in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.

Built-in Hooks

Basic Hooks

useState
useEffect
useContext

Additional Hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

Prop-Types

Prop-Types are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don’t receive an error at the very end of our app by the console which might not be easy to deal with.

State props

In a React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component. The state can be initialized by props.

Exploring Some CSS Features

Sawda Hoque — Mon, 28 Feb 2022 15:18:47 +0000

CSS stands for Cascading Style Sheets which is used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Here's what i’m Describe:

Box Model–CSS

In CSS ,Box Model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements.

Box-Model has multiple properties in CSS. Some of them are given below:

content: This property is used to display the text, images, etc, that can be sized using the width & height property.
padding: This property is used to create space around the element, inside any defined border.
border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
margin: This property is used to create space around the element , around the border area.It is useful to separate the element from its neighbors.

Overflow–CSS

The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Overflow has multiple properties in CSS. Some of them are given below:
Visible: The content is not clipped and visible outside the element box.
Hidden: The overflow is clipped and the rest of the content is invisible.
Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Auto: It automatically adds a scrollbar whenever it is required.
Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.

Float–CSS

The float CSS property is used to position the elements to the left, right, of its container along with permitting the text and inline elements to wrap around it. The float property defines the flow of content in the page. The remaining elements will be part of the flow if the element is removed from the normal flow of the content. This property is ignored by the absolutely positioned elements.

Float has multiple properties in CSS. Some of them are given below:
left: The element will be positioned to the left side of its containing block.
right: The element will be positioned to the right side of its containing block.
none: The element remains the same as it is declared ie it will have no effect on the element & this is the default value.
inherit: It is used to inherit a property to an element from its parent element property value.

2D Transforms–CSS

In CSS, transforms is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis.
Transforms has six properties in CSS. Some of them are given below:
translate() Method: The translate() method is used to move the element from its actual position along the X-axis and Y-axis.
rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The degree is given in the parenthesis.
scale() Method: It is used to increase or decrease the size of an element according to the parameter given for the width and height.
skewX() Method: This method is used to skew an element in the given angle along the X-axis.
skewY() Method: This method is used to skew an element in the given angle along the Y-axis.
matrix() Method: This method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters as matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).

3D Transforms–CSS

In 3D transformation, the elements are rotated along X-axis, Y-axis and Z-axis.
There are three main types of transformation which are listed below:

rotateX()
rotateY()
rotateZ()

Media queries–CSS

The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.
Media queries can be used to check many things:
width and height of the viewport
width and height of the device
Orientation
Resolution

Features of Media query

There are many features of media query which are listed below:
color: The number of bits per color component for the output device.
grid: Checks whether the device is grid or bitmap.
height: The viewport height.
aspect-ratio: The ratio between width and height of the viewport.
color-index:** The number of colors the device can display.
max-resolution:The maximum resolution of the device using dpi and dpcm.
monochrome: The number of bits per color on a monochrome device.
scan: The scanning of output devices.
update: How quickly can the output device modify.
width: The viewport width.
Media Types in CSS: There are many types of media types which are listed below:
all: It is used for all media devices
print: It is used for printer.
screen: It is used for computer screens, smartphones, etc.
speech: It is used for screen readers that read the screen aloud.