<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ankit Kumar</title>
    <description>The latest articles on DEV Community by Ankit Kumar (@codebyank).</description>
    <link>https://dev.to/codebyank</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1080190%2F1ab82230-531a-4820-86ab-6d282c33d00a.jpeg</url>
      <title>DEV Community: Ankit Kumar</title>
      <link>https://dev.to/codebyank</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/codebyank"/>
    <language>en</language>
    <item>
      <title>Django Framework</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Thu, 15 Jun 2023 13:00:36 +0000</pubDate>
      <link>https://dev.to/codebyank/django-framework-21d9</link>
      <guid>https://dev.to/codebyank/django-framework-21d9</guid>
      <description>&lt;h3&gt;
  
  
  What is secret key?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The Django secret key is used to provide cryptographic signing. This key is mostly used to sign session cookies. If one were to have this key, they would be able to modify the cookies sent by the application.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;How to create example:-&lt;br&gt;
Go to python shell:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; python manage.py shell
  from django.core.management.utils import
 get_random_secret_key

secret_key = get_random_secret_key()
print(secret_key) //output
e+qpb)x^mjtdbr!gc8@81+drn6gz*r)in=pu0=j8s7o3b@m9$z
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  MVT Architecture
&lt;/h3&gt;

&lt;p&gt;In Django, the MVT (Model-View-Template) architecture is a design pattern that separates the components of an application to handle different responsibilities. Here's an overview of the MVT architecture in Django:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Model&lt;/strong&gt;: The Model represents the data structure and handles the interactions with the database. It defines the data schema, relationships between different data entities, and provides methods for querying and manipulating the data. In Django, models are typically defined as Python classes that inherit from the &lt;code&gt;django.db.models.Model&lt;/code&gt; class.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;View&lt;/strong&gt;: The View defines the logic behind handling and processing user requests. It receives requests from the user, interacts with the appropriate models to retrieve or manipulate data, and prepares the necessary data to be rendered by the template. In Django, views are Python functions or classes that receive HTTP requests and return HTTP responses.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Template&lt;/strong&gt;: The Template represents the presentation layer and defines how the data should be rendered and displayed to the user. It uses HTML, along with Django's template language, to structure the content and dynamically insert data retrieved from the views. Templates can include variables, loops, conditionals, and other template tags to control the rendering process.&lt;br&gt;
The flow of data in the MVT architecture follows this pattern: User Request -&amp;gt; URL Mapping -&amp;gt; View -&amp;gt; Model -&amp;gt; Template -&amp;gt; Response&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Setting File
&lt;/h3&gt;

&lt;p&gt;Inside the &lt;code&gt;settings.py&lt;/code&gt; file in a Django project, you'll find various configurations and settings that define the behavior and functionality of the project.&lt;/p&gt;

&lt;p&gt;Here are some key aspects commonly found in the &lt;code&gt;settings.py&lt;/code&gt; file:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Debug mode&lt;/strong&gt;: The &lt;code&gt;DEBUG&lt;/code&gt; setting controls whether the project runs in debug mode or not. Debug mode provides detailed error messages and tracebacks for easier debugging during development.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Allowed hosts&lt;/strong&gt;: The &lt;code&gt;ALLOWED_HOSTS&lt;/code&gt; setting specifies the valid hosts/domain names that the Django project can serve. It is a security measure to prevent HTTP Host header attacks. You should specify the appropriate domain names or IP addresses here.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Database configuration&lt;/strong&gt;: The &lt;code&gt;DATABASES&lt;/code&gt; setting defines the configuration details for connecting to the project's database. It includes the database engine, name, host, port, username, password, and other relevant options. Django supports various database backends such as SQLite, MySQL, PostgreSQL, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Installed apps&lt;/strong&gt;: The &lt;code&gt;INSTALLED_APPS&lt;/code&gt; setting lists the Django applications installed in the project. These apps may come with Django or be custom-built for the project. Django uses this setting to discover and include the necessary app-specific configurations and URLs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Middleware&lt;/strong&gt;: The &lt;code&gt;MIDDLEWARE&lt;/code&gt; setting specifies a list of middleware classes that Django applies to each request/response cycle. Middleware components can perform various tasks like authentication, session management, CSRF protection, and more. You can customize the order and add/remove middleware based on project requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Static and media files&lt;/strong&gt;: The &lt;code&gt;STATIC_URL&lt;/code&gt;, &lt;code&gt;STATIC_ROOT&lt;/code&gt;, &lt;code&gt;STATICFILES_DIRS&lt;/code&gt;, &lt;code&gt;MEDIA_URL&lt;/code&gt;, and &lt;code&gt;MEDIA_ROOT&lt;/code&gt; settings handle the configuration for serving and managing static files (e.g., CSS, JavaScript) and media files (e.g., user-uploaded images). These settings define the URLs, storage locations, and other related options.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Template configuration&lt;/strong&gt;: The &lt;code&gt;TEMPLATES&lt;/code&gt; setting defines the configuration for template rendering in the project. It includes options like template engines, template directories, context processors, and other template-related settings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internationalization and localization&lt;/strong&gt;: The &lt;code&gt;LANGUAGE_CODE&lt;/code&gt; and &lt;code&gt;TIME_ZONE&lt;/code&gt; settings determine the default language and time zone for the project. Django supports multilingual websites and provides tools for internationalization (i18n) and localization (l10n).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Authentication and authorization&lt;/strong&gt;: The &lt;code&gt;AUTHENTICATION_BACKENDS&lt;/code&gt;, &lt;code&gt;AUTH_USER_MODEL&lt;/code&gt;, and other related settings handle user authentication and authorization. They define the authentication backends, the custom user model (if any), password hashing algorithms, login/logout URLs, and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Logging&lt;/strong&gt;: The &lt;code&gt;LOGGING&lt;/code&gt; setting configures the logging behavior of the Django application. It defines loggers, handlers, formatters, and log levels to control how logs are captured, processed, and outputted.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Application File
&lt;/h3&gt;

&lt;p&gt;In a Django project, application files are components that encapsulate specific functionality and can be reused across different projects. Each application typically has its own set of files and directories that work together to provide a specific feature or functionality within the project. Here's an overview of the main files commonly found in a Django application:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;models.py&lt;/strong&gt;: This file contains the definition of the application's data models using Django's Object-Relational Mapping (ORM) system. Models define the structure and behavior of database tables, allowing you to interact with data in a Pythonic way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;views.py&lt;/strong&gt;: The &lt;code&gt;views.py&lt;/code&gt; file contains the view functions or classes that handle HTTP requests and generate responses. Views receive requests, interact with models and other components, and render templates or return JSON/XML responses.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;urls.py&lt;/strong&gt;: The &lt;code&gt;urls.py&lt;/code&gt; file defines the URL patterns or routes for the application. It maps specific URLs to corresponding view functions or classes, allowing you to specify how requests should be handled and which views should be invoked.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;forms.py&lt;/strong&gt;: This file contains Django forms that handle data validation and rendering HTML forms. Forms define the fields, validation rules, and behavior of input forms used in the application. They can simplify form handling and data processing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;admin.py&lt;/strong&gt;: The &lt;code&gt;admin.py&lt;/code&gt; file allows you to register models to be managed through Django's built-in administration interface. It lets you define how models are displayed, filtered, and edited in the admin interface, providing a convenient way to manage data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;tests.py&lt;/strong&gt;: This file holds the test cases for the application. Django encourages writing automated tests to ensure the correctness and reliability of the application's functionality. Test cases can be created to validate models, views, forms, and other components.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;apps.py&lt;/strong&gt;: The &lt;code&gt;apps.py&lt;/code&gt; file provides application-specific configuration. It allows you to define metadata for the application, specify application-level signals, and perform application-specific initialization tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Template files&lt;/strong&gt;: It is not recommended to write html code inside python script (views.py file) because:&lt;br&gt;
1) It reduces readability because Python code mixed with html code&lt;br&gt;
2) No seperation of roles. Python developer has to concentrate on both python code and&lt;br&gt;
HTML Code.&lt;br&gt;
3) It does not promote reusability of code&lt;br&gt;
We can overcome these problems by seperating html code into a seperate html file.This&lt;br&gt;
html file is nothing but template.&lt;br&gt;
From the Python file (views.py file) we can use these templates based on our&lt;br&gt;
requirement&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Static files&lt;/strong&gt;:  Up to this just we injected normal text data into template by using template tags.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;But sometimes our requirement is to insert static files like images,css files etc inside template file.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Migrations&lt;/strong&gt;: As the application's data models evolve, Django uses migrations to manage changes to the database schema. Migration files are automatically created and stored in a &lt;code&gt;migrations&lt;/code&gt; directory within each application. They track and apply database schema changes.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Project Files
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;settings.py&lt;/strong&gt;: The main settings file in a Django project. It contains configuration options that apply to the entire project, such as database settings, middleware, installed apps, static and media file paths, and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;urls.py&lt;/strong&gt;: The URL configuration file that maps URL patterns to corresponding views. It determines how URLs are processed and which view function or class is invoked for a particular URL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;wsgi.py&lt;/strong&gt;: The WSGI (Web Server Gateway Interface) file that acts as the entry point for the WSGI server to interact with the Django application. It sets up the Django application's environment and provides a callable application object.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;manage.py&lt;/strong&gt;: A command-line utility script used for various management tasks in a Django project. It allows you to run development server, create database tables, execute custom management commands, perform migrations, and more.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  CSRF
&lt;/h3&gt;

&lt;p&gt;CSRF stands for Cross-Site Request Forgery. It is a type of attack where an attacker tricks a user into performing unintended actions on a website without their knowledge or consent. The attack takes advantage of the trust between the user's browser and the target website, exploiting the fact that the browser automatically includes any relevant authentication cookies in requests to the website.&lt;/p&gt;

&lt;p&gt;Here's how a CSRF attack typically works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; The attacker creates a malicious website or injects malicious code into a legitimate website.&lt;/li&gt;
&lt;li&gt; The user visits the malicious website or the compromised legitimate website while authenticated to the target website.&lt;/li&gt;
&lt;li&gt; The malicious website or code triggers a request to the target website on behalf of the user, using the user's authentication cookies.&lt;/li&gt;
&lt;li&gt; The target website receives the forged request, assuming it originated from the authenticated user, and performs the unintended action.&lt;/li&gt;
&lt;li&gt; The user's account or data on the target website may be compromised or modified without their knowledge.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To prevent CSRF attacks, web applications use CSRF protection mechanisms, with the most common method being the usage of CSRF tokens. CSRF tokens are random, unique tokens generated by the server and embedded in the web forms or requests of the application.&lt;/p&gt;

&lt;p&gt;Here's how CSRF tokens work:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; When the user loads a form or logs in, the server generates a CSRF token and associates it with the user's session.&lt;/li&gt;
&lt;li&gt; The CSRF token is then embedded in the form as a hidden input field or included as a header in subsequent requests.&lt;/li&gt;
&lt;li&gt; When the user submits the form or performs an action, the server verifies that the received CSRF token matches the one associated with the user's session.&lt;/li&gt;
&lt;li&gt; If the CSRF token is valid and matches, the request is considered legitimate, and the action is performed. Otherwise, the request is rejected.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  ORM
&lt;/h3&gt;

&lt;p&gt;Django's ORM (Object-Relational Mapping) is a powerful feature that allows developers to interact with the database using Python code and objects, rather than writing raw SQL queries.&lt;/p&gt;

&lt;p&gt;Here are commonly used methods and operations provided by Django's ORM:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;objects.all()&lt;/code&gt;: Retrieve all objects of a model from the database.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.get(**kwargs)&lt;/code&gt;: Retrieve a single object that matches the specified filter criteria.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.filter(**kwargs)&lt;/code&gt;: Retrieve a QuerySet of objects that match the specified filter criteria.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.exclude(**kwargs)&lt;/code&gt;: Exclude objects that match the specified filter criteria.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.create(**kwargs)&lt;/code&gt;: Create a new object and save it to the database.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;object.save()&lt;/code&gt;: Save changes to an existing object to the database.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;object.delete()&lt;/code&gt;: Delete an object from the database.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.count()&lt;/code&gt;: Count the number of objects that match the specified filter criteria.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.order_by(*fields)&lt;/code&gt;: Sort the QuerySet by one or more fields.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.values(*fields)&lt;/code&gt;: Retrieve a QuerySet of dictionaries containing specific fields' values.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.annotate(*args, **kwargs)&lt;/code&gt;: Perform aggregations or annotate additional fields in the QuerySet.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;object.field&lt;/code&gt;: Access a specific field value of an object.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.distinct()&lt;/code&gt;: Return a QuerySet with unique results.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.exists()&lt;/code&gt;: Check if at least one object exists that matches the specified filter criteria.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.update(**kwargs)&lt;/code&gt;: Update one or more fields of multiple objects in a single database query.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.bulk_create(obj_list)&lt;/code&gt;: Create multiple objects in a single database query.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.select_related(*fields)&lt;/code&gt;: Retrieve related objects in a single database query to optimize performance.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.defer(*fields)&lt;/code&gt;: Delay loading of specified fields until they are accessed.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.only(*fields)&lt;/code&gt;: Restrict the fields retrieved from the database to improve performance.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;objects.values_list(*fields)&lt;/code&gt;: Retrieve a QuerySet of tuples containing specific fields' values.
Examples:-
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    # Import necessary Django modules
    import os
    import django

    # Set up Django environment
    os.environ.setdefault('DJANGO_SETTINGS_MODULE',  'your_project.settings')
    django.setup()

    # Import your Django models
    from your_app.models import Person

    # Create a new person
    person = Person(name='John Doe', age=30)
    person.save()

    # Retrieve all persons from the database
    persons = Person.objects.all()

    # Print the names and ages of all persons
    for person in persons:
        print(person.name, person.age)

    # Filter persons based on age
    persons_filtered = Person.objects.filter(age__gt=25)

    # Print the names and ages of filtered persons
    for person in persons_filtered:
        print(person.name, person.age)

    # Update a person's age
    person_to_update = Person.objects.get(name='John Doe')
    person_to_update.age = 35
    person_to_update.save()

    # Delete a person
    person_to_delete = Person.objects.get(name='John Doe')
    person_to_delete.delete()

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/django-tutorial/"&gt;GFG&lt;/a&gt;&lt;br&gt;
&lt;a href="https://docs.djangoproject.com/en/4.2/"&gt;DOCUMENTATIONS&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>django</category>
      <category>programming</category>
      <category>api</category>
    </item>
    <item>
      <title>JS Asynchronous-Technical Paper</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Thu, 01 Jun 2023 09:17:51 +0000</pubDate>
      <link>https://dev.to/codebyank/js-asynchronous-technical-paper-25lo</link>
      <guid>https://dev.to/codebyank/js-asynchronous-technical-paper-25lo</guid>
      <description>&lt;h3&gt;
  
  
  Callbacks
