DEV Community: AL MaHmuD SuRuJ

Deep Learning Applications in Bioinformatics

AL MaHmuD SuRuJ — Tue, 11 Mar 2025 14:11:46 +0000

Deep Learning Applications in Bioinformatics

Introduction

Deep Learning (DL) has revolutionized bioinformatics by enabling the analysis of vast and complex biological data. It is a subset of Machine Learning (ML) that leverages neural networks with multiple layers to extract meaningful patterns from biological datasets. Applications of DL in bioinformatics span genomics, proteomics, drug discovery, disease diagnosis, and personalized medicine.

Fundamentals of Deep Learning in Bioinformatics

1.1 Key Deep Learning Architectures

Convolutional Neural Networks (CNNs): Used for biomedical imaging and structural biology.
Recurrent Neural Networks (RNNs) & Long Short-Term Memory (LSTMs): Applied in sequence analysis, including DNA, RNA, and protein sequences.
Transformers: Advanced deep learning models for large-scale sequence processing (e.g., AlphaFold for protein structure prediction).
Autoencoders: Used for feature extraction and dimensionality reduction in high-dimensional biological data.
Generative Adversarial Networks (GANs): Applied in synthetic data generation for drug discovery and molecular modeling .

Key Applications of Deep Learning in Bioinformatics

2.1 Genomics & DNA Sequencing

Genome Annotation: Identifying genes, regulatory elements, and mutations.

Variant Calling & Mutation Detection: DL models enhance the accuracy of identifying mutations in DNA sequences.

Gene Expression Analysis: Predicting gene interactions and disease associations.

2.2 Proteomics & Protein Structure Prediction

Protein Folding & Structure Prediction: Deep learning models like AlphaFold predict 3D protein structures with high accuracy.

Protein Function Prediction: DL models classify proteins based on their functional domains.

Protein-Protein Interaction (PPI) Networks: Graph-based deep learning models analyze interactions between proteins.

2.3 Drug Discovery & Pharmacology

Drug-Target Interaction (DTI) Prediction: CNNs and transformers predict potential drug interactions.

Virtual Screening: DL models scan large molecular databases to identify promising drug candidates.

De Novo Drug Design: GANs and Variational Autoencoders (VAEs) generate novel drug molecules.

2.4 Disease Diagnosis & Personalized Medicine

Medical Imaging Analysis: CNNs detect diseases in radiology images (MRI, CT scans, X-rays).

Cancer Classification: DL models classify cancer subtypes based on histopathological images.

Personalized Medicine: Predicting individual patient responses to treatments based on multi-omics data.

2.5 Microbiome Analysis & Metagenomics

Microbial Community Classification: DL models classify bacterial species from metagenomic data.

Antibiotic Resistance Prediction: Deep learning detects resistance genes in microbial genomes.

Host-Microbiome Interaction: Predicting microbiome effects on human health and disease progression.

Popular Deep Learning Tools in Bioinformatics

TensorFlow & PyTorch: Leading deep learning frameworks for bioinformatics applications.

AlphaFold: Google DeepMind’s deep learning model for protein structure prediction.

DeepChem: Specialized deep learning library for drug discovery and molecular modeling.

Keras: User-friendly deep learning library for developing bioinformatics models.

BioBERT: Transformer-based model for biological text processing and sequence analysis.

Challenges and Future Directions

4.1 Challenges

Data Scarcity & Imbalance: High-quality labeled biological datasets are limited.

Computational Complexity: Training deep learning models requires substantial computing power.

Interpretability & Explainability: Many deep learning models function as black boxes, making biological interpretation difficult.

Integration with Existing Biological Knowledge: Combining deep learning predictions with domain expertise remains a challenge.

4.2 Future Directions

Explainable AI (XAI): Enhancing model transparency for biological insights.

Integration of Multi-Omics Data: Combining genomics, proteomics, and metabolomics for a holistic understanding.

Federated Learning in Bioinformatics: Enabling privacy-preserving deep learning across multiple institutions.

Self-Supervised Learning: Leveraging unlabeled biological data to enhance learning efficiency.

Conclusion

Deep Learning has transformed bioinformatics by enabling breakthroughs in genomics, proteomics, drug discovery, and medical diagnosis. The continuous advancement of deep learning models and their integration with biological data will lead to more accurate predictions and insights, shaping the future of personalized medicine and biomedical research.

Relational Database & Back-end Concept

