<?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: Tejeswararao123</title>
    <description>The latest articles on DEV Community by Tejeswararao123 (@tejeswararao123).</description>
    <link>https://dev.to/tejeswararao123</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%2F1019283%2Fe781f452-b496-4c23-bc68-e20602c3e898.png</url>
      <title>DEV Community: Tejeswararao123</title>
      <link>https://dev.to/tejeswararao123</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tejeswararao123"/>
    <language>en</language>
    <item>
      <title>Django</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Tue, 04 Apr 2023 12:55:01 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/django-5d6a</link>
      <guid>https://dev.to/tejeswararao123/django-5d6a</guid>
      <description>&lt;h3&gt;
  
  
  Settings File:
&lt;/h3&gt;

&lt;p&gt;The settings.py file is a Python module that stores various configuration settings for your Django project, such as database settings, time zones, installed apps, middleware, templates, and more. You can access these settings in your code using the django.conf.settings object. It is important to configure the settings.py file correctly to ensure that your Django project runs smoothly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Secret Key:
&lt;/h3&gt;

&lt;p&gt;The SECRET_KEY is a randomly generated string of characters that is used to secure your Django project. It is used to sign cookies, create CSRF tokens, and other cryptographic functions. The SECRET_KEY should be kept secret and never shared with anyone. To generate a new secret key, you can use the django.core.management.utils.get_random_secret_key() function.&lt;/p&gt;

&lt;h3&gt;
  
  
  Default Django Apps:
&lt;/h3&gt;

&lt;p&gt;Django comes with several built-in apps that are included in the INSTALLED_APPS list in the settings.py file. These apps include django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, and django.contrib.staticfiles. These apps provide functionality such as user authentication, database migrations, session management, message passing, and static file serving. You can also add your own custom apps to this list.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.admin:
&lt;/h4&gt;

&lt;p&gt;This app provides an admin interface to manage Django applications. It includes features like adding/editing/deleting records, search, and filters.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.auth:
&lt;/h4&gt;

&lt;p&gt;This app provides user authentication features like login, logout, and password management.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.contenttypes:
&lt;/h4&gt;

&lt;p&gt;This app provides content types and framework for associating metadata with models.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.sessions:
&lt;/h4&gt;

&lt;p&gt;This app provides session management features for the web application.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.messages:
&lt;/h4&gt;

&lt;p&gt;This app provides messaging features for the web application.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.staticfiles:
&lt;/h4&gt;

&lt;p&gt;This app provides a framework for managing static files like CSS, JavaScript, and images.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.humanize:
&lt;/h4&gt;

&lt;p&gt;This app provides various filters to make data more human-readable, such as formatting dates, times, and numbers.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.sites:
&lt;/h4&gt;

&lt;p&gt;This app provides a framework for managing multiple sites in a single Django installation.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.redirects:
&lt;/h4&gt;

&lt;p&gt;This app provides a framework for managing URL redirects.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.sitemaps:
&lt;/h4&gt;

&lt;p&gt;This app provides a framework for creating sitemaps for search engines.&lt;/p&gt;

&lt;h4&gt;
  
  
  django.contrib.syndication:
&lt;/h4&gt;

&lt;p&gt;This app provides a framework for creating syndication feeds.&lt;/p&gt;

&lt;h3&gt;
  
  
  Middleware:
&lt;/h3&gt;

&lt;p&gt;Middleware is a framework that allows you to process HTTP requests and responses in Django. It sits between the web server and Django framework and can perform various tasks such as modifying requests and responses, adding or removing headers, and executing additional code before or after the view function is called. Middleware is added to the MIDDLEWARE list in the settings.py file and is executed in the order they are listed.&lt;/p&gt;

&lt;h3&gt;
  
  
  Different Kinds of Middleware:
&lt;/h3&gt;

&lt;p&gt;There are several kinds of middleware in Django, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Authentication Middleware - This middleware handles user authentication by verifying the user's credentials and setting the request.user attribute. It is responsible for identifying the user making the request and allowing or denying access to resources based on the user's permissions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Session Middleware - This middleware provides a way to store user data between requests. It is responsible for creating a unique session ID for each user and storing the user's data in the session object.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CSRF Middleware - This middleware provides protection against Cross-Site Request Forgery (CSRF) attacks. It generates a unique token for each request and ensures that the token is included in any POST requests. This helps prevent attackers from submitting unauthorized requests to your application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CommonMiddleware - This middleware provides a range of commonly used middleware functionality. It includes URL redirection, response caching, and gzip compression. For example, it automatically redirects requests for URLs that end with a slash to the same URL without the slash.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;SecurityMiddleware - This middleware adds security features to your Django application. It includes Content Security Policy (CSP), XSS protection, and HSTS. CSP allows you to define a policy for how resources are loaded on your web page, while XSS protection helps prevent Cross-Site Scripting (XSS) attacks. HSTS ensures that your website is always accessed over HTTPS.&lt;/p&gt;
&lt;h3&gt;
  
  
  Django Security:
&lt;/h3&gt;

&lt;p&gt;Django has several built-in security features to help protect your web application against common web attacks such as SQL injection, Cross-Site Scripting (XSS), and CSRF. Some of these features include automatic SQL injection protection through QuerySet parameterization, protection against XSS by automatically escaping HTML in templates, and protection against CSRF via the CsrfViewMiddleware.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Cross-Site Request Forgery (CSRF) is a type of web attack that tricks a user into performing an action on a website without their knowledge or consent. Django protects against CSRF attacks by using a CSRF token, which is a unique value generated for each session and included in the HTML form as a hidden input. When the form is submitted, the token is verified to ensure that the request was made by the same user.&lt;/p&gt;

&lt;h3&gt;
  
  
  XSS:
&lt;/h3&gt;

&lt;p&gt;Cross-Site Scripting (XSS) is a type of web attack that allows attackers to inject malicious scripts into web pages viewed by other users. These scripts can be used to steal sensitive information, modify web page content, or perform other malicious actions. To prevent XSS attacks, Django automatically escapes HTML in templates, so that any user-generated content is displayed as plain text.&lt;/p&gt;

&lt;h3&gt;
  
  
  Clickjacking:
&lt;/h3&gt;

&lt;p&gt;Clickjacking is a type of web attack that tricks users into clicking on a button or link on a web page without their knowledge or consent. This can be done by overlaying a transparent layer on top of a legitimate website and placing a fake button or link on the layer. To prevent clickjacking attacks, Django includes the X-Frame-Options header in responses, which instructs web browsers to prevent the page from being loaded in an iframe.&lt;/p&gt;

&lt;h3&gt;
  
  
  Other Middleware:
&lt;/h3&gt;

&lt;p&gt;Django has several other built-in middleware, such as GZipMiddleware, which compresses responses to reduce bandwidth usage, ConditionalGetMiddleware, which adds support for HTTP conditional requests, and LocaleMiddleware, which sets the language code for the current request based on the user's browser preferences or a URL parameter.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Message Middleware - This middleware adds a message framework that allows one-time messages to be stored and displayed to the user. This is useful for displaying notifications, warnings, or error messages to the user.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Middleware for Debugging - These middleware are used for debugging purposes, such as DebugToolbarMiddleware, which adds a toolbar that displays debugging information for the current page. This middleware is only intended for use in development and should not be used in production.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Third-party Middleware - These are middleware provided by third-party packages that can be added to your Django application for additional functionality. For example, django-cors-headers provides Cross-Origin Resource Sharing (CORS) support, which allows your Django application to make requests to other domains.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, middleware is a powerful tool in Django that allows you to add functionality to your application without modifying the underlying code. By using middleware, you can keep your code clean and maintainable while still adding important features to your application.&lt;/p&gt;

&lt;h3&gt;
  
  
  WSGI:
&lt;/h3&gt;

&lt;p&gt;Web Server Gateway Interface (WSGI) is a specification that defines a standard interface between web servers and web applications or frameworks. It allows web servers to communicate with web applications in a standardized way, so that different web servers and web applications can be combined easily. Django includes a WSGI application object that can be used to interface with any WSGI-compatible web server.&lt;/p&gt;

&lt;h3&gt;
  
  
  Models File:
&lt;/h3&gt;

&lt;p&gt;The models.py file is a Python module that defines the structure of the database tables used by your Django application. It contains classes that inherit from the django.db.models.Model class and define the fields and relationships between objects. Models are used to interact with the database, allowing you to create, read, update, and delete objects in the database using Python code. The models.py file is an essential part of a Django application and is used to represent the data of the application.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ondelete Cascade:
&lt;/h3&gt;

&lt;p&gt;In Django models, when you define a foreign key relationship between two tables, you can specify what should happen when the referenced object is deleted. on_delete is a parameter you can set when defining a foreign key, and it specifies what action should be taken when the referenced object is deleted. on_delete=CASCADE means that when the referenced object is deleted, all objects that have a foreign key reference to it will also be deleted.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fields and Validators:
&lt;/h3&gt;

&lt;p&gt;Django provides a wide range of fields and validators that you can use to define your models. Fields represent the various types of data that can be stored in your database, such as CharField, IntegerField, DateField, etc. Validators are used to validate the data that is entered into these fields, ensuring that it meets certain requirements. For example, you can use MaxValueValidator to ensure that an IntegerField does not exceed a certain value.&lt;/p&gt;

&lt;h3&gt;
  
  
  Python Module vs Python Class:
&lt;/h3&gt;

