DEV Community: Ankit Dagar

Testing

Ankit Dagar — Tue, 11 Jul 2023 12:01:02 +0000

Testing in development refers to the practice of conducting various testing activities throughout the software development lifecycle (SDLC) to ensure the quality, reliability, and functionality of the software being developed. It involves systematically verifying and validating the software against defined requirements, specifications, and user expectations.

Manual Testing

Manual testing refers to the process of manually executing test cases and verifying the behavior and functionality of a software application without the use of automated testing tools or scripts. It involves human testers who perform various actions on the application, simulating real-world user interactions to identify defects, errors, and usability issues.

In manual testing, testers carefully execute test cases step by step, following predefined test procedures and documenting the results. They validate the software against specified requirements, user expectations, and industry standards. Manual testing can be performed at various levels, including unit testing, integration testing, system testing, and acceptance testing.

The key aspects of manual testing include:

Test Planning: Defining the testing objectives, scope, and strategies.
Test Case Design: Creating detailed test cases that cover various functionalities and scenarios of the software.
Test Execution: Running the test cases, interacting with the application, and observing its behavior.
Defect Reporting: Documenting any discrepancies or issues encountered during testing, including steps to reproduce them.
Test Result Analysis: Reviewing test results, comparing actual results with expected results, and analyzing the overall test coverage.
Regression Testing: Repeating tests on modified or newly added features to ensure that existing functionalities are not affected.
Test Closure: Preparing test closure reports, analyzing lessons learned, and providing feedback for process improvement.

Manual testing advantages are:

Flexibility to adapt to changing requirements and dynamic environments.
Ability to identify visual, usability, and user experience issues.
Early detection of defects that may have been missed by automated tests.
Exploration of edge cases and real-world scenarios that are difficult to automate.

Manual testing disadvantages are:

Time-consuming, especially for large and complex applications.
Prone to human error, as manual testers can make mistakes during test execution.
Limited scalability, as it can be challenging to execute the same test cases repeatedly and consistently.
Not suitable for performance testing and load testing, which require simulating a large number of users.

Automation Testing

Automation testing refers to the use of software tools and scripts to automate the execution of test cases and compare the actual results with expected outcomes. It involves the creation and execution of test scripts that simulate user interactions and verify the functionality of software applications.

In automation testing, specialized testing tools and frameworks are used to automate repetitive and manual testing tasks, reducing the effort and time required for testing. The scripts can be created using programming languages or specific automation tools that provide a user-friendly interface for test script development.

The key aspects of automation testing include:

Test Script Creation: Test scripts are created to simulate user actions, such as clicking buttons, entering data, and navigating through the application. These scripts outline the steps to be executed during testing.

Test Environment Setup: The necessary test environment, including hardware, software, and test data, is prepared to execute the automated tests. This may involve configuring test servers, databases, and other dependencies.

Test Execution: The automated test scripts are executed by the testing tool or framework. The tool interacts with the application, performs the specified actions, and compares the actual results with expected results.

Test Reporting: Automation testing tools generate detailed test reports that provide information on test execution status, test coverage, and any failures or errors encountered during the testing process.

Benefits of Automation Testing:

Faster Test Execution: Automated tests can be executed significantly faster than manual tests, allowing for quicker feedback on the software's behavior.
Improved Accuracy: Automation eliminates the risk of human errors and ensures consistent test execution, reducing the chances of overlooking defects.
Reusability: Test scripts can be reused for regression testing, allowing for efficient testing of repeated test scenarios.
Increased Test Coverage: Automation enables the execution of a large number of test cases, expanding test coverage and increasing the likelihood of identifying defects.

However, it's important to note that automation testing also has its limitations. It may not be suitable for testing certain aspects like visual and usability aspects that require human judgment. Automation testing also requires an upfront investment in terms of time and resources for creating and maintaining the automation framework and scripts.

Manual Testing vs Automation Testing

Manual Testing:

Definition: Manual testing involves the process of manually executing test cases, where human testers interact with the software application to validate its functionality, usability, and performance.

Pros:

Flexibility to adapt to changing requirements and dynamic environments.
Effective in identifying visual, usability, and user experience issues.
Early detection of defects that may have been missed by automated tests.
Exploration of edge cases and real-world scenarios that are difficult to automate.

Cons:

Time-consuming, especially for large and complex applications.
Prone to human error, as manual testers can make mistakes during test execution.
Limited scalability, as executing the same test cases repeatedly and consistently can be challenging.
Not suitable for performance testing and load testing, which require simulating a large number of users.

Automation Testing:

Definition: Automation testing involves the use of specialized tools and scripts to automate the execution of test cases. These tools simulate user actions, interact with the software, and compare actual results with expected outcomes.

Pros:

Faster test execution, allowing for quicker feedback on the software's behavior.
Improved accuracy and consistency in test execution.
Reusability of test scripts for regression testing, ensuring efficient testing of repeated test scenarios.
Increased test coverage by executing a large number of test cases.

Cons:

Upfront investment in creating and maintaining the automation framework and scripts.
Limited effectiveness in testing visual aspects, usability, and user experience.
Requires technical expertise and knowledge of automation tools.
Certain testing scenarios may be challenging to automate, leading to a need for manual intervention.

Note:
Manual testing is suitable for exploratory testing, usability testing, and scenarios where human judgment is crucial.
Automation testing is beneficial for repetitive tests, regression testing, performance testing, and cases where a large number of test cases need to be executed.

Asynchronous-JavaScript

Ankit Dagar — Thu, 01 Jun 2023 10:38:49 +0000

1. Callbacks :

Callbacks are a fundamental concept in JavaScript that allow for asynchronous programming and handling of events. A callback is simply a function that is passed as an argument to another function and is invoked or called at a later time, often when a certain event or asynchronous operation completes.

The primary purpose of using callbacks is to ensure that certain code is executed only when a particular task is finished or an event occurs. This is especially useful in situations where the result of an operation is not immediately available or when the order of execution needs to be controlled.

Here's an example to illustrate the usage of callbacks:

function fetchData(callback) {
  // Simulating an asynchronous operation
  setTimeout(() => {
    const data = { message: 'Data successfully fetched' };
    callback(data); // Invoke the callback function with the fetched data
  }, 2000);
}

function processData(data) {
  console.log('Processing data:', data.message);
}

fetchData(processData); // Pass processData function as a callback

In the above example, we have a fetchData() function that simulates an asynchronous operation, such as fetching data from a server. It takes a callback function as an argument. Inside fetchData(), we use setTimeout() to simulate a delay of 2 seconds before the data is fetched.

Once the data is fetched, we invoke the callback function passed to fetchData() and provide the fetched data as an argument. In this case, the callback function is processData().

When fetchData() is called, it starts the asynchronous operation and registers the processData() function as the callback. After 2 seconds, the fetched data is passed to processData(), and it executes the code within its body, logging the message "Processing data: Data successfully fetched" to the console.

Callbacks are powerful because they allow us to control the flow of execution in asynchronous scenarios and perform tasks based on the completion of asynchronous operations or events. They are widely used in JavaScript for handling events, making AJAX requests, working with timers, and many other asynchronous operations.

2. Promises :

Promises are a built-in feature in JavaScript that provide a more structured and intuitive way to handle asynchronous operations. They are objects representing the eventual completion (or failure) of an asynchronous operation and allow you to handle the result or error using a chain of methods.

Promises have three states:

Pending: The initial state when a promise is created. It represents that the asynchronous operation is still ongoing, and the promise is neither fulfilled nor rejected.
Fulfilled: The state when the asynchronous operation is successfully completed, and the promise is fulfilled. At this point, the promise holds a value or result.
Rejected: The state when the asynchronous operation encounters an error or fails. The promise is rejected and holds a reason or error message.

Here's an example of using promises:

function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const data = { message: 'Data successfully fetched' };
      resolve(data); // Resolve the promise with the fetched data
    }, 2000);
  });
}

function processData(data) {
  console.log('Processing data:', data.message);
}

fetchData()
  .then(processData) // Process the fetched data
  .catch(error => {
    console.error('Error:', error);
  });

In the above example, we have a fetchData() function that returns a promise. Inside the promise's executor function, we simulate an asynchronous operation using setTimeout(). After 2 seconds, the promise is fulfilled by calling resolve() and passing the fetched data.

We can use the then() method on the promise to specify the callback function that should be executed when the promise is fulfilled. In this case, we pass processData as the callback function. The then() method returns a new promise, allowing for method chaining.

If an error occurs during the asynchronous operation, we can handle it using the catch() method. The catch() method takes a callback function that is executed when the promise is rejected, allowing us to handle any errors that occurred during the execution.

Promises provide a more structured approach to handling asynchronous operations compared to callbacks. They simplify error handling, allow for better code organization, and support chaining multiple asynchronous operations together. Promises have become a standard way of handling asynchronous code and are widely supported in modern JavaScript environments.

3. Code Control :

Code control refers to the ability to manage and control the flow of execution in a program. In JavaScript, there are several mechanisms and constructs that allow for code control, including conditional statements, loops, and error handling.

1.Conditional Statements:

Conditional statements, such as if, else if, and else, enable you to control the execution of code based on specified conditions.
Example:

if (condition) {
  // Code to execute if the condition is true
} else if (anotherCondition) {
  // Code to execute if the anotherCondition is true
} else {
  // Code to execute if none of the conditions are true
}

2.Loops:

