Programmer Sajeeb

CRUD Operations: CRUD means create, read, update and delete. Using CRUD we can create data in the database if we want, read the data in the database, update the data and delete the data if we want. CRUD is very important for full-stack projects. If we can create a storefront, blog posting page, todo list or social media clone, without CRUD then we will get stuck very quickly.

JWT: JWT, or JSON Web Token, is an open value used to share security information between a client and a server. Each JWT contains an encoded JSON object that contains a claims set. JWT claims are made using a cryptographic algorithm so that claims cannot be changed after the token has been issued.

Mongoose: Mongoose is a node js-based Object Data Modeling library for MongoDB. SQLAlchemy for SQL databases like an Object Relational Mapper. The problem that Mongoose aims to solve is that developers allow the application layer to apply a specific schema.

SQL and NoSQL databases: In SQL the data is in table form. Here every data is stored inside the row. And in NOSQL the data is in object form. Here all the data of a person is shown in object form.

Aggregation: Provides aggregation data records / documents and returns computed results in MongoDB. It collects values ​​from different documents and groups them together. It then performs various operations on the grouped data such as sum, average, minimum, maximum, etc. to return a calculated result.

Express: Express js is a Node js web application server framework, designed to create single-page, multi-page and hybrid web applications.

Nodejs: Node.js is a JavaScript runtime. It is built on Chrome's V8 JavaScript engine. JavaScript is a popular programming language that runs on any web browser, including a good web browser. Node. js is an interpreter with some specific useful libraries for JavaScript that can be used separately in JS programming. Node. js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature.

Entity: Entity can be anything like a place, class or object which has an independent existence in the real world.

Entity Type: Entity Type represents an entity that has the same characteristics.

Entity Set: Entity Set in the database represents a collection of entities having a particular entity type.

Index hunting: Index hunting is the process of increasing the collection of indexes which helps to improve the query performance as well as to make the database faster.

Fragmentation: Fragmentation controls logical data units. It is also known as a fragment which is stored on different sites of a distributed database system.

Data Dictionary: A data dictionary is a set of information that describes the contents and structure of a table and a database object. The function of the information stored in the data dictionary is to control, manipulate and access the relationships between the database elements.

Primary Key: The primary key is the column in the table where each row of data is individually marked. Each row of the table may have a Primary Key but two rows may not have the same Primary Key.

Composite Key: Composite Key is a form of the candidate key where a set of columns will uniquely identify every row in the table.

Unique key: A unique key is a primary key whose data in each row is individually marked with a null value difference, meaning that the unique key approves a value as a zero value.

Database trigger: A set of commands that is automatically executed when an event occurs, such as deleting a row, while inserting, updating, before inserting into a table is called a database trigger.

B-Tree: B-Tree represents a tree-shaped data structure for external memory that can read and write large blocks of data. It is commonly used in databases and file systems where all insertions, deletions, sorting, etc. are done at logarithmic times.

Normalization: Normalization is the process of extracting unnecessary data from a database by splitting the table in a well-defined manner to maintain data integrity.

De-normalization: De-normalization is the process of adding unnecessary data to a table to speed up complex queries and thus achieve better performance.

BCNF: BCNF is the normal Boyce Codd form. This is a higher version of 3Nf where there are no multiple overlapping candidate keys.

PropTypes: PropTypes imply that components use the correct data type and pass the right data. And it is further understood that these components use the right kind of props and the obtained components get the right kind of props.

State-props: The main difference between props and states is that states are internal and controlled by components.

JSX: JSX is an inline markup that looks like HTML but is converted to JavaScript. JSX expressions start with HTML-like open tags and end with closing tags. JSX tags support XML self-close syntax so that the closing tag can be optional.

Component Lifecycle: Each element of the reaction has a life cycle that we can observe and manipulate in its three main stages. There are three stages: Mounting, Updating, and Unmounting.

Hooks: React Hook is a simple JavaScript function that is included inside the React library. These functions are similar to Hooks and can be used with React Hooks where needed.

Custom hooks: A custom hook is a JavaScript function. This custom hook is used to share arguments among other JavaScript functions. We make custom hooks ourselves.

Example: import { useEffect, useState} from "react"

const addProducts = ()=>{

const [ products, setProducts] = useState([]);

useEffect(()=>{

fetch('./product.JSON')

.then(res=>res.json())

.then(data=> setProducts(data));},[])

return [ products, setProducts ];}

Context API: Context API is used to send the components of the app through props from any place in any way from the app

Virtual DOM: Virtual DOM is a programming concept where the UI is stored in “virtual” representative memory and matched to the actual DOM through a library like ReactDOM. A virtual DOM and a real DOM have the same features. Real DOM manipulation is slow and virtual DOM manipulation is much faster.