&lt;p&gt;In Python, a module is a file that contains Python code, while a class is a code template that defines the properties and methods of an object. A module can contain one or more classes, as well as functions, variables, and other Python code. Classes are typically defined in a module, and then imported into other modules or scripts as needed.&lt;/p&gt;

&lt;h3&gt;
  
  
  Django ORM:
&lt;/h3&gt;

&lt;p&gt;Object-Relational Mapping (ORM) is a technique for accessing and manipulating data stored in a relational database using an object-oriented programming language. Django provides a powerful ORM that allows you to work with your database using Python code, rather than writing SQL directly. The ORM abstracts away many of the details of working with the database, making it easier to write maintainable code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Using ORM Queries in Django Shell:
&lt;/h3&gt;

&lt;p&gt;The Django shell is an interactive Python console that allows you to interact with your Django application's models and data. You can use ORM queries in the Django shell to retrieve data from your database, update records, or delete records. For example, you can use MyModel.objects.all() to retrieve all records from the MyModel table, or MyModel.objects.get(id=1) to retrieve the record with an id of 1. The Django shell is a powerful tool for exploring and manipulating your data, and is often used during development and debugging.&lt;/p&gt;

&lt;h3&gt;
  
  
  Turning ORM to SQL in Django Shell:
&lt;/h3&gt;

&lt;p&gt;In Django, you can use the django.db.connection object to directly execute SQL statements against your database. You can use this feature in the Django shell to explore the SQL generated by the ORM. To turn the ORM into SQL, you can call the query method on a Django queryset object. This will return the SQL statement that would be executed by the database backend for the given queryset.&lt;/p&gt;

&lt;h3&gt;
  
  
  Aggregations:
&lt;/h3&gt;

&lt;p&gt;Aggregations are functions that are used to calculate values over a set of database records. In Django, you can use the aggregation API to perform calculations on your querysets. Aggregations can be used to calculate the sum, average, minimum, or maximum value of a field in your model. Aggregations can be combined with filters and annotations to create complex queries.&lt;/p&gt;

&lt;h3&gt;
  
  
  Annotations:
&lt;/h3&gt;

&lt;p&gt;Annotations are a way of adding additional calculated fields to your querysets. Annotations allow you to add calculated fields to your queryset that are not part of your model. You can use annotations to calculate the sum, average, or count of related records, or to perform other calculations on your data. Annotations can be combined with filters and aggregations to create complex queries.&lt;/p&gt;

&lt;h3&gt;
  
  
  Migration Files:
&lt;/h3&gt;

&lt;p&gt;Migration files are generated by Django's built-in migration framework when you make changes to your database schema. Migration files are used to record changes to your models, and are used to keep your database schema in sync with your models. Migration files are Python files that contain a series of operations that are executed when you run the migration. Migration files are stored in the migrations directory of your Django application.&lt;/p&gt;

&lt;h3&gt;
  
  
  SQL Transactions:
&lt;/h3&gt;

&lt;p&gt;SQL transactions are used to group a series of SQL statements together into a single unit of work. Transactions are used to ensure that a series of SQL statements are executed as a single, atomic operation. Transactions can be used to ensure data consistency and integrity, and can be used to recover from errors or other failures during the execution of SQL statements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Atomic Transactions:
&lt;/h3&gt;

&lt;p&gt;Atomic transactions are a feature of Django's ORM that allow you to group a series of database operations into a single, atomic transaction. Atomic transactions are similar to SQL transactions, but are implemented at the ORM level. Atomic transactions are used to ensure that a series of database operations are executed as a single, atomic operation. Atomic transactions can be used to ensure data consistency and integrity, and can be used to recover from errors or other failures during the execution of database operations.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Scope, Hoisting and Closures in Javascript</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Sat, 18 Mar 2023 04:05:33 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/scope-hoisting-and-closures-in-javascript-5e7o</link>
      <guid>https://dev.to/tejeswararao123/scope-hoisting-and-closures-in-javascript-5e7o</guid>
      <description>&lt;h3&gt;
  
  
  Scope
&lt;/h3&gt;

&lt;p&gt;Scope in JavaScript refers to the accessibility of variables, functions, and objects in a particular part of the code. JavaScript uses lexical scoping, which means that the scope of a variable or function is determined by its location in the code.&lt;br&gt;
Before getting into scope we have to know how we can declare variables in javascript. There are three methods in javascript to declare variables ie. let var and const.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The variables declared with a var will have function scope.
Example
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Error: a is not defined&lt;/span&gt;

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

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;If a variable is declared in a function using var then it can be accessible in the function only but if it is defined in the block it will have block scope it can be accessed anywhere in the program
Example
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;

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

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;In javascript nested functions can access variables in their parent function these nested functions are called closures.
Example
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;outer&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;inner&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;inner&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;outer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;The variables declared using let and const will have block scope means any variable declared within curly braces cannot accessible from outside of curly braces.
Example
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: undefined&lt;/span&gt;

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

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Nested functions can access variables declared in an outer function&lt;/li&gt;
&lt;li&gt;If a variable is declared outside all functions and blocks it will have global scope means it can be accessed from anywhere in the program.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Hoisting
&lt;/h3&gt;

&lt;p&gt;In javascript, execution will have two phases one is the creation and another one is execution. In the creation phase all variables will be created in memory with the default value undefined and all the functions will store fully. Here only variables declared with var and regular functions will be created in the creation phase. This is known as hoisting&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In the execution phase variable initialization will take place
Example
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hi&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hello&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// reference error&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;hi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;90&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;hello&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;99&lt;/span&gt;

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

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;hii&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;44&lt;/span&gt;
&lt;span class="nx"&gt;hi&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;hi&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hii&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;span class="c1"&gt;// output: 44&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

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

&lt;p&gt;In JavaScript, a closure is created when a function is defined inside another function and the inner function is returned or passed as a reference to a variable outside its enclosing function. The closure captures and retains the values of all the variables that were in scope at the time of its creation, even after the outer function has returned. Closures allow you to create private variables and functions that are inaccessible from outside the function in which they were defined&lt;/p&gt;

&lt;p&gt;Example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;addFive&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;addFive&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: 8&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;In this example, outerFunction returns innerFunction, which is then assigned to the variable addFive. When addFive is called with an argument of 3, it returns 8. The closure is created when innerFunction is defined inside outerFunction, and it captures the value of x, which is 5. Even though outerFunction has returned and its local variables are no longer in scope, the closure retains the value of x and can still access it when innerFunction is called.&lt;/p&gt;

&lt;p&gt;Applications of closures&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Private variables and methods: Closures can be used to create private variables and methods that are inaccessible from outside the function in which they were defined. This can be useful for preventing unintended modifications to your code. 
For example:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: 1&lt;/span&gt;
&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: 2&lt;/span&gt;
&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Memoization: Closures can be used to implement memoization, which is a technique for caching the results of expensive function calls to improve performance. 
For example:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;memoize&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;cache&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Retrieving from cache&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Calculating result&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;memoizedFibonacci&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;memoize&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;memoizedFibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: 55&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;memoizedFibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Output: Retrieving from cache, 55&lt;/span&gt;

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

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Callback functions: Closures can be used to create callback functions that have access to variables from the parent function. This can be useful for implementing event handlers and other asynchronous operations. 
For example:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;callbackFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callbackFunction&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Output: HELLO WORLD&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>HTML and CSS concepts</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Thu, 02 Mar 2023 07:22:43 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/html-and-css-concepts-40g1</link>
      <guid>https://dev.to/tejeswararao123/html-and-css-concepts-40g1</guid>
      <description>&lt;h3&gt;
  
  
  Box Model:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Every element on a webpage is considered a rectangular box &lt;/li&gt;
&lt;li&gt;Box model has some properties which can be set to the HTML page
#### Padding:&lt;/li&gt;
&lt;li&gt;Specifies the gap between content and border
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// HTML code //

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset="UTF-8"&amp;gt;
  &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;
  &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;h1 class="header"&amp;gt; hello&amp;lt;/h1&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;