Loops allow you to repeatedly execute a block of code until a certain condition is met.
Common loop constructs in JavaScript are for, while, and do...while.
Example:

// for loop
for (let i = 0; i < 5; i++) {
  // Code to execute in each iteration
}

// while loop
while (condition) {
  // Code to execute as long as the condition is true
}

// do...while loop
do {
  // Code to execute at least once, then repeat as long as the condition is true
} while (condition);

3.Error Handling:

Error handling allows you to catch and handle exceptions or errors that occur during program execution.
The try...catch statement is used to surround a block of code that may potentially throw an exception, and allows for handling of the error.
Example:

try {
  // Code that might throw an exception
} catch (error) {
  // Code to handle the error
} finally {
  // Code that will execute regardless of whether an error occurred or not
}

4.Control Flow:

Control flow refers to the order in which statements and code blocks are executed.
Control flow can be influenced using conditional statements, loops, and control flow keywords like break, continue, and return.
Example:

 // break statement
for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // Exit the loop when i is 3
  }
  console.log(i);
}

// continue statement
for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue; // Skip the rest of the loop body when i is 3
  }
  console.log(i);
}

// return statement
function calculateSum(a, b) {
  return a + b; // Return the sum of a and b and exit the function.
}

By utilizing these code control mechanisms, you can determine the execution path of your program, handle errors gracefully, and repeat or skip certain sections of code based on conditions. Understanding and effectively utilizing code control constructs is essential for writing structured and efficient JavaScript code.

JavaScript

Ankit Dagar — Tue, 30 May 2023 12:41:23 +0000

1.Loops :

In JavaScript, there are several types of loops that you can use to repeat a block of code multiple times. Here are the main types of loops in JavaScript:
1.for loop: The for loop is a widely used loop that allows you to repeat a block of code for a specified number of times. It consists of an initialization, a condition, an increment or decrement statement, and the code block to be executed.

Syntax:

for (initialization; condition; increment/decrement) {
  // code to be executed
}

Example:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

2.while loop: The while loop repeats a block of code as long as a specified condition is true. It only has a condition, and the code block is executed repeatedly until the condition becomes false.
Syntax:

while (condition) {
  // code to be executed
}

Example:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

3.for...in loop: The for...in loop is used to iterate over the properties of an object. It allows you to access each property of an object and perform some action.
Syntax:

for (variable in object) {
  // code to be executed
}

Example:

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

4.for...of loop: The for...of loop was introduced in ES6 and is used to iterate over iterable objects, such as arrays, strings, and NodeLists. It allows you to access each element of the iterable object.
Syntax:

for (variable of iterable) {
  // code to be executed
}

Example:

const colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}

5.forEach loop: It is a method available on arrays that allows you to iterate over each element of the array and perform a specified action or function on each element. It provides a more concise and expressive way to iterate through arrays compared to traditional for or while loops.
syntax:

array.forEach(function(currentValue, index, array) {
  // code to be executed on each element
});

Example:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

//Output:
1
2
3
4
5

2.Mutable & immutable methods (in strings and in arrays) :

In JavaScript, objects can have both mutable and immutable methods. Let's break down what each of these means:

Mutable methods:

Mutable methods are methods that can modify the object they are called on. They directly change the state of the object by modifying its properties or internal data. These methods typically have side effects and may alter the object's content. Some examples of mutable methods in JavaScript are push(), pop(), splice(), and sort() for arrays. When you call these methods, the original array is modified.

Immutable methods:-

mmutable methods, on the other hand, do not modify the object they are called on. Instead, they return a new object or value that reflects the desired change, leaving the original object unchanged. Immutable methods are non-destructive and are often used in functional programming paradigms. Examples of immutable methods in JavaScript include map(), filter(), and concat() for arrays.

Here are some examples of mutable and immutable methods for strings and arrays in JavaScript:

Mutable String Methods:

concat(): Joins two or more strings and returns a new string.
toUpperCase(): Converts the string to uppercase in place.
toLowerCase(): Converts the string to lowercase in place.
slice(): Extracts a portion of the string and returns a new string.

Immutable String Methods:

toUpperCase(): Returns a new string with the uppercase conversion.
toLowerCase(): Returns a new string with the lowercase conversion.
slice(): Returns a new string with a portion of the original string.

Mutable Array Methods:

push(): Adds one or more elements to the end of an array and returns the new length.
pop(): Removes the last element from an array and returns that element.
splice(): Changes the content of an array by adding or removing elements.

Immutable Array Methods:

concat(): Returns a new array that combines two or more arrays.
slice(): Returns a new array with a portion of the original array.
filter(): Returns a new array with elements that pass a specific condition.

It's important to note that the distinction between mutable and immutable methods is not always strict in JavaScript. Some methods may exhibit both mutable and immutable behavior depending on how they are used. Additionally, there are also methods like sort() and reverse() that modify the original array in place, making them mutable methods.

3.pass by reference & pass by value :

In JavaScript, the concept of pass by reference and pass by value depends on the type of data being passed as an argument to a function.

Pass by Value:
When you pass a primitive data type (such as numbers, strings, or booleans) to a function, it is passed by value. It means that a copy of the value is created and assigned to a new variable within the function. Any changes made to this new variable will not affect the original value outside the function.

Example:

function updateValue(value)  
{
value = 42; // Updating the value inside the function  
}
let num = 10;  
updateValue(num);  
console.log(num);  

Output: 10

In this example, the num variable is passed by value to the updateValue function. Even though the function assigns a new value of 42 to the value parameter, it does not affect the original num variable because it is a copy.

Pass by Reference:
When you pass an object (including arrays and functions) to a function, it is passed by reference. It means that the memory address of the object is passed, rather than creating a copy of the object. Any modifications made to the object inside the function will affect the original object.

Example:

function updateArray(array)
{
array.push(4); // Modifying the array inside the function  
}
let numbers = [1, 2, 3];
updateArray(numbers);
console.log(numbers);

Output: [1, 2, 3, 4]

In this example, the numbers array is passed by reference to the updateArray function. When the function pushes the value 4 into the array parameter, it modifies the original numbers array as well.

It's important to note that even though objects are passed by reference, reassigning the entire object within the function will not affect the original object outside the function. It only affects the local variable referencing that object.

Example:

function updateObject(obj)
{
obj = { name: 'John' }; // Reassigning the object inside the function
}
let person = { name: 'Alice' };
updateObject(person);
console.log(person);

Output: { name: 'Alice' }

In this case, the obj parameter inside the function is reassigned to a new object, but it doesn't modify the original person object. The local obj variable now points to a different memory location.

4.Array methods :

In JavaScript, arrays have several built-in methods that can be used to modify the array directly. These methods are referred to as mutable array methods because they modify the original array rather than creating a new array. Here are some commonly used mutable array methods:

1.push: The push method adds one or more elements to the end of an array.

Example:-

const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers);

Output: [1, 2, 3, 4, 5]

2.pop: The pop method removes the last element from an array and returns that element.

Example:-

const numbers = [1, 2, 3, 4, 5];
const lastElement = numbers.pop();
console.log(lastElement);
console.log(numbers);

Output: 5  
[1, 2, 3, 4]

3.shift: The shift method removes the first element from an array and returns that element. It also shifts all the remaining elements to a lower index.

Example:-

const numbers = [1, 2, 3, 4, 5];
const firstElement = numbers.shift();
console.log(firstElement);
console.log(numbers);

Output: 1
[2, 3, 4, 5]

4.unshift: The unshift method adds one or more elements to the beginning of an array and shifts the existing elements to higher indices.

Example:-

const numbers = [2, 3, 4, 5];
numbers.unshift(1);
console.log(numbers);

Output: [1, 2, 3, 4, 5]

5.splice: The splice method can be used to add, remove, or replace elements within an array. It modifies the original array and returns the removed elements.

Example:-

const numbers = [1, 2, 5, 6];
numbers.splice(2, 0, 3, 4); // Inserts 3 and 4 at index 2
console.log(numbers);
numbers.splice(3, 2); // Removes 2 elements starting from index 3
console.log(numbers);

Output: [1, 2, 3, 4, 5, 6]
[1, 2, 3, 6]

These mutable array methods provide convenient ways to modify arrays directly. However, it's important to be cautious when using them as they can alter the original array, potentially affecting other parts of your code.

1.Basics :

1.push: Adds one or more elements to the end of an array and returns the new length of the array.

Example:-

let array = [1, 2, 3];
array.push(4);
console.log(array);

Output: [1, 2, 3, 4]

2.pop: Removes the last element from an array and returns that element.

Example:-

let array = [1, 2, 3];  
let lastElement = array.pop();  
console.log(lastElement); // Output: 3  
console.log(array);  

Output: [1, 2]

3.concat: Concatenates two or more arrays and returns a new array.

Example:-

let arr1 = [1, 2, 3];  
let arr2 = [4, 5];  
let newArr = arr1.concat(arr2);  
console.log(newArr);  

Output: [1, 2, 3, 4, 5]

4.Slice :-

(i) slice using an array : Extracts a portion of an array and returns a new array without modifying the original array.

Example:-

let arr = [1, 2, 3, 4, 5];  
let newArr = arr.slice(2);  
console.log(newArr);  

Output: [3, 4, 5]

(ii) slice using an string : Extracts a portion of a string and returns a new string without modifying the original string.

Example:-

let str = 'Hello World';  
let newStr = str.slice(6);  
console.log(newStr);  

Output: 'World'