AL MaHmuD SuRuJ — Thu, 23 Dec 2021 17:43:51 +0000

Relational Database

**
RDBMS which stands for "Relational Database Management System." An RDBMS is a DBMS designed specifically for relational databases. Therefore, RDBMS are a subset of DBMS.
A relational database is a type of database that stores and provides access to data points that are related to one another. Relational databases are based on the relational model, an intuitive, straightforward way of representing data in tables. Relational databases use SQL or MySQL as the tool to access the data and is based upon ACID properties. Relational database, all data is held in tables, which are made up of rows and columns. Each table has one or more columns, and each column is assigned a specific datatype, such as an integer number, a sequence of characters that is used for text, or a date. Each row in the table has a value for each column.
A relational database is a collection of data items with pre-defined relationships between them. These items are organized as a set of tables with columns and rows. Tables are used to hold information about the objects to be represented in the database. Each column in a table holds a certain kind of data and a field stores the actual value of an attribute. The rows in the table represent a collection of related values of one object or entity. Each row in a table could be marked with a unique identifier called a primary key, and rows among multiple tables can be made related using foreign keys. This data can be accessed in many different ways without reorganizing the database tables themselves.
The tables of a relational database have some important characteristics:
 There is no significance to the order of the columns or rows.
 Each row contains one and only one value for each column.
 Each value for a given column has the same type.

Example of Relational Database

**
Here’s a simple example of two tables a small business might use to process orders for its products. The first table is a customer info table, so each record includes a customer’s name, address, shipping and billing information, phone number, and other contact information. Each bit of information that means each attribute, is in its own column, and the database assigns a unique ID that here a key to each row. In the second table—a customer order table—each record includes the ID of the customer that placed the order, the product ordered, the quantity, the selected size and color, and so on—but not the customer’s name or contact information.

These two tables have only one thing in common: the ID column (the key). But because of that common column, the relational database can create a relationship between the two tables. Then, when the company’s order processing application submits an order to the database, the database can go to the customer order table, pull the correct information about the product order, and use the customer ID from that table to look up the customer’s billing and shipping information in the customer info table. The warehouse can then pull the correct product, the customer can receive timely delivery of the order, and the company can get paid.

How does a relational database work?

**
The data tables used in a relational database store information about related objects. Each row holds a record with a unique identifier -- known as a key -- and each column contains the attributes of the data. Each record assigns a value to each feature, making relationships between data points easy to identify.

The standard user and application program interface (API) of a relational database is the Structured Query Language. SQL code statements are used both for interactive queries for information from a relational database and for gathering data for reports. Defined data integrity rules must be followed to ensure the relational database is accurate and accessible.
**

What are the types of databases?

**
There are several database categories, from basic flat files that aren't relational to NoSQL and newer graph databases that are considered even more relational than standard relational databases. Some database types include the following:

Flat file database: These databases consist of a single table of data that has no interrelation -- typically text files. This type of file enables users to specify data attributes, such as columns and data types.
NoSQL database: This type of database is an alternative that's especially useful for large, distributed data sets. NoSQL databases support a variety of data models, including key-value, document, columnar and graph formats.

Graph database: Expanding beyond traditional column- and row-based relational data models; this NoSQL database uses nodes and edges that represent connections between data relationships and can discover new relationships between the data. Graph databases are more sophisticated than relational databases. They are used for fraud detection or web recommendation engines.

Object relational database (ORD): An ORD is composed of both a relational database management system (RDBMS) and an object-oriented database management system (OODBMS). It contains characteristics of both the RDBMS and OODBMS models. A traditional database is used to store the data. It is then accessed and manipulated using queries written in a query language, such as SQL. Therefore, the basic approach of an ORD is based on a relational database.

However, an ORD can also be considered object storage, particularly for software written in the object-oriented programming language, thus pulling on object-oriented characteristics. In this situation, APIs are used in the storage and retrieval of data.

What are the advantages of relational databases?

The key advantages of relational databases include the following:
Categorizing data. Database administrators can easily categorize and store data in a relational database that can then be queried and filtered to extract information for reports. Relational databases are also easy to extend and aren't reliant on physical organization. After the original database creation, a new data category can be added without having to modify the existing applications.
Accuracy. Data is stored just once, eliminating data deduplication in storage procedures.
Ease of use. Complex queries are easy for users to carry out with SQL, the main query language used with relational databases.
Collaboration. Multiple users can access the same database.
Security. Direct access to data in tables within an RDBMS can be limited to specific users.
**