How do events work in react: The rules for managing events with React elements are the same as the rules for managing events with DOM elements. But there are some syntax differences: React events are named using camelCase, rather than lowercase.

Higher order component: A higher-order component is an advanced technique in React for reusing component logic. The examples of Higher-order components are Redux's connect and Relay's createContainer.

useEffect and useState: useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components to leverage component lifecycle hooks.

Events: The rules for managing events with React elements are the same as the rules for managing events with DOM elements. But there are some syntax differences: React events are named using camelCase, rather than lowercase.

Flux Concept: Flux concepts is a new kind of architecture that complements React and the concept of Unidirectional Data Flow.

Fragments: Fragment keywords are used to group a list of children components without using any additional nodes in the DOM.

Prop drilling: Prop drilling is the process of a React app where props can easily pass data from one component to another.

Conditional rendering: conditional rendering refers to the dynamic output of user interface markups based on a condition. Using conditional rendering, it is possible to toggle specific application functions, API data rendering, hide or show elements, decide permission levels, authentication handling, and so on.

React advantages and disadvantages:

Advantages:

1/ JavaScript code much easier.

2/ Cross-platform support.

3/ Templates can be designed much easier. 4/ Provides amazing developer tools. 5/ UI focused design.

6/ Easy to accept.

Disadvantages:

1/ Lack of Documentation.

2/ It only covers the UI so other languages are needed to create a complete application.

3/ The high speed of development makes the life of the developer difficult.

Optimize a react js application: Here's what to do to optimize a react js application:

1. Large bundle size.

2. Large rendering.

3. unnecessary rendering.

4. Download on demand. There are many more things to keep in mind, including the above.

Empty tags: Empty tag is used to declare fragments in React.

Most common approaches for styling a React application: The most common approaches for styling a React application are:

1/ CSS Classes

2/ Inline CSS

3/ Pre-processors Such as Sass, Stylus, and Less

Truthy and Falsy values: A truthy value in JavaScript is a value that is considered true when encountered in a Boolean context. However, except for false, 0, -0, 0n, "", null, undefined, and NaN, if these are not values, then all values ​​will be truthy, and if these are values, then all values ​​will be falsy.

Null Vs Undefined: Converting Null to Number yields 0 and Undefined Converting to Number yields Nan.

Double equal (==) vs triple equal (===): JS refers to comparison by == or ===. == This means that even if the type on both sides is different if the value is the same, it is true and if not, it is false. And === this means that if the type and value on both sides are the same then it is true and if not then it is false.

Implicit type conversion: Implicit conversion means that JavaScript automatically converts one data type to another data type in certain situations. When a number is added to a string, JavaScript converts the number to a string before adding it.

Block Scope: Declaring Let or Const inside a curly bracket is called Block Scope. Because it doesn't work anywhere outside of this curly bracket.

Function Scope: When Let or Const is declared inside a function, it is called Local Scope of that Function. Because this Let or Const cannot be accessed anywhere other than that function.

Global Scope: Declaring var outside a curly bracket or a function is called Global Scope. Because it can be accessed from anywhere.

Window: A window is an object that stores everything displayed in the browser. Many important tasks can be accomplished using this window object.

Local Variable: When a variable is declared inside a function, it is called a local variable. Because these variables cannot be used outside without the function inside.

Global Variable: When a variable is declared out of a Function or Condition or anything else, it is called a Global Variable. Because these variables can be called anywhere in any way and it works correctly everywhere.

Closure: A closure distinguishes a function from other external functions. This allows you to use one function after another.

Bind: Bind provides a new function that allows you to pass this array and any number of arguments.

Call: Invokes the call function and allows multiple arguments to be passed.

Apply: Calls the apply function and allows arguments to be passed as arrays.

This keyword: The keyword JavaScript 'this' refers to the contents of it. The value that 'this' stores is the current execution context of the JavaScript program.

Temporal Dead Zone in ES6: In ES6 let and const are lifted, but there is a time between entering and declaring opportunities where they cannot be accessed. This period is called the Temporal Dead Zone.

WeakMap: WeakMap is a collection of key and value pairs where the key must be an object and the keys are weakly.

Array: An array collects elements of a similar data type.

LinkedList: A linked list is a collection of objects known as a node. Linked list elements can be saved randomly.

Pop: The pop () method is used to remove the last element of an array.

Cookies: Cookies are small test files stored on a computer. These cookie files are created when users visit websites to store the information they need so that when users later visit the websites, the information is automatically placed where it is needed.

Prompt box: A prompt box is a box where the user can enter input. A prompt box pops up when a user clicks on a specific button as a result of using it, the user has to click "OK" or "Cancel" to proceed after entering an input value.