5.splice: This method is mutable. Changes the contents of an array by removing, replacing, or adding elements. It modifies the original array

Example:-

let arr = [1, 2, 3, 4, 5];  
arr.splice(2, 1);  
console.log(arr);  

Output: [1, 2, 4, 5]

6.join: This method is immutable. It joins all elements of an array into a string, using a specified separator, and returns the resulting string. The original array remains unchanged.

Example:

const fruits = ['apple', 'banana', 'orange'];  
const joinedString = fruits.join(', ');  
console.log(joinedString); // Output: 'apple, banana, orange'  
console.log(fruits);  

Output: ['apple', 'banana', 'orange']

In the example above, join returns a new string with all the elements of the fruits array joined by ', '. The original array fruits is not modified.

7.flat:
The flat() method is an array method in JavaScript that is used to flatten a nested array by concatenating its subarrays into a new array. It returns a new array with all the elements of the original array and any subarrays concatenated together into a single level.

The flat() method can be invoked on an array and accepts an optional parameter depth, which determines the depth of flattening. By default, depth is set to 1, meaning only the immediate nested arrays are flattened. If a negative value is provided for depth, it will flatten all nested arrays regardless of their depth.
Example:

const nestedArray = [1, 2, [3, 4], [5, [6, 7]]];

const flattenedArray = nestedArray.flat();

console.log(flattenedArray);
// Output: [1, 2, 3, 4, 5, [6, 7]]

2.Finding :

1.find: The find method is used to find the first element in an array that satisfies a given condition. It takes a callback function as an argument and returns the first element for which the callback function returns a truthy value. If no element is found, it returns undefined.

Example:

const numbers = [1, 2, 3, 4, 5];  
const found = numbers.find((element) => element > 3);  
console.log(found);  

Output: 4

2.indexOf: The indexOf method is used to find the index of the first occurrence of a specified element or value in an array or string. It returns the index of the element if found, and -1 if the element is not present.

Example:

const fruits = ['apple', 'banana', 'orange', 'banana'];  
const index = fruits.indexOf('banana');  
console.log(index);  

Output: 1

3.includes: The includes method is used to check whether an array or string contains a specific element or value. It returns true if the element is found, and false otherwise.

Example:

const numbers = [1, 2, 3, 4, 5];  
const includesThree = numbers.includes(3);  
console.log(includesThree);  

Output: true

4.findIndex: The findIndex method is similar to the find method, but it returns the index of the first element that satisfies a given condition instead of the element itself. If no element is found, it returns -1.

Example:

const numbers = [1, 2, 3, 4, 5];  
const index = numbers.findIndex((element) => element > 3);  
console.log(index);  

Output: 3

These methods are commonly used in JavaScript to search for elements or values within arrays or strings based on different conditions.

3.Higher order functions :

Higher-order functions are an important concept in functional programming. They are functions that can take other functions as arguments or return functions as results. In this context, let's explore some common higher-order functions: forEach, filter, map, reduce, and sort.

1.forEach: The forEach function is used to iterate over an array or a collection and apply a function to each element. It doesn't return a new array; instead, it performs an action for each element.

Example :

Const numbers = [1, 2, 3, 4];  
numbers.forEach  
( (num) =>  
{  
console.log(num);  
}  
);

2.filter: The filter function creates a new array containing elements from the original array that satisfy a specified condition defined by a filtering function.

Example:-

const numbers = [1, 2, 3, 4];  
const evenNumbers = numbers.filter((num) => num % 2 === 0);  
console.log(evenNumbers);  

Output: [2, 4]

3.map: The map function applies a transformation function to each element of an array and returns a new array containing the transformed elements.

Example:-

const numbers = [1, 2, 3, 4];  
const doubledNumbers = numbers.map((num) => num * 2);  
console.log(doubledNumbers); // Output: [2, 4, 6, 8]

4.reduce: The reduce function takes an array and reduces it to a single value by applying an accumulator function to each element. The accumulator function takes an accumulated value and the current element and returns a new accumulated value.

Example:-

const numbers = [1, 2, 3, 4];  
const sum = numbers.reduce((accumulator, num) => accumulator + num, 0);  
console.log(sum);  

Output: 10

5.sort: The sort function is used to sort the elements of an array in place. It takes an optional comparison function that defines the sorting order.

Example:-

const numbers = [4, 2, 1, 3];  
numbers.sort((a, b) => a - b);  
console.log(numbers);  

Output: [1, 2, 3, 4]

These higher-order functions provide powerful tools for working with arrays and collections in a functional programming paradigm, making the code concise and expressive.

4.Advanced :

Array methods chaining is a technique where multiple array methods are chained together to perform a sequence of operations on an array. Each method in the chain operates on the result of the previous method, allowing you to perform complex transformations and manipulations on arrays in a concise manner.

Example :-

const numbers = [1, 2, 3, 4, 5];  
const result = numbers  
.filter((num) => num % 2 === 0) // Filter even numbers  
.map((num) => num * 2)  // Double each number  
.reduce((sum, num) => sum + num, 0); // Sum all numbers  
console.log(result);  

Output: 18

In the above example:

1.filter is used to filter out even numbers from the original array.

2.map is then used to double each filtered number.

3.Finally, reduce is applied to sum up all the doubled numbers.

By chaining these methods together, you can achieve the desired result in a concise and readable way.

It's important to note that when using method chaining, the order of methods in the chain matters. Each method operates on the result of the previous method, so you need to consider the desired sequence of operations.

Method chaining is a powerful technique that allows you to perform complex array manipulations in a more compact and expressive manner, enhancing code readability and maintainability.

5.String methods :

In JavaScript, strings are immutable, which means that once a string is created, it cannot be changed. However, there are string methods that return a modified version of the original string without directly modifying it. Let's take a look at some of the commonly used string methods in JavaScript:

1.concat(): This method concatenates two or more strings and returns a new string.

Example:-

let str1 = 'Hello';  
let str2 = 'World';  
let result = str1.concat(' ', str2);  
console.log(result);  

Output: "Hello World"

2.toUpperCase(): Converts the string to uppercase and returns a new string.

Example:-

const str = "hello, world";  
const newString = str.toUpperCase();  
console.log(newString);  

Output: "HELLO, WORLD"

3.toLowerCase(): Converts the string to lowercase and returns a new string.

Example :-

const str = "HELLO, WORLD";  
const newString = str.toLowerCase();  
console.log(newString);  

Output: "hello, world"

These methods, along with others, allow you to perform various operations on strings without modifying the original string itself.

4.slice(): This method returns a new string containing a portion of the original string based on the specified start and end indices.

Example:-

let str = 'Hello World';  
let result = str.slice(6, 11);  
console.log(result);  

Output: "World"

5.replace(): This method returns a new string with all occurrences of a specified substring replaced by another substring.

Example:-

let str = 'Hello World';  
let result = str.replace('World', 'Universe');  
console.log(result);  

Output: "Hello Universe"

6.split(): This method splits a string into an array of substrings based on a specified delimiter and returns the array.

Example :-

str = 'Hello,World';  
let result = str.split(',');  
console.log(result);  

Output: ["Hello", "World"]

These methods, and many others, allow you to perform various operations on strings while keeping the original string unchanged. Remember that each method returns a new string, so you need to assign the result to a variable if you want to store or use the modified string.

6.Object methods & operations :

In JavaScript, objects are one of the fundamental data types and can have properties and methods associated with them. Methods in JavaScript are functions that are defined as properties of an object. They can be invoked or called to perform certain actions or operations on the object or its data.

1.Defining an Object:

Objects can be defined using object literals, constructor functions, or ES6 classes.

Example:-

const person =  
{  
name: 'John',  
age: 30,  
greet: function()  
    {  
        console.log(`Hello, my name is ${[this.name]}`);  
    }  
};

2.Accessing Object Properties:

Object properties can be accessed using dot notation (object.property) or bracket notation (object['property']).

Example :-

console.log(person['name']);  
console.log(person['age']);  

Output: john  
30

3.Defining Object Methods:

Object methods are defined as functions within an object. They can access and modify object properties using the this keyword.

Example:-

const person =  
{  
name: 'John',  
age: 30,  
greet: function()  
    {  
        console.log(`Hello, my name is ${[this.name]}`);  
    },  
increaseAge: function()  
    {  
        this.age++;  
    }  
};

4.Invoking Object Methods:

Object methods are invoked by using the dot notation or bracket notation with parentheses.

Example :-

person.greet();  
person.increaseAge();  
console.log(person.age);  

Output:  
Hello, my name is John  
31

5.The this Keyword:

The this keyword refers to the object that the method belongs to. It allows you to access and modify object properties within the method.

6.Shorthand Method Syntax:
ES6 introduced a shorthand syntax for defining object methods using concise method notation.

Example:-

const person =  
{  
name: 'John',  
age: 30,  
greet() {  
console.log(`Hello, my name is ${[this.name](http://this.name/)}`);  
},  
increaseAge() {  
this.age++;  
}  
};

7.Object Operations:

Object methods can perform various operations on object data, such as manipulating properties, performing calculations, iterating over object properties, or interacting with other objects.

Example:-

const calculator =  
{  
    operand1: 0,  
    operand2: 0,  
    add()  
    {  
        return this.operand1 + this.operand2;  
    },  
    multiply()  
    {  
        return this.operand1 * this.operand2;  
    }  
};  
calculator.operand1 = 5;  
calculator.operand2 = 3;  
console.log(calculator.add());  
console.log(calculator.multiply());  