What are the disadvantages of relational databases?

**
The disadvantages of relational databases include the following:
Structure: Relational databases require a lot of structure and a certain level of planning because columns must be defined and data needs to fit correctly into somewhat rigid categories. The structure is good in some situations, but it creates issues related to the other drawbacks, such as maintenance and lack of flexibility and scalability.
Maintenance issues: Developers and other personnel responsible for the database must spend time managing and optimizing the database as data gets added to it.
Inflexibility: Relational databases are not ideal for handling large quantities of unstructured data. Data that is largely qualitative, not easily defined or dynamic is not optimal for relational databases, because as the data changes or evolves, the schema must evolve with it, which takes time.
Lack of scalability: Relational databases do not horizontally scale well across physical storage structures with multiple servers. It is difficult to handle relational databases across multiple servers because as a data set gets larger and more distributed, the structure is disrupted, and the use of multiple servers has effects on performance -- such as application response times -- and availability.
**

Examples of relational databases

**
Standard relational databases enable users to manage predefined data relationships across multiple databases. Popular examples of standard relational databases include Microsoft SQL Server, Oracle Database, MySQL and IBM DB2.

Cloud-based relational databases, or database as a service, are also widely used because they enable companies to outsource database maintenance, patching and infrastructure support requirements. Cloud relational databases include Amazon Relational Database Service, Google Cloud SQL, IBM DB2 on Cloud, SQL Azure and Oracle Cloud.

What are the differences between relational databases, non-relational databases and NoSQL?

**
The most important difference between relational database systems and non-relational database systems is that relational databases are normalized. That is, they store data in a tabular form, arranged in a table with rows and columns. A non-relational database stores data as files.
Other differences include the following:
Use of primary keys. Relational database tables each have a primary key identifier. In a non-relational database, data is normally stored in hierarchical or navigational form, without the use of primary keys.
Data values relationships. Since data in a relational database is stored in tables, the relationship between these data values is stored as well. Since a non-relational database stores data as files, there is no relationship between the data values.
Integrity constraints. In a relational database, the integrity constraints are any constraint that ensures database integrity. They are defined for the purpose of atomicity, consistency, isolation and durability, or ACID. Non-relational databases do not use integrity constraints.
Structured vs. unstructured data. Relational databases work well for structured data that conforms to a predefined data model and doesn't change much. Non-relational databases are better for unstructured data, which doesn't conform to a predefined data model and can't be stored in an RDBMS. Examples of unstructured data include text, emails, photos, videos and web pages.

What is Nodejs? Difference between Nodejs and JavaScript

Or is Node.js blocking or non-blocking?
**
**Node.js **is a virtual machine that is an open-source, cross-platform, non-blocking, server-side scripting, extremely powerful framework, which is used to build scalable programs and it’s developed on Chrome’s V8 JavaScript engine,

It’s a lightweight framework used for creating server-side web applications and extends JavaScript API to offer usual server-side functionalities. It provides an event-driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.

There are so many differences between Node.js and JavaScript, of them only three are given below-
JavaScript Node.js
JavaScript is a programming language that is used for writing scripts on a website. NodeJS is a JavaScript runtime environment.
JavaScript is capable enough to add Html & play with the DOM. Nodejs cannot add Html tags.
JavaScript can run in any browser engine as like JS core in safari and Spider Monkey in Firefox. V8 is the JavaScript engine inside of node.js that parses and runs JavaScript.

Use of Node and Mongo in React project

**
The Node.js platform is a server-side runtime environment based on JavaScript which makes scalable programs. Node.js is fast, lightweight, and efficient runtime. Many more reasons to use Node in react project-

• They’re both JavaScript so we execute them server-side and client-side
• I get to inject V8 engine performance into my React app
• Node.js bundles the app into a single, easy-to-compile file
• It’s a real-time, data-intensive React app that we’re building.
• We get to run React.js code straight in the Nodejs environment
• We get to build JSON APIs for our app much easier when using Node and React together
• Rendering server-side becomes a more streamlined process
• ReactJS depends on Node and npm (Node Package Manager) to notify the native side (iOS/Android) of the packages that need to use in our app. Then, it can add all the needed dependencies
• The most important reason for the rising popularity of Node.js is that the programmer can code the server-side as well as the client-side using it. It’s is an interpreted, familiar and flexible language.