&lt;/h3&gt;

&lt;p&gt;a callback function is a function that is passed as an argument to another function and is intended to be called later, often after an asynchronous operation or a certain event occurs. Callbacks are a fundamental concept in JavaScript for handling asynchronous code execution.&lt;br&gt;
Example:-&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function fetchData(callback) {
  setTimeout(() =&amp;gt; {
    const data = 'Sample data';
    callback(data);
  }, 2000);
}

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

console.log('Start');
fetchData(processData);
console.log('End');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  Promises
&lt;/h3&gt;

&lt;p&gt;Promises are a feature introduced in ECMAScript 2015 (ES6) that provide a more structured and readable way to handle asynchronous operations in JavaScript. Promises represent the eventual completion (or failure) of an asynchronous operation and allow you to chain multiple asynchronous operations together.&lt;br&gt;
Example:-&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    function fetchData() {
  return new Promise((resolve, reject) =&amp;gt; {
    setTimeout(() =&amp;gt; {
      const data = 'Sample data';
      resolve(data); // Resolving the promise with the fetched data
      // If there's an error, you can reject the promise instead:
      // reject(new Error('Failed to fetch data'));
    }, 2000);
  });
}

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

console.log('Start');
fetchData()
  .then(processData)
  .catch(error =&amp;gt; {
    console.error('Error:', error.message);
  })
  .finally(() =&amp;gt; {
    console.log('Cleanup');
  });
console.log('End');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Here's how the execution flows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; "Start" is logged to the console.&lt;/li&gt;
&lt;li&gt; The &lt;code&gt;fetchData&lt;/code&gt; function is called, and a new Promise is created.&lt;/li&gt;
&lt;li&gt; The asynchronous operation starts with a timer set for 2000 milliseconds.&lt;/li&gt;
&lt;li&gt; "End" is logged to the console.&lt;/li&gt;
&lt;li&gt; After 2000 milliseconds, the timer expires, and the promise is resolved with the fetched data.&lt;/li&gt;
&lt;li&gt; The &lt;code&gt;then&lt;/code&gt; method is called on the promise, and the &lt;code&gt;processData&lt;/code&gt; function is passed as the callback.&lt;/li&gt;
&lt;li&gt; The &lt;code&gt;processData&lt;/code&gt; function is called with the fetched data.&lt;/li&gt;
&lt;li&gt; "Processing data: Sample data" is logged to the console.&lt;/li&gt;
&lt;li&gt; The &lt;code&gt;finally&lt;/code&gt; method is called, and "Cleanup" is logged to the console.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Code Control
&lt;/h3&gt;

&lt;p&gt;the event loop plays a crucial role in managing the control flow of asynchronous code execution. It ensures that tasks, including callbacks and events, are executed in a specific order while keeping the JavaScript runtime single-threaded.&lt;br&gt;
 The event loop follows a cycle that consists of the following phases:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Handle Synchronous Code&lt;/strong&gt;: The event loop starts by executing any synchronous code present in the call stack. This includes executing functions, operations, and statements that are not asynchronous.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Handle Asynchronous Operations&lt;/strong&gt;: After the synchronous code is executed, the event loop checks if there are any asynchronous operations that have completed. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If there are completed asynchronous operations, their associated callbacks or promises are added to the callback queue or microtask queue (depending on the type of task).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The callbacks or promises in the queues are not executed immediately; they are waiting for the call stack to be empty.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Event Loop Iteration&lt;/strong&gt;: If the call stack is empty, the event loop starts iterating to handle the callbacks and promises waiting in the queues.&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The event loop checks the microtask queue first. Microtasks generally include promise callbacks, mutation observers, or other high-priority tasks. It processes all the microtasks present in the queue until it is empty.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;After processing all the microtasks, the event loop moves to the callback queue and starts executing the callbacks. These could be timer callbacks, event handlers, or other lower-priority tasks. It takes one callback from the queue and executes it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The event loop repeats this process, continuously checking and executing tasks from the microtask queue and the callback queue in an alternating manner.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/js/js_asynchronous.asp"&gt;W3SCHOOL&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/async-await-function-in-javascript/"&gt;GFG&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JAVASCRIPT Technical Paper</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Mon, 29 May 2023 10:59:40 +0000</pubDate>
      <link>https://dev.to/codebyank/javascript-technical-paper-1nbg</link>
      <guid>https://dev.to/codebyank/javascript-technical-paper-1nbg</guid>
      <description>&lt;p&gt;JavaScript is a high-level, interpreted programming language primarily used for creating dynamic and interactive web pages.&lt;/p&gt;

&lt;h3&gt;
  
  
  Loop
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;for&lt;/strong&gt; :- The &lt;code&gt;for&lt;/code&gt; loop is a traditional loop structure that repeats a block of code a specific number of times. It consists of three parts: initialization, condition, and increment/decrement.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;for (let i = 0; i &amp;lt; 5; i++) {
  console.log(i);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;forEach&lt;/strong&gt; :- The &lt;code&gt;forEach&lt;/code&gt; loop is a method available on arrays that iterates over each element and executes a callback function for each element.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;for..in&lt;/strong&gt; :- The &lt;code&gt;for...in&lt;/code&gt; loop iterates over the properties of an object. It allows you to loop through the enumerable properties of an object.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const person = {
name: "John",
age: 30,
city: "New York"
};
for (let key in person) {
  console.log(key + ": " + person[key]);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;for..of&lt;/strong&gt; :- The &lt;code&gt;for...of&lt;/code&gt; loop iterates over iterable objects, such as arrays or strings. It allows you to loop through each element of the iterable.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;while&lt;/strong&gt; :- The &lt;code&gt;while&lt;/code&gt; loop executes a block of code repeatedly as long as a specified condition is true. It does not require an explicit counter.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let i = 0;
while (i &amp;lt; 5) {
  console.log(i);
  i++;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Mutable and Immutable Methods (in strings and arrays)
&lt;/h3&gt;

&lt;p&gt;Mutable methods modify the original string or array.  Immutable methods return a new string or array, leaving the original unchanged.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Strings&lt;/strong&gt;:&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Mutable Methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;concat&lt;/code&gt;: Concatenates two or more strings and returns a new string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;slice&lt;/code&gt;: Extracts a portion of the string and returns a new string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;replace&lt;/code&gt;: Replaces specified substring(s) with a new substring and returns a new string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;toUpperCase&lt;/code&gt; and &lt;code&gt;toLowerCase&lt;/code&gt;: Converts the case of the string and returns a new string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;trim&lt;/code&gt; and other trimming methods: Removes whitespace characters from the string and returns a new string.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Immutable Methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;charAt&lt;/code&gt; and &lt;code&gt;charCodeAt&lt;/code&gt;: Accesses a character or its Unicode value at a specified index.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;substring&lt;/code&gt; and &lt;code&gt;substr&lt;/code&gt;: Extracts a substring from the original string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;indexOf&lt;/code&gt; and &lt;code&gt;lastIndexOf&lt;/code&gt;: Searches for a substring within the string and returns its index.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Array&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Mutable Methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;push&lt;/code&gt; and &lt;code&gt;pop&lt;/code&gt;: Add and remove elements from the end of an array.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;shift&lt;/code&gt; and &lt;code&gt;unshift&lt;/code&gt;: Add and remove elements from the beginning of an array.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;splice&lt;/code&gt;: Modifies an array by adding, removing, or replacing elements at specified positions.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;reverse&lt;/code&gt;: Reverses the order of elements in an array.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;sort&lt;/code&gt;: Sorts the elements of an array in place.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Immutable Methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;concat&lt;/code&gt;: Concatenates two or more arrays and returns a new array.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;slice&lt;/code&gt;: Extracts a portion of an array and returns a new array.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;filter&lt;/code&gt;: Creates a new array with elements that satisfy a filtering condition.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;map&lt;/code&gt;: Creates a new array by applying a transformation function to each element.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Pass by Reference and Pass by Value
&lt;/h3&gt;

&lt;p&gt;It provides an in-depth analysis of how JavaScript handles variable assignment and function parameter passing.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pass by Value&lt;/strong&gt;:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In pass by value, a copy of the value is passed to a function or assigned to a new variable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Changes made to the copied value do not affect the original value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Primitive data types (numbers, booleans, strings) are passed by value in JavaScript.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let num = 10;

function increment(num) {
  num += 1;
  console.log(num); // Output: 11
}

increment(num);
console.log(num); // Output: 10
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pass by Reference&lt;/strong&gt;:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In pass by reference, a reference to the original value is passed to a function or assigned to a new variable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Changes made to the referenced value affect the original value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Objects and arrays are passed by reference in JavaScript.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    let arr = [1, 2, 3];

function modifyArray(arr) {
  arr.push(4);
  console.log(arr); // Output: [1, 2, 3, 4]
}

modifyArray(arr);
console.log(arr); // Output: [1, 2, 3, 4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Array Methods:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Basics&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.pop&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;pop&lt;/code&gt; method removes the last element from an array and returns that element.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fruits = ["apple", "banana", "orange"];
const removedFruit = fruits.pop();
console.log(fruits); // Output: ["apple", "banana"]
console.log(removedFruit); // Output: "orange"
&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.push&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;push&lt;/code&gt; method adds one or more elements to the end of an array and returns the new length of the array.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    const fruits = ["apple", "banana"];
    const newLength = fruits.push("orange", "grape");
    console.log(fruits); // Output: ["apple", "banana",   "orange", "grape"]
    console.log(newLength); // Output: 4
&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.concat&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;concat&lt;/code&gt; method combines two or more arrays and returns a new array.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combinedArray = arr1.concat(arr2);
console.log(combinedArray); // Output: [1, 2, 3, 4, 5]

&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.slice&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;slice&lt;/code&gt; method extracts a portion of an array into a new array.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(1, 4);
console.log(slicedArray); // Output: [2, 3, 4]

&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.splice&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;splice&lt;/code&gt; method changes the content of an array by removing, replacing, or adding elements.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1, 2, 3, 4, 5];
const removedElements = numbers.splice(2, 2, 6, 7);
console.log(numbers); // Output: [1, 2, 6, 7, 5]
console.log(removedElements); // Output: [3, 4]

&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.join&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;join&lt;/code&gt; method combines all elements of an array into a string.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fruits = ["apple", "banana", "orange"];
const joinedString = fruits.join(", ");
console.log(joinedString); // Output: "apple, banana, orange"

&lt;/code&gt;&lt;/pre&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.flat&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;flat&lt;/code&gt; method creates a new array with all sub-array elements concatenated recursively up to the specified depth.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5,]

&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Findings&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.find:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;find&lt;/code&gt; method returns the first element in an array that satisfies a provided testing function.If a matching element is found, &lt;code&gt;find&lt;/code&gt; returns the element itself; otherwise, it returns &lt;code&gt;undefined&lt;/code&gt;.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
`   const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((num) =&amp;gt; num &amp;gt; 3);
console.log(foundNumber); // Output: 4` 
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Array.indexOf:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;indexOf&lt;/code&gt; method returns the first index at which a specified element is found in an array.&lt;br&gt;
If the element is not found, it returns -1.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const fruits = ["apple", "banana", "orange"];
const index = fruits.indexOf("banana");
console.log(index); // Output: 1` 
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Array.includes:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;includes&lt;/code&gt; method determines whether an array includes a certain element, returning a boolean value.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`const numbers = [1, 2, 3, 4, 5];
const includesThree = numbers.includes(3);
console.log(includesThree); // Output: true` 
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Array.findIndex:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;findIndex&lt;/code&gt; method returns the index of the first element in an array that satisfies a provided testing function.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
    `const numbers = [1, 2, 3, 4, 5];
    const index = numbers.findIndex((num) =&amp;gt; num &amp;gt; 3);
    console.log(index); // Output: 3` 
    ```

&lt;/code&gt;&lt;/pre&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Higher Order Function&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Array.forEach:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The &lt;code&gt;forEach&lt;/code&gt; method executes a provided callback function once for each element in an array.&lt;br&gt;
The callback function takes three arguments: the current element, the index, and the array itself.&lt;br&gt;
 Example:&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) =&amp;gt; {
  console.log(num * 2);
});
// Output:
// 2
// 4
// 6
// 8
// 10` 
&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array.filter:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;filter&lt;/code&gt; method creates a new array with all elements that pass a provided filtering function.&lt;br&gt;
The filtering function takes three arguments: the current element, the index, and the array itself.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;      `const numbers = [1, 2, 3, 4, 5];
    const evenNumbers = numbers.filter((num) =&amp;gt; num % 2 ===  0);
    console.log(evenNumbers); // Output: [2, 4]` 

&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Array.map:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;map&lt;/code&gt; method creates a new array with the results of calling a provided function on every element in the array.&lt;br&gt;
The mapping function takes three arguments: the current element, the index, and the array itself.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) =&amp;gt; num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]` 
&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Array.reduce:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;reduce&lt;/code&gt; method applies a provided function to reduce the array to a single value.&lt;br&gt;
The reducing function takes four arguments: the accumulator, the current element, the index, and the array itself.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    `const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduce((accumulator, num) =&amp;gt; accumulator + num, 0);
    console.log(sum); // Output: 15` 
    ```


- Array.sort:

     The `sort` method sorts the elements of an array in place and returns the sorted array.
  Example:


    ```
    `const fruits = ["banana", "apple", "orange"];
    fruits.sort();
    console.log(fruits); // Output: ["apple", "banana", "orange"]`
    ```

&lt;/code&gt;&lt;/pre&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Advance&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Array methods chaining&lt;/p&gt;

&lt;p&gt;By chaining array methods, the output of one method becomes the input for the next method in the chain. This allows you to perform multiple operations on an array in a single statement.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(num =&amp;gt; num % 2 === 0)  // Filter even numbers
  .map(num =&amp;gt; num * 2)           // Double each number
  .reduce((sum, num) =&amp;gt; sum + num, 0);  // Calculate the sum

console.log(result);  // 18
&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  String Methods
&lt;/h3&gt;

&lt;p&gt;Mutable Methods (Modify the original string):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;concat&lt;/code&gt;: Concatenates one or more strings with the original string and returns a new string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;slice&lt;/code&gt;: Extracts a portion of the string into a new string based on the specified indices.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;splice&lt;/code&gt;: Changes the content of the string by adding, removing, or replacing characters.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;replaceAll&lt;/code&gt;: Replaces all occurrences of a specified substring with another substring.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;toUpperCase&lt;/code&gt;: Converts the string to uppercase characters.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;toLowerCase&lt;/code&gt;: Converts the string to lowercase characters.&lt;br&gt;
Example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let char = str.charAt(0);
console.log(char); // Output: "H"

let substring = str.substring(0, 5);
console.log(substring); // Output: "Hello"

let replacedFirstOccurrence = str.replace("o", "x");
console.log(replacedFirstOccurrence); // Output: "Hxllo World"

let splittedArray = str.split(" ");
console.log(splittedArray); // Output: ["Hello", "World"]

let trimmedStr = str.trim();
console.log(trimmedStr); // Output: "Hello World"

let startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // Output: true

let endsWithWorld = str.endsWith("World");
console.log(endsWithWorld); // Output: true

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Immutable Methods (Create a new string without modifying the original string):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;charAt&lt;/code&gt;: Returns the character at a specified index in the string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;substring&lt;/code&gt;: Extracts a portion of the string into a new string based on the specified indices.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;replace&lt;/code&gt;: Replaces the first occurrence of a specified substring with another substring.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;split&lt;/code&gt;: Splits the string into an array of substrings based on a specified delimiter.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;trim&lt;/code&gt;: Removes whitespace from both ends of the string.&lt;/li&gt;
&lt;li&gt;  &lt;code&gt;startsWith&lt;/code&gt;: Checks if the string starts with a specified substring.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;endsWith&lt;/code&gt;: Checks if the string ends with a specified substring.&lt;br&gt;
Example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let char = str.charAt(0);
console.log(char); // Output: "H"

let substring = str.substring(0, 5);
console.log(substring); // Output: "Hello"

let replacedFirstOccurrence = str.replace("o", "x");
console.log(replacedFirstOccurrence); // Output: "Hxllo World"

let splittedArray = str.split(" ");
console.log(splittedArray); // Output: ["Hello", "World"]

let trimmedStr = str.trim();
console.log(trimmedStr); // Output: "Hello World"

let startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // Output: true

let endsWithWorld = str.endsWith("World");
console.log(endsWithWorld); // Output: true

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Object Methods and Opertions
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt; Adding or Modifying Key-Value Pairs:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;object[key] = value&lt;/code&gt;: Assigns a value to a specific key in the object. If the key already exists, the value will be updated; otherwise, a new key-value pair will be added.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Accessing Values:&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;object[key]&lt;/code&gt;: Retrieves the value associated with a specific key from the object.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt; Checking for Key Existence:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;key in object&lt;/code&gt;: Returns &lt;code&gt;true&lt;/code&gt; if the object contains the specified key; otherwise, returns &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;code&gt;object.hasOwnProperty(key)&lt;/code&gt;: Returns &lt;code&gt;true&lt;/code&gt; if the object directly contains the specified key (ignores keys from the prototype chain); otherwise, returns &lt;code&gt;false&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt; Removing Key-Value Pairs:&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;code&gt;delete object[key]&lt;/code&gt;: Removes the key-value pair associated with the specified key from the object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Getting All Keys:&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;code&gt;Object.keys(object)&lt;/code&gt;: Returns an array containing all the keys of the object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Getting All Values:&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;code&gt;Object.values(object)&lt;/code&gt;: Returns an array containing all the values of the object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Getting Key-Value Pairs as Arrays:&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;code&gt;Object.entries(object)&lt;/code&gt;: Returns an array of key-value pairs, where each pair is represented as an array &lt;code&gt;[key, value]&lt;/code&gt;.&lt;br&gt;
Example:-&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;```
const hashmap = {};