Output:  
8  
15

These are the basic concepts of object methods and operations in JavaScript. Objects provide a powerful way to organize and work with related data and behavior in JavaScript.

7.Hoisting :

In JavaScript, hoisting is a mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means that you can use variables and functions before they are declared in your code. However, it's important to note that only the declarations are hoisted, not the initializations or assignments.

There are two types of hoisting in JavaScript: hoisting of variables and hoisting of functions.

1.Hoisting of Variables:

When variables are hoisted, the declaration of the variable is moved to the top of the scope, but the assignment or initialization remains in its original place. This means that you can use a variable before it is declared, but its value will be undefined until it is assigned a value.

Example:

console.log(myVariable); // undefined  
var myVariable = 10;  
console.log(myVariable);  

Output :10

The above code is actually interpreted as follows:

var myVariable;  // Declaration is hoisted  
console.log(myVariable); // undefined  
myVariable = 10; // Assignment remains in its original place  
console.log(myVariable);  
Output : 10

2.Hoisting of Functions:

When functions are hoisted, both the function declaration and its body are moved to the top of the scope. This means that you can call a function before it is declared in your code.

Example:

myFunction();   
function myFunction()  
{  
    console.log("Hello, World!");  
}

The above code is actually interpreted as follows:

function myFunction()  
{ // Both declaration and body are hoisted  
        console.log("Hello, World!");  
}  
myFunction();  

output : "Hello, World!"

It's important to be aware of hoisting in JavaScript to understand the behavior of your code. However, it's considered a best practice to declare variables and functions at the beginning of their scope to avoid any confusion or unexpected behavior.

8.Scopes :

In JavaScript, scopes determine the accessibility and visibility of variables, functions, and objects within your code. Understanding how scopes work is crucial for writing efficient and organized JavaScript programs. There are two main types of scopes in JavaScript: global scope and local scope (also known as function scope).

1.Global Scope:

Variables declared outside of any function are considered to be in the global scope.
Global variables can be accessed from any part of your code, including inside functions.
When a variable is accessed, JavaScript first checks the local scope, and if the variable is not found, it looks in the global scope.
Global variables can be accessed and modified from any part of your code, which can lead to potential issues if not managed properly.

Example of a global variable:

var globalVariable = 10;  
function myFunction()  
{  
    console.log(globalVariable);  // Accessing global variable  
}  
myFunction();  

Output: 10

2.Local Scope (Function Scope):

Variables declared inside a function are considered to be in the local scope.
Local variables are accessible only within the function in which they are declared.
Each function has its own separate local scope, and variables with the same name can exist in different function scopes without conflict.
Local variables take precedence over global variables with the same name.

Example of a local variable:

function myFunction()  
{  
    var localVariable = 5; // Local variable  
    console.log(localVariable);  
}  

myFunction(); //Output: 5  

console.log(localVariable);  // Error: localVariable is not defined

3.Block Scope (Introduced in ES6):

Starting from ECMAScript 2015 (ES6), JavaScript introduced block scope using the let and const keywords.
Variables declared with let and const inside a block (e.g., within loops or conditional statements) are limited to the block scope.
Block-scoped variables are not accessible outside the block in which they are defined.
Block scope helps prevent variable leakage and provides better control over variable lifespan.

Example of block scope:

if (true)  
{  
    let blockScopedVariable = 20; // Block-scoped variable  
    console.log(blockScopedVariable);  
}  
console.log(blockScopedVariable); // Error: blockScopedVariable is not defined

Note: Prior to ES6, JavaScript had function scope but not block scope. Block-scoped variables introduced with let and const provide more granular control over variable scoping.

Understanding and utilizing scopes effectively is crucial for writing maintainable and bug-free JavaScript code.

9.Clousers :

It is a combination of a function and the lexical environment in which it was declared. It allows a function to access variables from its outer (enclosing) scope, even after the outer function has finished executing. In other words, a closure gives you access to an outer function's scope from an inner function.

Here's an example to illustrate closures:

function outerFunction() {
  const outerVariable = 'I am from outer';

  function innerFunction() {
    console.log(outerVariable); // Accessing outerVariable from the outer scope
  }

  return innerFunction;
}

const inner = outerFunction();
inner(); // Prints: I am from outer

In the example above, outerFunction is the outer function that declares the outerVariable. The innerFunction is the inner function defined inside outerFunction. The innerFunction has access to the outerVariable even after outerFunction has finished executing. This is possible because of the closure.

The outerVariable is captured by the innerFunction, forming a closure. When innerFunction is invoked (inner()), it can still access and use the outerVariable.

Closures are commonly used to create private variables and encapsulation in JavaScript. By defining variables within an outer function and returning an inner function that can access and modify those variables, you can create a private scope where the variables are not directly accessible from the outside.

function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
    },
    decrement() {
      count--;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2
counter.decrement();
console.log(counter.getCount()); // 1

In this example, the createCounter function returns an object with three methods: increment, decrement, and getCount. The count variable is enclosed within the scope of the createCounter function and can only be accessed or modified through the methods of the returned object. This creates a private variable that is protected from direct access or modification from outside the object.

Closures are powerful in JavaScript and provide a way to maintain state and create encapsulated functions with persistent access to their lexical environments. They are widely used in various JavaScript patterns and can be quite useful in functional programming, event handling, and asynchronous operations.

HTML/CSS

Ankit Dagar — Wed, 24 May 2023 13:04:46 +0000

Box model :

The CSS box model is a fundamental concept in web design and layout that describes how elements are rendered and how their dimensions are calculated. It is used to develop the design and structure of a web page. It can be used as a set of tools to personalize the layout of different components. It consists of several components that determine the overall size and positioning of an element within a web page.

The CSS box model consists of four main parts:

Content: It represents the actual content of the element, such as text, images, or other HTML elements. The size of the content area is determined by the width and height properties.
Padding: It is a transparent area surrounding the content and provides space between the content and the border. Padding can be set using the padding property and can have individual values for each side (top, right, bottom, left) or a shorthand notation.
Border: It is a line that surrounds the padding and content areas. Borders can be customized using properties like border-width, border-style, and border-color.
Margin: It is an invisible area outside the border that separates the element from other elements on the page. Margins can be set using the margin property and can also have individual values for each side or a shorthand notation.

Here's an example :

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.box {  
width: 200px;  
height: 100px;  
padding: 20px;  
border: 1px solid black;  
margin: 10px;  
}  
</style>  
</head>  
<body>  
<div class="box">This is a box</div>  
</body>  
</html>

Understanding the CSS box model is crucial for positioning and layout in CSS, as it determines how elements interact with each other and how much space they occupy on a webpage.

Inline versus block elements :

In HTML, elements are categorized into two main types: inline elements and block elements. These categories determine how elements are displayed and how they interact with other elements on a webpage.

Block Elements:
Block elements are formatted as blocks and create a new line before and after the element.
They take up the full width available by default, unless their width is explicitly set.
Examples of block elements include <div>, <p>, <h1> to <h6>, <ul>, <li>, <table>, <form>, etc.
Block elements can contain both block and inline elements.
Inline Elements:
Inline elements are formatted inline and do not create a new line before or after the element.
They occupy only the space necessary to render their content and do not affect the layout of surrounding elements.
Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, <input>, <br>, etc.
Inline elements cannot contain block-level elements but can contain other inline elements.

Here's an example to illustrate the difference between block and inline elements:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.block {  
background-color: lightblue;  
}  

.inline {  
background-color: lightgreen;  
}  
</style>  
</head>  
<body>  
<div class="block">This is a block element (div)</div>  
<span class="inline">This is an inline element (span)</span>  
<p class="block">This is another block element (p)</p>  
</body>  
</html>

In the example above, the <div> and <p> elements are block elements, so they appear as separate blocks, each taking up the full width available. The <span> element is an inline element, so it does not create a new line and only occupies the necessary space around its content.

Relative positioning and Absolute positioning :

Relative Positioning: Relative positioning refers to positioning an element relative to its normal position within the document flow. When an element is relatively positioned, it can be moved from its original position using CSS properties like top, right, bottom, and left. The element is then positioned based on its original position, and nearby elements still occupy their original space in the document flow.

For example, consider the following CSS code:

.relative-box {  
position: relative;  
top: 50px;  
left: 20px;  
}

In this example, the element with the class "relative-box" will be moved 50 pixels down from its normal position and 20 pixels to the right.

Absolute Positioning: Absolute positioning refers to positioning an element relative to its nearest positioned ancestor or, if there is none, relative to the document's initial containing block (usually the viewport). When an element is absolutely positioned, it is taken out of the normal document flow, and other elements are positioned as if the absolutely positioned element does not exist.

Absolute positioning is typically achieved by specifying CSS properties like top, right, bottom, and left. These properties define the exact position of the element relative to its nearest positioned ancestor.

For example:

.absolute-box {  
position: absolute;  
top: 100px;  
right: 50px;  
}

In this case, the element with the class "absolute-box" will be positioned 100 pixels down from its nearest positioned ancestor and 50 pixels from the right edge.

Common CSS structural classes :

In CSS, structural classes are classes that are used to target elements based on their position within a structure or hierarchy, rather than their specific attributes or content. These classes are useful for applying styles to specific elements or groups of elements within a structured layout. Here are a few commonly used structural classes:

:first-child: The :first-child pseudo-class selects the first child element of its parent container. It matches an element that is the first child among its siblings.

Ex :

ul li:first-child {  
color: red;  
}

