<?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: tanishmohanta</title>
    <description>The latest articles on DEV Community by tanishmohanta (@tanishtt).</description>
    <link>https://dev.to/tanishtt</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%2F714504%2F256e5f72-9686-4b48-b936-65b6850107f9.png</url>
      <title>DEV Community: tanishmohanta</title>
      <link>https://dev.to/tanishtt</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tanishtt"/>
    <language>en</language>
    <item>
      <title>Joins in SQL</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Wed, 21 May 2025 13:02:45 +0000</pubDate>
      <link>https://dev.to/tanishtt/joins-in-sql-1npl</link>
      <guid>https://dev.to/tanishtt/joins-in-sql-1npl</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.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%2Fo5v6y9aq2hugs6v8x6cq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fo5v6y9aq2hugs6v8x6cq.png" alt="Image description" width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>TCP/IP Network Model💻 : Deep Dive with an example</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Sat, 22 Jul 2023 16:06:27 +0000</pubDate>
      <link>https://dev.to/tanishtt/tcpip-network-model-deep-dive-with-example-3j3o</link>
      <guid>https://dev.to/tanishtt/tcpip-network-model-deep-dive-with-example-3j3o</guid>
      <description>&lt;p&gt;So, let's get started😃.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The TCP/IP model is a conceptual framework used for understanding and implementing network communication protocols. It stands for Transmission Control Protocol/Internet Protocol and is the foundation of the modern internet and most networks.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&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%2Fhykeei6k23pjgtftfenu.gif" 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%2Fhykeei6k23pjgtftfenu.gif" alt="Image description"&gt;&lt;/a&gt;&lt;br&gt;
The TCP/IP model consists of four layers, each serving a specific purpose. Let's break down each layer:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Application Layer is the top layer of the TCP/IP model, and it is responsible for providing network services directly to user applications. These services allow software applications to communicate over the network. Examples of applications that operate at this layer include web browsers, email clients, and file transfer programs.&lt;/li&gt;
&lt;li&gt;Some common protocols at this layer are HTTP (Hypertext Transfer Protocol) for web browsing, SMTP (Simple Mail Transfer Protocol) for email, and FTP (File Transfer Protocol) for file transfers.&lt;/li&gt;
&lt;li&gt;This layer is where user data is generated or consumed, and it formats the data in a way that is understandable by the application.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Transport Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Transport Layer is responsible for end-to-end communication between devices on the network. It ensures reliable and orderly data delivery, error detection, and flow control.&lt;/li&gt;
&lt;li&gt;The two most commonly used protocols at this layer are:

&lt;ul&gt;
&lt;li&gt;TCP (Transmission Control Protocol): It provides reliable, connection-oriented communication. TCP ensures that data packets are delivered without errors and in the correct order. It also handles flow control to prevent overwhelming the receiving device with too much data at once.&lt;/li&gt;
&lt;li&gt;UDP (User Datagram Protocol): It is a simpler, connectionless protocol that offers minimal error checking and no guaranteed delivery. UDP is used for applications where speed is more critical than reliability, such as real-time video streaming or online gaming.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;When data is passed down from the Application Layer, it is divided into smaller chunks called segments (TCP) or datagrams (UDP) for transmission over the network.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Internet Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Internet Layer is responsible for addressing, routing, and forwarding data packets between different networks. It ensures that data packets reach their destination across the internet or any interconnected network.&lt;/li&gt;
&lt;li&gt;The primary protocol used at this layer is the Internet Protocol (IP). It assigns a unique IP address to each device connected to the network, allowing routers to direct data packets to the correct destination based on these addresses.&lt;/li&gt;
&lt;li&gt;When data segments or datagrams arrive from the Transport Layer, the Internet Layer adds the source and destination IP addresses, forming an IP packet.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Link Layer (Network Access Layer):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Link Layer is the lowest layer of the TCP/IP model and is responsible for the physical transmission of data between nodes on the same network. It deals with hardware addressing, error detection, and the reliable transmission of frames (data packets) within a local network segment.&lt;/li&gt;
&lt;li&gt;This layer has different implementations depending on the type of physical network being used, such as Ethernet, Wi-Fi, or PPP (Point-to-Point Protocol).&lt;/li&gt;
&lt;li&gt;At this layer, the IP packet is encapsulated in a data frame with a specific hardware address, known as the MAC address, of the receiving device on the local network.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So concluding, the TCP/IP model provides a framework for communication between devices over a network. It starts from user applications at the Application Layer, which generate data. This data is then broken down into segments or datagrams at the Transport Layer, assigned IP addresses at the Internet Layer, and finally transmitted in data frames with MAC addresses at the Link Layer. As data flows through the layers in the reverse order, it gets reassembled, error-checked, and delivered to the appropriate application on the receiving device.&lt;/p&gt;




&lt;h2&gt;
  
  
  Let's understand with an example😃.
&lt;/h2&gt;

&lt;p&gt;Suppose, I connected my desktop💻 to internet (airtel), Opened browser, Typed &lt;a href="http://www.facebook.com" rel="noopener noreferrer"&gt;www.facebook.com&lt;/a&gt; and Hit enter. The following steps will happen in TCP/IP model.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You open your web browser (e.g., Chrome, Firefox) on your desktop. The web browser operates at the Application Layer of the TCP/IP model.&lt;/li&gt;
&lt;li&gt;You type "&lt;a href="http://www.facebook.com" rel="noopener noreferrer"&gt;www.facebook.com&lt;/a&gt;" in the address bar and hit Enter. This action triggers the web browser to initiate a request to access the Facebook website.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Transport Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;At the Transport Layer, the web browser uses the HTTP (Hypertext Transfer Protocol) to send the request to access the Facebook website. The request is divided into smaller segments for transmission over the internet.&lt;/li&gt;
&lt;li&gt;TCP (Transmission Control Protocol) is used for HTTP requests as it ensures reliable data delivery. The browser establishes a TCP connection with the web server that hosts the Facebook website.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Internet Layer:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The TCP segments are passed down to the Internet Layer, where the Internet Protocol (IP) comes into play. The IP layer adds the source and destination IP addresses to the segments, forming IP packets.&lt;/li&gt;
&lt;li&gt;In this step, the browser's request for the Facebook website is encapsulated in an IP packet. The destination IP address is determined based on the domain name "&lt;a href="http://www.facebook.com," rel="noopener noreferrer"&gt;www.facebook.com,&lt;/a&gt;" which is resolved into an IP address using DNS (Domain Name System) lookup.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Link Layer (Network Access Layer):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The IP packets now move down to the Link Layer, where the appropriate network interface is determined. Since you are connected to the internet through Airtel, the Link Layer prepares the data frames for transmission over the Airtel network.&lt;/li&gt;
&lt;li&gt;The data frames are encapsulated with source and destination MAC addresses. The destination MAC address is typically the MAC address of the Airtel router (gateway) that connects your desktop to the internet.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Transmission:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The prepared data frames are sent over the local network (your home network) to the Airtel router, and from there, they are forwarded to the Airtel network infrastructure.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Routing:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Within the Airtel network, routers examine the destination IP address of the packets and use their routing tables to determine the next hop (the next router) to forward the data towards its destination.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Internet Backbone:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The IP packets traverse through multiple routers and network devices in the Airtel network and possibly other networks in the global internet backbone. These devices work together to route the packets closer to the destination server hosting Facebook.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Reaching the Facebook Server:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Eventually, the IP packets reach the data center where the Facebook website is hosted. The data center's routers further direct the packets to the specific server that hosts the Facebook website.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Server Response:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Facebook server processes your request, generates the webpage content, and prepares a response to send back to your desktop.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Transmission Back to Your Desktop:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The server response follows the same path in reverse, going through the Internet Layer and Link Layer. The response data travels through the Airtel network, your home network, and finally arrives at your desktop.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Link Layer Decapsulation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;At your desktop's Link Layer, the data frames are decapsulated, removing the Link Layer header and leaving the IP packets.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Internet Layer Decapsulation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The IP packets move up to the Internet Layer, where the IP headers are removed, leaving the Transport Layer segments.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Transport Layer Decapsulation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;At the Transport Layer, the TCP segments are reassembled into the original HTTP response from the Facebook server.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Layer Decapsulation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The web browser at the Application Layer processes the HTTP response, interprets the webpage content, and displays the Facebook website on your browser window.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This entire process happens rapidly behind the scenes, enabling you to access websites and communicate over the internet seamlessly, thanks to the TCP/IP network model.&lt;/p&gt;

&lt;p&gt;Until next time😃.&lt;br&gt;
If you liked the article, do hit like💖.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Journey Through the Digital Highway🗺️: How Data Travels From Your Laptop💻 to Your Friend's Laptop🙋‍♂️: Deep Dive.</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Sat, 22 Jul 2023 13:56:31 +0000</pubDate>
      <link>https://dev.to/tanishtt/journey-through-the-digital-highway-how-data-travels-from-your-laptop-to-your-friends-laptop-deep-dive-3123</link>
      <guid>https://dev.to/tanishtt/journey-through-the-digital-highway-how-data-travels-from-your-laptop-to-your-friends-laptop-deep-dive-3123</guid>
      <description>&lt;p&gt;&lt;strong&gt;Just read this part (first paragraph) once, below you will understand in deep.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Imagine that the internet is like a vast highway system, and internet backbones are the main highways that connect major cities and towns. These highways (backbones) are essential for fast and efficient communication between different regions.&lt;/p&gt;