// Adding key-value pairs
hashmap["name"] = "John";
hashmap["age"] = 30;
hashmap["city"] = "New York";

// Accessing values
console.log(hashmap["name"]); // Output: John

// Checking for key existence
console.log("age" in hashmap); // Output: true
console.log(hashmap.hasOwnProperty("gender")); // Output: false

// Removing key-value pair
delete hashmap["city"];

// Getting all keys
const keys = Object.keys(hashmap);
console.log(keys); // Output: ['name', 'age']

// Getting all values
const values = Object.values(hashmap);
console.log(values); // Output: ['John', 30]

// Getting key-value pairs as arrays
const entries = Object.entries(hashmap);
console.log(entries); // Output: [['name', 'John'], ['age', 30]]
&lt;/code&gt;&lt;/pre&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
&lt;/code&gt;&lt;/pre&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Hoisting
&lt;/h3&gt;

&lt;p&gt;Hoisting is a mechanism in JavaScript that allows variable and function declarations to be moved to the top of their respective scopes during the compilation phase, before the code is executed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Only function declarations and variable declarations using &lt;code&gt;var&lt;/code&gt; are hoisted.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Variables declared with &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; are not hoisted.&lt;br&gt;
Example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(x); // Output: undefined
var x = 10;
console.log(x); // Output: 10

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Scopes
&lt;/h3&gt;

&lt;p&gt;Scopes in JavaScript determine the accessibility and visibility of variables, functions, and objects within your code. JavaScript has three main types of scopes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Global Scope:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;  The global scope is the outermost scope in JavaScript.&lt;/li&gt;
&lt;li&gt;  Variables declared in the global scope are accessible throughout the entire codebase, including within functions and other scopes.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  ```
   var globalVariable = "I'm in the global scope";

function globalFunction() {
  console.log(globalVariable); // Output: "I'm in the           global scope"
}

globalFunction();` 
  ```
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt; Function Scope:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;  Each function in JavaScript creates its own scope, known as the function scope.&lt;/li&gt;
&lt;li&gt;  Variables declared within a function are only accessible within that function and any nested functions.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  ```

    `function outerFunction() {
      var outerVariable = "I'm in the outer function";

      function innerFunction() {
        console.log(outerVariable); // Output: "I'm in the outer function"
      }

      innerFunction();
    }

    outerFunction();`
  ```
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt; Block Scope (Introduced in ES6):&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;  Block scope is created by curly braces (&lt;code&gt;{}&lt;/code&gt;) in statements such as &lt;code&gt;if&lt;/code&gt;, &lt;code&gt;for&lt;/code&gt;, &lt;code&gt;while&lt;/code&gt;, and &lt;code&gt;let&lt;/code&gt;/&lt;code&gt;const&lt;/code&gt; variable declarations.&lt;/li&gt;
&lt;li&gt;  Variables declared with &lt;code&gt;let&lt;/code&gt; and &lt;code&gt;const&lt;/code&gt; are block-scoped and are only accessible within the block where they are defined.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  ```
    `function blockScopeExample() {
      if (true) {
        let blockVariable = "I'm in the block scope";
        console.log(blockVariable); // Output: "I'm in the block scope"
      }

      console.log(blockVariable); // Output: ReferenceError: blockVariable is not defined
    }

    blockScopeExample();`
  ```
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Closures
&lt;/h3&gt;

&lt;p&gt;A closure is a function along with its preserved lexical environment.&lt;br&gt;
Here are some key points about closures:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Definition:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;  A closure is created when a nested function (inner function) accesses variables from its outer function, even after the outer function has completed execution.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The inner function "closes over" the variables it references, hence the term "closure".&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Lexical Scope:&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Closures rely on lexical scoping, which means that functions are executed using the variable scope they were defined in.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;The inner function has access to the variables in its own scope, the scope of the outer function, and the global scope.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Preserved Environment:&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Closures preserve the variables and their values at the time of creation, allowing the inner function to access and manipulate them even outside of the original scope.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;This allows for data encapsulation and private variables in JavaScript.&lt;br&gt;
Examples&lt;br&gt;
&lt;/p&gt;

&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    function outerFunction() {
      var outerVariable = 'I am from the outer function';

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

      return innerFunction;
        }

        var closure = outerFunction(); // Assigns the inner function to the closure variable
        closure(); // Invokes the inner function, which logs "I am from the outer function"

&lt;/code&gt;&lt;/pre&gt;




&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Higher Order Functions
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  Higher-order functions can accept other functions as parameters.&lt;/li&gt;
&lt;li&gt;  The passed function is often referred to as a "callback" function.&lt;/li&gt;
&lt;li&gt;  This allows for the implementation of customizable behavior or logic.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function higherOrder(callback) {
  callback();
}

function callbackFunction() {
  console.log("I'm a callback function");
}

higherOrder(callbackFunction); // Outputs: "I'm a callback function"

&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/javascript/"&gt;GFG&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.w3schools.com/js/js_object_definition.asp"&gt;W3SCHOOL&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>HTML - CSS Technical Paper</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Thu, 25 May 2023 07:16:13 +0000</pubDate>
      <link>https://dev.to/codebyank/html-css-technical-paper-1bpj</link>
      <guid>https://dev.to/codebyank/html-css-technical-paper-1bpj</guid>
      <description>&lt;h3&gt;
  
  
  Box Model
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Box Model Structure&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  The four components: content, padding, border, and margin&lt;/li&gt;
&lt;li&gt;  Hierarchical arrangement and relationships between the components&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Box Sizing Property&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Default value: content-box vs. alternative value: border-box&lt;/li&gt;
&lt;li&gt;  Impact on element sizing and available space&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Content Area&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Actual content and its dimensions within the box&lt;/li&gt;
&lt;li&gt;  Affected by padding, border, and box sizing property&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Padding&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Space between the content and the border&lt;/li&gt;
&lt;li&gt;  Control over padding dimensions and individual sides&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Border&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Visual boundary surrounding the content and padding&lt;/li&gt;
&lt;li&gt;  Customizable properties like width, style, and color&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Margin&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Space outside the border, creating gaps between elements&lt;/li&gt;
&lt;li&gt;  Control over margin dimensions and collapsing margins&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Box Model and Layout&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Impact on element positioning and flow within the document&lt;/li&gt;
&lt;li&gt;  Understanding the total space occupied by an element&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Box Model Adjustments&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Overriding default box model behavior using CSS properties&lt;/li&gt;
&lt;li&gt;  Fine-tuning box dimensions and spacing&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Inline vs Block elements
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Differences&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Box Model and Inline Elements&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Inline elements occupy space only around their content
-   Lack of explicit dimensions like width and height
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Box Model and Block Elements&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Block elements occupy the full width of their parent container by default
-   Ability to specify dimensions using width and height properties
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Inline elements&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;: A generic inline container used for styling or manipulating specific sections of text.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;: Represents an anchor or hyperlink, allowing users to navigate to another page or location.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;: Emphasizes or highlights text by rendering it in italicized format.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;: Indicates strong importance, rendering the text in bold.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;p&amp;gt;
My mother has  
&amp;lt;span style="color:blue;font-weight:bold;"&amp;gt;blue&amp;lt;/span&amp;gt;  
eyes and my father has  &amp;lt;span style="color:darkolivegreen;font-weight:bold;"&amp;gt;dark green&amp;lt;/span&amp;gt;  eyes.
&amp;lt;/p&amp;gt;  
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Block elements&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;: A generic block-level container used for grouping and structuring content.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;: Represents a paragraph of text, typically with a line break before and after.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;: Heading elements used to define different levels of headings, with &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; being the highest level.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;: Unordered list, displaying a list of items without any particular order.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt;: Ordered list, displaying a numbered or ordered list of items.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;: List item element used within &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; to represent individual items.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt;: Creates a table for displaying tabular data, including rows and columns.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt;: Represents an interactive form, containing input fields, checkboxes, buttons, etc.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt;: Defines a section within a document, often used for grouping related content.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt;: Represents the introductory content or a container for heading elements.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;: Represents the footer or the closing content of a document or section.
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div style="background-color:black;color:white;padding:20px;"&amp;gt;  
&amp;lt;h2&amp;gt;London&amp;lt;/h2&amp;gt;  
&amp;lt;p&amp;gt;
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
&amp;lt;/p&amp;gt;  
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Common CSS structural classes
&lt;/h3&gt;

&lt;p&gt;CSS structural classes for targeting child elements allow you to apply specific styles to elements that are direct children of a particular parent element.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;.parent .child&lt;/code&gt;: Selects any descendant element with the class "child" within a parent element, regardless of its level of nesting.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:first-child&lt;/code&gt;: Selects the first child element within a parent element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:last-child&lt;/code&gt;: Selects the last child element within a parent element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:nth-child(n)&lt;/code&gt;: Selects the nth child element within a parent element, where "n" can be a specific number, a keyword (e.g., "even" or "odd"), or a formula.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:first-of-type&lt;/code&gt;: Selects the first element of a specific type within a parent element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:last-of-type&lt;/code&gt;: Selects the last element of a specific type within a parent element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:nth-of-type(n)&lt;/code&gt;: Selects the nth element of a specific type within a parent element, using the same options as &lt;code&gt;:nth-child&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:first-child:nth-last-child(2)&lt;/code&gt;: Selects the second-to-last child element within a parent element when it is also the first child.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.parent:only-child&lt;/code&gt;: Selects a child element that is the only child of its parent.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Common CSS syling classes
&lt;/h3&gt;

&lt;p&gt;CSS styling classes are used to apply specific styles to HTML elements by assigning class names to those elements.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;.text-center&lt;/code&gt;: Centers the text within an element horizontally.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-left&lt;/code&gt;: Aligns the text to the left within an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-right&lt;/code&gt;: Aligns the text to the right within an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-justify&lt;/code&gt;: Justifies the text within an element, creating equal  spacing between words.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-uppercase&lt;/code&gt;: Converts the text to uppercase.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-lowercase&lt;/code&gt;: Converts the text to lowercase.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-capitalize&lt;/code&gt;: Capitalizes the first letter of each word in the text.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.bg-color&lt;/code&gt;: Sets the background color of an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.text-color&lt;/code&gt;: Sets the text color of an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.font-size&lt;/code&gt;: Sets the font size of the text within an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.font-family&lt;/code&gt;: Specifies the font family to be used for the text within an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.font-weight&lt;/code&gt;: Sets the font weight (e.g., bold or normal) of the text.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.font-style&lt;/code&gt;: Applies italic or normal style to the text.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.border&lt;/code&gt;: Adds a border around an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.padding&lt;/code&gt;: Sets the padding (spacing) within an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.margin&lt;/code&gt;: Sets the margin (spacing) around an element.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.display-block&lt;/code&gt;: Sets the display property of an element to block, making it occupy its own line.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.display-inline&lt;/code&gt;: Sets the display property of an element to inline, allowing it to flow with surrounding text.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.display-inline-block&lt;/code&gt;: Sets the display property of an element to inline-block, combining features of both block and inline elements.&lt;/li&gt;
&lt;li&gt; &lt;code&gt;.hidden&lt;/code&gt;: Hides the element by setting its display property to none.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  CSS Specificity
&lt;/h3&gt;

&lt;p&gt;CSS specificity determines which styles are applied to HTML elements when conflicting styles exist.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Inline Styles:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Highest specificity.
-   Applied directly to HTML elements using the `style` attribute.
-   Example: `&amp;lt;div style="color: red;"&amp;gt;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; ID Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Second highest specificity.
-   Target elements using the `id` attribute.
-   Example: `#myElement { color: blue; }`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Class Selectors, Attribute Selectors, and Pseudo-Classes:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Lower specificity than IDs.
-   Target elements using class names, attributes, or pseudo-classes.
-   Example: `.myClass { color: green; }`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Type Selectors and Pseudo-Elements:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Lowest specificity.
-   Target elements based on their tag name or pseudo-elements.
-   Example: `div { color: yellow; }`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  CSS Responsive Queries
&lt;/h3&gt;