MongoDB:
Mongo-DB is a document-oriented NoSQL database that provides high performance, high availability and easy scalability, build on a horizontal scale-out architecture. MongoDB databases are faster than SQL databases due to efficient indexing and storage techniques. We use this in react project because it provides-
• Flexible document schemas
• Code-native data access
• Change-friendly design
• Support primary and secondary index on any fields
• Uses JavaScript objects in place of procedures
• It uses a dynamic database schema
• It works on the concept of Collection and Document
• Powerful querying and analytics
• Easy horizontal scale-out
• Supports Ad Hoc Queries
• Supports Multiple Storage Engines

                     Thank You

React Tricky Concept

AL MaHmuD SuRuJ — Wed, 22 Dec 2021 13:08:36 +0000

                             My React-Blogs

JSX, Working process of it

**
JSX which stands for JavaScript XML, allows writing Html in react. It’s a React extension that allows writing JavaScript code that looks similar to Html. It makes HTML files easy to understand. The JSX file makes the React application very strong and boosts its performance. Basically, it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML, like template syntax. JSX converts HTML tags into react elements.

Working System: JSX expressions are JavaScript expressions too. When compiled, they actually become regular JavaScript objects. We know JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods. JSX converts HTML tags into react elements. Since they are compiled to objects, JSX can be used wherever a regular JavaScript expression can be used. We are not required to use JSX, but JSX makes it easier to write React applications. Some benefits of using JSX-
• JSX makes it easier and faster to write templates.
• It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
• it is type-safe, and most of the errors can be found at compilation time.
• Instead of separating technologies by putting markup and logic in separate files, react uses components that contain both.

Virtual DOM, The differences between virtual and real DOM

Or The working process of diff algorithm
**
The Virtual DOM is a concept where the real DOM is kept in a memory, a representation of Real DOM. The representation of a user interface is kept in memory and synced with the real DOM. It's a step that happens between the render function when called and the displaying of elements on the screen. Called this process is reconciliation.

Virtual DOM works in 3 simple steps-
• When any data changes in the React Application, the entire user interface is re-rendered in Virtual DOM representation.
• Then the difference between the previous DOM representation and the new one is calculated.
• Once the calculations are done, the real DOM will be updated with that thing have actually changed.
The differences between virtual Dom and the real Dom are given below-
Real DOM Virtual Dom
Real DOM update slowly Virtual DOM updates faster
Allows a direct update from Html Can’t be used to update Html directly
Wastes too much memory Memory consumption is less

Diff algorithm: The main work of a diff algorithm is to find a heuristic to change anything from a state to another state. A diff algorithm gives the outputs that is the set of differences between two inputs. Working process of diff algorithm is-

When the Virtual DOM is created, react compares the representation with a snapshot of the previous version of the virtual DOM to see exactly which elements have changed.

When the difference is cleared, react updates only those objects that differ on the actual DOM and the browser re-paints the screen. The next time state/props changes for a component in the application, a new virtual DOM tree of React elements will be created and the process will repeat again and again.
The process of checking the difference between the new Virtual DOM tree and the old Virtual DOM tree is called diffing. Diffing is accomplished by a heuristic O(n) algorithm. During this process, react will deduce the minimum number of steps needed to update the real DOM, removing unnecessary costly changes. This process is also called reconciliation. React implements a heuristic O(n) algorithm based on two assumptions:
• Two elements of different types will produce different trees.
• The developer can hint at which child elements may be stable across different renders with a key prop.”

Context API in React

**
Context allows passing data through the component tree without passing props down manually at every level. Context API is a React API that can solve a lot of problems that modern applications face related to state management and how they're passing state to their components. The React Context API is a component structure, that allows us to share data across all levels of the application. The main aim of Context API is to solve the problem of prop drilling. By using context api we can share values between our components without using props every time.

Hooks in React

**
React hooks are-
• useContext
• useState
• useEffect
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
**

The life cycle of React componen

**t
React Component lifecycle
Each component in React has a lifecycle. React lifecycle methods are given below-
React component lifecycle have four phases. They are –