In this example, the first <li> element within a <ul> will have its text color set to red.

:nth-child(): The :nth-child() pseudo-class allows you to select elements based on their position among their siblings using a formula. It takes an argument in the form of an expression, such as n, 2n, 3n+1, etc.

Ex :

ul li:nth-child(odd) {  
background-color: lightgray;  
}

This CSS rule applies a light gray background to all odd-numbered <li> elements within a <ul>.

:last-child: The :last-child pseudo-class selects the last child element of its parent container.

Ex :

ul li:last-child {  
font-weight: bold;  
}

In this example, the last <li> element within a <ul> will have its font-weight set to bold.

:only-child: The :only-child pseudo-class matches elements that are the only child of their parent container.

Ex :

div p:only-child {  
border: 1px solid blue;  
}

Here, any <p> element that is the only child within a <div> will have a blue border.

:nth-last-child(): The :nth-last-child() pseudo-class selects elements based on their position counted from the end of the parent container.

Ex :

ul li:nth-last-child(2) {  
text-decoration: underline;  
}

This rule underlines the second-to-last <li> element within a <ul>.

:first-of-type: The :first-of-type pseudo-class matches the first element of its type among its siblings.

Ex :

h2:first-of-type {  
color: green;  
}

Here, the first <h2> element within its parent container will have its text color set to green.

:nth-of-type(): The :nth-of-type() pseudo-class selects elements based on their position among their siblings of the same type.

Ex:

ul li:nth-of-type(3n+2) {  
background-color: lightblue;  
}

In this example, every third <li> element (starting from the second one) within a <ul> will have a light blue background.

:last-of-type: The :last-of-type pseudo-class selects the last element of its type among its siblings.

Ex :

p:last-of-type {  
font-style: italic;  
}

Here, the last <p> element within its parent container will have its font-style set to italic.

:nth-last-of-type(): The :nth-last-of-type() pseudo-class selects elements based on their position counted from the end among their siblings of the same type.

Ex :

div p:nth-last-of-type(odd) {  
background-color: yellow;  
}

This CSS rule applies a yellow background to all odd-numbered <p> elements within a <div>.

Common CSS styling classes :

In CSS, you can define and apply styling classes to elements using the class selector. Styling classes are reusable sets of CSS rules that can be applied to multiple elements on a webpage. Here's how you define and use styling classes in CSS:

Defining a Class: To define a class, you prefix the class name with a dot (.) and specify the desired CSS rules within curly braces {}.

Ex :

.my-class {  
color: red;  
font-size: 16px;  
}

In this example, we define a class called "my-class" with the color set to red and font size set to 16 pixels.

Applying a Class: To apply a class to an HTML element, you use the class attribute and set it to the name of the class you want to apply.

Ex :

<p class="my-class">This paragraph has the "my-class" styling applied.</p>

In this case, the "my-class" styling class is applied to the <p> element.

Multiple Classes: You can apply multiple classes to an element by separating the class names with spaces within the class attribute.

Ex :

<p class="my-class another-class">This paragraph has both "my-class" and "another-class" styling applied.</p>

Here, both "my-class" and "another-class" styling classes are applied to the <p> element.

Specificity and Cascading: When applying multiple classes or combining them with other CSS selectors, the specificity rules and cascading nature of CSS determine which styles take precedence. The order of the classes or their placement in the CSS file can also affect the final styles applied.

Ex :

<p class="my-class another-class">This paragraph has the combined styles of "my-class" and "another-class".</p>

In this example, if both "my-class" and "another-class" define conflicting styles, the last defined style or the one with higher specificity will take precedence.

Styling classes provide a convenient way to group and reuse CSS styles across multiple elements, allowing for consistent and modular styling throughout your web page.

CSS Specificity :

CSS specificity is a mechanism that determines which styles should be applied to an HTML element when multiple CSS rules target the same element. Specificity helps resolve conflicts when different styles are defined for the same element, allowing you to control the precedence of styles based on their specificity values. Specificity is calculated based on selectors used in CSS rules. Let's dive into the details of CSS specificity:

Specificity Hierarchy: CSS specificity follows a hierarchy of selector types, from the least specific to the most specific:

Inline Styles: Styles defined directly on an element using the "style" attribute have the highest specificity.
IDs: Selectors targeting elements by their ID attribute have a higher specificity than other selector types. For example, #myId.
Classes, Attributes, and Pseudo-Classes: Selectors targeting elements by their class, attribute, or pseudo-class have a medium specificity. For example, .myClass, [type="text"], :hover.
Elements and Pseudo-Elements: Selectors targeting elements or pseudo-elements have the lowest specificity. For example, p, ::before.

Calculating Specificity: Specificity is calculated by assigning a weight to each selector type within a CSS rule. The weights are represented by a four-component value called the specificity value. The components, from left to right, represent the weight of inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

The specificity value is calculated by counting the number of occurrences of each selector type and concatenating the counts. For example, a selector with two classes and one element would have a specificity value of 0111.
If a higher component has a tie, the next component is considered. For example, a selector with one ID and one class has a higher specificity than a selector with three classes.
The specificity value is always a non-negative integer, and the higher the value, the more specific the selector.

Resolving Conflicts: When multiple CSS rules target the same element and have conflicting styles, the rule with the highest specificity value takes precedence. If two or more rules have the same specificity value, the rule defined later in the CSS document or file overrides the earlier one.

Inline styles always override external stylesheets and styles defined in the "style" attribute.
Rules with higher specificity override rules with lower specificity, regardless of their order.

Specificity Examples: Let's consider a few examples to understand specificity better:

/* Rule 1 */  
h1 {  
color: red;  
}  

/* Rule 2 */  
.header {  
color: blue;  
}  

/* Rule 3 */  
#myId {  
color: green;  
}  

/* Rule 4 */  
h1#myId {  
color: orange;  
}

<h1 id="myId" class="header">Hello, CSS!</h1>

In this example, the color of the <h1> element will be orange because Rule 4 has the highest specificity, targeting the element by both its ID and element type. If Rule 4 were not present, Rule 3 would apply due to its higher specificity than Rule 2. Rule 1 has the lowest specificity and would only apply if none of the other rules matched.

CSS Responsive Queries :

CSS responsive queries, also known as media queries, allow you to apply different CSS styles based on the characteristics of the device or viewport size. Media queries are commonly used in responsive web design to create adaptable layouts and optimize the display of content on different devices. Here's how you can use media queries in CSS:

Syntax: Media queries are written using the @media rule followed by a condition enclosed in parentheses. The condition specifies the characteristics of the device or viewport size that you want to target.

@media (condition) {  
/* CSS rules to apply when the condition is true */  
}

Device Characteristics: Media queries can target various device characteristics, including viewport width, device type, resolution, orientation, etc. Some commonly used conditions include:

(i) - Viewport Width:

@media (max-width: 768px) {
/* CSS rules for screens with a maximum width of 768 pixels */  
}

@media (min-width: 768px) and (max-width: 1024px) {
/* CSS rules for screens with a width between 768 and 1024 pixels */
}

(ii) - Device Type:

@media screen {  
/* CSS rules for screens */  
}  

@media print {  
/* CSS rules for print styles */  
}

(iii) - Resolution:

@media (min-resolution: 300dpi) {  
/* CSS rules for devices with a minimum resolution of 300dpi */  
}  

@media (max-resolution: 72dpi) {  
/* CSS rules for devices with a maximum resolution of 72dpi */  
}

(iv) - Orientation:

@media (orientation: landscape) {  
/* CSS rules for landscape orientation */  
}  

@media (orientation: portrait) {  
/* CSS rules for portrait orientation */  
}

Applying Styles: Inside a media query block, you can include CSS rules that will be applied when the specified condition is true. These rules can override or modify existing styles or introduce new styles specific to the targeted condition.

@media (max-width: 768px) {  
body {  
font-size: 14px;  
}  

.container {  
width: 100%;  
}  
}

In this example, when the viewport width is 768 pixels or less, the font size of the body element will be 14 pixels, and the width of the elements with the class .container will be set to 100%.

By utilizing media queries, you can create responsive designs that adapt to different screen sizes, orientations, and other device characteristics. This allows you to optimize the user experience across a range of devices and improve the accessibility of your website or application.

Flexbox/Grid :

Flex Layout and Grid Layout are two popular CSS layout systems used to create responsive and flexible web designs. They offer different approaches to organizing and positioning elements on a webpage.

Flex Layout: Flexbox, also known as Flexible Box Layout, is a one-dimensional layout system designed for arranging elements along a single axis (either horizontally or vertically) within a container. It provides an easy way to create flexible and dynamic layouts. Here are some key features of Flex Layout:

Container and Items: The flex layout involves a container element (parent) and its child elements (items). The container is defined using the CSS property display: flex, while the child elements become flex items.
Main and Cross Axis: Flexbox works with a main axis and a cross axis. By default, the main axis is horizontal (from left to right) and the cross axis is vertical. However, you can change the direction as needed.
Flexbox Properties: Flexbox offers several CSS properties to control the behavior of the layout, such as flex-direction, justify-content, align-items, and flex-grow. These properties allow you to control the alignment, distribution, and resizing of flex items.
Responsive Design: Flexbox simplifies responsive design by providing features like flex-wrap and media queries that allow items to wrap or change their layout based on available space.

Flex Layout is commonly used for creating navigation menus, flexible content containers, and vertical alignment of elements.

Example :  