&lt;p&gt;CSS responsive queries, also known as media queries, allow developers to apply different styles based on the characteristics of the device or viewport. These queries enable the creation of responsive web designs that adapt to different screen sizes and devices.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Targeting Small Screens:
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@media (max-width: 768px) {
  /* Styles for screens with a maximum width of 768px */
  /* Example: Mobile devices in portrait mode */
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Targeting Medium Screens:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@media (min-width: 769px) and (max-width: 1024px) {
  /* Styles for screens with a width between 769px and 1024px */
  /* Example: Tablets in landscape mode */
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Targeting Large  Screens:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@media (min-width: 1025px) {
  /* Styles for screens with a minimum width of 1025px */
  /* Example: Desktop monitors or large screens */
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Flexbox
&lt;/h3&gt;

&lt;p&gt;CSS Flexbox is a layout module that provides a flexible way to arrange and align elements within a container.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Flex Container:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   The parent element that contains flex items.
-   Use the `display: flex;` or `display: inline-flex;` property to create a flex container.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Flex Items:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   The child elements of a flex container.
-   By default, flex items are laid out in a row (left to right).
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Main Axis and Cross Axis:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Flexbox has two axes: the main axis and the cross axis.
-   The main axis is defined by the `flex-direction` property (default: row).
-   The cross axis is perpendicular to the main axis.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Flex Direction:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Determines the direction of the main axis.
-   Values: `row` (default), `row-reverse`, `column`, `column-reverse`.
-   Example: `flex-direction: column;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Justify Content:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Aligns flex items along the main axis.
-   Values: `flex-start` (default), `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`.
-   Example: `justify-content: center;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Align Items:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Aligns flex items along the cross axis.
-   Values: `flex-start`, `flex-end`, `center`, `baseline`, `stretch` (default).
-   Example: `align-items: center;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Align Self:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Overrides the `align-items` property for individual flex items.
-   Example: `align-self: flex-end;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Flex Wrap:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Controls whether flex items should wrap onto multiple lines if they exceed the container's width.
-   Values: `nowrap` (default), `wrap`, `wrap-reverse`.
-   Example: `flex-wrap: wrap;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Flex Grow, Flex Shrink, and Flex Basis:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Controls how flex items grow, shrink, and distribute space.
-   `flex-grow`: Specifies the flex grow factor.
-   `flex-shrink`: Specifies the flex shrink factor.
-   `flex-basis`: Specifies the initial size of the flex item.
-   Example: `flex: 1 0 200px;`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Flex Container Alignment:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Additional properties to align the flex container itself.
-   `align-content`: Aligns flex lines when there is extra space on the cross axis.
-   `align-self`: Aligns the flex container within its parent container.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  Grid
&lt;/h3&gt;

&lt;p&gt;CSS Grid is a powerful layout module that allows developers to create two-dimensional grid layouts for web pages. It provides a highly flexible and responsive way to arrange and align elements in rows and columns.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Grid Container:&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   The parent element that contains grid items.
-   Use the `display: grid;` property to create a grid container.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Items:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   The child elements of a grid container.
-   By default, grid items are automatically placed in the grid.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Tracks:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   The rows and columns that make up the grid.
-   Define the grid tracks using the `grid-template-rows` and `grid-template-columns` properties.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Rows and Columns:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Specify the size of rows and columns using values like fixed lengths, percentages, or the `fr` unit (fractional unit).
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Gaps:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Create space between grid items using the `grid-gap` property.
-   Values: `grid-row-gap`, `grid-column-gap`, `grid-gap`.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Placement:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Control the placement of grid items within the grid.
-   Use the `grid-row` and `grid-column` properties to specify the start and end positions of items.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Areas:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Assign names to grid areas and reference them in the grid placement properties.
-   Define grid areas using the `grid-template-areas` property.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Lines:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Horizontal and vertical lines that divide the grid into rows and columns.
-   Reference grid lines using numerical indices or named lines.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Alignment:&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Control the alignment of grid items within their cells.
-   Use the `justify-self` and `align-self` properties for horizontal and vertical alignment.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt; Grid Template:&lt;/li&gt;
&lt;/ol&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;-   Combine grid tracks, gaps, and areas into a single shorthand property.

&lt;ul&gt;
&lt;li&gt;  Use the &lt;code&gt;grid-template&lt;/code&gt; property to define the grid template.
&lt;/li&gt;
&lt;/ul&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;


Common header meta tags
&lt;/h3&gt;


&lt;p&gt;Header meta tags are HTML elements placed within the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; section of a web page. They provide information about the webpage to search engines, browsers, and other web services.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;title&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Specifies the title of the webpage.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;title&amp;gt;My Website&amp;lt;/title&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta charset&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Defines the character encoding for the webpage.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta charset="UTF-8"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta name="viewport"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Controls how the webpage is displayed on different devices and screen sizes.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta name="description"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Provides a brief description of the webpage's content.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta name="description" content="A website showcasing the latest fashion trends."&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta name="keywords"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Specifies keywords related to the webpage's content.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta name="keywords" content="fashion, trends, clothing, style"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta name="author"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Specifies the author of the webpage.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta name="author" content="John Doe"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;meta name="robots"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Instructs search engine crawlers on how to index and display the webpage.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;meta name="robots" content="index, follow"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;link rel="canonical"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Defines the canonical URL of a webpage to prevent duplicate content issues.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;link rel="canonical" href="https://www.example.com/page"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;link rel="stylesheet"&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Links an external CSS file to the webpage.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;link rel="stylesheet" href="styles.css"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Embeds or references external JavaScript files.&lt;br&gt;
    -   Example: &lt;code&gt;&amp;lt;script src="script.js"&amp;gt;&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Css Selectors
&lt;/h3&gt;

&lt;p&gt;CSS selectors determine which HTML elements should be targeted and styled.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Element Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select elements based on their tag names.&lt;br&gt;
    -   Example: &lt;code&gt;p { color: red; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Class Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select elements based on their class attribute.&lt;br&gt;
    -   Example: &lt;code&gt;.myClass { font-size: 16px; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; ID Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select a single element based on its ID attribute.&lt;br&gt;
    -   Example: &lt;code&gt;#myElement { background-color: blue; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Attribute Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select elements based on their attributes.&lt;br&gt;
    -   Example: &lt;code&gt;input[type="text"] { border: 1px solid black; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Pseudo-Classes:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select elements based on their states or positions.&lt;br&gt;
    -   Example: &lt;code&gt;a:hover { color: purple; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Pseudo-Elements:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select and style a specific part of an element.&lt;br&gt;
    -   Example: &lt;code&gt;p::first-line { text-transform: uppercase; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Combinators:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Combine multiple selectors to target specific elements.&lt;br&gt;
    -   Example: &lt;code&gt;ul li { list-style-type: square; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Descendant Selectors:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Select elements that are descendants of another element.&lt;br&gt;
    -   Example: &lt;code&gt;div p { font-weight: bold; }&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Child Selectors:
Select elements that are direct children of another element.

&lt;ul&gt;
&lt;li&gt;  Example: &lt;code&gt;ul &amp;gt; li { color: green; }&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt; Universal Selectors:
Select all elements in the document.

&lt;ul&gt;
&lt;li&gt;  Example: &lt;code&gt;* { margin: 0; padding: 0; }&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/html/default.asp"&gt;W3SCHOOLS&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/css/"&gt;GFG&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>css</category>
      <category>html</category>
    </item>
    <item>
      <title>Listening and Active Communication</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Mon, 15 May 2023 18:17:58 +0000</pubDate>
      <link>https://dev.to/codebyank/listening-and-active-communication-ilo</link>
      <guid>https://dev.to/codebyank/listening-and-active-communication-ilo</guid>
      <description>&lt;h3&gt;
  
  
  Q 1. What are the steps/strategies to do Active Listening?
&lt;/h3&gt;

&lt;p&gt;Active listening means fully focusing on the speaker without distractions to understand them better and respond appropriately. Here are some tips:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stay engaged&lt;/strong&gt;: Avoid getting distracted by your own thoughts and give your full attention to the speaker.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Note key points&lt;/strong&gt;: Pay attention to important details shared by the speaker to improve your understanding. You can even jot down notes if it helps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Show interest&lt;/strong&gt;: Use body language maintaining an open posture to show that you are interested in what the speaker is saying.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Encourage sharing&lt;/strong&gt;: Express your interest by saying things like "Tell me more, I'm listening." This lets the speaker know that you value their input and encourages them to continue sharing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Avoid interrupting&lt;/strong&gt;: Let the speaker finish their thoughts before responding. Interrupting can disrupt the flow of the conversation and make the speaker feel unheard.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Q 2. According to Fisher's model, what are the key points of Reflective Listening?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  Reflective listening takes effort and skill to practice effectively.&lt;/li&gt;
&lt;li&gt;  Our communication skills can sometimes get in the way of reflective listening by misunderstanding or assuming the speaker's needs.&lt;/li&gt;
&lt;li&gt;  Reflective thinking involves showing genuine interest and respect for the person's inner wisdom.&lt;/li&gt;
&lt;li&gt;  Breakdowns in communication can happen if the speaker doesn't express themselves clearly, the listener mishears, or there are different interpretations of words.&lt;/li&gt;
&lt;li&gt;  Reflective listening helps prevent breakdowns and completes the communication loop.&lt;/li&gt;
&lt;li&gt;  When using reflective listening, the listener's tone goes down at the end of a reflective statement, which encourages clarification and exploration.&lt;/li&gt;
&lt;li&gt;  Using phrases like "So you feel..." or "It sounds like you..." can be useful during reflective listening.&lt;/li&gt;
&lt;li&gt;  Reflective listening has three levels: repeating or rephrasing, inferring meaning through paraphrasing, and reflecting the speaker's feelings (the deepest form).&lt;/li&gt;
&lt;li&gt;  Adapting the level of reflection based on the situation is effective.&lt;/li&gt;
&lt;li&gt;  Sometimes, exaggerating or toning down reflections can have benefits, such as influencing the person to reconsider or intensifying their feelings.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Q 3. What are the obstacles in your listening process?
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;Obstacles in listening process:-&lt;/em&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Distractions&lt;/strong&gt;: Things that divert your attention away from the speaker, like noise, electronic devices, or your own thoughts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Biases and assumptions&lt;/strong&gt;: Preconceived ideas or beliefs that can influence your ability to listen openly and without judgment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Emotional interference&lt;/strong&gt;: Your own emotions or feelings that may interfere with your ability to understand the speaker objectively.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lack of concentration&lt;/strong&gt;: Difficulty in staying focused on what the speaker is saying, leading to missing important details.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Language or accent barriers&lt;/strong&gt;: Challenges in understanding the speaker due to differences in language or pronunciation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Physical barriers&lt;/strong&gt;: Obstacles such as distance, noisy environments, or poor audio quality that hinder effective communication.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Time constraints&lt;/strong&gt;: Limited time available for listening and responding, which can create pressure and make it harder to listen attentively.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Q 4. What can you do to improve your listening?
&lt;/h3&gt;

&lt;p&gt;Here are simpler  step/strategy  for improve of active listening:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pay attention&lt;/strong&gt;: Give your full presence and listen carefully to the speaker, avoiding any distractions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Show interest&lt;/strong&gt;: Use your body language, eye contact, and verbal cues to show that you are interested in what the speaker is saying.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Avoid interrupting&lt;/strong&gt;: Let the speaker finish talking without interrupting or sharing your own thoughts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Ask questions for clarity&lt;/strong&gt;: Ask open-ended questions to make sure you understand the speaker's message correctly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Paraphrase and summarize&lt;/strong&gt;: Repeat or rephrase what the speaker said in your own words to show that you understand. Summarize the main points to reinforce your understanding.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Be empathetic&lt;/strong&gt;: Try to understand the speaker's perspective and emotions, showing that you care and validating their feelings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Manage biases&lt;/strong&gt;: Be aware of your own biases or assumptions and put them aside to listen objectively and without judgment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Practice active listening&lt;/strong&gt;: Engage actively by nodding, smiling, and using verbal cues to show that you are actively listening and understanding.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Avoid distractions&lt;/strong&gt;: Create a quiet and focused environment for listening by minimizing distractions, like turning off notifications on your devices.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reflect before responding&lt;/strong&gt;: Take a moment to gather your thoughts before responding, making sure your response aligns with what the speaker shared.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Q 5. When do you switch to Passive communication style in your day to day life?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Sometimes, when someone asks us about something, like how we look or what we think of their work, we might say positive things even if we don't truly feel that way. We do this to avoid hurting their feelings or causing any discomfort.&lt;/li&gt;
&lt;li&gt;In certain situations, we might say we're okay with something even if we're not entirely comfortable. We do this to make the other person feel at ease and not cause any inconvenience or awkwardness. &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Q 6. When do you switch into Aggressive communication styles in your day to day life?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;If someone invites you to a party where people are doing things you don't like, it's okay to decline and explain that it goes against your values. You can respect yourself and your friend's choices at the same time.&lt;/li&gt;
&lt;li&gt;When working on a group project, it's good to confidently share your ideas and suggestions. However, it's also important to listen to others and not take over the conversation or ignore their input.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Q 7. When do you switch into Passive Aggressive (sarcasm/gossiping/taunts/silent treatment and others) communication styles in your day to day life?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;My roommate intentionally plays loud music at night even after I politely asked them to be quiet. This noise is bothering me and affecting my sleep.&lt;/li&gt;
&lt;li&gt;   During a team meeting, there might be someone who makes mean comments and rolls their eyes when others share ideas they don't like. This behavior is disrespectful and can discourage open communication.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Q 8. How can you make your communication assertive?
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;Here  is some steps to make communication assertive:-&lt;/em&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Clearly express your thoughts, feelings, and needs without beating around the bush or using ambiguous language.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use "I" statements: Speak from your perspective using "I" statements to convey your thoughts and feelings, rather than blaming or accusing others. For example, say, "I feel..." or "I think..."&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Maintain good eye contact and confident body language: Look the person in the eye and use assertive body language.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Show genuine interest in the other person's perspective by actively listening to what they have to say. Avoid interrupting and try to understand their point of view.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Set boundaries: Clearly communicate your limits and boundaries, expressing what you are comfortable with and what you are not. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stay calm and composed: Keep your emotions in check and remain calm, even if the conversation becomes challenging or confrontational. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Practice assertive phrases: Use assertive phrases to express yourself effectively, such as "I respectfully disagree," "I need some time to think about it," or "I would appreciate it if you could..."&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Practice assertive role-playing: Role-play challenging situations with a trusted friend or mentor to build your confidence and develop assertive communication skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reflect and learn: After assertive communication interactions, reflect on what went well and what could be improved. Continuously learn and refine your assertiveness skills through practice and feedback.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
    </item>
    <item>
      <title>No SQL Database</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Sun, 14 May 2023 13:44:03 +0000</pubDate>
      <link>https://dev.to/codebyank/no-sql-database-1364</link>
      <guid>https://dev.to/codebyank/no-sql-database-1364</guid>
      <description>&lt;p&gt;NoSQL databases are non-tabular databases and store data differently than relational tables. They provide flexible schemas and scale easily with large amounts of data and high user loads.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why NoSQL
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Flexible data model: NoSQL databases offer a flexible data model for modern applications with complex data requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scalability: NoSQL databases are designed to scale horizontally. This makes it easier to handle high traffic and large data volumes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;High performance: NoSQL databases are optimized for high-speed reads and writes, making them ideal for applications that require low latency and high throughput.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Availability: NoSQL databases are designed to be highly available, with built-in replication and failover mechanisms that ensure your data is always accessible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cost-effective: NoSQL databases are often more cost-effective than traditional relational databases, as they can be run on commodity hardware and require less maintenance.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Types of NoSQL Database
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Document-oriented databases: These databases store data in JSON or BSON documents, making them flexible and scalable. Examples include MongoDB and Couchbase.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Key-value databases: These databases store data in key-value pairs, making them highly performant for simple operations like read/write operations. Examples include Redis and Riak.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Column-family stores: These databases store data in columns rather than rows, making them ideal for use cases that require querying large amounts of data. Examples include Apache Cassandra and HBase.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Graph databases: These databases store data in nodes and edges, making them ideal for use cases that require complex relationships and hierarchical data structures. Examples include Neo4j and OrientDB.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Object-oriented databases: These databases store data in objects, making them ideal for use cases that require complex data modeling and object-oriented programming.&lt;/p&gt;
&lt;h3&gt;
  
  
  How will i investigate using a NoSQL database for improving performance
&lt;/h3&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Define the scope of the investigation: Identify the specific use case for the NoSQL database and determine the data requirements and expected workload.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Research different NoSQL database types: Explore the different types of NoSQL databases, such as document-oriented, key-value, column-family stores, graph databases, and object-oriented databases, to determine which type is best suited for the use case.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Evaluate database options: Once the type of NoSQL database has been determined, evaluate different database options within that type to determine which database best meets the specific requirements of the project.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Perform a proof-of-concept: Before making a final decision, perform a proof-of-concept to test the performance, scalability, and functionality of the chosen NoSQL database in a realistic environment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Analyze the results: Analyze the results of the proof-of-concept to determine if the NoSQL database meets the performance and scaling requirements of the project.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Consider the impact on the existing infrastructure: Evaluate the impact that adding a NoSQL database will have on the existing infrastructure and determine if any modifications are required.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Evaluate the cost: Determine the cost of implementing and maintaining the NoSQL database over time, including licensing fees, hardware costs, and ongoing maintenance and support.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Make a recommendation: Based on the investigation and analysis, make a recommendation on whether or not to use a NoSQL database and which specific database to use. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/top-5-reasons-to-choose-nosql/"&gt;GeeksforGeeks&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.mongodb.com/nosql-explained"&gt;MongoDb&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>SOLID Principle in Python</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Sun, 14 May 2023 12:35:14 +0000</pubDate>
      <link>https://dev.to/codebyank/solid-principle-in-python-5e1m</link>
      <guid>https://dev.to/codebyank/solid-principle-in-python-5e1m</guid>
      <description>&lt;p&gt;The SOLID Principles are five principles of Object-Oriented class design. They are a set of rules for certain design patterns and software architecture in general.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;S&lt;/strong&gt; - Single responsibility principle &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;O&lt;/strong&gt; - Open-Closed principle&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;L&lt;/strong&gt; - Liskov substitution principle&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;I&lt;/strong&gt; - Interface segregation principle&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;D&lt;/strong&gt; - Dependency inversion principle&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Single responsibility principle
&lt;/h3&gt;

&lt;p&gt;A class should have only one job.  If a class has more than one responsibility,&lt;br&gt;
it becomes coupled.  A change to one responsibility results to modification of&lt;br&gt;
the other responsibility.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class FileReader:
    def __init__(self, filename):
        self.filename = filename

    def read_file(self):
        with open(self.filename, 'r') as file:
            data = file.read()
        return self.parse_data(data)

    def parse_data(self, data):
        # Parsing logic here
        return parsed_data
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Above example, the &lt;code&gt;FileReader&lt;/code&gt; class is violating the Single Responsibility Principle because it has two responsibilities: reading data from a file and parsing the data.&lt;/p&gt;

&lt;p&gt;To fix this, we can create a separate class for parsing the data:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class FileReader:
    def __init__(self, filename):
        self.filename = filename

    def read_file(self):
        with open(self.filename, 'r') as file:
            data = file.read()
        return data

class DataParser:
    def parse_data(self, data):
        # Parsing logic here
        return parsed_data
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Open-Closed principle
&lt;/h3&gt;

&lt;p&gt;Software entities (Classes, modules, functions) should be open for extension, not  for modification.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Animal:
    def __init__(self, name: str):
        self.name = name

    def get_name(self) -&amp;gt; str:
        pass

animals = [
    Animal('lion'),
    Animal('mouse')
]

def animal_sound(animals: list):
    for animal in animals:
        if animal.name == 'lion':
            print('roar')

        elif animal.name == 'mouse':
            print('squeak')

animal_sound(animals)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Above example  function animal_sound does not conform to the open-closed principle because it cannot be closed against new kinds of animals.  If we add a new animal . We have to modify the animal_sound function. &lt;/p&gt;

&lt;p&gt;To fix this we can create a new class for every animal which extend Animal and implement make_sound method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Animal:
    def __init__(self, name: str):
        self.name = name

    def get_name(self) -&amp;gt; str:
        pass

    def make_sound(self):
        pass


class Lion(Animal):
    def make_sound(self):
        return 'roar'


class Snake(Animal):
    def make_sound(self):
        return 'hiss'


def animal_sound(animals: list):
    for animal in animals:
        print(animal.make_sound())

animal_sound(animals)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, if we add a new animal, animal_sound doesn’t need to change.  All we need to do is add the new animal to the animal array.&lt;/p&gt;




&lt;h3&gt;
  
  
  Liskov substitution principle
&lt;/h3&gt;

&lt;p&gt;The Liskov Substitution Principle is a design principle that states that objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Animal:
    def make_sound(self):
        pass

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

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

def animal_sound(animal):
    return animal.make_sound()

dog = Dog()
cat = Cat()

print(animal_sound(dog)) # Output: "Woof!"
print(animal_sound(cat)) # Output: "Meow!"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;Dog&lt;/code&gt; or a &lt;code&gt;Cat&lt;/code&gt; object to the &lt;code&gt;animal_sound&lt;/code&gt; function without affecting the correctness of the program. This is because both &lt;code&gt;Dog&lt;/code&gt; and &lt;code&gt;Cat&lt;/code&gt; are subtypes of &lt;code&gt;Animal&lt;/code&gt;, and they implement the same &lt;code&gt;make_sound&lt;/code&gt; method in their own way.&lt;/p&gt;




&lt;h3&gt;
  
  
  Interface segregation principle
&lt;/h3&gt;

&lt;p&gt;The Interface Segregation Principle (ISP) is a design principle that states that no client should be forced to depend on methods it does not use. In other words, we should break interfaces into smaller, more specific interfaces so that clients only need to implement the methods they actually use.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class IAnimal:
    def eat(self):
        pass

    def sleep(self):
        pass

    def make_sound(self):
        pass

class Dog(IAnimal):
    def eat(self):
        return "Dog is eating."

    def sleep(self):
        return "Dog is sleeping."

    def make_sound(self):
        return "Woof!"

class Cat(IAnimal):
    def eat(self):
        return "Cat is eating."

    def sleep(self):
        return "Cat is sleeping."

    def make_sound(self):
        return "Meow!"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In above example class is forcing its clients to implement all three methods of the &lt;code&gt;Animal&lt;/code&gt; class, even if they only need to use one or two methods for training.&lt;/p&gt;

&lt;p&gt;To fix this, we can break down the &lt;code&gt;Animal&lt;/code&gt; interface into smaller, more specific interfaces:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class IEatable:
    def eat(self):
        pass

class ISleepable:
    def sleep(self):
        pass

class IMakeSoundable:
    def make_sound(self):
        pass

class Dog(IEatable, IMakeSoundable):
    def eat(self):
        return "Dog is eating."

    def make_sound(self):
       return "Woof!"

class Cat(IEatable, ISleepable, IMakeSoundable):
    def eat(self):
        return "Cat is eating."

    def sleep(self):
        return "Cat is sleeping."

    def make_sound(self):
        return "Meow!"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we have broken down the &lt;code&gt;Animal&lt;/code&gt; interface into three smaller interfaces - &lt;code&gt;IEatable&lt;/code&gt;, &lt;code&gt;ISleepable&lt;/code&gt;, and &lt;code&gt;IMakeSoundable&lt;/code&gt;. The &lt;code&gt;Dog&lt;/code&gt; and &lt;code&gt;Cat&lt;/code&gt; classes now implement these smaller interfaces instead of the larger &lt;code&gt;Animal&lt;/code&gt; interface.&lt;/p&gt;




&lt;h3&gt;
  
  
  Dependency inversion principle
&lt;/h3&gt;

&lt;p&gt;The Dependency Inversion Principle (DIP) is a design principle that states that high-level modules should not depend on low-level modules, but both should depend on abstractions. This means that instead of depending on concrete implementations, we should depend on abstract interfaces or classes.&lt;/p&gt;

&lt;p&gt;Here's a simple example in Python to illustrate the Dependency Inversion Principle:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class IA:
    def get(self):
        pass

class A(IA):
    def __init__(self):
        self.a=[1,2,3,4]

    def get(self):
        return self.a


class B:
    def __init__(self, obj:IA):
        self.obj=obj

    def get(self):
        print(self.obj.get())

class C(IA):
    def __init__(self):
        self.b=[1,2,3]
    def get(self):
        return self.b

a=A()
c=C()
b1=B(c) # output : [1,2,3]
b2=B(a) # output : [1,2,3,4]
b.get()

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we have introduced an abstract interface called &lt;code&gt;ILightSource&lt;/code&gt; that defines the &lt;code&gt;turn_on&lt;/code&gt; and &lt;code&gt;turn_off&lt;/code&gt; methods that the &lt;code&gt;LightSwitch&lt;/code&gt; class needs to use. The &lt;code&gt;LightBulb&lt;/code&gt; class now implements this interface instead of having its own methods.&lt;/p&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/solid-principle-in-programming-understand-with-real-life-examples/"&gt;GeeksforGeeks&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/"&gt;freecodecamp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>SQL Concepts - Technical Paper</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Fri, 12 May 2023 10:31:03 +0000</pubDate>
      <link>https://dev.to/codebyank/sql-concepts-technical-paper-4f4h</link>
      <guid>https://dev.to/codebyank/sql-concepts-technical-paper-4f4h</guid>
      <description>&lt;h2&gt;
  
  
  ACID
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;ACID stands for Atomicity, Consistency, Isolation, and Durability. These properties are fundamental to ensure that transactions in a database system are reliable and maintain data integrity.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SeAahvTC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i0.wp.com/erainnovator.com/wp-content/uploads/2020/05/acid-properties-database.png%3Fresize%3D930%2C620%26ssl%3D1" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SeAahvTC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i0.wp.com/erainnovator.com/wp-content/uploads/2020/05/acid-properties-database.png%3Fresize%3D930%2C620%26ssl%3D1" alt="enter image description here" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Atomicity
&lt;/h3&gt;

&lt;p&gt;Atomicity ensures that a transaction is treated as a single unit of work that either succeeds or fails as a whole.&lt;/p&gt;
&lt;h3&gt;
  
  
  2. Consistency
&lt;/h3&gt;

&lt;p&gt;Consistency ensures that a transaction must preserve the integrity constraints defined in the database schema.&lt;/p&gt;
&lt;h3&gt;
  
  
  3. Isolation
&lt;/h3&gt;

&lt;p&gt;Isolation ensures that concurrent transactions do not interfere with each other. Each transaction must execute as if it is the only transaction in the system.&lt;/p&gt;
&lt;h3&gt;
  
  
  4. Durability
&lt;/h3&gt;

&lt;p&gt;Durability ensures that once a transaction is committed, its effects are permanent and can survive system failures, such as power outages or hardware failures.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  CAP Theorem
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The CAP theorem states that it is impossible for a distributed system to provide Consistency, Availability, and Partition tolerance simultaneously.&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Consistency
&lt;/h3&gt;

&lt;p&gt;Consistency requires that all nodes in the distributed system see the same data at the same time. For example, if a user updates a record in one node, all other nodes must see the updated record immediately.&lt;/p&gt;
&lt;h3&gt;
  
  
  2. Availability
&lt;/h3&gt;

&lt;p&gt;Availability requires that the system responds to every read or write request, even in the presence of node failures or network partitions.&lt;/p&gt;
&lt;h3&gt;
  
  
  3. Partition
&lt;/h3&gt;

&lt;p&gt;Partition tolerance requires that the system continues to operate even when network partitions occur.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  JOINS
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Joins in SQL are used to combine data from two or more tables based on a common column or set of columns.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Types of joins:-
### 1.INNER JOIN
An INNER JOIN returns only the rows from both tables that have matching values in the join condition.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HGUKSd3S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/mysql/images/image1.png" alt="enter image description here" width="256" height="155"&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Syntax:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT columns FROM table1
INNER  JOIN table2
ON table1.column = table2.column;
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. LEFT JOIN
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;A LEFT JOIN returns all the rows from the left table and the matching rows from the right table. If there is no matching row in the right table, the result will contain NULL values for the right table columns.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--L1vIjNNZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/mysql/images/image4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--L1vIjNNZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/mysql/images/image4.png" alt="enter image description here" width="256" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Syntax:-
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;```
SELECT columns FROM table1
LEFT JOIN table2
ON table1.column = table2.column;
```
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. RIGHT JOIN
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;A RIGHT JOIN is similar to a LEFT JOIN, but it returns all the rows from the right table and the matching rows from the left table. If there is no matching row in the left table, the result will contain NULL values for the left table columns.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uTmY0vOU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/mysql/images/image7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uTmY0vOU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/mysql/images/image7.png" alt="enter image description here" width="256" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Syntax:-
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;```
SELECT columns FROM table1
RIGHT JOIN table2
ON table1.column = table2.column;
```
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. OUTER JOIN
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;An OUTER JOIN returns all the rows from both tables, with NULL values for the columns where there is no match.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--O0STjgGa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://www.w3schools.com/sql/img_fulljoin.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--O0STjgGa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://www.w3schools.com/sql/img_fulljoin.gif" alt="enter image description here" width="200" height="145"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Syntax:-
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;```
SELECT  columns FROM  table1
OUTER  JOIN  table2  ON  table1.columns = table2.columns;
```
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Aggregations, Filters in queries
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Aggregations and filters are common operations used in SQL queries to summarize and manipulate data.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Some common aggregations:-

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;sum&lt;/strong&gt;
To calculate total column values.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AVG&lt;/strong&gt;
&lt;code&gt;AVG()&lt;/code&gt; function returns the average value of a numeric column.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;count&lt;/strong&gt;
&lt;code&gt;COUNT()&lt;/code&gt; function returns the number of rows that matches a specified criterion.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MAX&lt;/strong&gt;
&lt;code&gt;MAX()&lt;/code&gt; return max value of column.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MIN&lt;/strong&gt;
&lt;code&gt;MIN()&lt;/code&gt; returns min value of column&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Some filter technique:-&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;WHERE&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;The WHERE clause specifies a condition that must be met for each row to be selected in the result set.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;You can also use comparison operators such as &lt;code&gt;less than (&amp;lt;)&lt;/code&gt; , &lt;code&gt;greater than (&amp;gt;)&lt;/code&gt;,  &lt;code&gt;equal to  (=)&lt;/code&gt;, &lt;code&gt;not equal to  (!= or &amp;lt;&amp;gt;)&lt;/code&gt; and logical operators such as &lt;code&gt;AND&lt;/code&gt; and &lt;code&gt;OR&lt;/code&gt; , &lt;code&gt;BETWEEN&lt;/code&gt; to create more complex filter conditions. Here's an example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; SELECT *
FROM sales
WHERE (product = 'product_name' AND price &amp;gt; 100) OR price &amp;gt; 200;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  NORMALIZATION
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Normalization is the process of organizing data in a database to reduce data redundancy and improve data integrity. In Postgres, normalization is achieved through the use of various normal forms.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VJ1LWkSQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.learncomputerscienceonline.com/wp-content/uploads/2020/07/Database-Normalization-.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VJ1LWkSQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.learncomputerscienceonline.com/wp-content/uploads/2020/07/Database-Normalization-.jpg" alt="enter image description here" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;First Normal Form (1NF)&lt;/strong&gt;
To achieve 1NF, a table must have a primary key and all columns in the table must contain atomic values (i.e., values that cannot be further decomposed).
&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TABLE orders (
  order_id INTEGER PRIMARY KEY,
  customer_name TEXT
);

CREATE TABLE order_items (
  order_id INTEGER REFERENCES orders(order_id),
  item_name TEXT,
  PRIMARY KEY (order_id, item_name)
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Second Normal Form (2NF)&lt;/strong&gt;
&amp;gt; To achieve 2NF, a table must be in 1NF and all non-key columns must be fully dependent on the primary key.
&amp;gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        CREATE TABLE sales (
        sale_id INTEGER PRIMARY KEY,
      product_name TEXT REFERENCES 
          products(product_name),
      product_price DECIMAL(10,2)
      );

      CREATE TABLE products (
      product_name TEXT PRIMARY  KEY,
      product_category TEXT
     );
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Third Normal Form(3NF)&lt;/strong&gt;
&amp;gt; To achieve 3NF, a table must be in 2NF and all non-key columns must be dependent only on the primary key (not on other non-key columns).
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    CREATE TABLE employees (
  employee_id INTEGER PRIMARY KEY,
  employee_name TEXT,
  department_name TEXT REFERENCES departments(department_name)
);

CREATE TABLE departments (
  department_name TEXT PRIMARY KEY,
  manager_name TEXT
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Boyce CoddNormal Form (BCNF)&lt;/strong&gt;
&amp;gt; The first condition for the table to be in Boyce Codd Normal Form is that the table should be in the third normal form. Secondly, every Right-Hand Side (RHS) attribute of the functional dependencies should depend on the super key of that particular table.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  INDEXES
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Indexing is used to optimize the performance of a database by minimizing the number of disk accesses required when a query is processed.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cn6qWV9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/dbms/images/dbms-indexing-in-dbms.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cn6qWV9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://static.javatpoint.com/dbms/images/dbms-indexing-in-dbms.png" alt="enter image description here" width="290" height="115"&gt;&lt;/a&gt;&lt;br&gt;
Syntax:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  CREATE  INDEX  _index_name_  
  ON  _table_name_ (_column1_, _column2_, ...);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  TRANSACTIONS
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A transaction is an action or series of actions. It is performed by a single user to perform operations for accessing the contents of the database.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;States of Transactions&lt;/strong&gt;
&amp;gt; A transaction in a database can be in one of the following states.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--plNqYuwQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.geeksforgeeks.org/wp-content/uploads/20200501195048/Tt7.png" alt="enter image description here" width="743" height="363"&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Active&lt;/strong&gt;  − In this state, the transaction is being executed. This is the initial state of every transaction.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Partially Committed&lt;/strong&gt;  − When a transaction executes its final operation, it is said to be in a partially committed state.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Failed&lt;/strong&gt;  − A transaction is said to be in a failed state if any of the checks made by the database recovery system fails. A failed transaction can no longer proceed further.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Aborted&lt;/strong&gt;  − If any of the checks fails and the transaction has reached a failed state, then the recovery manager rolls back all its write operations on the database to bring the database back to its original state where it was prior to the execution of the transaction. Transactions in this state are called aborted. The database recovery module can select one of the two operations after a transaction aborts −&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Re-start the transaction&lt;/li&gt;
&lt;li&gt;  Kill the transaction&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Committed&lt;/strong&gt;  − If a transaction executes all its operations successfully, it is said to be committed. All its effects are now permanently established on the database system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  LOCKING MECHANISM
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Locking is a fundamental mechanism in database systems that allows &lt;br&gt;
multiple users to access shared resources without interfering with each other.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C2c8buL3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://etutorials.org/shared/images/tutorials/tutorial_73/38fig07.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C2c8buL3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://etutorials.org/shared/images/tutorials/tutorial_73/38fig07.gif" alt="enter image description here" width="500" height="364"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Types of Locking Mechanism&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Shared lock(S)&lt;/strong&gt;
&amp;gt; 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 &lt;em&gt;share&lt;/em&gt; 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Exclusive lock&lt;/strong&gt;
&amp;gt; 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Update lock&lt;/strong&gt;
&amp;gt; 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.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  DATABASE ISOLATION LEVELS
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Database isolation levels are a key feature of database management systems that allow multiple transactions to access the same data concurrently while maintaining data consistency and integrity.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Different database isolation levels&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Read Uncommitted Isolation Level&lt;/strong&gt;
&amp;gt;The read uncommitted isolation level allows a transaction to read uncommitted changes made by other transactions,&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Read Committed Isolation Level&lt;/strong&gt;
&amp;gt; The read committed isolation level allows a transaction to read only committed changes made by other transactions, which eliminates dirty reads but can result in non-repeatable reads.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Repeatable Read Isolation Level&lt;/strong&gt;
&amp;gt; The repeatable read isolation level guarantees that a transaction can read the same data multiple times without interference from other transactions, which eliminates non-repeatable reads but can result in phantom reads.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Serializable Isolation Level&lt;/strong&gt;
&amp;gt; The serializable isolation level provides the highest level of consistency by ensuring that concurrent transactions appear to execute serially, which eliminates all types of concurrency anomalies but reduces concurrency to the lowest level.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  TRIGGERS
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A trigger is a set of actions that are run automatically when a specified change operation (SQL INSERT, UPDATE, DELETE or TRUNCATE statement) is performed on a specified table.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Create trigger:&lt;/strong&gt;  In PostgreSQL, the CREATE TRIGGER command generates our first trigger step by step.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alter trigger:&lt;/strong&gt;  The ALTER TRIGGER command is used to rename a trigger.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Drop trigger:&lt;/strong&gt;  The DROP TRIGGER command is used to define the steps to remove a trigger from a table&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Enable triggers:&lt;/strong&gt;  In the PostgreSQL trigger, the ENABLE TRIGGER statement allows a trigger or all triggers related to a table.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Disable trigger:&lt;/strong&gt;  The DISABLE TRIGGER is used to display how we can disable a trigger or all triggers linked with a table.&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Object Oriented Programming in Python</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Thu, 11 May 2023 05:42:53 +0000</pubDate>
      <link>https://dev.to/codebyank/object-oriented-programming-in-python-26on</link>
      <guid>https://dev.to/codebyank/object-oriented-programming-in-python-26on</guid>
      <description>&lt;h2&gt;
  
  
  Introduction of OOPs in Python
&lt;/h2&gt;

&lt;p&gt;Python supports object-oriented programming through the use of classes, objects, attributes, and methods. These concepts allow you to create modular and reusable code that is easier to understand and maintain.&lt;/p&gt;

&lt;p&gt;Everything in Python is an object. Using Pythom we can create classes and objects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Classes
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Class is like a blueprint of an real object. Classes defines object features 
and attributes which help to create objects.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Class comprises of properties and behaviour.&lt;/p&gt;

&lt;p&gt;For eg:- Consider a class Person, it might have properties or behaviour of person. Those properties might be name, age, etc.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to make a &lt;em&gt;Class&lt;/em&gt; in Python. We use &lt;em&gt;Class&lt;/em&gt; keyword.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    class Person:
        def __init__(self, name, age):
            self.name = name
            self.age = age

    def say_hello(self):
            print(f"Hello, my name is {self.name} and I am {self.age} years old.")
person = Person("John", 30)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Objects
&lt;/h2&gt;

&lt;p&gt;Objects is real world entity which contains all features defines in class. It is instance of their class.&lt;/p&gt;

&lt;p&gt;This may be any real-world object. &lt;br&gt;
For eg:- In case of a class Person, we can have real world objects john, ankit etc.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;john = Person("John", 30)
ankit = Person("ankit", 25)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Objects consists of  attributes/properties .&lt;/li&gt;
&lt;li&gt;It consists of  behaviour represented by the methods of an object.&lt;/li&gt;
&lt;li&gt;Identity  gives a unique name to an object.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Inheritance
&lt;/h2&gt;

&lt;p&gt;Inheritance is one of the key features of object-oriented programming, and Python supports it as well. Inheritance allows you to create a new class that is a modified version of an existing class, inheriting all the attributes and methods of the parent class.&lt;br&gt;
For eg:- In this example, we define a new class called &lt;code&gt;Student&lt;/code&gt; that inherits from the &lt;code&gt;Person&lt;/code&gt; class&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Student(Person):
    def __init__(self, name, age, grade):
        super().__init__(name, age)
        self.grade = grade

    def say_hello(self):
        super().say_hello()
        print(f"I am a student in grade {self.grade}.")

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Types of Inheritance:-
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;1. Single level Inheritance&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Single-level inheritance enables a derived class to inherit characteristics from a single-parent class.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def say_hello(self):
        print(f"Hello, my name is {self.name} and I am {self.age} years old.")

class Student(Person):
    def __init__(self, name, age, grade):
        super().__init__(name, age)
        self.grade = grade
my_student = Student("John", 18, "12th")
my_student.say_hello()
#output: Hello, my name is John and I am 18 years old.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Multilevel Inheritance&lt;/strong&gt; :&lt;br&gt;
Multi-level inheritance enables a derived class to inherit properties from an immediate parent class which in turn inherits properties from his parent class.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Animal:
    def __init__(self, name):
        self.name = name

    def eat(self):
        print(f"{self.name} is eating.")

class Mammal(Animal):
    def walk(self):
        print(f"{self.name} is walking.")

class Dog(Mammal):
    def bark(self):
        print(f"{self.name} is barking.")

class LabradorRetriever(Dog):
    def fetch(self):
        print(f"{self.name} is fetching.")

my_dog = LabradorRetriever("Buddy")
# output
my_dog.eat()    # Buddy is eating.
my_dog.walk()   # Buddy is walking.
my_dog.bark()   # Buddy is barking.
my_dog.fetch()  # Buddy is fetching.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Hierarchical Inheritance&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Hierarchical inheritance in Python involves creating a class hierarchy where multiple subclasses inherit from the same parent class. In other words, it's a structure where one parent class has multiple child classes.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; # Base class
 class  Animal: 
 def  __init__(self, name):
      self.name = name 
 def  speak(self):
      pass
 # Subclass 1
 class  Dog(Animal):
      def  speak(self):
           print(f"{self.name} says woof.")
 #Subclass 2
 class  Cow(Animal):
     def  speak(self):
         print(f"{self.name} says moo.")
my_dog = Dog("Buddy")
my_cow = Cow("MooMoo")
 # output
my_dog.speak()  # Buddy says woof.
my_cow.speak()  # MooMoo says moo.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4.Multiple Inheritance&lt;/strong&gt;: &lt;br&gt;
Multiple level inheritance enables one derived class to inherit properties from more than one base class.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class  Animal: 
    def  __init__(self, name, species): 
        self.name = name 
        self.species = species 
class  Carnivore: 
    def  __init__(self): 
        self.is_carnivore = True  
    def  eat(self): 
        print("I eat meat.")

class  Cat(Animal, Carnivore): 
    def  __init__(self, name): 
        Animal.__init__(self, name, species="Cat") 
        Carnivore.__init__(self)  
        self.sound = "Meow"

cat1 = Cat("Luna")
print(cat1.name, cat1.species, cat1.sound, cat1.is_carnivore)
 #output: Luna Cat Meow True
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Polymorphism
&lt;/h2&gt;

&lt;p&gt;polymorphism in Python allows you to write code that works with objects of different classes through a shared interface. This can make your code more flexible and reusable, and allow you to take advantage of inheritance and other OOP features.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Animal:
    def __init__(self, name):
        self.name = name

    def make_sound(self):
        pass

class Dog(Animal):
    # override methods
    def make_sound(self):
        print(f"{self.name} says woof.")

class Cat(Animal):
    # override methods
    def make_sound(self):
        print(f"{self.name} says meow.")

my_dog = Dog("Buddy")
my_cat = Cat("Kitty")
 #output
 my_dog.make_sound()  # Buddy says woof.
my_cat.make_sound()  # Kitty says meow.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Encapsulation
&lt;/h2&gt;

&lt;p&gt;Encapsulation in Python allows you to hide the implementation details of an object from the outside world, and expose only the necessary information through a well-defined interface. This can help to achieve data security, modularity, and maintainability of code.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Person:
    def __init__(self, name, age):
        self.__name = name
        self.__age = age

    def get_name(self):
        return self.__name

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

    def get_age(self):
        return self.__age

    def set_age(self, age):
        if age &amp;lt; 0:
            raise ValueError("Age cannot be negative.")
        self.__age = age

person = Person("Alice", 30)
print(person.get_name())  # Alice
person.set_age(35)
print(person.get_age())  # 35
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Abstraction
&lt;/h2&gt;

&lt;p&gt;Abstraction is a concept in object-oriented programming that refers to the ability to focus on the essential features of an object or system, while ignoring its less important or irrelevant details. In other words, it allows us to represent complex real-world entities in a simplified and manageable way.&lt;br&gt;
For example :- We define a concrete class &lt;code&gt;ConcreteClass&lt;/code&gt; that subclasses &lt;code&gt;AbstractClass&lt;/code&gt; and provides implementations of its abstract methods &lt;code&gt;method1&lt;/code&gt; and &lt;code&gt;method2&lt;/code&gt;. These implementations provide concrete functionality for the abstract methods, and allow us to use the &lt;code&gt;ConcreteClass&lt;/code&gt; as a fully functional class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; # abstractclass
 import abc
class AbstractClass(metaclass=abc.ABCMeta):
    @abc.abstractmethod
    def method1(self):
        pass
    @abc.abstractmethod
    def method2(self):
        pass
  # Inherit abstract class
class ConcreteClass(AbstractClass):
    def method1(self):
        print("Implementation of method1")
    def method2(self):
        print("Implementation of method2")
 # creating object
obj = ConcreteClass()
obj.method1()
obj.method2()
 # output
 Implementation of method1
Implementation of method2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/python-oops-concepts/"&gt;GeeksforGeeks&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.w3schools.com/python/python_classes.asp"&gt;W3Schools&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.freecodecamp.org/news/crash-course-object-oriented-programming-in-python/"&gt;freecodecamp&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Dictionary in Python</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Wed, 10 May 2023 18:36:52 +0000</pubDate>
      <link>https://dev.to/codebyank/dictionary-in-python-123l</link>
      <guid>https://dev.to/codebyank/dictionary-in-python-123l</guid>
      <description>&lt;ul&gt;
&lt;li&gt;Dictionary is a data structure in python which store as a key:value pair.&lt;/li&gt;
&lt;li&gt;Dictionaries &lt;em&gt;do not&lt;/em&gt; allow duplicate keys, since it uses hashing concep store keys.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Overview of  most used Dictionary Methods
&lt;/h2&gt;

&lt;h4&gt;
  
  
  1. declaring a dictionary
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dictionary = {} 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. Inserting Key:Value pairs
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;we have a specific syntax to do it, as shown below.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; dictionary['name'] = 'ankit'
 print(dictionary) 
 # output  :  { 'name' : 'ankit' }
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  3. Accessing a Value using Key
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;There are two ways you can access a value using key&lt;/li&gt;
&lt;li&gt;In python, there is a method &lt;em&gt;&lt;code&gt;.get()&lt;/code&gt;&lt;/em&gt;  which takes a key as a argument, used to get a value as shown&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;.get()&lt;/code&gt; will return &lt;em&gt;None&lt;/em&gt; , if key is not found in a dictionary &lt;/li&gt;
&lt;li&gt;The other way to access a value is using square brackets,
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        value = dictionary.get('name')
        print(value)
        #output: 'milk'
        value = dictionary.get('unknown_key')
        print(value)
        #output : None
        # other way
        name = dictionary['name']
        print(name)
        #output: 'milk'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. Methods used while looping a Dictionary
&lt;/h3&gt;

&lt;h4&gt;
  
  
  items() :
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;items()&lt;/code&gt; method in Python dictionaries returns a view object that contains the key-value pairs of the dictionary as tuples. &lt;/li&gt;
&lt;li&gt;example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_dict = {'apple': 2, 'banana': 3, 'cherry': 5}
for key, value in my_dict.items():
    print(key, value)
#output apple 2
        banana 3
        cherry 5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5 .keys():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt; This method will return dict_keys which are list of keys in a dictionary. we can use loops to access all the keys.
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        keys = my_dict.keys()
        for key in keys:
            print(key)
        #output: apple
                 banana
                 cherry
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6 .values():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;This method will return dict_values which are list of values in a dictionary. we can use loops to access all the values.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    values = my_dict.values()
    for value in values:
        print(value)
    #output: 2 3 5
    ```

&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  7.  in:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;It is a keyword which can be used to find weather the key is present or not
it will return a boolean value as shown
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        boolean = 'banana' in my_dict
        print(boolean)
        #output: True
        boolean = 'unknown_key' in my_dict
        print(boolean)
        #output: False
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  8. update():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;This will take another dictionary as argument and addes it to the old one&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    new_dict = { 'Lemon' : 10 }
    my_dict.update(new_dict)
    print(my_dict)
    #output: {'apple': 2, 'banana': 4, 'cherry': 5, 'Lemon':10}
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  9 .copy():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method copies the entire dictionary to the new one
 example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;         new_dict = my_dict.copy()
         print(new_dict)
        #output: {'apple': 2, 'banana': 4, 'cherry': 5,   'Lemon':10}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  10. Update existing key using  Square Brackets
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;We can append a key value pair in to a dictionary or we can update a value     using the key as shown.
 example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;     my_dict = {'apple': 2, 'banana': 3, 'cherry': 5}
my_dict['banana'] = 4
print(my_dict)
#output : {'apple': 2, 'banana': 4, 'cherry': 5}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  11 .pop('key'):
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method will take key as a argument and will remove the key value pair from dictionary as shown&lt;/li&gt;
&lt;li&gt;It will return a &lt;em&gt;value&lt;/em&gt; of the key that was poped&lt;/li&gt;
&lt;li&gt;This will through &lt;em&gt;KeyError&lt;/em&gt; if key is not found
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_dict = {'apple': 2, 'banana': 3, 'cherry': 5}
my_dict.pop('banana')
print(my_dict)
#output {'apple': 2, 'cherry': 5}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  12. popitem():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt; This method will pop the last item that was inserted and will return a tuple of key and value&lt;/li&gt;
&lt;li&gt;This will return &lt;em&gt;KeyError&lt;/em&gt; if dictionary is empty
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_dict = {'apple': 2, 'banana': 3, 'cherry': 5}
item = my_dict.popitem()
print(item)
print(my_dict)
#output ('cherry', 5)
      {'apple': 2, 'banana': 3}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  13 .clear():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method will clear the dictionary and returns None
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        my_dict.clear() 
        print(my_dict)
        #output: {}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  14  .setdefault()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns the value of a key if the key is in the dictionary else inserts the key with a value to the dictionary
example:-
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_dict = {'apple': 2, 'banana': 3, 'cherry': 5}
value = my_dict.setdefault('banana', 10)
print(value)
print(my_dict)

value = my_dict.setdefault('orange', 7)
print(value)
print(my_dict)
#0utput 3
             {'apple': 2, 'banana': 3, 'cherry': 5}
            7
           {'apple': 2, 'banana': 3, 'cherry': 5, 'orange': 7}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  References:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.python.org/3/tutorial/datastructures.html"&gt;Python Docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/python/python_dictionaries.asp"&gt;w3 Schools&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/python-dictionary-methods/"&gt;Geeksforgeeks&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>python</category>
      <category>algorithms</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>List methods in Python</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Wed, 10 May 2023 17:30:57 +0000</pubDate>
      <link>https://dev.to/codebyank/list-methods-in-python-57g</link>
      <guid>https://dev.to/codebyank/list-methods-in-python-57g</guid>
      <description>&lt;h3&gt;
  
  
  An overview of string methods in Python
&lt;/h3&gt;

&lt;p&gt;In this article, I will provide an overview of the most commonly used string methods in Python.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. append()
&lt;/h4&gt;

&lt;p&gt;Used for appending and adding elements to the end of the List.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
my_list.append(4)
print(my_list)  # Output: [1, 2, 3, 4]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. copy()
&lt;/h4&gt;

&lt;p&gt;It returns a shallow copy of a list&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
new_list = my_list.copy()
print(new_list)  # Output: [1, 2, 3]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  3. clear()
&lt;/h4&gt;

&lt;p&gt;This method is used for removing all items from the list.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3] 
my_list.clear() print(my_list) # Output: []
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  4. count()
&lt;/h4&gt;

&lt;p&gt;These methods count the elements&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 2, 4, 2]
count = my_list.count(2)
print(count)  # Output: 3

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. extend()
&lt;/h3&gt;

&lt;p&gt;Adds each element of the iterable to the end of the List&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
my_list.extend([4, 5, 6])
print(my_list)  # Output: [1, 2, 3, 4, 5, 6]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6. index()
&lt;/h4&gt;

&lt;p&gt;Returns the lowest index where the element appears.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 2, 4, 2]
index = my_list.index(2)
print(index)  # Output: 1

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  7. insert()
&lt;/h4&gt;