//  CSS code  //
.header{
    padding:1rem;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The above maintain a gap of 1rem between content and border of h1 element&lt;/li&gt;
&lt;li&gt;Here are some of the padding attributes
#### padding-top&lt;/li&gt;
&lt;li&gt;Specifies the gap between the top of the content and the border&lt;/li&gt;
&lt;li&gt;in the same we can use padding-left, padding-bottom, and padding-right to give space at 
required position.&lt;/li&gt;
&lt;li&gt;If we want to apply the same padding for the top and bottom and the same padding for the left and right you have to pass two values like below
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;p{
    padding: 1rem 2rem;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The above property sets 1rem gap at the top and bottom and a 2 rem gap at the left side and right side&lt;/li&gt;
&lt;li&gt;if you want different spacing for all four sides you can give 4 values for the padding attribute
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a{
    padding: 1rem 2rem 3rem 2rem;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Here the order of values applied to the element is a top, right, bottom, left
#### Margin:&lt;/li&gt;
&lt;li&gt;margin specifies the gap between the border and other outside sibling elements&lt;/li&gt;
&lt;li&gt;Syntax for margin is the same as padding explained above but instead of padding we use margin in syntax&lt;/li&gt;
&lt;li&gt;you can use all the attributes mentioned for padding
For example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;p{
    margin: 10px 20px 22px 10px
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Border:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Border specifies how the border should be to your HTML elements like border style, border width, and border color.&lt;/li&gt;
&lt;li&gt;border-style properties are dashed, solid, none, and dotted&lt;/li&gt;
&lt;li&gt;border-width specifies the width of the border&lt;/li&gt;
&lt;li&gt;border-color specifies the color of the border&lt;/li&gt;
&lt;li&gt;Shorthand syntax to apply all of the above properties is
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a{
    border: solid 2px blue
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Box-sizing in CSS
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property controls how an element's width and height are calculated, including its padding and border.&lt;/li&gt;
&lt;li&gt;By default, when you set the width and height of an element in CSS, those values only apply to the element's content&lt;/li&gt;
&lt;li&gt;If you apply border and padding the element size will increase because the default value for box-sizing is content-box&lt;/li&gt;
&lt;li&gt;If you want to mention sizes including padding and border you can give border-box for box-sizing element
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.element {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

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

&lt;/div&gt;



&lt;p&gt;In the above code, the box-sizing property is set to border-box, which means that the element's width of 200 pixels includes its padding and border. Without the border-box value, the element's total width would be 222 pixels (200px + 10px padding on each side + 1px border on each side).&lt;/p&gt;

&lt;h3&gt;
  
  
  Inline versus Block Elements:
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Block elements:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Block elements are those that take up the full width of their container and create a new line after the element.&lt;/li&gt;
&lt;li&gt;Block elements typically contain other block and inline elements within them&lt;/li&gt;
&lt;li&gt;Examples of block elements include
&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&amp;gt;, &amp;lt;p&amp;gt;, &amp;lt;h1&amp;gt; to &amp;lt;h6&amp;gt;, &amp;lt;ul&amp;gt;, &amp;lt;ol&amp;gt;, and &amp;lt;form&amp;gt;.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  inline elements
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These elements do not create a new line after the element and only take up as much width as necessary to contain their content.&lt;/li&gt;
&lt;li&gt;Examples of inline elements include
&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;span&amp;gt;, &amp;lt;a&amp;gt;, &amp;lt;strong&amp;gt;, &amp;lt;em&amp;gt;, and &amp;lt;img&amp;gt;.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;These elements don't have padding, border, and margin properties&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Positioning: Relative/Absolute
&lt;/h4&gt;

&lt;h4&gt;
  
  
  position relative
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;When you set position: relative to an element, it is positioned relative to its normal position on the page. &lt;/li&gt;
&lt;li&gt;This means that you can use the top, bottom, left, and right properties to move the element up, down, left, or right from its original position.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.box {
  position: relative;
  top: 20px;
  left: 50px;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, the box element will be positioned 20 pixels down from its normal position and 50 pixels to the right of its normal position.&lt;/p&gt;

&lt;h4&gt;
  
  
  position absolute:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;When you set position: absolute on an element, it is positioned relative to its nearest positioned ancestor. &lt;/li&gt;
&lt;li&gt;If no ancestor elements are positioned, then the element is positioned relative to the body of the webpage.&lt;/li&gt;
&lt;li&gt;This means that you can use top, bottom, left, and right properties to position the element precisely on the page, regardless of where it appears in the HTML document.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.box {
  position: absolute;
  top: 100px;
  left: 200px;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, the box element will be positioned 100 pixels down from its nearest positioned ancestor and 200 pixels to the right of its nearest positioned ancestor.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;structural classes are used to apply styles to specific types of elements based on their position in the document tree.
#### Parent selector&lt;/li&gt;
&lt;li&gt;The parent selector (also known as the "descendant selector") is used to apply styles to child elements based on their relationship to a parent element.&lt;/li&gt;
&lt;li&gt;The selector uses a space to indicate the relationship between the parent and child elements.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.parent p {
  color: red;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, the p elements that are descendants of the parent element will have red text color.&lt;/p&gt;

&lt;h4&gt;
  
  
  Child Selector
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The child selector (also known as the "direct descendant selector") is used to apply styles to direct child elements of a parent element. &lt;/li&gt;
&lt;li&gt;The selector uses the &amp;gt; symbol to indicate the direct relationship between the parent and child elements.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.parent &amp;gt; p {
  color: red;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, only the direct p children of the parent element will have red text color.&lt;/p&gt;

&lt;h4&gt;
  
  
  Sibling Selector
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The sibling selector is used to apply styles to elements that are siblings of another element. &lt;/li&gt;
&lt;li&gt;There are two types of sibling selectors: the adjacent sibling selector and the general sibling selector.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  The adjacent sibling selector (represented by the + symbol)
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;selects the first sibling that follows immediately after the first element.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;h1 + p {
  color: red;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, the p element that immediately follows the h1 element will have red text color.&lt;/p&gt;

&lt;h4&gt;
  
  
  The general sibling selector (represented by the ~ symbol):
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Selects all siblings that follow after the first element.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;h1 ~ p {
  color: red;
}

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

&lt;/div&gt;



&lt;p&gt;In this example, all p elements that follow the h1 element will have red text color.&lt;/p&gt;

&lt;h4&gt;
  
  
  pseudo-classes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These are used to style elements based on their state or relationship to other elements in the document tree.&lt;/li&gt;
&lt;li&gt;Pseudo-classes start with a colon (:) and are appended to a selector.
Common types of pseudo-classes
#### :hover
*:hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse.&lt;/li&gt;
&lt;li&gt;commonly used to highlight links and buttons.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a:hover {
  color: red;
}

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

&lt;/div&gt;



&lt;p&gt;This will make all links turn red when the user hovers over them.&lt;/p&gt;

&lt;h4&gt;
  
  
  :active
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;: active pseudo-class is used to apply styles to an element while it is being clicked or activated.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;button:active {
  background-color: gray;
}

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

&lt;/div&gt;



&lt;p&gt;This will make a button turn gray while the user is clicking on it.&lt;/p&gt;

&lt;h4&gt;
  
  
  :focus
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This is used to apply styles to an element that has focus.&lt;/li&gt;
&lt;li&gt;commonly used to highlight form fields that are being filled out by the user.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;input:focus {
  outline: none;
  border-color: blue;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will remove the outline and change the border color of an input field when it has focus.&lt;/p&gt;

&lt;h4&gt;
  
  
  :first-child and :last-child
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The :first-child and :last-child pseudo-classes are used to select the first or last child element of a parent element. &lt;/li&gt;
&lt;li&gt;This is commonly used to style list items or table rows.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;li:first-child {
  font-weight: bold;
}

tr:last-child {
  background-color: gray;
}

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

&lt;/div&gt;



&lt;p&gt;This will make the first list item bold and give the last table row a gray background color.&lt;/p&gt;

&lt;h4&gt;
  
  
  :nth-child()
&lt;/h4&gt;

&lt;p&gt;The :nth-child() pseudo-class is used to select an element based on its position in the document tree. This is commonly used to alternate the styles of table rows or to select specific items in a list.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;tr:nth-child(even) {
  background-color: gray;
}

li:nth-child(3n) {
  font-style: italic;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will give every even table row a gray background color and make every third list item italic.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You can use odd to select every nth odd element&lt;/li&gt;
&lt;li&gt;To select a specific nth child use the below syntax
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;li:nth-child(3) {
  font-weight: bold;
}

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

&lt;/div&gt;



&lt;p&gt;This will select the third li element and make its text bold.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you want  to select every third child element starting from the fourth element use below one
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;li:nth-child(3n+4) {
  text-decoration: underline;
}

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

&lt;/div&gt;



&lt;p&gt;This will select every third li element starting from the fourth li element and underline its text.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;CSS styling classes are reusable sets of styles that can be applied to HTML elements to quickly and consistently achieve a desired visual effect.
#### .container&lt;/li&gt;
&lt;li&gt;The .container class is used to define a fixed-width container element that centers its content horizontally on the page. &lt;/li&gt;
&lt;li&gt;This class is commonly used for wrapping entire page layouts or individual sections of a page.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  .btn
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This class is used to define a button element with a standardized appearance.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  .card
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This class is used to define a rectangular container element with a border and padding. &lt;/li&gt;
&lt;li&gt;It is commonly used for displaying content in a structured and visually appealing way.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The .card class is used to define a rectangular container element with a border and padding&lt;/p&gt;

&lt;h4&gt;
  
  
  .form-control
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This class is used to define form input elements with a standardized appearance.&lt;/li&gt;
&lt;li&gt;It is commonly used for text inputs, text areas, and other form elements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  text-center
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This class is used to horizontally center text inside an element. &lt;/li&gt;
&lt;li&gt;It is commonly used for headings, paragraphs, and other text elements.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.text-center {
  text-align: center;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By defining common style attributes you can re-use whenever you need.&lt;/p&gt;

&lt;h4&gt;
  
  
  CSS Specificity
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;CSS specificity is a way of determining which CSS rules should be applied to an HTML element when there are multiple CSS rules targeting the same element.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;below is the order of specificity from lowest to highest&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Type selectors (e.g., div, p, a)&lt;/li&gt;
&lt;li&gt;Class selectors (e.g., .my-class)&lt;/li&gt;
&lt;li&gt;ID selectors (e.g., #my-id)&lt;/li&gt;
&lt;li&gt;Inline styles (e.g., style="color: red;")&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The higher the specificity of a selector, the more weight it carries when determining which CSS rule should be applied to an element. For example, a rule with an ID selector will override a rule with a class selector, which in turn will override a rule with a type selector.&lt;/p&gt;

&lt;h4&gt;
  
  
  CSS Responsive Queries
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;To make our webpage responsive we use media queries &lt;br&gt;
Media queries allow developers to apply different styles to different devices or screen sizes based on their characteristics, such as screen width, height, orientation, resolution, and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;To use media queries in CSS, you can add them to your CSS stylesheet using the @media rule.&lt;br&gt;
Example&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* styles for all devices */
body {
  font-size: 16px;
  color: #333;
}

/* styles for devices with a maximum width of 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* styles for devices with a minimum width of 1024px */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

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

&lt;/div&gt;



&lt;p&gt;In the example above, we have defined styles for all devices by targeting the body element. Then, we added two media queries to adjust the font size of the body element based on the device's screen width. The first media query targets devices with a maximum width of 768px, and the second targets devices with a minimum width of 1024px.&lt;/p&gt;

&lt;p&gt;Media queries can also be combined with logical operators (and, not, and only) and other CSS selectors to create more complex rules. &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;/* styles for devices with a width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 90%;
  }
}

/* styles for devices with a width greater than 1024px or with a high-resolution display */
@media (min-width: 1024px) or (orientation: protrait) {
  .container {
    width: 80%;
  }
}

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

&lt;/div&gt;



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

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

&lt;p&gt;Flexbox (short for "Flexible Box Layout") is a layout model in CSS that allows you to create flexible and responsive layouts for web pages.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It provides a way to arrange and align elements inside a container, regardless of their size or content, in a predictable and flexible way.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  display:
&lt;/h4&gt;

&lt;p&gt;This property sets the element to be a flex container or not. To create a flex container, set the display property to flex or inline-flex.&lt;/p&gt;

&lt;h4&gt;
  
  
  flex-direction:
&lt;/h4&gt;

&lt;p&gt;This property sets the direction of the main axis of the flex container. It can be set to row (left-to-right), row-reverse (right-to-left), column (top-to-bottom), or column-reverse (bottom-to-top).&lt;/p&gt;

&lt;h4&gt;
  
  
  justify-content:
&lt;/h4&gt;

&lt;p&gt;This property sets the alignment of flex items along the main axis of the flex container. It can be set to flex-start (left or top), flex-end (right or bottom), center (centered), space-between (distributed evenly with no extra space before the first or after the last item), space-around (distributed evenly with equal space before the first and after the last item), or space-evenly (distributed evenly with equal space between all items).&lt;/p&gt;

&lt;h4&gt;
  
  
  align-items:
&lt;/h4&gt;

&lt;p&gt;This property sets the alignment of flex items along the cross-axis of the flex container. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), or baseline (aligned on their baselines).&lt;/p&gt;

&lt;h4&gt;
  
  
  flex-wrap:
&lt;/h4&gt;

&lt;p&gt;This property determines whether flex items should wrap or not if they exceed the width or height of the flex container. It can be set to nowrap (no wrapping), wrap (wrapping if needed), or wrap-reverse (wrapping in reverse order).&lt;/p&gt;

&lt;h4&gt;
  
  
  align-content:
&lt;/h4&gt;

&lt;p&gt;This property sets the alignment of multiple lines of flex items along the cross-axis of the flex container. It works like justify-content, but for multiple lines of flex items. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), space-between (distributed evenly with no extra space before the first or after the last line), space-around (distributed evenly with equal space before the first and after the last line), or space-evenly (distributed evenly with equal space between all lines).&lt;/p&gt;

&lt;h4&gt;
  
  
  flex:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties. &lt;/li&gt;
&lt;li&gt;It sets how much a flex item should grow or shrink relative to the other flex items in the same container.
Example
Html code
&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 class="flex-container"&amp;gt;
  &amp;lt;div class="flex-item"&amp;gt;1&amp;lt;/div&amp;gt;
  &amp;lt;div class="flex-item"&amp;gt;2&amp;lt;/div&amp;gt;
  &amp;lt;div class="flex-item"&amp;gt;3&amp;lt;/div&amp;gt;
  &amp;lt;div class="flex-item"&amp;gt;4&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CSS code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  height: 400px;
  background-color: lightblue;
}

.flex-item {
  flex: 1 1 100px;
  background-color: white;
  color: black;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  margin: 10px;
}

&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 system that allows you to create complex two-dimensional layouts for web pages.&lt;/p&gt;

&lt;h4&gt;
  
  
  display: grid;:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property is used to make an element a grid container.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  grid-template-columns and grid-template-rows:
&lt;/h4&gt;

&lt;p&gt;These properties are used to define the size of the grid tracks (rows and columns) in the grid. They can accept values such as length, percentage, fr units, auto, and minmax().&lt;/p&gt;

&lt;p&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;.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-template-areas:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property is used to define the grid areas by specifying the grid names for each cell in the grid. You can use dots to represent empty cells.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-template:
&lt;/h4&gt;

&lt;p&gt;This is a shorthand property that combines grid-template-rows, grid-template-columns, and grid-template-areas in one declaration.&lt;/p&gt;

&lt;h4&gt;
  
  
  grid-column-gap and grid-row-gap:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These properties are used to define the space between grid columns and rows.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-gap:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This is a shorthand property that combines grid-row-gap and grid-column-gap in one declaration.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-gap: 10px 20px;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-auto-rows and grid-auto-columns:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These properties are used to set the size of the rows and columns that are not explicitly defined in the grid template.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-auto-rows: 200px;
  grid-auto-columns: 1fr;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-auto-flow:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property is used to specify how the grid should fill in cells that are not explicitly defined in the grid template. The possible values are row, column, row dense, and column dense.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-auto-flow: row;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This is a shorthand property that combines grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow in one declaration.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid:
    "header header header" 100px
    "nav main aside" 1fr
    "footer footer footer" 100px /
    1fr 2fr 1fr;
}

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

&lt;/div&gt;



&lt;p&gt;grid-row-start, grid-row-end, grid-column-start, and grid-column-end: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;These properties are used to specify the starting and ending positions of grid items in the grid.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.item {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-row and grid-column:
&lt;/h4&gt;

&lt;p&gt;These are shorthand properties that combine grid-row-start, grid-row-end, grid-column-start, and grid-column-end in one declaration.&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;.item {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-area:
&lt;/h4&gt;

&lt;p&gt;This property is used to specify the grid area that a grid item should span.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.item {
  grid-area: 2 / 2 / 4 / 4;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  justify-items and align-items:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These properties are used to align grid items within their grid cells. The possible values are start, end, center, stretch, and baseline.
Example code
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  justify-items: center;
  align-items: end;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  justify-content and align-content:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These properties are used to align the grid tracks within the grid container. The possible values are start, end, center, stretch, space-between, space-around, and space-evenly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&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;.container {
  justify-content: space-between;
  align-content: center;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  place-items and place-content:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;These are shorthand properties that combine justify-items and align-items, and justify-content and align-content in one declaration.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  place-items: center end;
  place-content: space-between center;
}

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  grid-auto-flow:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;This property controls the automatic placement of grid items that are not explicitly placed with grid-row and grid-column.
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  grid-auto-flow: dense;
}

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

&lt;/div&gt;



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

&lt;p&gt;&lt;code&gt;&amp;lt;meta charset="utf-8"&amp;gt;&lt;/code&gt;&lt;br&gt;&lt;br&gt;
This meta tag specifies the character encoding used in the document, which is usually set to UTF-8.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;&lt;/code&gt;&lt;br&gt;&lt;br&gt;
This meta tag sets the viewport size for the document, which is important for responsive design. The width=device-width attribute sets the width of the viewport to the width of the device, while the initial-scale=1.0 attribute sets the initial zoom level to 1.0.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta name="description" content="Description of your website"&amp;gt;&lt;/code&gt;&lt;br&gt;
 This meta tag provides a brief description of the website, which can be used by search engines or social media platforms when displaying search results or links.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta name="keywords" content="keyword1, keyword2, keyword3"&amp;gt;&lt;/code&gt;&lt;br&gt;
 This meta tag specifies a comma-separated list of keywords or phrases that are relevant to the website.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta name="author" content="Your Name"&amp;gt;&lt;/code&gt;&lt;br&gt;
 This meta tag specifies the author of the document.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta name="robots" content="index, follow"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This meta tag specifies how search engine crawlers should treat the website. The index attribute tells search engines to index the website, while the following attribute tells search engines to follow the links on the website.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;&lt;/code&gt;&lt;br&gt;
This meta tag specifies the compatibility mode for Internet Explorer.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/difference-between-block-elements-and-inline-elements/"&gt;https://www.geeksforgeeks.org/difference-between-block-elements-and-inline-elements/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.sitepoint.com/structural-pseudo-classes/"&gt;https://www.sitepoint.com/structural-pseudo-classes/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://css-tricks.com/logic-in-css-media-queries/"&gt;https://css-tricks.com/logic-in-css-media-queries/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>SQL Concepts</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Wed, 22 Feb 2023 07:07:21 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/sql-concepts-1all</link>
      <guid>https://dev.to/tejeswararao123/sql-concepts-1all</guid>
      <description>&lt;h1&gt;
  
  
  SQL Concepts
&lt;/h1&gt;

&lt;h2&gt;
  
  
  ACID
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;ACID refers to a set of principles that ensure reliable data transactions&lt;/li&gt;
&lt;li&gt;These are the properties of a transaction&lt;/li&gt;
&lt;li&gt;Transaction is a logical group of one or more SQL statements&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Atomicity:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Either all or none are applied to a database
Example: In a banking system for a money transfer two operations have to be done like debit and credit in this scenario two operations or none should be done&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xgnZyUqw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ccbp-fullstack-backend.s3.ap-south-1.amazonaws.com/beta/intro_to_databases/assets/images/transactions_atomicity.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xgnZyUqw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ccbp-fullstack-backend.s3.ap-south-1.amazonaws.com/beta/intro_to_databases/assets/images/transactions_atomicity.png" alt="Alt text" width="589" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Consistency:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Transactions always leave the database in a consistent state
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fmHLS0-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ccbp-fullstack-backend.s3.ap-south-1.amazonaws.com/beta/intro_to_databases/assets/images/transactions_consistency.png" alt="Alt text" width="665" height="311"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Isolation:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When multiple transactions are being simultaneously executed and in parallel in a database system, then the carrying out and execution of the transaction would occur as if it is the only transaction that exists in the system. &lt;/li&gt;
&lt;li&gt;None of the transactions would affect any other transaction’s existence.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4u23DK2G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ccbp-fullstack-backend.s3.ap-south-1.amazonaws.com/beta/intro_to_databases/assets/images/transactions_isolation.png" alt="Alt text" width="498" height="349"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Durability:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Once a transaction is committed, its changes are permanent and will survive any subsequent system failures, even power loss or crashes.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4_Hav3K4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ccbp-fullstack-backend.s3.ap-south-1.amazonaws.com/beta/intro_to_databases/assets/images/transactions_durability.png" alt="Alt text" width="626" height="348"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  CAP Theorem: It states that in a distributed system, it is impossible to simultaneously achieve Consistency, Availability, and partition tolerance
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;According to the above statement we have to give up something to gain something&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Consistency:
&lt;/h3&gt;

&lt;p&gt;Every read operation from the database returns the most recent write or an error. In other words, all nodes in the system see the same data at the same time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Availability:
&lt;/h3&gt;

&lt;p&gt;Every request to the database receives a response, without guaranteeing that it contains the most recent version of the data. In other words, the system is always up and running, even in the face of network partitions, hardware failures, or other forms of degradation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Partition tolerance:
&lt;/h3&gt;

&lt;p&gt;The system continues to operate even when network partitions occur, which means that some nodes in the system are unable to communicate with others.&lt;/p&gt;

&lt;p&gt;Examples&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; Trade-off between consistency and availability. Choosing to prioritize consistency may mean sacrificing some level of availability, while prioritizing availability may mean sacrificing some level of consistency.&lt;/li&gt;
&lt;li&gt; Another example of a trade-off in database management systems is between performance and data durability. Often, improving performance can come at the cost of reducing data durability. This is because some optimizations, such as buffering or caching data in memory, may increase performance but also increase the risk of data loss in the event of a system failure.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Joins:
&lt;/h3&gt;

&lt;p&gt;JOIN is a clause to combine rows from two or more tables, based on a related column between them. &lt;/p&gt;

&lt;h3&gt;
  
  
  Types of joins:
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Natural join:
&lt;/h4&gt;

&lt;p&gt;NATURAL JOIN combines the tables based on the common columns.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT *
FROM table1
   NATURAL JOIN table2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Inner Join:
&lt;/h3&gt;

&lt;p&gt;An inner join returns only the rows that have matching values in both tables.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT column1, column2, ...
FROM table1
INNER JOIN table2
ON table1.column = table2.column;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  CROSS JOIN:
&lt;/h3&gt;

&lt;p&gt;In CROSS JOIN, each row from the first table is combined with all rows in the second table. Cross Join is also called CARTESIAN JOIN&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT *
FROM table1
   CROSS JOIN table2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Full Join:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;FULL JOIN or FULL OUTER  JOIN is the result of both RIGHT JOIN and LEFT JOIN
&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 table1
   FULL JOIN table2
ON c1 = c2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cross Join &lt;/p&gt;

&lt;h3&gt;
  
  
  Left join:
&lt;/h3&gt;

&lt;p&gt;Returns each row in the left table, and matched rows from the right table are combined. If there is no match, NULL values are assigned to the right half of the rows in the temporary table.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT *
FROM table1
   LEFT JOIN table2 
ON table1.c1 = tabl2.c2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Right join:
&lt;/h3&gt;

&lt;p&gt;Returns each row in the right table, and matched rows from the left table are combined. If there is no match, NULL values are assigned to the left half of the rows in the temporary table.&lt;/p&gt;

&lt;p&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;SELECT *
FROM table1
   RIGHT JOIN table2
ON table1.c1 = table2.c2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Aggregations, Filters in queries:
&lt;/h3&gt;

&lt;p&gt;These are the function that we can apply after grouping data.&lt;/p&gt;

&lt;h3&gt;
  
  
  sum():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Calculates the sum of columns for a group of rows or entire data
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 category, SUM(sales) FROM products GROUP BY category;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Avg():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Calculates the average value of a given column for a group of rows or to entire data
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 AVG(salary) from EMPLOYEES
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  count():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Counts the number of rows in a table or the number of rows in a group of rows
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT customer, COUNT(order_id) FROM orders GROUP BY customer;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Min():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns minimum value of a given column for entire data or grouped data
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT department, MIN(salary) FROM employees GROUP BY department;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Max():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns the maximum value of a given column for entire data or grouped data
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT department, Max(salary) FROM employees GROUP BY department;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Filters:
&lt;/h3&gt;

&lt;p&gt;We use a where clause and having clause to filter rows in a table&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Where clause is put before grouping and having clause is written after grouping&lt;/li&gt;
&lt;li&gt;Inside these clauses we insert conditions
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 batsman,sum(runs) as runs from batsman_runs
where team='rcb'
group by batsman
having runs&amp;gt;2000;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Normalization:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Normalization is a process by which database and table structures are created or modified to address inefficiencies/complexities related to data storage, data modification, and querying database tables
### Normalization can be achieved by following techniques
#### 1NF Databases:
A 1NF database is an atomic database. In this case, atomic means that each cell contains one value and each row is unique
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// This would be a non-atomic table
| Title           | Length     | Type |
|-----------------|------------|------|
| Example A, B, C | 125 inches | B, C |
| Example A, B, C | 125 inches | B, C |
// This would be an atomic table
| ID | Title     | Length     | Type |
|----|-----------|------------|------|
| 1  | Example A | 125 inches | B    |
| 2  | Example A | 125 inches | C    |
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Second normal form:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In a table every non-key value should be fully dependent on a primary key
Violating the second normal form&lt;/li&gt;
&lt;li&gt;2NF is intended to eliminate redundancy and anomalies that can occur when data is stored in a single table.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;product_id | supplier_id | product_name | supplier_name | supplier_location
-----------+-------------+--------------+---------------+-----------------
1          | 1           | Widget A     | Supplier X    | Location 1
2          | 1           | Widget B     | Supplier X    | Location 1
3          | 2           | Widget C     | Supplier Y    | Location 2
4          | 2           | Widget D     | Supplier Y    | Location 2

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

&lt;/div&gt;



&lt;p&gt;To normalize the above table to 2nd nf modify the above table like below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Table: products
product_id | product_name
-----------+--------------
1          | Widget A
2          | Widget B
3          | Widget C
4          | Widget D

Table: suppliers
supplier_id | supplier_name | supplier_location
------------+---------------+------------------
1           | Supplier X    | Location 1
2           | Supplier Y    | Location 2

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Third normal form:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This ensures that every non-key column in a table is not dependent on any other non-key column&lt;/li&gt;
&lt;li&gt;Each column in a table must depend only on the primary key and not on any other columns in the table.&lt;/li&gt;
&lt;li&gt;3NF is intended to eliminate data redundancy and anomalies that can occur when data is stored in a single table.
Violating 3rd normal form:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;book_id | author_name | author_email | book_title | book_isbn | book_publisher | publisher_location
--------+-------------+--------------+------------+-----------+----------------+--------------------
1       | John Smith  | john@xyz.com | Book A     | 123456789 | Publisher X    | New York
2       | John Smith  | john@xyz.com | Book B     | 987654321 | Publisher Y    | London
3       | Jane Doe    | jane@xyz.com | Book C     | 111111111 | Publisher Z    | San Francisco

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

&lt;/div&gt;



&lt;p&gt;To normalize the above do following&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Table: books
book_id | book_title | book_isbn
--------+------------+-----------
1       | Book A     | 123456789
2       | Book B     | 987654321
3       | Book C     | 111111111

Table: authors
author_id | author_name | author_email
----------+-------------+--------------
1         | John Smith  | john@xyz.com
2         | Jane Doe    | jane@xyz.com

Table: publishers
publisher_id | publisher_name | publisher_location
-------------+----------------+--------------------
1            | Publisher X    | New York
2            | Publisher Y    | London
3            | Publisher Z    | San Francisco

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Use foreign keys to establish a relationship between tables
Indexes
### Boyce-Codd Normal Form (BCNF):&lt;/li&gt;
&lt;li&gt;It ensures every non-key column in a table should be functionally dependent only on the primary key and not on any other columns in the table
### Violating the above technique
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;student_id | student_name | course_id | course_name | instructor_name | instructor_email
-----------+--------------+-----------+-------------+----------------+------------------
1          | John Smith   | 1         | Course A    | Jane Doe       | jane@xyz.com
1          | John Smith   | 2         | Course B    | John Doe       | john@xyz.com
2          | Jane Doe     | 2         | Course B    | John Doe       | john@xyz.com
3          | Bob Johnson  | 3         | Course C    | Jane Doe       | jane@xyz.com

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

&lt;/div&gt;



&lt;p&gt;To normalize the above data split the table into three&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Table: students
student_id | student_name
-----------+--------------
1          | John Smith
2          | Jane Doe
3          | Bob Johnson

Table: courses
course_id | course_name
----------+------------
1         | Course A
2         | Course B
3         | Course C

Table: instructors
instructor_id | instructor_name | instructor_email
--------------+----------------+------------------
1             | Jane Doe       | jane@xyz.com
2             | John Doe       | john@xyz.com

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;To establish a relationship we can create another table that will hold all details of the enrollment
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Table: enrollment
student_id | course_id | instructor_id
-----------+-----------+--------------
1          | 1         | 1
1          | 2         | 2
2          | 2         | 2
3          | 3         | 1

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Transactions:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Nothing but a Set of Queries that are treated as a single unit&lt;/li&gt;
&lt;li&gt;Transactions follow the principles of acid
Acid properties are explained above&lt;/li&gt;
&lt;li&gt;In PostgreSQL, transactions are started with the BEGIN statement and are ended with either the COMMIT statement to apply the changes made within the transaction
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BEGIN;
UPDATE accounts SET balance = balance - 100 WHERE account_id = 123;
UPDATE accounts SET balance = balance + 100 WHERE account_id = 456;
COMMIT;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above, if both UPDATE statements execute successfully, the COMMIT statement applies the changes to the database. If an error occurs during the transaction, the ROLLBACK statement will undo the changes made within the transaction, leaving the database in its original state.&lt;/p&gt;

&lt;h3&gt;
  
  
  Locking mechanism:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Locks are used to restrict users from access to the database, modifying data to ensure that transactions do not interfere with each other&lt;/li&gt;
&lt;li&gt;Locking ensures that each transaction can access the data it needs without interfering with other transactions that may be accessing the same data.
Type of locking mechanism&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  1. Shared Locks:
&lt;/h3&gt;

&lt;p&gt;Shared locks allow multiple transactions to read a resource simultaneously without interfering with each other. A shared lock allows other transactions to acquire shared locks but prevents them from acquiring exclusive locks.&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;BEGIN;
SELECT * FROM accounts WHERE account_id = 5 FOR SHARE;
UPDATE accounts SET balance = balance + 100 WHERE account_id = 5;
COMMIT;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The SELECT statement acquires a shared lock on the row with account_id = 5 using the FOR SHARE clause&lt;/li&gt;
&lt;li&gt;This ensures that other transactions can also acquire shared locks on this row, but prevents them from acquiring exclusive locks until the current transaction has been completed.
### 2.Exclusive Locks:
Exclusive locks are used to ensure that only one transaction at a time can modify a resource. An exclusive lock prevents other transactions from acquiring shared or exclusive locks on the same resource.
Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BEGIN;
SELECT * FROM accounts WHERE account_id = 3 FOR UPDATE;
UPDATE accounts SET balance = balance - 100 WHERE account_id = 3;
COMMIT;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The SELECT statement acquires an exclusive lock on the row with account_id = 3 using the FOR UPDATE clause&lt;/li&gt;
&lt;li&gt;This ensures that no other transactions can modify this row until the current transaction has been completed.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3.Row-level Locks:
&lt;/h3&gt;

&lt;p&gt;Row-level locks are used to lock individual rows of data. Row-level locks are useful in situations where multiple transactions need to modify different rows of the same table at the same time.&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;BEGIN;
SELECT * FROM accounts WHERE account_id = 673 FOR UPDATE;
UPDATE accounts SET balance = balance - 100 WHERE account_id = 673;
UPDATE accounts SET balance = balance + 100 WHERE account_id = 906;
COMMIT;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The first UPDATE statement acquires a row-level lock on the row with account_id = 673&lt;/li&gt;
&lt;li&gt;This ensures that no other transactions can modify this row until the current transaction has been completed
### 4. Table-level Locks:
Table-level locks are used to lock an entire table. Table-level locks are useful in situations where a transaction needs to modify all rows of a table at the same time
Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BEGIN;
LOCK TABLE accounts IN EXCLUSIVE MODE;
UPDATE accounts SET balance = 0;
COMMIT;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  5.Advisory Locks:
&lt;/h3&gt;

&lt;p&gt;Advisory locks are user-defined locks that are not enforced by PostgreSQL itself &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;These are useful in situations where a user needs to enforce locking based on some application-specific logic.
Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BEGIN;
SELECT pg_advisory_xact_lock(1234);
UPDATE accounts SET balance = balance - 100 WHERE account_id = 56;
COMMIT;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The SELECT statement acquires an advisory lock with key 1234&lt;/li&gt;
&lt;li&gt;This ensures that no other transactions can acquire a lock with the same key until the current transaction has been completed.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Database Isolation Levels:
&lt;/h3&gt;

&lt;p&gt;Database isolation defines the degree to which a transaction must be isolated from the data changes made by another transaction (although in reality there may be a large number of transactions running concurrently). The overall goal is to prevent reads and writes of temporary, aborted, or otherwise incorrect data written by concurrent transactions.&lt;/p&gt;

&lt;h4&gt;
  
  
  Types of isolation levels
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Read uncommitted&lt;/li&gt;
&lt;li&gt;Read committed&lt;/li&gt;
&lt;li&gt;Repeatable read &lt;/li&gt;
&lt;li&gt;Serializable &lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  1. Read uncommitted:
&lt;/h4&gt;

&lt;p&gt;This kind of isolation level is used when we want even the uncommitted values ​​of the rows. All updates and inserts that aren't even committed should be reflected in our transaction. This type of isolation level is commonly used in booking systems where we should be able to see these changes when another transaction tries to update a seat's availability even though that transaction is not committed.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Read committed:
&lt;/h4&gt;

&lt;p&gt;It has 2 properties&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;No dirty reads:&lt;/li&gt;
&lt;li&gt;This means values updated through a transaction will only be visible after the completion of a transaction &lt;/li&gt;
&lt;li&gt;No Dirty writes: &lt;/li&gt;
&lt;li&gt;Whenever a transaction is running on the database and updating particular values
those values will not be overwritten by other transactions.&lt;/li&gt;
&lt;li&gt;Next transaction will only update values after the completion of the previous transaction
#### Implementation of reading committed&lt;/li&gt;
&lt;li&gt;Row level locking for write operations&lt;/li&gt;
&lt;li&gt;Multiple versions of the doc
#### 3. Repeatable read:&lt;/li&gt;
&lt;li&gt;Transactions started and not committed will not be visible&lt;/li&gt;
&lt;li&gt;Transactions executed later will not be visible&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  4. Serializable isolation level:
&lt;/h4&gt;

&lt;p&gt;This is the strongest of all isolation levels and guarantees pure isolation. No other transaction can read and write values ​​until that transaction type is executed in the database. This isolation level solves all the problems encountered in all 3 isolation levels discussed previously, but since this only allows one query to be run on the database, it limits the scalability of the system.&lt;/p&gt;

&lt;h3&gt;
  
  
  Triggers:
&lt;/h3&gt;

&lt;p&gt;Triggers are SQL codes that are automatically executed in response to certain events on a particular table&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;These are used to maintain the integrity of data
#### Syntax
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create trigger trigger_name
(before|after)[Insert | Update |Delete] 
on [Table name]
[For each row | For each column]
[Trigger body]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Nested triggers in SQL are the actions that are automatically executed when a certain database operation is performed
#### operations in trigger &lt;/li&gt;
&lt;li&gt;Drop: To remove a trigger from the database
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Drop trigger trigger_name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Displaying triggers in a database
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SHOW TRIGGERS 
IN database_name;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Insert 
Before inserting triggers:&lt;/li&gt;
&lt;li&gt;Used to update or validate record values before they are saved to the database
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TRIGGER calculate
before insert 
ON STUDENT 
FOR EACH ROW
set new.marks=new.marks+100;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After inserting the trigger:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Used to access field values that are set by the system and to effect changes in other records
Example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TRIGGER total_mark
after insert 
ON STUDENT 
FOR EACH ROW
insert into final_mark values(new.marks);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://byjus.com/gate/transaction-in-dbms-notes/#:%7E:text=The%20transaction%20refers%20to%20a,accuracy%2C%20and%20integrity%20of%20data"&gt;https://byjus.com/gate/transaction-in-dbms-notes/#:~:text=The%20transaction%20refers%20to%20a,accuracy%2C%20and%20integrity%20of%20data&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.postgresqltutorial.com/postgresql-aggregate-functions/"&gt;https://www.postgresqltutorial.com/postgresql-aggregate-functions/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://hevodata.com/learn/postgresql-locks/#:%7E:text=Memory%20for%20Locks-,What%20is%20PostgreSQL%20Locks%3F,until%20the%20transaction%20is%20finished"&gt;https://hevodata.com/learn/postgresql-locks/#:~:text=Memory%20for%20Locks-,What%20is%20PostgreSQL%20Locks%3F,until%20the%20transaction%20is%20finished&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=tNk8uXLOxA8&amp;amp;t=0s"&gt;https://www.youtube.com/watch?v=tNk8uXLOxA8&amp;amp;t=0s&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=gaXISK1KTYY&amp;amp;t=0s"&gt;https://www.youtube.com/watch?v=gaXISK1KTYY&amp;amp;t=0s&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=HA9SG-QIdfU&amp;amp;t=0s"&gt;Repeatable read&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://youtu.be/FrY9su4TAkY?list=PLP0_QjuEjfk814_GNwg-67qFIEME7n7iM"&gt;Serializable isolation level&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://youtu.be/f6VWSlnHGCE"&gt;Triggers&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>SOLID Principles in OOP</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Mon, 20 Feb 2023 07:06:05 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/solid-principles-in-oop-3np3</link>
      <guid>https://dev.to/tejeswararao123/solid-principles-in-oop-3np3</guid>
      <description>&lt;h1&gt;
  
  
  Solid principles in OOP
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;The SOLID principles are helpful to build scalable, flexible, readable softwares. &lt;/li&gt;
&lt;li&gt;These principles are intriduced by Bob Martin&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  SOLID stands for:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Single Responsibility Principle (SRP)&lt;/li&gt;
&lt;li&gt;Open/Closed Principle (OCP)&lt;/li&gt;
&lt;li&gt;Liskov Substitution Principle (LSP)&lt;/li&gt;
&lt;li&gt;Interface Segregation Principle (ISP)&lt;/li&gt;
&lt;li&gt;Dependency Inversion Principle (DIP)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  1.Single Responsibility Principle (SRP)
&lt;/h2&gt;

&lt;p&gt;*This principle states that each class should have only one responsibility or reason to modify class.&lt;/p&gt;

&lt;p&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 FileHandler:
    def read_file(self, file_path):
        with open(file_path, 'r') as f:
            data = f.read()
        return data

    def write_file(self, file_path, data):
        with open(file_path, 'w') as f:
            f.write(data)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;In this example, FileHandler class has a single responsibility, which is to handle file operations such as reading and writing. If we need to add or modify file operations, we only need to change this class.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Finally this SRP is a valuable principle that helps us write code that is easier to understand, modify, and extend. By focusing each class on a single responsibility, we can make our code more maintainable and reduce the likelihood of bugs and other issues.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. The Open-Closed Principle (OCP)
&lt;/h2&gt;

&lt;p&gt;It is a design principle in object-oriented programming that states that software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. This means that you should be able to add new functionality to a program without changing the existing code.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;we can implement the above using inheritance and polymorphism. Here is an example:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Suppose we have a program that calculates the area of different shapes (e.g. rectangle, circle, triangle). We can create a base class called Shape that defines the common properties and methods of all shapes:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;Then we can create different classes that inherit from the Shape class and implement their own area 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 Rectangle(Shape):
    def __init__(self, width, height):
        self.width = width
        self.height = height

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


class Circle(Shape):
    def __init__(self, radius):
        self.radius = radius

    def area(self):
        return 3.14 * self.radius ** 2


class Triangle(Shape):
    def __init__(self, base, height):
        self.base = base
        self.height = height

    def area(self):
        return 0.5 * self.base * self.height
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, if we want to add a new shape (e.g. a square), we don't have to modify the existing code. We can simply create a new class that inherits from the Shape class and implements its own area 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 Square(Shape):
    def __init__(self, side):
        self.side = side

    def area(self):
        return self.side ** 2
This way, we are able to extend the program without modifying the existing code, which is the essence of the Open-Closed Principle.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3.Liskov principle
&lt;/h2&gt;

&lt;p&gt;The Liskov Substitution Principle is a concept in object-oriented programming that states that if a program is using a base class, it should be able to use any of its derived classes without knowing it. In simpler terms, it means that the derived classes should be able to substitute the base class without affecting the correctness of the program.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;we can demonstrate this principle through an example. Let's say we have a Rectangle class that has a width and a height property, and a calculate_area() method that calculates the area of the rectangle:
&lt;/li&gt;
&lt;/ul&gt;

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

    def calculate_area(self):
        return self.width * self.height
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's say we want to create a Square class that is a subclass of Rectangle. A square is just a special case of a rectangle where the width and height are the same, so we can create a Square class like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Square(Rectangle):
    def __init__(self, side_length):
        super().__init__(side_length, side_length)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This implementation satisfies the Liskov Substitution Principle because we can substitute a Square object for a Rectangle object without affecting the correctness of the program. For example, if we have a function that takes a Rectangle object and calls its calculate_area() method, we can pass a Square object to it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def print_area(rectangle):
    print(rectangle.calculate_area())

rectangle = Rectangle(3, 4)
square = Square(5)

print_area(rectangle)  # output: 12
print_area(square)  # output: 25
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The print_area() function doesn't know or care whether it's dealing with a Rectangle or a Square object. It just calls the calculate_area() method, and the correct area is calculated. This demonstrates the Liskov Substitution Principle in action.&lt;/p&gt;

&lt;h2&gt;
  
  
  4.The Interface Segregation Principle (ISP):
&lt;/h2&gt;

&lt;p&gt;It is a concept in object-oriented programming that states that a class should not be forced to implement interfaces that it does not use. In other words, a class should only be required to implement methods that are relevant to its behavior and should not be burdened with unnecessary methods.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;we can demonstrate this principle with an example. Let's say we have an Animal interface that has several methods, including eat(), sleep(), and play():
&lt;/li&gt;
&lt;/ul&gt;

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

    def sleep(self):
        pass

    def play(self):
        pass
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's say we want to create two classes that implement the Animal interface: a Dog class and a Cat class. Dogs and cats are both animals, but they have different behaviors. For example, dogs might have a bark() method and cats might have a purr() method. We don't want to force every animal to implement methods that are specific to one type of animal, so we can create separate interfaces for dogs and cats:&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 eat(self):
        pass

    def sleep(self):
        pass

class Dog(Animal):
    def bark(self):
        pass

class Cat(Animal):
    def purr(self):
        pass
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this implementation, the Animal interface only contains methods that are common to all animals, such as eat() and sleep(). The Dog and Cat classes extend the Animal class but also have their own specific methods, such as bark() for dogs and purr() for cats.&lt;/p&gt;

&lt;p&gt;This implementation satisfies the Interface Segregation Principle because each class is only required to implement the methods that are relevant to its behavior. The Dog class doesn't need to implement the purr() method, and the Cat class doesn't need to implement the bark() method. By separating the interface into smaller, more specific interfaces, we can keep our code more modular and avoid unnecessary dependencies.&lt;/p&gt;

&lt;h2&gt;
  
  
  5.The Dependency Inversion Principle (DIP):
&lt;/h2&gt;

&lt;p&gt;This principle states that high-level modules should not depend on low-level modules, but should instead depend on abstractions. In simpler terms, it means that instead of depending on specific implementations, classes should depend on abstract interfaces or classes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Below FileReader class reads data from a file:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class FileReader:
    def read_file(self, filename):
        with open(filename, 'r') as file:
            return file.read()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's say we have a DataProcessor class that processes data from a file:&lt;br&gt;
&lt;/p&gt;

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

    def process_data(self, filename):
        data = self.reader.read_file(filename)
        # process the data...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this implementation, the DataProcessor class depends on the FileReader class to read data from a file. This violates the Dependency Inversion Principle because the high-level DataProcessor class is depending on the low-level FileReader class.&lt;/p&gt;

&lt;p&gt;To fix this, we can create an abstract interface or class for reading files, and have the FileReader class implement that interface or inherit from that class. Then, we can modify the DataProcessor class to depend on the abstract interface or class instead of the FileReader class directly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class FileReaderInterface:
    def read_file(self, filename):
        pass

class FileReader(FileReaderInterface):
    def read_file(self, filename):
        with open(filename, 'r') as file:
            return file.read()

class DataProcessor:
    def __init__(self, reader):
        self.reader = reader

    def process_data(self, filename):
        data = self.reader.read_file(filename)
        # process the data...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the DataProcessor class depends on the FileReaderInterface abstract interface instead of the FileReader class directly. This allows us to easily swap out the FileReader class with a different file reader implementation that also implements the FileReaderInterface. We can also create other file readers that implement the FileReaderInterface interface or inherit from the FileReaderInterface class, and use them with the DataProcessor class without modifying the DataProcessor class.&lt;/p&gt;

&lt;p&gt;This implementation satisfies the Dependency Inversion Principle because the high-level DataProcessor class depends on an abstraction instead of a specific implementation. This makes the code more modular and flexible, and allows us to easily switch out implementations without affecting other parts of the code.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhXjG1w2blMXUzyDrZ_eyOme"&gt;https://www.youtube.com/playlist?list=PL6n9fhu94yhXjG1w2blMXUzyDrZ_eyOme&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhXjG1w2blMXUzyDrZ_eyOme"&gt;https://www.youtube.com/playlist?list=PL6n9fhu94yhXjG1w2blMXUzyDrZ_eyOme&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/"&gt;https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://levelup.gitconnected.com/s-o-l-i-d-principles-explained-in-python-with-examples-83b2b43bdcde"&gt;https://levelup.gitconnected.com/s-o-l-i-d-principles-explained-in-python-with-examples-83b2b43bdcde&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Strings, Lists and OOPS in Python</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Thu, 16 Feb 2023 07:03:20 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/strings-lists-and-oops-in-python-4ge1</link>
      <guid>https://dev.to/tejeswararao123/strings-lists-and-oops-in-python-4ge1</guid>
      <description>&lt;h2&gt;
  
  
  String Methods
&lt;/h2&gt;

&lt;h3&gt;
  
  
  isupper()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns True if all the characters in a string are in uppercase
### Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "Hello"
b="HI"
print(a.isupper()) # False
print(b.isupper()) # True
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  islower()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns True if all the characters in a string are in lowercase
### Example
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "hello"
b="HI"
print(a.islower()) # True
print(b.islower()) # False
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  isalnum()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns True if the string contains only alphabetical letters and digits.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "hello5 4 3"
b="HI567hello"
print(a.isalnum()) # False 
print(b.isalnum()) # True
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  count():
&lt;/h3&gt;

&lt;p&gt;a="hi hello how are you hello"&lt;br&gt;
print(a.count("hello")) # 2&lt;br&gt;
print(a.count("h"))     # 4&lt;/p&gt;
&lt;h3&gt;
  
  
  isdigit():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns True if all characters are digits&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  capitalize()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Change the case first character in a string to upper case
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name = 'python'
# syntax
name_cap = name.capitalize()
print(name_cap) # Python
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  upper():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Change the cases of all characters of a string to uppercase
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "hi hello!"
a = a.upper()
print(a) # HI HELLO!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  lower():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Change the cases of all characters of a string to lowercase
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "HI HELLO!"
a = a.lower()
print(a) # hi hello!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  swapcase()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;swap the cases of all characters in a string.
string = 'Who Are You?'
after_swapcase = string.swapcase()
print(after_swapcase) # wHO aRE yOU?
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;greeting = "Happy birthday"
index = greeting.index('ppy')
print(index)  # 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  replace():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Replace all the occurrences with another string
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = 'i am from Andhrapradesh'
b= a.replace('Andhrapradesh', 'Delhi')
print(b) # 'i am from Delhi'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  String slicing:
&lt;/h3&gt;

&lt;p&gt;returns a substring from the original string&lt;/p&gt;
&lt;h3&gt;
  
  
  Example
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "Hello Raj"
b = a[0:5]
print(b) # Hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  startswith()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Returns true if the string starts with a given string
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "hi hello how are you"
print(a.startswith("hi")) # True
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  endswith()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method returns True if the string ends with the given string
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = "hi hello how are you"
print(a.endswith("you")) # True
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  strip():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method removes specified characters from the string by default it removes spaces
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = ";' hello ';;'"
print(a.strip("'; ")) # hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  split():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;splits the given strings into a list of words
a="hi hello"
print(a.split()) # ['hi', 'hello']&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  List methods
&lt;/h2&gt;
&lt;h3&gt;
  
  
  join()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method joins the list of elements with a separator
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = ["hi","hello"]
b=" ".join(a)
print(b) # hi hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  slicing
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method returns the sliced list
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[2,3,4,5,6,7,8,9]
b=a[1:4]
print(b) # [3,4,5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  append():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Add passed argument to the end of the list
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[12,42,23,34,55]
a.append(19)
print(a)  # [12,42,23,34,55,19]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  del
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;delete element specified index
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[2,3,4,5,6]
del a[3]
print(a) # [2,3,4,6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  clear()
&lt;/h3&gt;

&lt;p&gt;delete all elements&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[2,3,4,5,6]
a.clear()
print(a) # []
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  count():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method returns the number of occurrences of the given element in the list
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[2,3,4,5,6,3,3,3]
y=a.count(3)
print(y) # 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  extend():
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Add items iterable to the end of the list
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[2,3,4,5,6]
a.extend([7,9])
print(a) # [2,3,4,5,6,7,9]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  index()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method returns the index of the first occurrence given value in the list
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a=[3,4,5,6,7]
index=a.index(5)
print(index) # 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  insert()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method insert an element at the given position in the list.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = [3,5,6,7]
a.insert(1,4)
print(a) # [3, 4, 5, 6, 7]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  pop() By default removes the last element else at a specified index
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = [3,5,6,7]
a.pop(0)
print(a) # [5,6,7]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  reverse()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;reverse the order of elements
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a = [3,5,6,7]
a.reverse()
print(a) # [7, 6, 5, 3]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  sort()
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;sorts the list into ascending or descending order
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a =[2,3,6,4,5]
a.sort()
print(a) # [2, 3, 4, 5, 6]
# to sort the list in descending order
a =[2,3,6,4,5]
a.sort(reverse=True)
print(a) # [6, 5, 4, 3, 2]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  OOP
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;OOP is a way of approach to building good software that make users and developers happy.&lt;/li&gt;
&lt;li&gt;We achieve the above using classes and functions&lt;/li&gt;
&lt;li&gt;Using classes we create instances&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Class is used to bundling of properties and methods(functions)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Class functions is a synonym for methods&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Class – a blueprint for an instance with exact behavior.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Object – one of the instances of the class, performs functionality defined in the&lt;br&gt;
class.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Type – indicates the class the instance belongs to&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Attribute – Any object value: object.attribute&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Method – a “callable attribute” defined in the class&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Class attributes are the attributes that are not specific to instance, common for all&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;init&lt;/strong&gt; method in class
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This method is used to create an instance with some specific set of properties&lt;/li&gt;
&lt;li&gt;It is a constructor of the class.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Creating a class and its functions
&lt;/h3&gt;

&lt;h3&gt;
  
  
  The following functions are achieved in the following class
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Accessing modifying the instance attribute and class attributes
&lt;/li&gt;
&lt;/ul&gt;

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

    def print_my_name(self):
        print(f"Your name is {self.name}")

    def print_my_age(self):
        print(f"Your age is {self.age}")

    def change_my_age(self,age):
        self.age=age

obj = MyClass("Tejeswar",23)
obj.print_my_name() # Your name is Tejeswar
obj.print_my_age()  # Your age is 23
obj.change_my_age(25)
obj.print_my_age() # Your age is 25
print(obj.hi)
obj.hi=20
print(obj.hi) # 20
print(MyClass.hi) # 10
MyClass.hi=30 
print(MyClass.hi) # 30
print(obj.hi) # 20
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Encapsulation means bundling related properties and methods
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Inheritance
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Here we can inherit the methods from the parent class by extending our class to the parent class
### Polymorphism &lt;/li&gt;
&lt;li&gt;We can have the same names for different functions to avoid overriding we have to call with the prefix super()&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are three types of methods in class&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;Instance methods can access all attributes of the instance and take self as a parameter.&lt;/li&gt;
&lt;li&gt; These methods are accessed by instances
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Cart:
   def __init__(self):
       self.items = {}
   def add_item(self, item_name,quantity):
       self.items[item_name] = quantity
   def display_items(self):
       print(self.items) # {'book': 3}

a = Cart()
a.add_item("book", 3)
a.display_items()

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

&lt;/div&gt;



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

&lt;ul&gt;
&lt;li&gt;Methods that need access to class attributes but not instance attributes are marked as Class Methods. &lt;/li&gt;
&lt;li&gt;For class methods, we send cls as a parameter indicating we are passing the class.&lt;/li&gt;
&lt;li&gt;These methods are accessed through classes
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Cart:
   flat_discount = 0
   @classmethod
   def update_flat_discount(cls, new_flat_discount):
       cls.flat_discount = new_flat_discount

Cart.update_flat_discount(25)
print(Cart.flat_discount) # 25

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  Static Method:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Usually, static methods are used to create utility functions that make more sense to be part of the class. &lt;/li&gt;
&lt;li&gt;@staticmethod decorator marks the method below it as a static method.&lt;/li&gt;
&lt;li&gt;These methods are accessed through classes
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Cart:
   @staticmethod
   def greet():
       print("Good morning") # Good morning

Cart.greet()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>browser</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Regular Expressions</title>
      <dc:creator>Tejeswararao123</dc:creator>
      <pubDate>Thu, 02 Feb 2023 06:07:01 +0000</pubDate>
      <link>https://dev.to/tejeswararao123/regular-expressions-4k2h</link>
      <guid>https://dev.to/tejeswararao123/regular-expressions-4k2h</guid>
      <description>&lt;h2&gt;
  
  
  Regular Expressions
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Regular expression is a sequence of characters that defines a search pattern.&lt;/li&gt;
&lt;li&gt;It is a impressive tool for searching a pattern.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&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;string_a = re.search(r'portal', 'portal for folks')
print(string_a)
print(string_a.group())
print('Start from the Index:', string_a.start())
print('Ends at the Index:', string_a.end())
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;re.Match object; span=(0, 6), match='portal'&amp;gt;
portal
Start from the Index: 0
Ends at the Index: 6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Meta Characters
&lt;/h4&gt;

&lt;p&gt;The below table shows the list of MetaCharacters are used in regex&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5t4k28y8qf2vti91k298.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5t4k28y8qf2vti91k298.jpg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Applications
&lt;/h4&gt;

&lt;h4&gt;
  
  
  Data Mining:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
Data mining is the process of sorting large amounts of data to identify patterns and relationships that can help solve business problems through data analysis.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Data Validation:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Data validation is the process of checking and validating data that is collected before it is used.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Basic regular expressions.
&lt;/h4&gt;

&lt;h4&gt;
  
  
  Character Classes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
Character classes allow us to match a single character set against a possible character set. You can also place a character class inside the square brackets.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Ranges
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The range provides the versatility to match a text in the range. The hyphen character within the character class represents a range.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Shortcuts in RegEx.
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;\w – matches a word character&lt;/li&gt;
&lt;li&gt;\d – matches digit character&lt;/li&gt;
&lt;li&gt;\s – matches white space character (space, tab, newline, etc.)&lt;/li&gt;
&lt;li&gt;\b – matches a zero-length character&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Negation
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Negation inverts character classes. Finds a match excluding the reversed character or range of reversed characters specified in the character class.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Ends of String
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The caret character matches the beginning of the string and the $ character matches at the end of the string.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Any Character
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The period character represents any single character except the character classes enclosed in parentheses.&lt;/li&gt;
&lt;/ul&gt;

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