Initial Phase • getDefaultProps():This is executed before the creation of the component. • getInitialState(): It is used to specify the default value of this.state. It is invoked before the creation of the component.
Mounting Phase • componentWillMount(): This is invoked immediately before a component gets rendered into the DOM. In the case, when you call setState() inside this method, the component will not re-render. • componentDidMount(): Is executed when the component gets rendered and placed on the DOM.. • render() : This method is defined in each and every component. It is responsible for returning a single root HTML node element. If you don't want to render anything, you can return a null or false value.
Updating Phase: • componentWillRecieveProps(): It is invoked when a component receives new props. If you want to update the state in response to prop changes, you should compare this.props and nextProps to perform state transition by using this.setState() method. • shouldComponentUpdate(): Is invoked when a component determines changes to the DOM and returns a “true” or “false” value based on certain conditions • componentWillUpdate(): It is invoked just before the component updating occurs. Here, you can't change the component state by invoking this.setState() method. It will not be called, if shouldComponentUpdate() returns false. • render(): It is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. If shouldComponentUpdate() returns false, the code inside render() will be invoked again to ensure that the component displays itself properly. • componentDidUpdate(): It is invoked immediately after the component updating occurs. In this method, you can put any code inside this which you want to execute once the updating occurs. This method is not invoked for the initial render
Unmounting Phase • componentWillUnmount(): This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

The purpose of a custom hook and creating custom hook with example.

**
Hooks are reusable functions. Custom Hooks are a mechanism to reuse stateful logic. Custom hooks allow us to have cleaner functional components, remove logic from the UI layer, and prevent code duplication by bringing common use cases to reusable 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 us to extract component logic into reusable functions.
Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature. The main reason for which you should be using Custom hooks is to maintain the concept of DRY(Don’t Repeat Yourself) in your React apps.

import { useState, useEffect } from "react";

const useFetch = (url) => {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);

return [data];
};

export default useFetch;

We have created a new file called useFetch.js containing a function called useFetch which contains all of the logic needed to fetch our data.

                      Thank You

JavaScript Concept Clear

AL MaHmuD SuRuJ — Wed, 22 Dec 2021 12:43:02 +0000

Call, Apply and Bind

**
The call () method invokes a function with a given ‘’this’’ value and arguments provided one by one. It’s a predefined method in JavaScript.

apply (): The apply () method is almost similar to the call () method. The only difference is that call () method takes arguments separately whereas, apply () method takes arguments as an array. So, apply () method Invokes the function to pass in arguments as an array.

bind (): This method returns a new function, allowing to pass in an array and any numbers of arguments, where the value of “this” keyword will be bound to the owner object, which is provided as a parameter.

Working process of Closure in JavaScript

**
A closure is an inner function that admits to the variables that belong to the outer that is enclosing the function’s scope chain. It gives to access an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created. To use a closure, simply define a function inside another function and expose it.

Closures provide a better, concise, creative, and expressive writing code for JavaScript developers and programmers. Technically speaking, closures are a combination of lexical environment and function.

In other words, a closure is a locally declared variable that is related to a function and stays in the memory when the related function has returned. The closure contains all local variables that were in-scope at the time of the closure creation. There are three ways in which the closure can access variables-
• variables in its scope
• global variables.
• variables in the enclosing function’s scope,

**_

pop()method in JavaScript, The use of the Push method in JavaScript

_**
The pop () method is similar to the shift () method, but the key difference is that the shift method works at the array’s start. On the other hand, the pop () method takes the last element of the given array and returns it. For example,

var joya = ["Shirt", "Pant", "Tshirt"];
joya.pop();
//Now joya becomes Shirt, Pant

The push method is used to add or append one or more elements to an array end. Using this method, we can append multiple elements by passing multiple arguments.

The “this” keyword indicate in JavaScript

**
The “this” keyword in JavaScript refers to the object that it belongs to. This keyword has different values depending on where it is used. In a method, this keyword refers to the owner object and, in a function, this keyword refers to the global object.

Difference between Java and JavaScript

Java is an object-oriented programming language, on the other hand, JS is object-based scripting, interpreted language. Java code can work on any platform including the web browser. But JavaScript is written just for web browsers. Among other things, Java demands more memory. Java is very strongly typed and asks all variables to have a declared type. Another way, JS is lightweight and is weakly typed.

Event bubbling in JS Or how does event delegate work in JS?

**
Event bubbling is a way of event propagation in the HTML DOM API when an event occurs in an element inside another element, and both elements have registered a handle for that event. With event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. The execution starts from that event and goes to its parent element. Then the execution passes to its parent element and so on till the body element.

Hoisting in JavaScript.

**
Hoisting is the default behavior of JavaScript where all the variable and function declarations are moved on top. Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before the execution of the code. The scope can be both local and global. For Example:
hoistedVariable = 17;
console.log(hoistedVariable); // outputs 17 even when the variable is declared after it is initialized