&lt;p&gt;Inserts a given element at a given index in a list.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
my_list.insert(2, 'hello')
print(my_list)  # Output: [1, 2, 'hello', 3, 4, 5]

print("My name is {}, and I'm {} years old.".format(name, age))
 Output: "My name is Ankit, and I'm 25 years old."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  8. pop()
&lt;/h4&gt;

&lt;p&gt;Removes and returns the last value from the List or the given index value.&lt;br&gt;
 example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
removed_element = my_list.pop(2)
print(removed_element)  # Output: 3
print(my_list)  # Output: [1, 2, 4, 5]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  9. remove()
&lt;/h4&gt;

&lt;p&gt;Removes a given object from the List.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
my_list.remove(3)
print(my_list)  # Output: [1, 2, 4, 5]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  10. sort()
&lt;/h4&gt;

&lt;p&gt;Sort a List in ascending, descending, or user-defined order&lt;br&gt;
default is ascending and for reverse write 'reverse=True.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [3, 1, 4, 2, 5]
my_list.sort()
print(my_list)  # Output: [1, 2, 3, 4, 5]
my_list.sort(reverse=True) 
print(my_list) # Output: [5, 4, 3, 2, 1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  11. List as Stack
&lt;/h4&gt;

&lt;p&gt;Stack is data structure which works on last in first out principle.&lt;br&gt;
List can be used as a stack by using the &lt;code&gt;append()&lt;/code&gt; method to add elements to the top of the stack and the &lt;code&gt;pop()&lt;/code&gt;&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;stack = []
stack.append('A')
stack.append('B')
stack.append('C')
print(stack)  # Output: ['A', 'B', 'C']
top = stack.pop()
print(top)  # Output: 'C'
print(stack)  # Output: ['A', 'B']

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  12. List as Queue
&lt;/h4&gt;