HTML:  
<div class="container">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  

CSS :  
.container {  
display: flex;  
justify-content: space-between;  
}  

.item {  
flex: 1;  
background-color: #e0e0e0;  
padding: 10px;  
margin: 5px;  
}

Grid Layout: CSS Grid Layout is a two-dimensional layout system that allows you to create complex and grid-based layouts. It provides more control over the placement and sizing of elements in both rows and columns. Here are some key features of Grid Layout:

Grid Container and Items: Grid Layout uses a grid container (parent) and its child elements (items). The container is defined using the CSS property display: grid, and the child elements become grid items.
Rows and Columns: You can define the number and size of rows and columns in the grid using properties like grid-template-rows and grid-template-columns. You can use fixed lengths, percentages, or flexible units to define the size of grid tracks.
Grid Areas: Grid Layout allows you to define named grid areas using the grid-template-areas property. This makes it easier to place items in specific areas of the grid.
Alignment and Spacing: Grid Layout provides properties like justify-items, align-items, justify-content, and align-content to control the alignment and spacing of items within the grid.
Responsive Design: Grid Layout works well for responsive design by using media queries to change the grid structure or redefine grid-template-areas based on different viewport sizes.

Grid Layout is commonly used for creating complex page layouts, such as magazine-style designs, image galleries, and dashboard layouts.

Example :  

HTML :  
<div class="container">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
<div class="item">Item 4</div>  
</div>  

CSS :  
.container {  
display: grid;  
grid-template-columns: 1fr 1fr;  
grid-gap: 10px;  
}  

.item {  
background-color: #e0e0e0;  
padding: 10px;  
}

Common html meta tags :

The HTML <meta> tag is used to provide metadata about an HTML document. It is placed within the <head> section of an HTML page. Here's an explanation of the commonly used attributes of the <meta> tag:

charset: Specifies the character encoding for the HTML document. It helps browsers interpret and display the text correctly.

Example:

<meta charset="UTF-8">

name and content: These attributes work together to define various types of metadata. The name attribute specifies the type of metadata, while the content attribute provides the actual value.

Examples:

<meta name="description" content="This is a description of the page.">  
<meta name="keywords" content="HTML, meta tags, example">  
<meta name="author" content="John Doe">

http-equiv: Used to simulate an HTTP response header field within an HTML document. It can be used to set the behavior of the browser or define the document's caching policies.

Example:

<meta http-equiv="refresh" content="5; URL=[https://example.com](https://example.com/)">

viewport: Primarily used for responsive web design, it specifies the viewport's width and initial scale for mobile devices.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here's an example of a complete <head> section of an HTML page with multiple <meta> tags:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<meta name="description" content="This is a description of the page.">  
<meta name="keywords" content="HTML, meta tags, example">  
<meta name="author" content="John Doe">  
<meta http-equiv="refresh" content="5; URL=[https://example.com](https://example.com/)">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Example Page</title>  
</head>  
<body>  
<!-- Page content goes here -->  
</body>  
</html>

SOLID Principle

Ankit Dagar — Mon, 15 May 2023 12:11:46 +0000

Introduction :

The SOLID principle was introduced by Robert C. Martin, also known as Uncle Bob and it is a coding standard in programming. The SOLID principles are a set of five design principles that are commonly used in object-oriented programming to create more maintainable and scalable software. This principle is an acronym of the five principles which is given below…

1) Single Responsibility Principle (SRP)
2) Open/Closed Principle (OCP)
3) Liskov’s Substitution Principle (LSP)
4) Interface Segregation Principle (ISP)
5) Dependency Inversion Principle (DIP)

The SOLID principle helps in reducing tight coupling. Tight coupling means a group of classes are highly dependent on one another which you should avoid in your code.

1. Single Responsibility Principle :

This principle states that “a class should have only one reason to change” which means every class should have a single responsibility or single job or single purpose. Take the example of developing software. The task is divided into different members doing different things as front-end designers do design, the tester does testing and backend developer takes care of backend development part then we can say that everyone has a single job or responsibility.

Most of the time it happens that when programmers have to add features or new behavior they implement everything into the existing class which is completely wrong. It makes their code lengthy, complex and consumes time when later something needs to be modified. Use layers in your application and break God classes into smaller classes or modules.
For example :-

class Logger:  
    def log(self, message):  
        with open('log.txt', 'a') as f:
            f.write(message + '\n')

In this example, the Logger class has only one responsibility, which is to log messages to a file. It doesn't have any other responsibilities, such as sending emails or writing to a database.

2. Open/Closed Principle:

This principle states that “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification” which means you should be able to extend a class behavior, without modifying it. For example :-

class Animal:
    def speak(self):
        pass

class Dog(Animal):
        def speak(self):
            return "Woof!"

class Cat(Animal):
        def speak(self):
            return "Meow!"

In this example, the Animal class is closed for modification, but open for extension. You can add new subclasses (such as Dog and Cat) without modifying the Animal class.

3. Liskov’s Substitution Principle:

The principle was introduced by Barbara Liskov in 1987 and according to this principle “Derived or child classes must be substitutable for their base or parent classes“. This principle ensures that any class that is the child of a parent class should be usable in place of its parent without any unexpected behavior.

class Rectangle:  
    def __init__(self, width, height):  
        self.width = width  
        self.height = height  

    def area(self):  
        return self.width * self.height  

class Square(Rectangle):  
    def __init__(self, size):  
        self.width = size  
        self.height = size  

    def area(self):  
        return self.width * self.height

One of the classic examples of this principle is a rectangle having four sides. A rectangle’s height can be any value and width can be any value. A square is a rectangle with equal width and height. So we can say that we can extend the properties of the rectangle class into square class. In order to do that you need to swap the child (square) class with parent (rectangle) class to fit the definition of a square having four equal sides but a derived class does not affect the behavior of the parent class so if you will do that it will violate the Liskov Substitution Principle.

4. Interface Segregation Principle:

This principle is the first principle that applies to Interfaces instead of classes in SOLID and it is similar to the single responsibility principle. It states that “do not force any client to implement an interface which is irrelevant to them“.

This principle states that a class should not be forced to depend on methods it does not use. In other words, a class should only depend on the methods it actually needs. For example :

class Machine:  
    def print_document(self):  
        pass
    def scan_document(self):  
        pass  

class Printer(Machine):  
    def print_document(self):  
        print("Printing document...")

class Scanner(Machine):  
    def scan_document(self):  
        print("Scanning document...")  

class Copier(Machine):  
    def __init__(self):  
        self.printer = Printer()  
        self.scanner = Scanner()  

    def print_document(self):  
        self.printer.print_document()  

    def scan_document(self):  
        self.scanner.scan_document()

In this example, the Copier class only depends on the methods it needs from the Printer and Scanner classes. It doesn't need the scan_document method from the Printer class or the print_document method from the Scanner class.

5. Dependency Inversion Principle:

Two key points are here to keep in mind about this principle :

High-level modules/classes should not depend on low-level modules/ classes. Both should depend upon abstractions.
Abstractions should not depend upon details. Details should depend upon abstractions.

Example:
Violation of DIP

class BackendDeveloper:
    """This is a low-level module"""
    @staticmethod
    def python():
        print("Writing Python code")
class FrontendDeveloper:
    """This is a low-level module"""
    @staticmethod
    def javascript():
        print("Writing JavaScript code")
class Project:
    """This is a high-level module"""
    def __init__(self):
        self.backend = BackendDeveloper()
        self.frontend = FrontendDeveloper()
    def develop(self):
        self.backend.python()
        self.frontend.javascript()
        return "Develop codebase"
project = Project()
print(project.develop())

The project class is a high-level module and backend & frontend are the low-level modules. In this example, we found that the high-level module depends on the low-level module. Hence this example are violated the Dependency Inversion Principle. Let’s solve the problem according to the definition of DIP.
Solution:

Example 1

class BackendDeveloper:
   """This is a low-level module"""
   def develop(self):
       self.__python_code()
   @staticmethod
   def __python_code():
       print("Writing Python code")
class FrontendDeveloper:
   """This is a low-level module"""
   def develop(self):
       self.__javascript()
   @staticmethod
   def __javascript():
       print("Writing JavaScript code")
class Developers:
   """An Abstract module"""
   def __init__(self):
       self.backend = BackendDeveloper()
       self.frontend = FrontendDeveloper()
   def develop(self):
       self.backend.develop()
       self.frontend.develop()
class Project:
   """This is a high-level module"""
   def __init__(self):
       self.__developers = Developers()
   def develops(self):
       return self.__developers.develop()
project = Project()
print(project.develops())

References
https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/

https://www.baeldung.com/solid-principles

https://www.pythontutorial.net/python-oop/python-open-closed-principle/

https://medium.com/@alex24dutertre/square-rectangle-and-the-liskov-substitution-principle-ee1eb8433106

https://www.bmc.com/blogs/solid-design-principles/

Some Topics in PostgreSQL

Ankit Dagar — Fri, 12 May 2023 12:47:15 +0000

1. Transactions :-

A logical unit of work on database.
An action or series of action that are performed by a single user or application program, which reads or updates the contents of a database. It must follow all the acid properties.

For example :- When i send money to my friend the updation of the data is happending it is a action which is performing here.

ACID

A -> Atomicity :

The hole transaction takes place at on ce or does not happen at all. If something happen in between transaction will cancel out.

For example :- When i send money to my friend if something happen in between my friend will not get the money and the money will be deducted from my account for perventing this we use atomicity