var hoistedVariable;

The scope of JavaScript

**
Scope is the accessibility or visibility of variables, functions, and objects in some particular part of code during the run time. Earlier JavaScript had only Global Scope and Function Scop. But now JavaScript has a total of four types of scope. They are-
• Block scope: let and const provide block scope. Variables declared inside a { } block cannot be accessed from outside the block. Var keywords cannot have block scope.

• Local scope: Variables declared inside any function with var keyword are called local variables. Local variables are created when a function starts and deleted when the function is completed. Local variables cannot be accessed or modified outside the function declaration. Local variables have function scope.

• Function scope: JavaScript has a function scope and every function creates a new scope. In this scope, variables defined inside a function are not accessible from outside the function. The var, let and const are quite similar variables when declared inside a function. So, var, let, and const all have function scope.

• Global scope: If I declare variables outside of any function then this will be global variables. Global variables can be accessed and modified from any function. All scripts and functions on the web page can access it. Variables declared with var, let and const are quite similar when declared outside a block. They all, var, let and const have Global scope.
One important note is that- If I assign a value to a variable that has not been declared yet, it will automatically become a global variable.

Generator function in ES6

**
It is the new concept introduced in ES6. A generator function provides us with a new way to work with iterators and functions. The generator function is a special kind of function that may be paused in the middle either one or many times and can be resumed later. A generator function followed by an asterisk function keyword. The declaration of the asterisk function is used to define a generator function.

When the generator gets called, it does not run the code. Instead, it returns a special object, which we called a Generator object to manage the execution. Unlike the regular function, the generator function can return or yield to the multiple values, one after another, on the requirement.

API, Difference between Get vs post

**
API stands for Application Programming Interface which is used to connect for the communication and information exchange between two apps. API connects two devices or programs in order to facilitate the exchange of information between them.

The difference between Get & Post are given below-
Get Post
GET is used to request data from a specified resource like some API URL. POST is used to send data to a server to create or update a resource.
GET request is often cacheable. The POST request is hardly cacheable.
GET Parameters to remain in web browser history. Parameters are not saved in web browser history.
Get request is not secured because data is exposed in the URL bar. Post request is secured because data is not exposed in the URL bar
Get request is more efficient and used more than Post. Post request is less efficient and used less than get.

JavaScript Concept Clear

AL MaHmuD SuRuJ — Mon, 20 Dec 2021 17:23:11 +0000

Working process of JavaScript- a brief discussion about JS

JavaScript is a single-threaded, client-side scripting language, and synchronous in nature. JS is an interpreted language, which means it does not need a compiler to translate its code whereas C or C++ is needed. JS code runs directly in a web browser.

Every browser provides a JavaScript engine nowadays that runs the JavaScript code. Google Chrome uses the V8 engine which is open source, developed by Google, written in C++ to run JavaScript. The JS source code goes through many steps and finally gets executed. When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code then finds it on the page, and runs it.

When we run a JavaScript program inside a web browser, JavaScript code is received by the browser's engine in google chrome which is the V8 and this V8 engine runs the source code to get the output. All steps-

Parser- JS code first received by the parser and parser job is to check syntactic errors line by line if get then code executions is stopped. Once the parser checked the code and is sure that there is no error in the code then it makes a data structure which is called AST. Once the AST which stands Abstract Syntax Tree is created by the parser, the JavaScript engine converts the JavaScript code into the machine understanding code. When the code gets converted into the machine code or byte code, the converted code is sent to the system for execution, and finally, that byte code is run by the system/ V8 engine which uses JIT compilation for improved performance.

JavaScript code execution in Browser

JS isn’t a compiled language, it’s an interpreted language. So, for the code execution, there is no need to compile before the code run.

The JavaScript source code first passed through a program called a compiler, which translates it into bytecode or machine code that the machine could understand and could execute. Thus, JavaScript has no compilation step that’s why the browser reads the code, and code is interpreted line by line using JIT which compiles JavaScript code to executable bytecode just in time to run and run it inside the browser.

Differences between “==” and “===”?
Answer: Basically, ‘’==’’ and ‘’===’’ both are comparison operators. The main difference between these two operators is that “= =” is used to compare only values not data type whereas, “=== “is used to compare both value and data types.

What are the differences between var, let, and const?