&lt;p&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%2Fq8vqaaby5cpezdueqefu.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%2Fq8vqaaby5cpezdueqefu.jpg" alt="Image description"&gt;&lt;/a&gt;&lt;br&gt;
Example: &lt;code&gt;(Note: Just read it once, you will get it below)&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;Highway System (Internet)&lt;/strong&gt;: The internet is like a network of highways that allows data (traffic) to flow between various locations (websites, servers, computers, etc.).&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;Main Highways (Internet Backbones)&lt;/strong&gt;: Internet backbones are like the main highways in this system. They are large, high-capacity data transmission lines made of fiber-optic cables that connect major cities and data centers worldwide.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;Data Transmission (Internet Traffic)&lt;/strong&gt;: Data, such as emails, web pages, videos, and more, travels along these main highways (backbones) to reach its destination quickly and efficiently.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;Regional Roads (Internet Service Providers - ISPs)&lt;/strong&gt;: The data leaves the internet backbone at certain points and enters the networks of Internet Service Providers (ISPs). These ISPs are like the regional roads that connect smaller towns and communities to the main highways. They serve as the gateways for users to access the internet.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;Local Streets (End Users)&lt;/strong&gt;: From the ISPs, the data is further distributed to end users (like you and your friend). These end users are like local streets where the data reaches its final destination.&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&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%2Fb2y04yncjgi1ym8s55ru.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%2Fb2y04yncjgi1ym8s55ru.jpg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  📌Here's the explaination of the data transfer🗺️:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Your Laptop💻:&lt;/strong&gt; You send data from your laptop.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Airtel Network (Airtel Tower - T)🗼:&lt;/strong&gt; The data is transmitted wirelessly from your laptop using &lt;code&gt;electromagnetic waves&lt;/code&gt; to the nearest Airtel tower (T). The tower serves as an access point for your laptop to connect to the Airtel cellular network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Regional Area (Local Network - T -&amp;gt; T -&amp;gt; R -&amp;gt; R -&amp;gt; R):&lt;/strong&gt; From the Airtel tower (T), the data may be transmitted wirelessly to the next nearby Airtel tower (T). This process can involve several tower-to-tower hops (T -&amp;gt; T) within the &lt;code&gt;regional area&lt;/code&gt;, extending the coverage of the &lt;code&gt;Airtel network&lt;/code&gt; (There can be n number of T's and R's).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Airtel Router (R):&lt;/strong&gt; Once the data reaches the last tower in the regional area, it is handed off to an Airtel router (R). &lt;code&gt;Airtel routers&lt;/code&gt; are typically located at central facilities, network exchanges, or data centers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internet Gateway (Airtel - R):&lt;/strong&gt; From the Airtel router (R), the data is then forwarded to the &lt;code&gt;Airtel internet gateway&lt;/code&gt;. The internet gateway serves as the connection point between &lt;code&gt;Airtel's local network&lt;/code&gt; and the &lt;code&gt;broader internet (main highway)&lt;/code&gt;.&lt;strong&gt;(Regional Area of Airtel ISP ends here !!!.)&lt;/strong&gt;`&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internet Backbone (Main Highway):&lt;/strong&gt; After passing through &lt;code&gt;Airtel's internet gateway&lt;/code&gt;, the data enters the internet backbone (main highway). It travels through high-capacity data transmission lines (e.g., &lt;code&gt;fiber-optic cables&lt;/code&gt;) operated by various companies like &lt;code&gt;Tata Communications&lt;/code&gt;, &lt;code&gt;Google&lt;/code&gt;, &lt;code&gt;Level 3 Communications&lt;/code&gt;, and others. These backbones form the core infrastructure of the global internet.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internet Routers (Various Providers):&lt;/strong&gt; As the data travels through the &lt;code&gt;internet backbone(main highway)&lt;/code&gt;, it encounters &lt;code&gt;internet routers&lt;/code&gt; operated by various ISPs and network providers, including those mentioned above(like &lt;code&gt;Tata Communications&lt;/code&gt;, &lt;code&gt;Google&lt;/code&gt;, &lt;code&gt;Level 3 Communications&lt;/code&gt;). These routers direct the data packets toward their intended destination, guiding them through the complex network of interconnected pathways.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Jio Network (Regional Area - Destination Area):&lt;/strong&gt; As the data approaches its destination area (e.g., your friend's location served by Jio), it will leave the &lt;code&gt;internet backbone&lt;/code&gt; and enter Jio's network (regional area). This transition involves routers and other network components to guide the data closer to its final destination.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Jio Tower (Jio Access Point)🗼:&lt;/strong&gt; From the network, the data may be transmitted wirelessly through the air via Jio's tower, which acts as an access point for mobile devices to connect to the Jio network.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Your Friend's Laptop💻:&lt;/strong&gt; Finally, the data reaches your friend's laptop, where it is received and processed by their computer or device, enabling them to read the email or interact with the data you sent.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Here's a demonstration of &lt;strong&gt;undersea&lt;/strong&gt; &lt;code&gt;Internet Backbone&lt;/code&gt;(main highway).In similar way, there are also Internet Backbone on land.&lt;/p&gt;

&lt;p&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%2Ffl94ijiwrxr98i953lam.png" 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%2Ffl94ijiwrxr98i953lam.png" alt="Image description"&gt;&lt;/a&gt;&lt;br&gt;
In summary, data📑 is transferred through electromagnetic waves between the towers (T) within the regional area. Once it reaches the last tower, it is then passed to an Airtel router (R) before being forwarded to the internet gateway and entering the main internet backbone. From there, it goes through a network of internet routers and eventually reaches the destination, your friend's laptop.&lt;br&gt;
Until next time. Happy Learning😃 !!!.&lt;br&gt;
If you liked the article, do hit like💖.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Client-Server Architecture🤝 : Deep Dive</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Fri, 21 Jul 2023 16:03:59 +0000</pubDate>
      <link>https://dev.to/tanishtt/client-server-architecture-deep-dive-1a2e</link>
      <guid>https://dev.to/tanishtt/client-server-architecture-deep-dive-1a2e</guid>
      <description>&lt;p&gt;Welcome, let's deep dive into the concept😃.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Client-server architecture is a common model used in computer networks to allow multiple devices to communicate with each other. It involves two main components: the "client" and the "server."&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let me explain it in simple terms😃:&lt;/p&gt;

&lt;p&gt;Imagine you want to order food from a restaurant. In this scenario:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You (the customer) are the "client."&lt;/li&gt;
&lt;li&gt;The restaurant staff who takes your order and prepares the food is the "server."&lt;/li&gt;
&lt;/ol&gt;

&lt;p&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%2F6g9jnnfmldrhorivhyds.png" 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%2F6g9jnnfmldrhorivhyds.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's a step-by-step explanation of client-server architecture:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clients&lt;/strong&gt;: Clients are devices like your computer, smartphone, or tablet. They initiate communication and request services from the server. In our restaurant example, you (the customer) are the client.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Servers&lt;/strong&gt;: Servers are powerful computers or devices dedicated to providing services or resources to clients. They wait for incoming requests from clients and respond accordingly. In our restaurant example, the restaurant staff taking orders and preparing food is the server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Communication&lt;/strong&gt;: Clients and servers communicate over a network, like the internet. When you order food, your request is sent over the network to the restaurant's server, which processes the order and sends back the response.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Request-Response Model&lt;/strong&gt;: The communication between clients and servers typically follows a request-response model. The client sends a request for a particular service, and the server processes the request and sends back a response with the required information. In our restaurant example, you request specific dishes, and the server (restaurant staff) processes your order and prepares the food as per your request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stateless&lt;/strong&gt;: Client-server communication is usually stateless, which means each request is treated independently. The server doesn't remember past interactions with a specific client. For instance, in our restaurant example, each time you place an order, the restaurant staff doesn't remember your previous orders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability&lt;/strong&gt;: Client-server architecture allows for easy scalability. If more clients need to access the server simultaneously, it can handle those requests by distributing the workload efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Examples of client-server architecture in real-life:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Email&lt;/strong&gt;: Your email client (like Gmail) communicates with the email server to send and receive messages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Web Browsing&lt;/strong&gt;: When you visit a website, your web browser acts as the client, and it communicates with the website's server to retrieve and display the web page content.
&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%2F1tg1usq1uwq0afz6wmig.png" alt="Image description"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In the scenario described above, when a client wants to request data from a server, the following steps occur:&lt;/p&gt;

&lt;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;The client needs to know the IP address of the particular server it wants to communicate with. To obtain this information, it sends a request to the Domain Name System (DNS) server, providing the domain name of the target server.&lt;/li&gt;
&lt;li&gt;The DNS server responds with the IP address associated with the requested domain name.&lt;/li&gt;
&lt;li&gt;Armed with the IP address, the client sends its request to the server. The request includes the destination IP address and a specific port number that corresponds to the particular application running on the server that the client wants to communicate with.&lt;/li&gt;
&lt;li&gt;The server receives the client's request and processes it.&lt;/li&gt;
&lt;li&gt;After processing the request, the server generates a response message.&lt;/li&gt;
&lt;li&gt;The response message is then sent back to the client using the IP address and port number specified in the client's request.&lt;/li&gt;
&lt;li&gt;The client receives the response packet and extracts the information it needs based on the port number.&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;

&lt;p&gt;At a high level, the communication between the client and server takes place using HTTP packets. HTTP (Hypertext Transfer Protocol) is the protocol that allows the client and server to communicate over the internet and exchange data. It is a standardized set of rules that define how requests and responses should be formatted and handled.&lt;/p&gt;




&lt;h2&gt;
  
  
  📌Types of Client-Server Architecture
&lt;/h2&gt;

&lt;p&gt;Certainly! Client-server architecture can be categorized into different types based on how the communication and responsibilities are distributed between clients and servers. Here are some common types of client-server architectures:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Two-Tier Architecture (Client-Server)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In this type, the client directly communicates with the server to request services and retrieve data.&lt;/li&gt;
&lt;li&gt;The server handles both the presentation logic (user interface) and the business logic (processing the request and data).&lt;/li&gt;
&lt;li&gt;This architecture is suitable for small-scale applications but may become less scalable as the application grows.&lt;/li&gt;
&lt;li&gt;Example: Traditional client-server applications where a desktop application communicates with a central server to access a database.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Three-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In this type, the client interacts with an intermediate layer called the "application server" or "middleware," which acts as a bridge between the client and the database server.&lt;/li&gt;
&lt;li&gt;The three tiers are:

&lt;ol&gt;
&lt;li&gt;Presentation Tier (Client): Responsible for the user interface and capturing user input.&lt;/li&gt;
&lt;li&gt;Application Tier (Middleware): Handles the business logic and processing of requests. It communicates with the database server to retrieve and store data.&lt;/li&gt;
&lt;li&gt;Data Tier (Server): This is the database server that stores and manages the data.&lt;/li&gt;
&lt;/ol&gt;


&lt;/li&gt;

&lt;li&gt;This architecture enhances scalability, as the workload can be distributed between the application server and the database server.&lt;/li&gt;

&lt;li&gt;Example: Web applications where the web browser is the client, the web server is the application server, and the database server stores the data.&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;📍N-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;N-Tier architecture is an extension of the three-tier architecture and allows for more layers or tiers to be added for specific purposes.&lt;/li&gt;
&lt;li&gt;Additional tiers may include security servers, caching servers, load balancers, etc., depending on the complexity and requirements of the application.&lt;/li&gt;
&lt;li&gt;This architecture provides better modularity, flexibility, and performance optimization.&lt;/li&gt;
&lt;li&gt;Example: Large-scale enterprise applications with multiple layers for security, caching, and load balancing.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;📍Peer-to-Peer Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In this type, there is no distinct differentiation between clients and servers. Each device (peer) can act as both a client and a server, sharing resources and services directly with other peers.&lt;/li&gt;
&lt;li&gt;Peers communicate and collaborate with each other in a decentralized manner.&lt;/li&gt;
&lt;li&gt;This architecture is commonly used in file-sharing applications and collaborative systems.&lt;/li&gt;
&lt;li&gt;Example: BitTorrent, a peer-to-peer file-sharing protocol.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;📍Cloud Computing (Service-Oriented Architecture - SOA)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cloud computing often uses a service-oriented architecture where clients access services provided by remote servers over the internet.&lt;/li&gt;
&lt;li&gt;Clients interact with cloud services via APIs (Application Programming Interfaces) rather than direct communication.&lt;/li&gt;
&lt;li&gt;Cloud services may encompass various functionalities, like storage, computation, databases, etc.&lt;/li&gt;
&lt;li&gt;Example: Cloud-based platforms like Amazon Web Services (AWS) or Microsoft Azure.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ol&gt;




&lt;h2&gt;
  
  
  📌Deep Dive into 2-Tier and 3-Tier Architecture🛠️
&lt;/h2&gt;

&lt;p&gt;Sure! Let's delve deeper into both the 2-tier and 3-tier architectures, including their features, advantages, and disadvantages:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;✒️2-Tier Architecture (Client-Server)&lt;/strong&gt;:&lt;/p&gt;

&lt;p&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%2Fuujz2sabkn0n22xtxdtv.png" 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%2Fuujz2sabkn0n22xtxdtv.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Features&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Also known as the Client-Server architecture.&lt;/li&gt;
&lt;li&gt;Consists of two main tiers: the client and the server.&lt;/li&gt;
&lt;li&gt;The client is responsible for the user interface and interacts directly with the server to request services and retrieve data.&lt;/li&gt;
&lt;li&gt;The server handles both the presentation logic (user interface) and the business logic (processing the request and data).&lt;/li&gt;
&lt;li&gt;Typically used for small-scale applications with a limited number of users.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Advantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplicity&lt;/strong&gt;: 2-tier architecture is relatively simple to implement as it involves only two tiers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance&lt;/strong&gt;: Since there is a direct connection between the client and the server, the response time can be faster compared to more complex architectures.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Low Network Traffic&lt;/strong&gt;: Communication occurs directly between the client and server, reducing network traffic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Easy Maintenance&lt;/strong&gt;: With fewer components, maintenance and troubleshooting are generally straightforward.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Disadvantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scalability&lt;/strong&gt;: As the application grows and the number of clients increases, the server may become overloaded, affecting performance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Limited Modularity&lt;/strong&gt;: Lack of separation between presentation and business logic can make the application less modular and harder to maintain.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security&lt;/strong&gt;: Security measures might be limited, as the client directly interacts with the server and could be susceptible to various attacks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Integrity&lt;/strong&gt;: The lack of an intermediate tier might lead to data integrity issues if clients directly manipulate data without proper validation.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;✒️3-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;p&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%2F31cmp3f3m5nnukpn1aow.png" 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%2F31cmp3f3m5nnukpn1aow.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Features&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Consists of three main tiers: presentation tier, application tier (middleware), and data tier (server).&lt;/li&gt;
&lt;li&gt;Presentation Tier (Client): Responsible for the user interface and capturing user input.&lt;/li&gt;
&lt;li&gt;Application Tier (Middleware): Acts as an intermediary between the client and the database server, handling business logic and processing requests.&lt;/li&gt;
&lt;li&gt;Data Tier (Server): Stores and manages the data, and the application tier communicates with it to retrieve or store information.&lt;/li&gt;
&lt;li&gt;Offers better scalability and modularity than 2-tier architecture.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Advantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scalability&lt;/strong&gt;: The separation of concerns allows for distributing the workload between the application tier and the data tier, enhancing scalability.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modularity&lt;/strong&gt;: Each tier can be developed independently, making it easier to maintain and update the application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improved Security&lt;/strong&gt;: The application tier can implement security measures independently, reducing potential vulnerabilities.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Integrity&lt;/strong&gt;: The data tier ensures data consistency and integrity, preventing direct manipulation by clients.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;📍Disadvantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Complexity&lt;/strong&gt;: The additional tier (application tier) introduces more complexity, which can make development and debugging more challenging.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Overhead&lt;/strong&gt;: The involvement of an additional tier may introduce some performance overhead due to increased communication between the tiers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Higher Costs&lt;/strong&gt;: Implementing and managing a three-tier architecture can be more expensive than a two-tier one, especially for smaller applications with limited user bases.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Maintenance Challenges&lt;/strong&gt;: As the application becomes more complex, maintenance and troubleshooting might require more effort and expertise.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;✒️N-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;p&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%2F2bs3pvx0pl7452zg36pb.png" 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%2F2bs3pvx0pl7452zg36pb.png" alt="Image description"&gt;&lt;/a&gt;&lt;br&gt;
Apologies for any confusion earlier. Let me provide a clearer and more detailed explanation of N-Tier Architecture:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;✒️N-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Features&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;N-Tier Architecture is a software design pattern that organizes an application into multiple tiers or layers, with each tier responsible for specific functions and having a defined role in the overall system. Unlike the 3-Tier Architecture, which has three main tiers (presentation, application, and data), N-Tier Architecture can have more than three tiers, making it suitable for complex and large-scale applications.&lt;/p&gt;

&lt;p&gt;The typical tiers in an N-Tier Architecture are as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Presentation Tier (Client)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The presentation tier is the user-facing part of the application, where users interact with the system.&lt;/li&gt;
&lt;li&gt;It handles the user interface and captures user input.&lt;/li&gt;
&lt;li&gt;The client can be a web browser, a mobile app, or any other user interface that communicates with the rest of the application.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Tier (Middleware)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The application tier acts as an intermediary between the presentation tier and the data tier.&lt;/li&gt;
&lt;li&gt;It contains the core business logic and processes user requests and actions.&lt;/li&gt;
&lt;li&gt;The application tier handles application-specific functionalities, such as user authentication, session management, and business rules.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Data Tier (Server)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The data tier is responsible for storing and managing the application's data.&lt;/li&gt;
&lt;li&gt;It handles data storage, retrieval, and manipulation.&lt;/li&gt;
&lt;li&gt;The data tier interacts with databases or other data storage systems to persist and retrieve data required by the application.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Additional Tiers (Optional)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;N-Tier Architecture allows for the inclusion of additional tiers as needed for specific functionalities or requirements.&lt;/li&gt;
&lt;li&gt;These tiers may include specialized components like caching servers, load balancers, search engines, or external APIs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;📍Advantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Scalability&lt;/strong&gt;: The modular nature of N-Tier Architecture allows for horizontal scaling, where additional instances of each tier can be added to handle increased user traffic and demand for resources.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Flexibility&lt;/strong&gt;: The architecture's separation of concerns enables developers to modify or add tiers based on the application's requirements, allowing for the integration of specialized components for improved performance and functionality.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;High Security&lt;/strong&gt;: By segregating sensitive functions and data into separate tiers, N-Tier Architecture enhances security, limiting access to critical components and reducing the attack surface.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modularity and Reusability&lt;/strong&gt;: Each tier can be developed independently and reused across multiple applications, promoting code maintainability, and reducing development time for future projects.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;📍Disadvantages&lt;/strong&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Complexity&lt;/strong&gt;: The presence of multiple tiers and interactions between them can make the architecture more complex to design, implement, and debug, requiring skilled developers and careful planning.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Overhead&lt;/strong&gt;: The communication between tiers may introduce latency and performance overhead due to additional network requests and data transfers, potentially affecting response times.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cost and Resource Consumption&lt;/strong&gt;: Implementing and managing multiple tiers can increase development and infrastructure costs, especially for smaller projects with lower user loads.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deployment Complexity&lt;/strong&gt;: Deploying, monitoring, and maintaining multiple tiers require more sophisticated processes and tools, which can be challenging for less experienced teams.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  📌Let's understand with example
&lt;/h2&gt;

&lt;p&gt;Sure! Let's provide examples for both the 2-tier and 3-tier architectures:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍2-Tier Architecture (Client-Server)&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;Example: A Simple Desktop Database Application💻&lt;/p&gt;

&lt;p&gt;Imagine you are developing a basic desktop application that allows users to manage their personal contacts. Here's how the 2-tier architecture could be implemented:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Client (Presentation Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The client is the desktop application's user interface.&lt;/li&gt;
&lt;li&gt;It provides a simple graphical interface for users to add, edit, and view their contacts.&lt;/li&gt;
&lt;li&gt;Users directly interact with the application's forms and buttons to perform tasks.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Server (Business Logic and Data Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The server is responsible for processing the user's input and managing the contacts data.&lt;/li&gt;
&lt;li&gt;It handles the business logic, such as adding new contacts to the database, retrieving contacts, and updating existing entries.&lt;/li&gt;
&lt;li&gt;The server directly accesses the local database (e.g., SQLite) to store and retrieve contact information.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;📍3-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;Example: E-commerce Website👜&lt;/p&gt;

&lt;p&gt;Imagine you are developing an e-commerce website where users can browse products, add items to their cart, and place orders. Here's how the 3-tier architecture could be implemented:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Client (Presentation Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The client is the user's web browser (e.g., Google Chrome, Mozilla Firefox).&lt;/li&gt;
&lt;li&gt;It communicates with the application server (middleware) to request web pages and display the user interface.&lt;/li&gt;
&lt;li&gt;Users interact with the website's interface to browse products and add items to their cart.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Server (Middleware)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The application server acts as the intermediary between the client and the data tier.&lt;/li&gt;
&lt;li&gt;It handles the business logic, such as processing product searches, managing the shopping cart, and handling user authentication.&lt;/li&gt;
&lt;li&gt;The application server retrieves and sends data to the client as requested and processes user actions.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Data Tier (Server)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The data tier is the backend server that stores and manages product information, user accounts, and orders.&lt;/li&gt;
&lt;li&gt;It uses a database management system (e.g., MySQL, PostgreSQL) to store and retrieve data.&lt;/li&gt;
&lt;li&gt;The application server communicates with the data tier to retrieve product details, user information, and order history.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the 3-tier architecture example, the client (web browser) interacts with the application server to request product information and perform actions, and the application server communicates with the data tier to fetch the required data and update the database as necessary. This separation of concerns in the 3-tier architecture allows for better scalability and modularity, making it suitable for handling large-scale e-commerce websites with numerous users and complex interactions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍N-Tier Architecture&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;Example: Social Media Platform📱&lt;/p&gt;

&lt;p&gt;Let's consider the development of a social media platform like Facebook, where users can create posts, comment on them, and connect with others. Here's how the N-tier architecture could be implemented:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Client (Presentation Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The client is the user's web browser or mobile app, providing an interface for users to interact with the social media platform.&lt;/li&gt;
&lt;li&gt;Users can view their feed, create posts, comment on posts, and perform various other actions through the client.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Web Server (Application Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The web server acts as the first intermediary in the N-tier architecture.&lt;/li&gt;
&lt;li&gt;It handles the presentation logic for rendering web pages or processing API requests from the client.&lt;/li&gt;
&lt;li&gt;The web server communicates with the application server for complex operations and data retrieval.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Application Server (Middleware)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The application server is responsible for the core business logic and application-specific functionalities.&lt;/li&gt;
&lt;li&gt;It handles user authentication, manages user connections, processes posts and comments, and implements privacy settings.&lt;/li&gt;
&lt;li&gt;The application server interacts with the database server for data retrieval and storage.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Database Server (Data Tier)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The database server is where all the data for the social media platform is stored.&lt;/li&gt;
&lt;li&gt;It manages user profiles, posts, comments, friend connections, and other relevant information.&lt;/li&gt;
&lt;li&gt;The database server is accessed by the application server to perform read and write operations on the data.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Storage Tier (Optional)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In some cases, a storage tier may be introduced to handle large-scale media storage, such as images and videos uploaded by users.&lt;/li&gt;
&lt;li&gt;This tier may use specialized distributed storage systems like Amazon S3 or a content delivery network (CDN) for media delivery.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In the N-tier architecture example, the client interacts with the web server to request web pages or API services. The web server processes simple requests and forwards more complex tasks to the application server. The application server handles business logic, user management, and interacts with the database server to store and retrieve data. Optionally, a storage tier can handle media storage, making the platform more scalable for large volumes of multimedia content.&lt;/p&gt;

&lt;p&gt;Until next time😃. Happy learning.&lt;br&gt;
If you liked the article, do like😊.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>softwareengineering</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Modules📤📥 in Node.js : Beginner to Advance💻</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Thu, 20 Jul 2023 19:16:51 +0000</pubDate>
      <link>https://dev.to/tanishtt/modules-in-nodejs-beginner-to-advance-29k</link>
      <guid>https://dev.to/tanishtt/modules-in-nodejs-beginner-to-advance-29k</guid>
      <description>&lt;p&gt;&lt;em&gt;Both &lt;code&gt;Browser's javascript&lt;/code&gt; (ECMAScript Modules (ESM)) and &lt;code&gt;Node.js's javascript&lt;/code&gt; support modules, but there is a difference in syntax. After reading and gaining insightful knowledge about modules in node.js, you can read difference between them&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;So, let's get started😃.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✒️Modules : Definition
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Modules enable you to &lt;code&gt;structure&lt;/code&gt; and &lt;code&gt;contain your code within distinct files and folders&lt;/code&gt;, enhancing its organization and &lt;code&gt;reusability&lt;/code&gt;. By employing modules, you can break down your application into smaller units, each serving a specific purpose. These units can then be integrated to construct a comprehensive and functional application. They are, in Node.js are fundamental components that play a crucial role in this JavaScript runtime, utilizing Chrome's V8 engine.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In simple language, We can use functionality of one file into another file, and vise versa.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✒️Types of Modules in Node.js :
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Core Modules&lt;/strong&gt;: These are built-in modules provided by Node.js, which can be used without requiring any additional installation. Examples include &lt;code&gt;fs&lt;/code&gt; (file system), &lt;code&gt;http&lt;/code&gt; (HTTP server and client), &lt;code&gt;os&lt;/code&gt; (operating system), and more.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Local Modules&lt;/strong&gt;: These are modules you create within your application. They are usually organized into separate files and folders to keep the codebase clean and maintainable.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Third-party Modules&lt;/strong&gt;: These are modules created by the &lt;code&gt;Node.js community&lt;/code&gt; and available through the &lt;code&gt;Node Package Manager (NPM)&lt;/code&gt;. NPM is a package manager that allows developers to share and reuse code easily. You can use third-party modules in your projects by installing them using NPM.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  📤Exporting from a Module:
&lt;/h2&gt;

&lt;p&gt;To make functions, variables, or classes available from a module to other parts of your application, you need to export them. Node.js provides different ways to export items from a module:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Named Exports&lt;/strong&gt;: Export individual items one by one using &lt;code&gt;exports&lt;/code&gt; or &lt;code&gt;module.exports&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Default Export&lt;/strong&gt;: Export a single item (typically an object or a function) as the default export using &lt;code&gt;module.exports&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Note : We will see named and default exports in later part of this tutorial.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  📥Importing a Module:
&lt;/h2&gt;

&lt;p&gt;To use functionality from other modules in your current module, you need to import them. Node.js provides the require() function to import modules:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Core Modules&lt;/strong&gt;: Imported without any path (e.g., const fs = require('fs')).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Local Modules&lt;/strong&gt;: Imported using relative paths (e.g., const myModule = require('./myModule')).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Third-party Modules&lt;/strong&gt;: Imported just like local modules if they are installed using NPM.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Too much theory😅!!!!!, Let's understand with example😃.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1:&lt;/strong&gt; Create the module&lt;/p&gt;

&lt;p&gt;Create a new file named &lt;code&gt;mathCalOperations.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

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

//ARROW FUNCTION
const add = (a, b) =&amp;gt; {
  return a + b;
};

//NORMAL FUNCTION
function subtract(a, b) {
  return a - b;
};
//BOTH STYLE ARE ACCEPTABLE

const multiply = (a, b) =&amp;gt; {
  return a * b;
};

const divide = (a, b) =&amp;gt; {
  if (b === 0) {
    throw new Error('Divide by zero error, Cannot divide by zero!');
  }
  return a / b;
};

const PI = 3.14159;

module.exports = {
  add,
  subtract,
  multiply,
  divide,
  PI,
};

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

&lt;/div&gt;



&lt;p&gt;In this module, we have separate functions add, subtract, multiply, and divide, along with a constant PI.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2:&lt;/strong&gt; Import and use the module&lt;/p&gt;

&lt;p&gt;Create a new file named &lt;code&gt;app.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// app.js
const cal = require('./mathCalOperations');

const num1 = 10;
const num2 = 5;

console.log(`Addition: ${cal.add(num1, num2)}`);
console.log(`Subtraction: ${cal.subtract(num1, num2)}`);
console.log(`Multiplication: ${cal.multiply(num1, num2)}`);

try {
  console.log(`Division: ${cal.divide(num1, num2)}`);
} catch (error) {
  console.error(error.message);
}

console.log(`Value of PI: ${cal.PI}`);

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

&lt;/div&gt;



&lt;p&gt;In this file, we use the &lt;code&gt;require()&lt;/code&gt; function to import the &lt;code&gt;mathCalOperations.js&lt;/code&gt; module. We call the functions add, subtract, multiply, and divide to perform arithmetic operations on the numbers num1 and num2, and we also access the constant PI.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3:&lt;/strong&gt; Run the application&lt;/p&gt;

&lt;p&gt;Save both files in the same directory and run &lt;code&gt;app.js&lt;/code&gt; using Node.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ node app.js

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output :&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Addition: 15
Subtraction: 5
Multiplication: 50
Division: 2
Value of PI: 3.14159

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

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;mathCalOperations.js&lt;/code&gt; module is successfully imported into &lt;code&gt;app.j&lt;/code&gt;s, and we used its separate functions and the constant PI to perform mathematical operations and access the value of PI.&lt;br&gt;
This example demonstrates how to create a module with separate functions and variables, export them using &lt;code&gt;module.exports&lt;/code&gt;, and import and use them in another JavaScript file using &lt;code&gt;require()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;At the end, we are returning an &lt;code&gt;object { }&lt;/code&gt;as there are many functions and variable, object is a best way to combine (you can also use class).&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What if you write a object and return it.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;So we can above program 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;// mathCalOperations.js
const cal = {
    add: (a, b) =&amp;gt; {
    return a + b;
  },
  subtract: (a, b) =&amp;gt; {
    return a - b;
  },
  multiply: (a, b) =&amp;gt; {
    return a * b;
  },
  divide: (a, b) =&amp;gt; {
    if (b === 0) {
      throw new Error('Divide by zero error, Cannot divide by zero!');
    }
    return a / b;
  },
};

module.exports = cal;

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

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Here, We are making object from start and returning it, while in previous one, We were making &lt;code&gt;object{}&lt;/code&gt; at end.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Note : &lt;code&gt;Module.exports&lt;/code&gt; is an object.&lt;/strong&gt;&lt;br&gt;
It is a special object used to define what a module exports, i.e., what functionalities or data it makes available to other parts of the application.&lt;br&gt;
If you send just a function or a variable in Node.js using &lt;code&gt;module.exports&lt;/code&gt;, it will work perfectly fine. In Node.js, &lt;code&gt;module.exports&lt;/code&gt; can hold any value, not just objects.&lt;br&gt;
So, &lt;code&gt;module.exports&lt;/code&gt; is an object, and with it we can send any type. &lt;/p&gt;



&lt;p&gt;So, Here we end😃.&lt;br&gt;
In, &lt;strong&gt;📤Exporting from a module section&lt;/strong&gt;, We left Named and Default exports.&lt;br&gt;
Let's continue that.&lt;/p&gt;
&lt;h2&gt;
  
  
  📌Named Exports:
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Named exports allow you to export multiple items (functions, variables, or classes) from a module and import them individually by their names in other parts of your application. When you use named exports, you explicitly specify which items you want to make available for importing&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;mathCalOperations.js:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// mathCalOperations.js
const add = (a, b) =&amp;gt; {
  return a + b;
};

const subtract = (a, b) =&amp;gt; {
  return a - b;
};

module.exports.add123 = add;
module.exports.subtract123 = subtract;

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

&lt;/div&gt;



&lt;p&gt;In this example, we have two functions add and subtract in the &lt;code&gt;mathCalOperations.js&lt;/code&gt; module. We export them using the &lt;code&gt;module.exports&lt;/code&gt; object with the property names add and subtract. This makes the functions individually accessible when importing the module in another file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;app.js:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// app.js
const cal = require('./mathCalOperations');

const num1 = 10;
const num2 = 5;

console.log(`Addition: ${cal.add123(num1, num2)}`);
console.log(`Subtraction: ${cal.subtract123(num1, num2)}`);

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

&lt;/div&gt;



&lt;p&gt;In app.js, we import the &lt;code&gt;mathCalOperations.js&lt;/code&gt; module and store it in the &lt;code&gt;cal&lt;/code&gt; variable. We can then access the exported functions add and subtract using &lt;code&gt;cal.add123()&lt;/code&gt; and &lt;code&gt;cal.subtract123()&lt;/code&gt; respectively.&lt;/p&gt;

&lt;h2&gt;
  
  
  📌Default Export:
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;A default export allows you to export a single item (usually an object, a function, or a class) as the main export of the module. When using a default export, you can import the item using any name you want, making it more flexible when importing.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;greeting.js:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// greeting.js
const greet = (name) =&amp;gt; {
  return `Hello, ${name}!`;
};

module.exports = greet;

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;app.js:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// app.js
const customGreeting = require('./greeting');

const name = 'John';
console.log(customGreeting(name));

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

&lt;/div&gt;



&lt;p&gt;In app.js, we import the greeting.js module and store the default exported function in the variable customGreeting. Since it is a default export, we can give it any name we want. We then call the function using customGreeting(name) to get the greeting message.&lt;/p&gt;

&lt;p&gt;The first example of this tutorial, &lt;em&gt;above at top&lt;/em&gt; is also an example of &lt;code&gt;Default Export&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;It's not the end, I will add few more about it, later in future😊.&lt;/p&gt;

&lt;p&gt;Happy Learning!! , Until next time🫂.&lt;br&gt;
If you liked the article, do hit like😃.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>node</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Security🔐 Concerns with Cookies🍪.</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Wed, 19 Jul 2023 04:18:28 +0000</pubDate>
      <link>https://dev.to/tanishtt/security-concerns-with-cookies-3h7j</link>
      <guid>https://dev.to/tanishtt/security-concerns-with-cookies-3h7j</guid>
      <description>&lt;p&gt;&lt;strong&gt;What actually cookie is&lt;/strong&gt; &lt;a href="https://dev.to/tanishtt/cookie-deep-dive-in-cookies-5fn9"&gt;Here&lt;/a&gt;&lt;br&gt;
Cookies are small pieces of data stored in a user's browser by a website to remember certain information about the user or track their activities. Though cookies are generally secure when implemented correctly, there are some security concerns associated with them. Let's explore these security concerns in detail:&lt;/p&gt;
&lt;h2&gt;
  
  
  🔏Man-in-the-Middle (MitM) Attacks:
&lt;/h2&gt;

&lt;p&gt;In a MitM attack, a malicious actor positions themselves between the user's browser (the client) and the web server. This allows the attacker to intercept and view the communication between the two parties. If the communication is not encrypted, the attacker can read sensitive data, including cookies, transmitted between the client and server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EyJl_tro--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h87rlvij0v44bngbfez.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EyJl_tro--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h87rlvij0v44bngbfez.png" alt="Image description" width="556" height="260"&gt;&lt;/a&gt;&lt;br&gt;
Source: &lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fwww.imperva.com%2Flearn%2Fapplication-security%2Fman-in-the-middle-attack-mitm%2F&amp;amp;psig=AOvVaw1bDS5_f8HylPovGMd5JXjZ&amp;amp;ust=1689826164078000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBMQjhxqFwoTCPDWx5TzmYADFQAAAAAdAAAAABAR"&gt;MITH&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mitigation&lt;/strong&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;To protect against MitM attacks, websites should enforce the use of HTTPS (HTTP Secure) for all data transmission. HTTPS encrypts the data exchanged between the client and server, making it extremely difficult for attackers to read or modify the information, including cookies.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So, developers should ensure that cookies containing sensitive information or authentication tokens have the Secure attribute set. When the Secure attribute is present, the browser will only send the cookie over an encrypted HTTPS connection, preventing its exposure over unsecured HTTP connections.&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;document.cookie = 'dark_mode=false; Secure';

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  🔏Cross-Site Scripting (XSS) Attacks:
&lt;/h2&gt;

&lt;p&gt;XSS attacks occur when an attacker injects malicious scripts into a website that is viewed by other users. The injected scripts execute within the context of the victim's browser, allowing the attacker to steal cookies, session information, or perform unauthorized actions on the user's behalf.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WjGmc3yi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2wk1rhfvajlrbaq3qvv.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WjGmc3yi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2wk1rhfvajlrbaq3qvv.gif" alt="Image description" width="800" height="534"&gt;&lt;/a&gt;&lt;br&gt;
Source: &lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fwww.acunetix.com%2Fblog%2Farticles%2Fhow-to-protect-your-website-against-a-cross-site-scripting-xss-attack%2F&amp;amp;psig=AOvVaw3hacHA9ZKbXj7lUmhdn8yO&amp;amp;ust=1689826235969000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBMQjhxqFwoTCMDxhLfzmYADFQAAAAAdAAAAABAp"&gt;XSS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mitigation&lt;/strong&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Developers must adopt strict input validation and output encoding practices to prevent XSS vulnerabilities. Any user-provided data displayed on the website should be thoroughly sanitized to prevent malicious scripts from being executed.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To minimize the impact of XSS attacks on cookies, the HttpOnly attribute should be used. By adding HttpOnly, the cookie can only be accessed by the server-side code and not by JavaScript running in the user's browser. This prevents malicious scripts from stealing cookie data using the Document.cookie API.&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;document.cookie = 'dark_mode=false; Secure; HttpOnly';

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  🔏Cross-Site Request Forgery (CSRF) Attacks:
&lt;/h2&gt;

&lt;p&gt;CSRF attacks involve tricking a user's browser into unknowingly making an unintended request to a different website where the user is authenticated. If the user is logged in to the targeted website, the request will be executed with their credentials, leading to potential account compromise or unauthorized actions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mCTlmO1O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmjwenlsx3dgri61qjls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mCTlmO1O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmjwenlsx3dgri61qjls.png" alt="Image description" width="800" height="451"&gt;&lt;/a&gt;&lt;br&gt;
Source: &lt;a href="https://www.google.com/url?sa=i&amp;amp;url=https%3A%2F%2Fwww.okta.com%2Fau%2Fidentity-101%2Fcsrf-attack%2F&amp;amp;psig=AOvVaw1-CEh3jHoI6c1UJ5H94B_V&amp;amp;ust=1689826508037000&amp;amp;source=images&amp;amp;cd=vfe&amp;amp;opi=89978449&amp;amp;ved=0CBMQjhxqFwoTCNjD27f0mYADFQAAAAAdAAAAABAE"&gt;CSRF&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mitigation&lt;/strong&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;To defend against CSRF attacks, developers should implement CSRF tokens in their web applications. These tokens are unique for each user session and should be included in all requests that perform sensitive actions, such as changing account settings or making transactions. The server then validates the token to ensure that the request is legitimate and not an attempt to exploit CSRF vulnerabilities.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Moreover, the SameSite attribute can be used with cookies to mitigate CSRF risks. By setting SameSite=Strict, the browser ensures that cookies are only sent to the same site from which they originated, reducing the chances of unauthorized requests from other domains.&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;document.cookie = 'dark_mode=false; Secure; HttpOnly; SameSite=Strict';

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Alternatives to Cookies:
&lt;/h2&gt;

&lt;p&gt;While cookies have been widely used for storing user information, modern web development offers alternative approaches:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;📌SessionStorage and LocalStorage&lt;/strong&gt;: These are client-side storage mechanisms that allow developers to store data within the user's browser. Unlike cookies, these storages are limited to the current browser tab or window and are not sent to the server with each request. While useful for certain use cases, they lack server-side validation and are not suitable for managing user authentication.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;📌Token-Based Authentication (e.g., JWT)&lt;/strong&gt;: Token-based authentication provides a more secure way to manage user sessions and authentication. When a user logs in, the server generates a unique token containing user information and signs it cryptographically. The token is then sent to the client and included in subsequent requests. This approach eliminates the need for cookies to manage user sessions and provides better security against various attacks.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Happy Learning!! , Until next time🫂.&lt;br&gt;
If you liked the article, do hit like😃.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>security</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Cookie🍪 : Deep Dive in cookies💻</title>
      <dc:creator>tanishmohanta</dc:creator>
      <pubDate>Tue, 18 Jul 2023 21:06:43 +0000</pubDate>
      <link>https://dev.to/tanishtt/cookie-deep-dive-in-cookies-5fn9</link>
      <guid>https://dev.to/tanishtt/cookie-deep-dive-in-cookies-5fn9</guid>
      <description>&lt;p&gt;Let's start from beginning. You know browser has javascript engine, where we execute our javascript code, apart from this browser also have many things like &lt;code&gt;Storage&lt;/code&gt;, &lt;code&gt;fetch() Api&lt;/code&gt;, &lt;code&gt;console.log()&lt;/code&gt;, &lt;code&gt;DOM Api&lt;/code&gt;(all event listener, getElementById etc.), &lt;code&gt;setTimeOut()&lt;/code&gt;, &lt;code&gt;Locations&lt;/code&gt; and many more(&lt;em&gt;Ya! you got it right, these things &lt;strong&gt;are not javascript&lt;/strong&gt;, these are browsers things. These functionalities are browser features that are accessed through APIs&lt;/em&gt;).One of the feature which is provided by browser is &lt;code&gt;Storage&lt;/code&gt;(Ya! browser has its own storage which we can use in javascript code using Api's).&lt;/p&gt;

&lt;p&gt;Browser has many types of storage namely &lt;code&gt;Local Storage&lt;/code&gt;, &lt;code&gt;Session Storage&lt;/code&gt;, &lt;code&gt;Cookies&lt;/code&gt;, &lt;code&gt;IndexedDB&lt;/code&gt;, &lt;code&gt;Web SQL Database (Deprecated)&lt;/code&gt;, &lt;code&gt;Cache API&lt;/code&gt;, &lt;code&gt;Web Storage API (Deprecated)&lt;/code&gt; etc.&lt;/p&gt;

&lt;p&gt;You can see here.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--l6lLLzr5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ls8m3kevt8dlcmna6nw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--l6lLLzr5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ls8m3kevt8dlcmna6nw.png" alt="Image description" width="276" height="385"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see here, for storing data there are many types of Storage and one of it is cookies.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✒️Let's see what Cookie🍪 Storage is 😃😁 ...
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Definition : Cookies are small pieces of data stored by websites on a user's web browser. They are commonly used to store information about the user's preferences, session state, and other data related to their interactions with a website.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;So, It's used to store small data.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;✒️Which type of data 🤔???.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We can store anything, but everything has purpose in this world. This Cookie storage is used to store specifically browsing data, session data, user behavior etc.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NbBhmsJ---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx54ffnnxr1ihrbmc0zb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NbBhmsJ---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx54ffnnxr1ihrbmc0zb.png" alt="Image description" width="223" height="52"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;✒️Let's see an example😊.&lt;/p&gt;

&lt;p&gt;You went a Travelling website "X". At start it will ask you to sign in/sign up. You logged in( means at back, it will send request to browser and will get a response related to log in(success/not success)). The response which website X's server sent back to website for successful login will also contain a data(cookie) with it (in response's header), which will be stored in Cookie Storage in yours browser.&lt;/p&gt;

&lt;p&gt;This session cookie enables the website to maintain you the logged-in state throughout the Travelling booking process.&lt;br&gt;
&lt;em&gt;Means as you navigates through features in website or different pages in website, it will not ask every time Log in/Sign up.&lt;br&gt;
It will use the cookie here, to identify that its the same user(you).&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So, Here you saw how cookie helps in user to stay logged-in across different pages in a website.&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;There are many more things like &lt;code&gt;User Tracking&lt;/code&gt; ,&lt;code&gt;personalization&lt;/code&gt;, &lt;code&gt;Advertisement&lt;/code&gt;(how you see Ads specific to your interest) etc, We will see in later part. &lt;br&gt;
Let's first see cookie's features.&lt;/p&gt;
&lt;h2&gt;
  
  
  ✒️How cookie looks 🤔🤔🤔...
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4IPnYIkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gev7i8yz26ld4pt54a6i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4IPnYIkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gev7i8yz26ld4pt54a6i.png" alt="Image description" width="800" height="120"&gt;&lt;/a&gt;&lt;br&gt;
Let's Zoom in🔍.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--E9flJ9cR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn7hofyopboglhlj3wjl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--E9flJ9cR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn7hofyopboglhlj3wjl.png" alt="Image description" width="795" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ya! you saw right😁. cookie are stored name=value pair.&lt;/p&gt;
&lt;h2&gt;
  
  
  🍪&lt;u&gt;Structure&lt;/u&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A cookie is represented as a key-value pair, where the &lt;code&gt;key is the name of the cookie&lt;/code&gt;, and &lt;code&gt;the value is the data associated with it&lt;/code&gt;. Cookies also have attributes such as expiration date, domain, and path, which provide additional control over how the cookies are used and accessed.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Zoom in 🔍the above to above image...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4G40vVB4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/299qs557d1gwwvzq1el9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4G40vVB4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/299qs557d1gwwvzq1el9.png" alt="Image description" width="800" height="146"&gt;&lt;/a&gt;&lt;br&gt;
These are the attributes of cookies.&lt;/p&gt;

&lt;p&gt;✒️Let's see one by one😃.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;u&gt;&lt;strong&gt;expires&lt;/strong&gt;:&lt;/u&gt; Specifies the expiration date of the cookie. Once the expiration date is reached, the cookie will be automatically deleted by the browser.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;&lt;strong&gt;domain&lt;/strong&gt;&lt;/u&gt;: Specifies the domain for which the cookie is valid. By default, cookies are valid for the domain that set them. You can set any domain to which you want to keep the cookies. &lt;/li&gt;
&lt;li&gt;
&lt;u&gt;&lt;strong&gt;path&lt;/strong&gt;:&lt;/u&gt; Specifies the URL path for which the cookie is valid. By default, cookies are valid for the entire domain.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;&lt;strong&gt;secure&lt;/strong&gt;&lt;/u&gt;: If set to true, the cookie will only be sent over secure HTTPS connections.&lt;/li&gt;
&lt;li&gt;
&lt;u&gt;&lt;strong&gt;httponly&lt;/strong&gt;&lt;/u&gt;: If set to true, the cookie will be inaccessible to JavaScript, reducing the risk of certain types of attacks like XSS.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;OH!! Lot's of theory. Let's implement 💻and create a cookie🍪.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;NOTE: There are many other ways to add cookies and many other library with which we can set cookie. This is simplest way to add cookie.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  &lt;u&gt;🍪Setting a Cookie:&lt;/u&gt;
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.cookie = 'username=John; expires=Thu, 17 Jul 2025 12:00:00 UTC; path=/';

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

&lt;/div&gt;


&lt;p&gt;First we write a cookie name and value, then after semicolon attributes. If want to add more attributes give semcolon then add.&lt;br&gt;
Yo, cookie is set.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9I8vaSuG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vd8bm1ymzue4gzk7kxp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9I8vaSuG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vd8bm1ymzue4gzk7kxp.png" alt="Image description" width="800" height="37"&gt;&lt;/a&gt;&lt;br&gt;
Zoomed in🔍.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zWMq54Ji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/000jr2ri92a96xvvcobq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zWMq54Ji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/000jr2ri92a96xvvcobq.png" alt="Image description" width="722" height="85"&gt;&lt;/a&gt;&lt;br&gt;
Add one more cookie.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.cookie = 'product=dairy';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LOiVRjXt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31ewxiaap6syvcgcbve4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LOiVRjXt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31ewxiaap6syvcgcbve4.png" alt="Image description" width="722" height="107"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It will not replace the previous one, it will add next cookie (no need of &lt;strong&gt;+=&lt;/strong&gt;).&lt;/p&gt;

&lt;p&gt;Ok, &lt;em&gt;So you learned how to add a cookie. In second example, you just added a cookie, no attributes. In this case, in expires section it will set to &lt;code&gt;session&lt;/code&gt; which means that as soon as you close the browser(click on red cross button), the second cookie will expire because it is for this session only.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;u&gt;🍪Getting Cookies:&lt;/u&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const allCookies = document.cookie;
console.log(allCookies);

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

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uUd1dGVp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi1ok1sp0ctemdgs7f2o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uUd1dGVp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi1ok1sp0ctemdgs7f2o.png" alt="Image description" width="292" height="163"&gt;&lt;/a&gt;&lt;br&gt;
Above code illustrates, If all cookies are get printed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function getCookie(cookieName) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i &amp;lt; cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(cookieName + '=')) {
      return cookie.substring(cookieName.length + 1);
    }
  }
  return null; // Return null if the cookie is not found
}

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

&lt;/div&gt;



&lt;p&gt;Pass cookie name in function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myCookieValue = getCookie('your_cookie_name');
if (myCookieValue) {
  console.log('Value of "your_cookie_name":', myCookieValue);
} else {
  console.log('Cookie not found.');
}

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

&lt;/div&gt;



&lt;p&gt;Above code illustrates, If you want a &lt;code&gt;specific cookie value&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;u&gt;🍪Removing a Cookie:&lt;/u&gt;
&lt;/h2&gt;

&lt;p&gt;The basic way to remove a cookie is to set to previous date which has passed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;✒️Some important points to note.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;Cookies can have an expiration date, after which they will be automatically deleted by the browser.&lt;/li&gt;
&lt;li&gt;Cookies without an expiration date are called session cookies and are deleted when the user closes the browser.&lt;/li&gt;
&lt;li&gt;Cookies are specific to a domain. Each domain can set and access its own cookies, and one website cannot access cookies set by another website due to the same-origin policy, which enhances security.&lt;/li&gt;
&lt;li&gt;Cookies are accessed through the &lt;code&gt;document.cookie&lt;/code&gt; property in JavaScript. This property contains a string representation of all the cookies associated with the current domain.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's conclude by writing a complete code.&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;!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 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;div id="box"&amp;gt;
    Here data will be there.
  &amp;lt;/div&amp;gt;
  &amp;lt;button id="btn"&amp;gt;click&amp;lt;/button&amp;gt;

  &amp;lt;script&amp;gt;
    // Function to set the cookie with all the options
    function setCookie(name, value, domain, path, expiration, secure, httpOnly, sameSite) {
      let cookieOptions = `${name}=${encodeURIComponent(value)}`;

      if (domain) {
        cookieOptions += `; Domain=${domain}`;
      }

      if (path) {
        cookieOptions += `; Path=${path}`;
      }

      if (expiration) {
        const expirationDate = new Date(expiration * 1000).toUTCString();
        cookieOptions += `; Expires=${expirationDate}`;
      }

      if (secure) {
        cookieOptions += `; Secure`;
      }

      //if (httpOnly) {
        //cookieOptions += `; HttpOnly`;
      //}

      if (sameSite) {
        cookieOptions += `; SameSite=${sameSite}`;
      }

      document.cookie = cookieOptions;
      console.log(document.cookie);
    }

    // Example usage
    const userPreferences = { theme: "dark", language: "en", showNotifications: true };
    const encodedPreferences = JSON.stringify(userPreferences);

    // Set the cookie for localhost (Empty string for domain)
    setCookie(
      "user_preferences_cookie",
      encodedPreferences,
      "",
      "/",
      1697171200,//till 13/10/2023 9:56:40 AM
      true,     // Set to true for "Secure" attribute
      true,     // Set to true for "HttpOnly" attribute
      "Strict"
    );
  &amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output&lt;/strong&gt; : &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6EevJCx4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axdekajvljfx0h1inxa0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6EevJCx4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axdekajvljfx0h1inxa0.png" alt="Image description" width="800" height="52"&gt;&lt;/a&gt;&lt;br&gt;
Zoom in🔍&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bGn4t1W1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0c2cm1znwfbseuejgza.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bGn4t1W1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0c2cm1znwfbseuejgza.png" alt="Image description" width="778" height="152"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;In console :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QO695dPn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48wv3rr1pkcin0bwgsar.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QO695dPn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48wv3rr1pkcin0bwgsar.png" alt="Image description" width="800" height="137"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;This example demonstrates how to create a cookie with multiple options for localhost &lt;a href="http://127.0.0.1/"&gt;http://127.0.0.1/&lt;/a&gt; =&amp;gt; &lt;strong&gt;""&lt;/strong&gt; website ". The cookie named "&lt;code&gt;user_preferences_cookie&lt;/code&gt;" stores user preferences in JSON format and is set to expire on 13/10/2023. Additionally, the &lt;code&gt;SameSite&lt;/code&gt; attribute is set to "&lt;code&gt;Strict&lt;/code&gt;", ensuring that the cookie is sent only in first-party contexts.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;u&gt;✒️Advantages&lt;/u&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Persistence&lt;/strong&gt;: Cookies persist across different browser &lt;code&gt;sessions&lt;/code&gt; and can be used to remember user preferences and maintain session state.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Client-Side Storage&lt;/strong&gt;: Cookies are stored on the client-side, reducing the need for frequent server-side communication for certain types of data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Simple API&lt;/strong&gt;: The document.cookie property provides a simple way to interact with cookies, making them accessible to developers of all skill levels.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;u&gt;✒️Disadvantages&lt;/u&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Size Limit&lt;/strong&gt;: Cookies are limited in size (usually &lt;code&gt;4 KB per cookie&lt;/code&gt; and a total limit of around &lt;code&gt;300 cookies per domain&lt;/code&gt;), which can be a limitation for storing larger amounts of data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sent with Every Request&lt;/strong&gt;: Cookies are sent with every HTTP request to the domain they belong to, which can add some overhead, especially if a website has many cookies.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security Concerns&lt;/strong&gt;: As cookies are accessible by JavaScript on the client-side, they can be susceptible to certain security risks, such as &lt;code&gt;Cross-Site Scripting (XSS)&lt;/code&gt; attacks or &lt;code&gt;Cross-Site Request Forgery (CSRF)&lt;/code&gt; attacks if not used and secured properly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Limited to String Data&lt;/strong&gt;: Cookies can only store data in string format. Complex data types like objects and arrays need to be serialized into strings before storage, which can add complexity to the code.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ✒️Who actually sets Cookies??🤔🤔
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Cookies are typically set by web servers and sent to the user's web browser during HTTP responses. When a user visits a website, the web server can include a "Set-Cookie" header in the HTTP response to instruct the browser to create and store a cookie on the user's device.&lt;/p&gt;

&lt;p&gt;The "&lt;code&gt;Set-Cookie&lt;/code&gt;" header contains the necessary information to create the cookie, including its name, value, attributes (e.g., expiration date, domain, path, etc.), and other optional settings like security attributes (Secure and HttpOnly). Once the browser receives the "&lt;code&gt;Set-Cookie&lt;/code&gt;" header, it creates the cookie and stores it locally on the user's device as instructed by the server.&lt;/p&gt;

&lt;p&gt;For example, when a user logs into a website, the server may respond with the following "&lt;code&gt;Set-Cookie&lt;/code&gt;" header to create a session cookie:&lt;/p&gt;


&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Set-Cookie: session_id=abc123; path=/; HttpOnly
&lt;/code&gt;&lt;/pre&gt;


&lt;p&gt;In this example, the server instructs the browser to create a session cookie named "&lt;code&gt;session_id&lt;/code&gt;" with the value "&lt;code&gt;abc123&lt;/code&gt;." The cookie is set to be accessible only via HTTP (HttpOnly) and is valid for all paths on the website (path=/).&lt;/p&gt;

&lt;p&gt;Once the cookie is set, the browser will automatically include the cookie in subsequent HTTP requests to the same domain. This allows the server to identify the user and maintain session state, personalization, and other relevant information.&lt;/p&gt;

&lt;p&gt;It's important to note that certain types of cookies, such as HttpOnly cookies, can only be set by the server and cannot be accessed or modified by client-side JavaScript. This enhances security by preventing certain types of attacks, like &lt;code&gt;Cross-Site Scripting (XSS)&lt;/code&gt;, from accessing sensitive cookie data.&lt;/p&gt;

&lt;p&gt;So concluding, Web servers set cookies to provide a way to store information on the user's browser, enabling stateful interactions between the user and the website and enhancing the overall user experience.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  ✒️What happens after a Cookie🍪 is set, and How it saves data and tracks user interactions🤔🤔
&lt;/h2&gt;

&lt;p&gt;After a cookie is set and stored on the user's browser, it becomes part of the user's browsing experience, and its data and behavior depend on the attributes and settings defined when the cookie was created.&lt;/p&gt;

&lt;p&gt;Here's what happens after a cookie is set, and how it saves data and tracks user interactions:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;📍Subsequent Requests&lt;/strong&gt;:&lt;br&gt;
    As the user continues to interact with the website or moves to different pages within the same domain, the browser automatically includes the cookie in the headers of all subsequent HTTP requests to that domain.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;For example, if the website has a navigation menu or loads additional resources, like images or scripts, the browser sends the cookie information along with each request to the server.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Retrieving Data&lt;/strong&gt;:&lt;br&gt;
    When the browser includes the cookie in an HTTP request, the server can access the cookie data and use it to identify the user and maintain session state.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;For example, if the server set a session cookie with a user's &lt;code&gt;unique session ID&lt;/code&gt;, it can retrieve the session ID from the cookie in subsequent requests to identify the user and provide personalized content or access to restricted areas of the website.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Session Management&lt;/strong&gt;:&lt;br&gt;
    &lt;code&gt;Session cookies&lt;/code&gt; are often used to manage user sessions. When the user logs into a website, the server sets a session cookie, and subsequent requests include the session cookie to maintain the user's login status.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The server can use the session cookie data to determine if the user is logged in and provide access to authenticated features.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍User Tracking and Personalization&lt;/strong&gt;:&lt;br&gt;
    &lt;code&gt;Persistent cookies&lt;/code&gt; are commonly used to track user preferences and behaviors across different visits to the website. This tracking helps websites offer personalized content and recommendations to users based on their previous interactions.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;For example, if a user visits an online store and adds items to their cart without making a purchase, the website might use a &lt;code&gt;persistent cookie&lt;/code&gt; to remember the user's cart contents when they return later.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Expiry and Deletion&lt;/strong&gt;:&lt;br&gt;
    If a cookie has an expiration date, the browser will automatically delete the cookie after that date is reached. This allows for time-limited functionality or data storage.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;For example, a website might use a &lt;code&gt;persistent cookie&lt;/code&gt; to remember a user's language preference for a year, while a session cookie might only be valid for the duration of the browsing session.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📍Security Considerations&lt;/strong&gt;:&lt;br&gt;
    &lt;code&gt;Secure&lt;/code&gt; and &lt;code&gt;HttpOnly&lt;/code&gt; attributes in cookies enhance security. Secure cookies are only sent over HTTPS connections, ensuring that sensitive data is encrypted during transmission. HttpOnly cookies are inaccessible to client-side JavaScript, protecting against certain types of attacks like XSS.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  ✒️Types of Cookies🍪
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;📌Session Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Session cookies are temporary cookies that are stored in the browser's memory and are only active during a browsing session. They are typically used to remember user preferences or track the user's activities within a single session. Once the user closes the browser, session cookies are deleted.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: Shopping Cart&lt;br&gt;
When a user adds items to their shopping cart on an online store, session cookies can be used to keep track of the items during their browsing session. Once the user completes their purchase or leaves the website, the session cookies are deleted, clearing the shopping cart.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌Persistent Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Persistent cookies, also known as permanent cookies, are stored on the user's device even after the browser is closed. They have an expiration date set by the website and remain on the user's device until that date or until the user manually deletes them. Persistent cookies are used for long-term data storage, such as remembering login information or user preferences across multiple sessions.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: "Remember Me" Option&lt;br&gt;
On a website's login page, users may have the option to check a "Remember Me" box. If they select this option, a persistent cookie is set with their login credentials. This allows them to stay logged in even after they close the browser or revisit the website at a later time.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌First-party Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First-party cookies are set by the website domain that the user is directly visiting. These cookies are used to improve the user experience on that specific website, remember user preferences, and store session-related information.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: User Preferences&lt;br&gt;
A website may use first-party cookies to remember a user's preferred theme (e.g., light or dark mode), font size, or language selection, providing a personalized experience for the user during their visit.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌Third-party Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Third-party cookies are set by domains other than the one the user is directly visiting. These cookies are usually created by third-party services (such as advertising or analytics providers) that are embedded in the website the user is browsing. Third-party cookies are often used to track users across multiple websites and gather data for advertising and analytics purposes.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: Advertising Tracking&lt;br&gt;
When a user visits a website that displays ads from an advertising network, the website may use third-party cookies to track the user's browsing behavior across different websites. This data is used to serve targeted ads based on the user's interests and activities.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌Secure Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Secure cookies are cookies that are transmitted over HTTPS instead of HTTP. They are encrypted and provide an extra layer of security, ensuring that the data stored in the cookie is less susceptible to interception by malicious entities.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: Secure Login&lt;br&gt;
For websites that handle sensitive information like online banking or personal data, secure cookies are used to store session identifiers securely. These cookies are transmitted over HTTPS, making it difficult for attackers to intercept and tamper with the cookie data.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌HttpOnly Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HttpOnly cookies are designed to be inaccessible through client-side scripts (e.g., JavaScript). They can only be accessed and modified by the server, which helps mitigate the risk of cross-site scripting (XSS) attacks.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: Authentication Tokens&lt;br&gt;
HttpOnly cookies are commonly used for storing authentication tokens. When a user logs in to a website, the server sets an HttpOnly cookie containing the authentication token. This prevents malicious scripts from accessing the token and helps protect against cross-site scripting (XSS) attacks.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌SameSite Cookies:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;SameSite cookies define whether a cookie should be sent with cross-origin requests. This attribute helps prevent certain types of CSRF (Cross-Site Request Forgery) attacks. SameSite cookies can have three possible values: "Strict," "Lax," or "None."&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: CSRF Prevention&lt;br&gt;
Websites often use SameSite cookies to prevent Cross-Site Request Forgery (CSRF) attacks. By setting SameSite attributes to "Strict" or "Lax," the website ensures that the cookie is not sent in cross-origin requests, making it harder for attackers to initiate unauthorized actions on behalf of the user.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;📌Flash Cookies (Local Shared Objects):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Flash cookies are not related to traditional web browser cookies but serve a similar purpose in Flash applications. These cookies are stored by Adobe Flash Player and can track user preferences and data across different Flash-based websites.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Example: Flash Game Progress&lt;br&gt;
In Flash-based games or applications, Flash cookies can be used to store game progress, user preferences, and other data locally. This allows users to resume their game from where they left off, even if they close the browser or visit the website on a different device.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Happy Learning!! , Until next time🫂.&lt;br&gt;
If you liked the article, do hit like😃.&lt;/p&gt;




&lt;ul&gt;
&lt;li&gt;&lt;h2&gt;
  
  
  Security concerns with Cookies. &lt;a href="https://dev.to/tanishtt/security-concerns-with-cookies-3h7j"&gt;Here&lt;/a&gt;
&lt;/h2&gt;&lt;/li&gt;
&lt;li&gt;&lt;h2&gt;
  
  
  How you see Ads personalized to you on a website ?🤔How cookies Help Google Ads to make view you your personalized Ads ?&lt;a href="//wait.com"&gt;Here&lt;/a&gt;
&lt;/h2&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