C -> Consistency :

It means correctness that any given database transaction must change affected data only in allowed ways. For a database to be consistent, data written to the database must be valid according to all defined rules, including constraints, cascades, triggers, or any combination.
For example :- When is send money to my friend the sum of my balance after and before the transaction should br equal to the sum of the balance of my friend before and after the transaction.

I -> Isolation:

It means that if multiple transaction is happening
This property ensures that transactions are isolated from one another, and each transaction must behave as if it's the only transaction being executed on the database. In other words, the changes made by one transaction should not be visible to other transactions until the first transaction has been completed.

D -> Durability:

This property ensures that once a transaction is committed, its changes will be permanent and will survive any subsequent system failures, such as power outages or hardware failures. In other words, once a transaction is committed, the changes made during that transaction will be stored on disk and will not be lost even if the database crashes or the system shuts down unexpectedly.

2. CAP Theorem

The CAP theorem is a theorem about distributed computing systems. It states that a computer system can at best provide two of the three properties.

Consistency :

Consistency means that all clients see the same data at the same time, no matter which node they connect to. For this to happen, whenever data is written to one node, it must be instantly forwarded or replicated to all the other nodes in the system before the write is deemed ‘successful.’

Availability :

Availability means that any client making a request for data gets a response, even if one or more nodes are down. Another way to state this—all working nodes in the distributed system return a valid response for any request, without exception.

Partition tolerance :

A partition is a communications break within a distributed system—a lost or temporarily delayed connection between two nodes. Partition tolerance means that the cluster must continue to work despite any number of communication breakdowns between nodes in the system.

3.Joins

A JOIN clause is used to combine rows from two or more tables, based on a related column between them.
Joins are of 5 types.

1.Inner Join :

It return the common data record that have matching values in both tables.

Syantax for inner join:

SELECT column_name(s) FROM table1 
INNER JOIN table2 
ON table1.column_name =
table2.column_name;

2.Left Join :

It returns all records from the left table, and the matched records from the right table.

Syantax for left join :

SELECT  column_name(s)  
FROM  table1  
LEFT  JOIN  table2  
ON  table1.column_name = 
table2.column_name;

3.Right Join :

It returns all records from the right table, and the matched records from the left table.

Syantax for right join :

SELECT column_name(s)  
FROM table1
RIGHT JOIN table2
ON table1.column_name_ =
table2.column_name;

4.Full Outer Join :

It returns all records all the data from both the table either there is a match or not.

Syantax for full join :

SELECT column_name(s)  
FROM  table1
FULL  OUTER  JOIN table2  
ON table1.column_name = table2.column_name WHERE condition;

5.Self Join :

A self join is a regular join, but the table is joined with itself.
Syantax for self join:

SELECT  column_name(s)  
FROM  table1 T1, table1 T2  
WHERE  condition;

4. Indexes

Indexes are used to retrieve data from the database more quickly than otherwise. The users cannot see the indexes, they are just used to speed up searches/queries.

The CREATE INDEX statement is used to create indexes in tables.

CREATE  INDEX  index_name  
ON  table_name (column1, column2, ...);

5.Triggers

It is a stored procedure in database which automatically invokes whenever a special event in the database occurs.

For example:- A trigger can be invoked when a row is inserted into a specified table or when certain table columns are being updated.

In Structured Query Language, triggers are called only either before or after the below events:

INSERT Event :

This event is called when the new row is entered in the table.

UPDATE Event:

This event is called when the existing record is changed or modified in the table.

DELETE Event:

This event is called when the existing record is removed from the table.

6. Normalization

Normalization is the process of organizing data in a database. This includes creating tables and establishing relationships between those tables according to rules designed both to protect the data and to make the database more flexible by eliminating redundancy and inconsistent dependency.

Normalization divides a database into two or more tables and defines relationships between them.

Types of normalization:-

Each table represents a distinct entity or concept, and the relationships between the tables are based on the attributes that they share.

1NF: A relation is in 1NF if all its attributes have an atomic value.
2NF: A relation is in 2NF if it is in 1NF and all non-key attributes are fully functional dependent on the candidate key in DBMS.
3NF: A relation is in 3NF if it is in 2NF and there is no transitive dependency.
BCNF: A relation is in BCNF if it is in 3NF and for every Functional Dependency, LHS is the super key.

7. Aggregations, Filters in queries

Aggregations and filters are common operations used in SQL queries to summarize and manipulate data.

Some common aggregations:-

1. sum :

To calculate total column values.

2. AVG :

It returns the average value of a numeric column.

3. count :

It returns the number of rows that matches a specified criterion.

4. MAX :

It return max value of column.

5. MIN :

It returns min value of column

Some filter technique:-

WHERE
The WHERE clause specifies a condition that must be met for each row to be selected in the result set.
You can also use comparison operators such as less than (<) , greater than (>), equal to (=), not equal to (!= or <>) and logical operators such as AND and OR , BETWEEN to create more complex filter conditions. Here's an example:

select *
from sales
where (product = 'product_name' and price > 100) or price > 20

8. Locking mechanism

Locking is a fundamental mechanism in database systems that allows

multiple users to access shared resources without interfering with each other.

Types of Locking Mechanism :-

There are different types of locking mechanism showing below.

Shared lock(S):-

A shared lock can be imposed by several transactions at the same time over the same page or row and in that way several transactions can share the ability for data reading since the reading process itself will not affect anyhow the actual page or row data. In addition, a shared lock will allow write operations, but no DDL changes will be allowed.

Exclusive lock :-

The exclusive lock will be imposed by the transaction when it wants to modify the page or row data, which is in the case of DML statements DELETE, INSERT and UPDATE. An exclusive lock can be imposed to a page or row only if there is no other shared or exclusive lock imposed already on the target.

Update lock :-

An update lock is acquired when a transaction intends to modify a resource and wants to prevent other transactions from acquiring an exclusive lock on the same resource.

9. Database Isolation Levels

The SQL standard defines four isolation levels.

Read Uncommitted :-

The lowest isolation level allowed by SQL is read uncommitted. In this level, transactions can read data that is not committed by other transactions, permitting dirty read.

Read Committed :-

This isolation level allows for the reading of data after it is committed by a transaction. This means no dirty reads are possible. This isolation is unable to prevent non-repeatable reads.

Repeatable Read :-

This isolation tries to improve on the previous isolation level by preventing both dirty reads and non-repeatable reads. This prevention is done by applying locks on rows that are read and rows that perform write operations.

Serializable :-

The highest isolation level allowed is serializable. This isolation level looks like a serial execution, with almost no concurrency. All the three read phenomena are prevented in this isolation level, but it compromises concurrent execution.

Object Oriented Programming

Ankit Dagar — Thu, 11 May 2023 06:55:14 +0000

Introduction

Python is an object-oriented language that fully supports OOP concepts.Object-oriented programming (OOP) is a design principle which focuses on the concept of objects, which are instances of classes.

Objects :-

In Python, everything is an object. A object is a instance of a class, which is a blueprint or a template for creating objects. Objects in Python have attributes and methods.
example :-

class  Rectangle: 
    def  __init__(self, length, width):
        self.length = length
        self.width = width
    def  area(self):
        return self.length * self.width

Creating a object of rectangle class name rect and passing values in it.

rect = Rectangle(10, 5)
print(rect.area())
50

Classes :-

In Python, a class is a blueprint or a template for creating objects. A class defines a set of attributes and methods that describe the behavior of the objects created from it.
For making a Class in Python. We use Class keyword.Here is a example:-

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def introduction(self):
        print("Hi, my name is " + self.name + " and I'm " + str(self.age) + " years old.")

Creating an object of Person named class and passing values in it.

p = Person("Alice", 25)

Calling the function.

p.introduce()
# output:
Hi, my name is Alice and I'm 25 years old.

Inheritance :-

It is a concept of creating a new class from an existing class, inheriting all the attributes and methods of the parent class. In Python, we achieved this through the use of the super() function and isinstance() function.
### 1. Single inheritance :-
It is the most common type of inheritance, where a subclass inherits from a single parent class. The subclass inherits all the attributes and methods of the parent class.
Here is a example :- In this we are creating a Animalclass and make function inside it named asspeak

class  Animal:

    def  __init__(self, name):
        self.name = name

    def  speak(self):
        print("")

Here we are creating a class named as Dog which is inherited by Animal class.


class  Dog(Animal):
    def  speak(self):
        print("Woof!")

dog = Dog("Rover")
print(dog.name) # output : "Rover"
dog.speak() # output: "Woof!"

2.Multiple inheritance :-

In this a subclass inherits from multiple parent classes. In this case, the subclass inherits all the attributes and methods of each parent class.
Here is example :- In this we are creating a class named Base1 and inside it we are creating a function named as method1.

class  Base1:
    def  method1(self):
        print("Base1 method")

Here we are creating a second class named as Base2 and inside it we are creating a function named as method2

class  Base2:
    def  method2(self):
        print("Base2 method")

Here we are creating a classnamed as Derived which is inheriting the class named as Base1,Base2.

class  Derived(Base1, Base2):
    pass

Here we are creating a object of Drived class and callng the function of Base1 class and Base2 class.

d = Derived()   
d.method1() # Outputs "Base1 method"
d.method2() # Outputs "Base2 method"

3.Multi-level inheritance :-

In this a subclass inherits from a parent class, which in turn inherits from another parent class. In this case, the subclass inherits all the attributes and methods of both parent classes in the hierarchy.
Here is a example :-
Here we are creating a class named as Animal and passing a value in its constructor.