&lt;p&gt;Queue is data structure which work on last in last out principal.&lt;br&gt;
A list can be used as a queue by using the &lt;code&gt;append()&lt;/code&gt; method to add elements to the end of the queue and the &lt;code&gt;pop(0)&lt;/code&gt;&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;queue = []
queue.append('A')
queue.append('B')
queue.append('C')
print(queue)  # Output: ['A', 'B', 'C']
front = queue.pop(0)
print(front)  # Output: 'A'
print(queue)  # Output: ['B', 'C']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using the &lt;code&gt;pop(0)&lt;/code&gt; method to remove elements from the beginning of a list can be inefficient for large lists, as it requires shifting all the remaining elements one position to the left. If you need to implement a more efficient queue, it's recommended to use the &lt;code&gt;deque&lt;/code&gt; class from the &lt;code&gt;collections&lt;/code&gt; module&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from collections import deque

queue = deque()
queue.append('A')
queue.append('B')
queue.append('C')
print(queue)  # Output: deque(['A', 'B', 'C'])
front = queue.popleft()
print(front)  # Output: 'A'
print(queue)  # Output: deque(['B', 'C'])
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Referances
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://docs.python.org/3/tutorial/datastructures.html"&gt;python docs&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/list-methods-in-python/"&gt;geeksForGeeks&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>List Methods in Python</title>
      <dc:creator>Ankit Kumar</dc:creator>
      <pubDate>Wed, 10 May 2023 17:26:08 +0000</pubDate>
      <link>https://dev.to/codebyank/string-methods-in-python-ni</link>
      <guid>https://dev.to/codebyank/string-methods-in-python-ni</guid>
      <description>&lt;h3&gt;
  
  
  An overview of string methods in Python