**
There are three ways to declare variables in JavaScript. They are var, let, and const. The difference between these is given below-
Variables declared with var are in function scope but let and const are in the block scope.

Hoisting means we can define a variable before the declaration that is allowed in var but let & const not allowed hoisting.
Reassign value is permitted to var & let but const doesn’t permit to reassign value.

Redeclaration is allowed in var but let & const don’t allow redeclaration.

The variables declared with the var and let keyword are mutable (means value can be changed), but const is immutable.

Why will we use default parameters?

**
In JavaScript, Default parameter values are used to initialize the functions with default values, default function parameters are the parameters that are provided a default value when we declare the JavaScript function. When no value or undefined is passed in the function, a default value is being set for the function, which is known as the default parameter. It allows the named parameters to get initialized with a default value.

### Arrow function and it's benefit.
Arrow Functions are a very interesting feature in ES6. It provides a more concise syntax for writing function expressions by opting out the function and returning keywords. The shorthand syntax which is used for writing ES6 functions is arrow functions.

The arrow function's definition has consisted of parameters, that are followed by an arrow (=>), and the function's body. Another name of the arrow function is ‘fat arrow'. We won't be able to employ them as constructors. Some benefits of arrow functions are-
It reduces the size of the code.

For a single-line function, the return statement is optional.
Bind the context lexically.

When should one not use arrow functions?
One should not use the arrow functions in the given below cases-
Function Hoisting, Named Functions: As arrow functions are anonymous, we cannot use them when we want function hoisting or when we want to use named functions.

Callback functions with dynamic context.

Since arrow functions don’t have ‘’this’’ value of their own and they depend on their outer context, it uses the value of the enclosing lexical scope.
Too short syntax
Avoid using the arrow function for object methods, event handlers, prototype methods, and functions that use the arguments object.

CSS Tricky Concepts

AL MaHmuD SuRuJ — Sun, 19 Dec 2021 15:50:35 +0000

Flex & Grid Layout Description

**
CSS Flexible Box Layout, commonly known as Flexbox which is a CSS3 web layout model. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container. It is mainly used to make CSS3 capable of changing its item’s width and height to best fit all available spaces. It is preferred over the block model. The CSS3 flexbox contains flex containers and flex items.
Differences between Flex and grid layout-

A core difference between CSS3 Grid layout and Flex layout is that- CSS Grid’s approach is layout-first while Flexbox’s approach is content-first.

2.Flexbox layout is most appropriate to the components of an application cause most of them are fundamentally linear, and small-scale layouts, while the Grid layout is intended for larger-scale layouts which aren’t linear in their design.

3.CSS Grid Layout is a two-dimensional system, which means it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system so it can handle either in a column or a row.

4.If I want to define a layout as a row or a column, then I probably need a flexbox. If I want to define a grid and fit content into it in two dimensions, then I need the grid layout.

Using Media queries to Make a Website Responsive

**
CSS Media Queries are used to change the style of our site depending on what screen resolution or device is being used.
Media Queries can be combined to create specific scenarios for when we want to apply certain rules to that situation. This created and allowed the concept of responsive and adaptive design to work coherently in the browser.
Media query is a CSS technique introduced in CSS3. CSS Media Queries allow us to create responsive websites that look good on all screen sizes, from desktop to mobile. Media queries are used in responsive web design, which allows for a site to be viewed on a variety of screen sizes and browsers. To make the website responsive use the given steps to set up media queries.

Add a breakpoint
Always design for mobile-first
Another breakpoint
Then type choices device breakpoints
Set the orientation: Portrait or landscape Type-2: Answer2: Media queries are useful when we want to modify our site or app depending on a device's general type such as print vs. screen or specific characteristics and parameters such as screen resolution or browser viewport width. Media query uses the @media rule to include a block of CSS properties only if a certain condition is true. Example:
If Extra small devices (phones, 600px and down) then use, @media only screen and (max-width: 600px) { }

**Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) { }

***Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) { }

****Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) { }

**** Extra-large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) { }

By using this height and width with @media we can primarily fix the responsive layout. Media queries have many more media features. For example, aspect-ratio, color-gamut, color-index, grid, hover, max-aspect-ratio, max-color-index, max-height, max-width, max-resolution, orientation, hook etc. Finally, I could be told that using the above and the rest media queries features, anyone could make the website responsive.
Recommended Reading:

Udacity's - Responsive Web Design Fundamentals
MDN's - Using Media Queries
CSS Trick's - CSS Media Queries