class  Animal:
    def  __init__(self, name):
        self.name = name

Here we are creating a class named as Mammal which is inheriting the properties of Animal class and inside this we are making a function named as speak

class  Mammal(Animal):
    def  speak(self):
        pass

Here we are creating a class named as Dog which is inheriting the properties of Mammal class, which is inherting the properties of Animal class and inside this we are making a function named as speak

class  Dog(Mammal):
    def  speak(self):
        print("Woof!")

Here we are creating a object Dog class and passing a value in its constructor and callinf the function and priting them.

dog = Dog("Rover")
print(dog.name) # output "Rover" 
dog.speak() # output "Woof!"

Polymorphism :-

It refers to the ability of objects of different classes to be used interchangeably, as long as they share a common interface or base class.
Here is a example :- Here we are creating a class named as Animal and creating a function named as speak inside it.

class Animal:
    def speak(self):
        print("The animal makes a sound")

Here we are creating a class named as Dog which is inherited by Animal class and creating a function named as speak inside it.

class Dog(Animal):
    def speak(self):
        print("The dog barks")

Here we are creating a class named as Cat which is inherited by Animal class and creating a function named as speak inside it.

class Cat(Animal):
    def speak(self):
        print("The cat meows")

Here we are creating objects of class Dog,Cat named as dog ,cat and callingg the speak function

dog = Dog()
cat = Cat()
dog.speak()  # Outputs "The dog barks"
cat.speak()  # Outputs "The cat meows"

Encapsulation :-

It refers to the practice of hiding the internal details of an object and providing a public interface for interacting with the object. Encapsulation is achieved through access modifiers, which control the visibility and accessibility of an object's attributes and methods

Here is a example :-

class People:
    def __init__(self, name, gender):
        self._name = name
        self._gender = gender

    def get_name(self):
        return self._name

    def set_name(self, name):
        self._name = name

person1 = People("Ankit", "Male")
print(person1.get_name())  # output: Ankit
person1.set_name("Aman")
print(person1.get_name())  # output: Aman

Abstraction :-

It refers to the practice of hiding the complexity of an object and exposing only the essential features or interface that the user needs to interact with the object. Abstraction is achieved through abstract classes and abstract methods, which define a common interface for a group of related classes.
Here is the example :-

from abc import ABC, abstractmethod

class People(ABC):
    def __init__(self, name, gender):
        self.name = name
        self.gender = gender

    @abstractmethod
    def speak(self):
        pass

class Male(Animal):
    def speak(self):
        print("Hello")

class Female(Animal):
    def speak(self):
        print("Hi")

male1 = Male("Ankit", "Male")
female1 = Female("Sona", "Female")

male1.speak()  # output: Hello
female1.speak()  # output: Hi

String Methods of Python

Ankit Dagar — Thu, 11 May 2023 04:53:46 +0000

1.capitalize() :-

It converts the first character to upper case
example:-

>>> astring='ankit'
>>> astring.capitalize()
'Ankit'

2.count() :-

It gives the number of times a specified value occurs in a string
example:-

>>> astring='ankit dagar'
>>> astring.count(a)
>>> astring.count('a')
3

3.endswith():-

It gives true if the string ends with the specified value
example:-

>>> filename = "example.txt"
>>> filename.endswith(".txt")
True

4.find() :-

It searches the string for a specified value and returns the position of where it was found

>>> astring='ankit dagar'
>>> astring.find('k')
2

5.format() :-

It formats the specified values in a string

>>> name = 'Ankit'
>>> age=22
>>> result="my name is {},i am {} year old".format(name,age)
>>> result
'my name is Ankit,i am 22 year old'

6.index() :-

It searches the string for a specified value and returns the position of where it was found
example:-

>>> astring='ANKIT DAGAR'
>>>> astring.index('K')
2

7.isdecimal() :-

It gives True if all characters in the string are decimals

>>> astring='ANKIT DAGAR'
>>>> astring.isdecimal()
False

8.isdigit() :-

It gives True if all characters in the string are digits

>>> astring='ANKIT DAGAR'
>>> astring.isdigit()
False

9.islower() :-

It gives True if all characters in the string are lower case

>>> astring='ANKIT DAGAR'
>>> astring.islower()
False

10.isnumeric() :-

It gives True if all characters in the string are numeric

>>> astring='ANKIT DAGAR'
>>> astring.isnumeric()
False

11.isspace() :-

It gives True if all characters in the string are whitespaces

>>> astring='ANKIT DAGAR'
>>> astring.isspace()
False

12.istitle() :-

It gives True if the string follows the rules of a title

>>> astring='ANKIT DAGAR'
>>> astring.istitle()
False

13.isupper() :-

It gives True if all characters in the string are upper case

>>> astring='ANKIT DAGAR'
>>> astring.isupper()
True

14.lower() :-

It converts a string into lower case

>>> astring='ANKIT DAGAR'
>>> astring.lower()
'ankit dagar'

References

GeeksforGeeks
W3Schools
freecodecamp

Dictionary Methods of Python

Ankit Dagar — Thu, 11 May 2023 04:29:56 +0000

1. items() :-

It gives a list containing a tuple for each key value pair
example:-

>>> thisdict = {
...   "brand": "Ford",
...   "model": "Mustang",
...   "year": 1964
... }
>>> thisdict.items()
dict_items([('brand', 'Ford'), ('model', 'Mustang'), ('year', 1964)])

2. clear() :-

It removes all the elements from the dictionary
example:-

>>> thisdict.clear()
>>> thisdict
{}

3. copy() :-

It gives a copy of the dictionary
example:-

>>> newdict=thisdict.copy()
>>> newdict
{'brand': 'Ford', 'model': 'Mustang', 'year': 1964}

4. fromkeys() :-

it is used to create a new dictionary with keys from the old dictionary list .
example:-

>>> newDict=dict.fromkeys(thisdict,'ankit')
>>> newDict
{'brand': 'ankit', 'model': 'ankit', 'year': 'ankit'}

5. get() :-

It gives the value of the specified key
example:-

>>> newDict.get('brand')
'ankit'

6. keys() :-

It gives a list containing the dictionary's keys
example:-

>>> newDict.keys()
dict_keys(['brand', 'model', 'year'])

7. pop() :-

It removes the element with the specified key
example:-

>>> newdict.pop('brand')
'Ford'
>>> newdict
{'model': 'Mustang', 'year': 1964}

8. popitem() :-

It removes the last inserted key-value pair
example:-

>>> newdict.popitem()
('year', 1964)
>>> newdict
{'model': 'Mustang'}

9. setdefault() :-

It gives the value of the specified key. If the key does not exist: insert the key, with the specified value
example:-

>>> newdict.setdefault('year',1964)
1964
>>> newdict
{'model': 'Mustang', 'year': 1964}

10. update() :-

It updates the dictionary with the specified key-value pairs
example:-

>>> fruits1 = {'apple': 2, 'banana': 3}
>>> fruits2 = {'orange': 4, 'pear': 1}
>>> fruits1.update(fruits2)
>>> fruits1
{'apple': 2, 'banana': 3, 'orange': 4, 'pear': 1}

11. values() :-

It returns a list of all the values in the dictionary
example:-

>>> fruits1
{'apple': 2, 'banana': 3, 'orange': 4, 'pear': 1}
>>> fruits1.values()
dict_values([2, 3, 4, 1])

References

GeeksforGeeks
W3Schools
freecodecamp

List Methods of Python

Ankit Dagar — Wed, 10 May 2023 15:54:34 +0000

1. append() :-

It add the element in the last of the list.
example:-

>>> alist=[]
>>> alist.append(1)
>>> alist.append(2)
>>> alist.append(3)
>>> alist
[1, 2, 3]

2. clear() :-

It delete all the elements of the list.
example:

>>> alist.clear()
>>> alist
[]

3. copy() :-

It returns a copy of a list.
example:-

>>> alist.append(1)
>>> alist.append(2)
>>> alist.append(3)
>>> blist=[]
>>> blist=alist.copy()
>>> blist
[1, 2, 3]

4. count() :-

it counts the number of a elements present in a list
example:

>>> blist=[1, 2, 3, 1]
>>> blist.count(1)
2

5. extend() :-

It add the elements of a list in the end of a new list.
example:

>>> alist.extend(blist)
>>> alist
[1, 2, 3, 1, 2, 3]

6. index() :-

It returns the index of a first occurance of a specified value in a list.
example:

>>> alist.index(2)
1

7. insert() :-

It insert a element at a specified index position.
example:

>>> alist.insert(-1,4)
>>> alist
[1, 2, 3, 1, 2, 4, 3]

8. pop() :-

It removes the last element or the element on the given index.
example:

>>> alist.pop(-2)
4
>>> alist
[1, 2, 3, 1, 2, 3]
>>> alist.pop()
3
>>> alist
[1, 2, 3, 1, 2]

9. remove() :

It removes the first occurance of the specified element in a list.
example:

>>> alist.remove(3)
>>> alist
[1, 2, 1, 2, 3]

10. reverse() :-

It reverses the order of the list.
example:

>>> alist.reverse()
>>> alist
[2, 1, 3, 2, 1]

11. sort() :-

It sorts the order of a list.
example:

>>>alist.sort()
>>>alist
[1, 1, 2, 2, 3]

References

GeeksforGeeks
W3Schools
freecodecamp