&lt;/h3&gt;

&lt;p&gt;In this article, I will provide an overview of the most commonly used string methods in Python.&lt;/p&gt;

&lt;h4&gt;
  
  
  1. append()
&lt;/h4&gt;

&lt;p&gt;Used for appending and adding elements to the end of the List.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
my_list.append(4)
print(my_list)  # Output: [1, 2, 3, 4]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. copy()
&lt;/h4&gt;

&lt;p&gt;It returns a shallow copy of a list&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
new_list = my_list.copy()
print(new_list)  # Output: [1, 2, 3]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  3. clear()
&lt;/h4&gt;

&lt;p&gt;This method is used for removing all items from the list.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3] 
my_list.clear() print(my_list) # Output: []
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  4. count()
&lt;/h4&gt;

&lt;p&gt;These methods count the elements&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 2, 4, 2]
count = my_list.count(2)
print(count)  # Output: 3

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. extend()
&lt;/h3&gt;

&lt;p&gt;Adds each element of the iterable to the end of the List&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3]
my_list.extend([4, 5, 6])
print(my_list)  # Output: [1, 2, 3, 4, 5, 6]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6. index()
&lt;/h4&gt;

&lt;p&gt;Returns the lowest index where the element appears.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 2, 4, 2]
index = my_list.index(2)
print(index)  # Output: 1

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  7. insert()
&lt;/h4&gt;