Negative Infinity: Negative Infinity is a number of JavaScript. And a constant value is negative infinity JavaScript. No number other than its value is less than this value. Dividing by any other number gives a negative infinite result of 0.

Temporal Dead Zone: In ES6 let and const are lifted, but there is a time between entering and declaring opportunities where they cannot be accessed. This period is called the Temporal Dead Zone.

Babel: Babel is a JavaScript compiler. It allows writing ES6 code and converting it back into pre-Es6 JavaScript that the browser supports.

DOM: DOM stands for Document Object Model. DOM is an API for HTML and XML documents.

JavaScript code executes: JavaScript is an interpreted language. Compiler is required before running C ++ or Java. The source code of C ++ or Java is passed through a program called a compiler, which translates it into a bytecode that the machine can understand and operate. But JavaScript has no compilation steps. Instead, an interpreter in the browser reads the JavaScript code, interprets each line, and executes it.

ES6: ES6 refers to the 6th version of ECMAScript programming language. It introduces several new features to make JavaScript programming much easier, such as block-scoped variables, a new loop for repeating arrays and objects, template literals and many other improvements. And it makes large-scale software development much easier.

charAt: The value of Characters of a string starts with index 0. CharAt () is used to find a specific character in this string.

Example: string.charAt(index);

Concat: concat () is a string method. It is used to connect multiple strings together. concat () combines multiple strings together to provide a new string result.

Example: string.concat(value1, value2, ... value_n);

Includes: includes () This is used to determine if there is a specific item in an array. Provides false values ​​if the item is not true.

Example: var orders_today = ['Strawberry', 'Chocolate', 'Chocolate', 'Raspberry', 'Vanilla', 'Vanilla', 'Double Chocolate Deluxe'];

console.log(orders_today.includes('Double Chocolate Deluxe'));

endsWith: endsWith () is used to determine whether a string ends with a certain sequence of characters. And endsWith () is called by a specific instance of the string class.

Example: var totn_string = 'TechOnTheNet';

console.log(totn_string.endsWith('Net'));

console.log(totn_string.endsWith('net'));

indexOf: indexOf () Returns the first presence position of a certain value on a string. The indexOf () method is case sensitive. The indexOf () method returns -1 if the first presence position of a certain value is not found.

Example: let text = "Hello world, welcome to the universe.";

text.indexOf("e");

lastIndexOf: lastIndexOf () provides a list of the last event of the specified value within the calling string object, searches back from romIndex but returns -1 if the value is not found.

Example: const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'dog';

console.log(`The index of the first "${searchTerm}" from the end is ${paragraph.lastIndexOf(searchTerm)}`);

Replace: The function of replace () is to match a specific string of a pattern and replace it with a new string instead.

Example: const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));

Slice: Slice () works according to the values of the index. Slice () will output everything from the array except the index value that will be given.

Example: const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));

Expected output: Array ["camel", "duck", "elephant"]

Split: With a split () the strings of a string can be listed separately. And provides these substrings in the form of split () objects.

Example: const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');

console.log(words[3]);

Expected output: "fox"

startsWith: startsWith () This means that if a string starts with a letter from a particular string it will give false if it starts then true.

Example: const str1 = 'Saturday night plans';

console.log(str1.startsWith('Sat'));

//Expected output: true

Substr: substr () is used to extract a substring from a string. A substring is extracted from a string using the index value in substr ().

Example: const str = 'Mozilla';

console.log(str.substr(1, 2));

//Expected output: "oz"

toLowerCase: toLowerCase () is used to lowercase all strings.

Example: const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toLowerCase());

//Expected output: "the quick brown fox jumps over the lazy dog."

toUppercase: toUppercase () is used to uppercase all strings.

Example: const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toUpperCase());

//Expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

Trim: trim () is used to remove whitespace from both ends of a string. trim () removes whitespace from both ends and renders it without changing the original string.

Example: const greeting = ' Hello world! ';

console.log(greeting);

//Expected output: " Hello world! ";

console.log(greeting.trim());

//Expected output: "Hello world!";

trimStart: trimStart () is used to remove whitespace on the left side of a string only. trim () only relocates whitespace on the left without changing the original string.

Example: const greeting = ' Hello world! ';

console.log(greeting);

// Expected output: " Hello world! ";

console.log(greeting.trimStart());

// Expected output: "Hello world! ";

trimEnd: trimEnd () is used to remove whitespace on the right side of a string only. trim () only removes the whitespace on the right and replaces it without changing the original string.

Example: const greeting = ' Hello world! ';

console.log(greeting);

// Expected output: " Hello world! ";

console.log(greeting.trimEnd());

Responsive web design using HTML CSS and Bootstrap with source code