&lt;p&gt;Inserts a given element at a given index in a list.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
my_list.insert(2, 'hello')
print(my_list)  # Output: [1, 2, 'hello', 3, 4, 5]

print("My name is {}, and I'm {} years old.".format(name, age))
 Output: "My name is Ankit, and I'm 25 years old."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  8. pop()
&lt;/h4&gt;

&lt;p&gt;Removes and returns the last value from the List or the given index value.&lt;br&gt;
 example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
removed_element = my_list.pop(2)
print(removed_element)  # Output: 3
print(my_list)  # Output: [1, 2, 4, 5]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  9. remove()
&lt;/h4&gt;

&lt;p&gt;Removes a given object from the List.&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [1, 2, 3, 4, 5]
my_list.remove(3)
print(my_list)  # Output: [1, 2, 4, 5]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  10. sort()
&lt;/h4&gt;

&lt;p&gt;Sort a List in ascending, descending, or user-defined order&lt;br&gt;
default is ascending and for reverse write 'reverse=True.&lt;br&gt;
example :-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my_list = [3, 1, 4, 2, 5]
my_list.sort()
print(my_list)  # Output: [1, 2, 3, 4, 5]
my_list.sort(reverse=True) 
print(my_list) # Output: [5, 4, 3, 2, 1]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  11. List as Stack
&lt;/h4&gt;

&lt;p&gt;Stack is data structure which works on last in first out principle.&lt;br&gt;
List can be used as a stack by using the &lt;code&gt;append()&lt;/code&gt; method to add elements to the top of the stack and the &lt;code&gt;pop()&lt;/code&gt;&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;stack = []
stack.append('A')
stack.append('B')
stack.append('C')
print(stack)  # Output: ['A', 'B', 'C']
top = stack.pop()
print(top)  # Output: 'C'
print(stack)  # Output: ['A', 'B']

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  12. List as Queue
&lt;/h4&gt;

&lt;p&gt;Queue is data structure which work on last in last out principal.&lt;br&gt;
A list can be used as a queue by using the &lt;code&gt;append()&lt;/code&gt; method to add elements to the end of the queue and the &lt;code&gt;pop(0)&lt;/code&gt;&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;queue = []
queue.append('A')
queue.append('B')
queue.append('C')
print(queue)  # Output: ['A', 'B', 'C']
front = queue.pop(0)
print(front)  # Output: 'A'
print(queue)  # Output: ['B', 'C']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using the &lt;code&gt;pop(0)&lt;/code&gt; method to remove elements from the beginning of a list can be inefficient for large lists, as it requires shifting all the remaining elements one position to the left. If you need to implement a more efficient queue, it's recommended to use the &lt;code&gt;deque&lt;/code&gt; class from the &lt;code&gt;collections&lt;/code&gt; module&lt;br&gt;
example:-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from collections import deque

queue = deque()
queue.append('A')
queue.append('B')
queue.append('C')
print(queue)  # Output: deque(['A', 'B', 'C'])
front = queue.popleft()
print(front)  # Output: 'A'
print(queue)  # Output: deque(['B', 'C'])
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
  </channel>
</rss>
