<?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: Shreyaan Seth</title>
    <description>The latest articles on DEV Community by Shreyaan Seth (@shreyaan).</description>
    <link>https://dev.to/shreyaan</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%2F771654%2Fe9de6f34-b827-4198-92a3-3b68aac574d3.jpg</url>
      <title>DEV Community: Shreyaan Seth</title>
      <link>https://dev.to/shreyaan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/shreyaan"/>
    <language>en</language>
    <item>
      <title>We Invented MCP Just to Rediscover the Command Line</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Sun, 29 Mar 2026 08:53:26 +0000</pubDate>
      <link>https://dev.to/shreyaan/we-invented-mcp-just-to-rediscover-the-command-line-4n5c</link>
      <guid>https://dev.to/shreyaan/we-invented-mcp-just-to-rediscover-the-command-line-4n5c</guid>
      <description>&lt;p&gt;Time moves differently in the AI era. Right now, one year packs roughly half a decade of standard tech cycles. &lt;/p&gt;

&lt;p&gt;We used to watch software patterns run their full lifecycle in slow motion. Think about jQuery, Angular, or the Next.js Pages Router. Each of them took about five years to complete the arc: peak hype, messy real-world adoption, the slow-motion collision with technical debt, and finally, the quiet retreat back to what actually works. &lt;/p&gt;

&lt;p&gt;MCP (Model Context Protocol) just did that entire speedrun in under twelve months. &lt;/p&gt;

&lt;p&gt;When Anthropic launched it in late 2024, the LinkedIn crowd immediately crowned it the "USB-C for AI." By mid-2025, every major IDE had integrated it, the ecosystem hit nearly 100 million monthly SDK downloads, and developers were shipping demo servers in an afternoon, happily declaring the agent-integration problem solved. &lt;/p&gt;

&lt;p&gt;Then everyone actually tried to run it in production. &lt;/p&gt;

&lt;p&gt;Once the hype cleared, three massive cracks appeared in the foundation. &lt;/p&gt;

&lt;h3&gt;
  
  
  The token math is brutal
&lt;/h3&gt;

&lt;p&gt;Every tool you expose to an LLM eats tokens. Not a little. A lot. &lt;/p&gt;

&lt;p&gt;Cloudflare recently did the math on this. To expose their API's 2,500 endpoints via a standard MCP server, the schema definitions alone would consume 1.17 &lt;em&gt;million&lt;/em&gt; tokens. That’s more than the entire context window of today's frontier models, completely nuked before the user even types a prompt. &lt;/p&gt;

&lt;p&gt;You don't even need to be Cloudflare to hit the wall. Apideck documented a real-world deployment where just three MCP servers (GitHub, Slack, and Sentry) loaded roughly 40 tools. That consumed 143,000 tokens out of a 200,000-token window. That is 72% of the model's working memory, gone. &lt;/p&gt;

&lt;p&gt;The irony here is structural. The more capable you want your agent to be—the more tools you give it—the dumber it gets, because the tool schemas literally crowd out the model's ability to reason.&lt;/p&gt;

&lt;h3&gt;
  
  
  Auth doesn't survive the enterprise
&lt;/h3&gt;

&lt;p&gt;MCP's specification openly leaves consent and authorization flows up to the implementor. In practice, this means every dev team is currently reinventing auth from scratch, usually poorly, and usually under a deadline. &lt;/p&gt;

&lt;p&gt;The production reality is grim. Enterprises building on REST APIs solved rate limiting, tamper-proof audit logs, and role-based access control a decade ago. MCP threw those lessons out the window to make tool-calling feel elegant in local demos. &lt;/p&gt;

&lt;p&gt;As a result, MCP holds zero certifications for SOC 2, PCI DSS, or FedRAMP. The OAuth specification conflicts with modern enterprise practices. At the RSA Conference recently, researchers demonstrated how an MCP vulnerability could enable remote code execution and a full takeover of an Azure tenant. It's an auditor's worst nightmare. &lt;/p&gt;

&lt;h3&gt;
  
  
  Tool calling is the wrong primitive entirely
&lt;/h3&gt;

&lt;p&gt;This is the deepest crack, and the one that took the industry the longest to admit. &lt;/p&gt;

&lt;p&gt;LLMs have an enormous amount of real-world TypeScript and Python in their training data. They have almost no training data on blindly navigating a bespoke menu of native MCP tools. The implication is obvious in hindsight: LLMs are fundamentally better at writing code than they are at clicking buttons. &lt;/p&gt;

&lt;p&gt;Cloudflare proved this empirically. They compared an agent using direct tool-calling to an agent using "Code Mode" to create 31 calendar events. The tool-calling agent fired off 30+ individual, sequential calls, forcing the model to re-process the context every single time. The Code Mode agent just wrote a simple loop and iterated over the dates in a single execution. &lt;/p&gt;

&lt;p&gt;By converting their 2,500 endpoints from a traditional MCP approach down to a typed SDK that the model just writes code against, Cloudflare dropped token usage by 81%. &lt;/p&gt;

&lt;p&gt;The tool-calling paradigm treats LLMs as dumb orchestrators. Code generation treats them as what they actually are: very good programmers.&lt;/p&gt;

&lt;h3&gt;
  
  
  The 12-Month Reversal
&lt;/h3&gt;

&lt;p&gt;Over the last few weeks, the public reckoning finally arrived. &lt;/p&gt;

&lt;p&gt;At the Ask 2026 conference a couple of weeks ago, Perplexity CTO Denis Yarats announced the company is abandoning MCP internally in favor of traditional APIs and CLIs. They cited context window consumption and clunky auth. The kicker? Perplexity had just shipped their own MCP server four months prior. They built it, ran it in production, hated it, and reversed course inside a single quarter. &lt;/p&gt;

&lt;p&gt;Y Combinator president Garry Tan put it bluntly on X: &lt;em&gt;"MCP sucks honestly... I got sick of it and vibe coded a CLI wrapper instead,"&lt;/em&gt; citing reliability and speed. Over on Hacker News, a tool called &lt;code&gt;mcp2cli&lt;/code&gt;—which literally converts MCP tools back into plain CLI commands—hit the front page, boasting a 99% token reduction. &lt;/p&gt;

&lt;p&gt;Meanwhile, Cloudflare officially shipped Code Mode as their direct answer. Instead of exposing thousands of tools, the model writes code against a typed API. Two tools. Under 1,000 tokens. The entire Cloudflare API, instantly accessible. &lt;/p&gt;

&lt;h3&gt;
  
  
  The pendulum snaps back
&lt;/h3&gt;

&lt;p&gt;If you've been in web development long enough, you know the joke: we went from server-rendered pages, to complex client-rendered SPAs, right back to server-rendering. A clean, decade-long circle that cost the industry millions of hours. &lt;/p&gt;

&lt;p&gt;We just watched AI tooling do the exact same loop in one year. &lt;/p&gt;

&lt;p&gt;We scrambled from basic APIs, to a highly sophisticated tool-calling protocol, only to slam into its limitations and land right back on 30-year-old ideas: the command line, the REST endpoint, the typed SDK. Julien Simon flagged these exact problems publicly in mid-2025—session models failing to scale horizontally, auth as an afterthought, JSON overhead—and was rewarded with angry messages for being a hater. Eight months later, Perplexity's CTO stood on stage and said the exact same things. &lt;/p&gt;

&lt;p&gt;This is what building in the post-AI era actually looks like. The pendulum still swings, it just swings violently fast. Hype cycles that once took five years now complete in a single product cycle. The lessons are the same, the tuition just gets collected faster. &lt;/p&gt;

&lt;p&gt;If you're building agents right now, the question isn't how to wedge the newest protocol into your stack. The question is: &lt;strong&gt;what is the absolute simplest primitive that actually solves my problem?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Nine times out of ten, somebody already invented it decades ago. &lt;/p&gt;

&lt;p&gt;A typed SDK. A REST endpoint. An API key. A CLI. The frameworks we build on top of them are valuable, but when the framework starts fighting the foundation, the foundation always wins. &lt;/p&gt;

&lt;p&gt;The teams that figure this out fastest, who resist the siren call of the elegant new abstraction until it's actually earned its place, are the ones who will ship agents that actually work in production. Everyone else will spend the next twelve months debugging context overflow errors and OAuth flows while the cycle repeats itself, faster than ever.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>mcp</category>
      <category>discuss</category>
      <category>programming</category>
    </item>
    <item>
      <title>Why BookMyShow "Failed" but Hotstar Succeeded - A System Design Perspective</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Sun, 22 Sep 2024 09:07:42 +0000</pubDate>
      <link>https://dev.to/shreyaan/why-bookmyshow-failed-but-hotstar-succeeded-a-system-design-perspective-2ngl</link>
      <guid>https://dev.to/shreyaan/why-bookmyshow-failed-but-hotstar-succeeded-a-system-design-perspective-2ngl</guid>
      <description>&lt;p&gt;I've seen a lot of people asking why BookMyShow struggled during events like the Coldplay concert, while platforms like Hotstar seem to manage massive traffic, especially during big cricket matches. To answer that, we need to understand this from a &lt;strong&gt;system design&lt;/strong&gt; and &lt;strong&gt;infrastructure&lt;/strong&gt; perspective—and it's not exactly a fair comparison.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Apples to Oranges: Read-heavy vs Write-heavy Systems&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hotstar and BookMyShow are fundamentally different in how they handle user interaction. Hotstar is &lt;strong&gt;read-heavy&lt;/strong&gt;, where millions of users are simply &lt;em&gt;streaming&lt;/em&gt; content (reading data). On the other hand, BookMyShow is &lt;strong&gt;write-heavy&lt;/strong&gt; during high-demand events like concert ticket sales, with a surge of users &lt;em&gt;writing&lt;/em&gt; data—attempting to buy tickets at the same time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Consistency, Data Loss &amp;amp; Expectations&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Another key difference is the expectation of &lt;strong&gt;consistency&lt;/strong&gt; and &lt;strong&gt;data loss&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hotstar:&lt;/strong&gt; When a user streams a video, slight inconsistencies or minor data loss aren't catastrophic. The platform can handle the load by buffering, lowering stream quality temporarily, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;BookMyShow:&lt;/strong&gt; For ticket sales (especially payments), there's zero tolerance for inconsistency or data loss. Losing transaction data or overbooking tickets can lead to serious financial issues and customer dissatisfaction.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;During the Coldplay concert, BookMyShow faced extreme demand for limited inventory (tickets), leading to &lt;strong&gt;write-heavy traffic&lt;/strong&gt; that stressed their system. In contrast, Hotstar scales to handle a massive number of &lt;strong&gt;read&lt;/strong&gt; requests during cricket matches, where the infrastructure is optimized for real-time video delivery.&lt;/p&gt;

&lt;p&gt;Both are successful platforms, but their system designs are built for very different kinds of traffic and failure modes. It's a great case to study if you're diving into system design—understanding the trade-offs of &lt;strong&gt;read-heavy&lt;/strong&gt; vs &lt;strong&gt;write-heavy&lt;/strong&gt; platforms is key.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>architecture</category>
      <category>systemdesign</category>
    </item>
    <item>
      <title>The Unsung Hero: Uses of the HEAD Request in APIs</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Sun, 31 Mar 2024 14:35:40 +0000</pubDate>
      <link>https://dev.to/shreyaan/the-unsung-hero-uses-of-the-head-request-in-apis-5hce</link>
      <guid>https://dev.to/shreyaan/the-unsung-hero-uses-of-the-head-request-in-apis-5hce</guid>
      <description>&lt;p&gt;When working with APIs, we're all familiar with the standard HTTP methods like &lt;code&gt;GET&lt;/code&gt;, &lt;code&gt;POST&lt;/code&gt;, &lt;code&gt;PUT&lt;/code&gt;, and &lt;code&gt;DELETE&lt;/code&gt;. However, there's another method that often gets overlooked: &lt;code&gt;HEAD&lt;/code&gt;. Despite its simplicity, the &lt;code&gt;HEAD&lt;/code&gt; request can be a powerful tool in your API arsenal, offering several useful applications. Let's dive in and explore the world of HEAD requests.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a HEAD Request?
&lt;/h2&gt;

&lt;p&gt;A HEAD request is similar to a GET request, with one key difference: instead of retrieving the full response body, it only retrieves the response headers. This means that a HEAD request won't actually fetch the resource itself, but it will provide you with metadata about the resource, such as content type, content length, cache control, and other relevant headers.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;body&lt;/strong&gt; of an HTTP message refers to the actual data or content being transferred. In the case of a GET request, the body contains the resource being retrieved, such as an HTML file, an image, or any other type of data. For a POST request, the body typically carries the data being sent to the server, like form data or a JSON payload.&lt;/p&gt;

&lt;p&gt;On the other hand, the &lt;strong&gt;headers&lt;/strong&gt; are metadata included in both the request and response messages. They provide additional information about the request or response itself, rather than the actual content being transferred. Headers are key-value pairs that convey important details, such as:&lt;/p&gt;

&lt;h3&gt;
  
  
  Request Headers:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Host&lt;/code&gt;: The domain name of the server&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;User-Agent&lt;/code&gt;: Information about the client (browser, operating system, etc.)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Accept&lt;/code&gt;: The types of content the client can handle (e.g., text/html, application/json)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Content-Type&lt;/code&gt;: The type of data being sent in the request body&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Authorization&lt;/code&gt;: Credentials for authentication&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Response Headers:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Content-Type&lt;/code&gt;: The type of data in the response body&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Content-Length&lt;/code&gt;: The size of the response body&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Cache-Control&lt;/code&gt;: Caching instructions for the client and intermediaries&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Last-Modified&lt;/code&gt;: The last time the resource was modified&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;ETag&lt;/code&gt;: A unique identifier for the resource version&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Server&lt;/code&gt;: Information about the server software&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Use Cases for HEAD Requests
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Resource Existence and Accessibility Checks
&lt;/h3&gt;

&lt;p&gt;One of the primary use cases for HEAD requests is to check if a resource exists and is accessible without actually retrieving the resource itself. This can be particularly useful when dealing with large files or resources that you don't necessarily need the full content for, saving bandwidth and server resources.&lt;/p&gt;

&lt;h3&gt;
  
  
  Content Negotiation
&lt;/h3&gt;

&lt;p&gt;HEAD requests can be leveraged for content negotiation, which is the process of determining the best representation of a resource based on the client's preferences and capabilities. By examining the response headers from a HEAD request, you can determine the available representations (e.g., different content types, encodings, or languages) and select the most appropriate one for your needs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conditional Requests
&lt;/h3&gt;

&lt;p&gt;HEAD requests can be used in conjunction with conditional headers like &lt;code&gt;If-Modified-Since&lt;/code&gt; or &lt;code&gt;If-None-Match&lt;/code&gt; to perform conditional requests. This allows you to efficiently check if a resource has been modified since the last time you retrieved it, avoiding unnecessary data transfers and reducing server load.&lt;/p&gt;

&lt;h3&gt;
  
  
  Retrieving Metadata
&lt;/h3&gt;

&lt;p&gt;In some cases, you might only need specific metadata about a resource, such as its content length, content type, or other header information. A HEAD request can provide this metadata without the overhead of retrieving the entire resource, making it a more efficient option than a full GET request.&lt;/p&gt;

&lt;h3&gt;
  
  
  API Monitoring and Health Checks
&lt;/h3&gt;

&lt;p&gt;HEAD requests can be employed for API monitoring and health checks. By periodically sending HEAD requests to specific API endpoints, you can verify that the endpoints are up and running without putting unnecessary load on the server or consuming excessive resources.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example Usage
&lt;/h2&gt;

&lt;p&gt;Here's an example of how you might use a HEAD request with JavaScript's &lt;code&gt;fetch&lt;/code&gt; API:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.example.com/resource&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;HEAD&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Response Headers:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// Additional logic based on the response headers&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we're sending a HEAD request to the specified URL using the &lt;code&gt;fetch&lt;/code&gt; API. The response object contains the response headers, which we can inspect and use for various purposes, such as checking the content type, content length, or any other relevant headers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Usage Examples
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Content Negotiation in Next.js
&lt;/h3&gt;

&lt;p&gt;In Next.js, you can render components at the server and send the final HTML without huge JavaScript bundles. This means that if you want to use different libraries for different types of content, you can check quickly what the type of file is and send only the required libraries, providing the best user experience and saving resources.&lt;/p&gt;

&lt;h3&gt;
  
  
  File Existence in S3
&lt;/h3&gt;

&lt;p&gt;You can also use the HEAD request to check if files are present in an S3 bucket. If all files are added, you can determine what's missing.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reverse Proxy Caching
&lt;/h3&gt;

&lt;p&gt;Reverse proxies use HEAD requests to validate if a cached resource is still fresh, serving the cached version if so to reduce origin server load.&lt;/p&gt;

&lt;h3&gt;
  
  
  API Rate Limiting
&lt;/h3&gt;

&lt;p&gt;Check rate limiting headers with HEAD requests before making resource requests to avoid getting rate limited unexpectedly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Web Crawlers
&lt;/h3&gt;

&lt;p&gt;Crawlers send HEAD requests with If-Modified-Since to check if a resource has changed since last crawled, avoiding refetching unchanged content.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;While the HEAD request might not be as commonly used as other HTTP methods, it can be a valuable tool in your API development arsenal. By leveraging HEAD requests, you can perform resource existence checks, content negotiation, conditional requests, retrieve metadata efficiently, and monitor API health. So, the next time you're working with APIs, don't overlook the power of the humble HEAD request!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>Unlocking Smooth Downloads: A Guide to User-Friendly File Download After User Actions (POST Requests)</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Mon, 25 Mar 2024 13:34:12 +0000</pubDate>
      <link>https://dev.to/shreyaan/unlocking-smooth-downloads-a-guide-to-user-friendly-file-download-after-user-actions-post-requests-3b5c</link>
      <guid>https://dev.to/shreyaan/unlocking-smooth-downloads-a-guide-to-user-friendly-file-download-after-user-actions-post-requests-3b5c</guid>
      <description>&lt;p&gt;&lt;strong&gt;What Happens When You Click "Download"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First, let's understand what occurs when you click a "Get File" or "Download File" button on a browser. It turns out it's simply a basic &lt;code&gt;GET&lt;/code&gt; API call. We call the URL using the &lt;code&gt;href&lt;/code&gt; attribute on an &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag, and it returns a file, which we can consider a blob. By adding the &lt;code&gt;download&lt;/code&gt; attribute to the &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag, we can simply download that blob.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"path/to/your/file.pdf"&lt;/span&gt; &lt;span class="na"&gt;download=&lt;/span&gt;&lt;span class="s"&gt;"myfile.pdf"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Download File&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The browser then intercepts the download and shows progress, speed, and the estimated time remaining (ETA), creating a great user experience (UX). The user is updated and doesn't get confused at any point.&lt;/p&gt;

&lt;p&gt;Here's an example:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/vXvrjpBuiEg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Issue with Uploading Data&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now, sometimes we need to send some data to the server to manipulate a file, usually to create a new one. Here's where things get tricky. To do this, you need to make a &lt;code&gt;POST&lt;/code&gt; request. The server receives the request, performs the necessary tasks, and then sends the file. So far, so good.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Problem with Downloading After POST&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To download the file after a &lt;code&gt;POST&lt;/code&gt; request, we typically do something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;blob&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;blob&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createObjectURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;blob&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;a&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;download&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;file.zip&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;_blank&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;click&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;removeChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;There's a problem with this approach, though.&lt;/strong&gt; The browser's download manager doesn't intercept the download. Users have no idea when the file is ready, when the download started, what the speed is, or the estimated time remaining (ETA). &lt;strong&gt;This might be okay for tiny files, but it's a terrible experience for files larger than even 5 MB.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here's an example of this issue:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/QzkjROtBSZw"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Fix: Storing and Downloading Later&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, how can we generate files on demand but still allow the browser to handle the download, displaying progress, ETA, and maybe even enabling parallel downloading?&lt;/p&gt;

&lt;p&gt;The fix is simple: you have to store the file somewhere and send the link to the user. Then, just open it in a new tab.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;url&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Doe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;open&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;_blank&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This way, the file is handled by the wonderful browser!&lt;/p&gt;

&lt;p&gt;Here's an example of this solution:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/b0G3PxDxDzM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Try it Yourself!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The examples I used are hosted here: &lt;a href="https://post-request-blog.vercel.app/"&gt;https://post-request-blog.vercel.app/&lt;/a&gt; You can try them out and fully understand what I mean. Feel free to snoop around in the network tab for the &lt;code&gt;POST&lt;/code&gt; requests to get a better grasp of the process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code Repository&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here's the GitHub repository for the code: &lt;a href="https://github.com/Shreyaan/post-request-blog"&gt;https://github.com/Shreyaan/post-request-blog&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Simplifications&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For simplicity, I took some shortcuts, such as not using a proper backend with Node.js or Python and instead using Next.js. In a real-world scenario, a public folder on the backend would be used to store the file. Additionally, I'm using the first API's URL as the URL returned by the third API. Ideally, the third API would return the URL of the generated and stored file in the public folder.&lt;/p&gt;

&lt;p&gt;I hope you enjoyed this and learned something new!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>Caching Behavior of get Requests in Next.js 13+</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Tue, 19 Mar 2024 16:21:13 +0000</pubDate>
      <link>https://dev.to/shreyaan/caching-behavior-of-get-requests-in-nextjs-13-2342</link>
      <guid>https://dev.to/shreyaan/caching-behavior-of-get-requests-in-nextjs-13-2342</guid>
      <description>&lt;p&gt;This blog post summarizes some key points about caching behavior for GET requests in Next.js versions 13 and above, referencing the official Next.js documentation for details.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Default Caching:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;By default, Next.js automatically caches the results of most GET requests made using the fetch API. This improves performance by serving cached data on subsequent requests, reducing the need to fetch data from the server again.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Opting Out of Caching:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are situations where you might want to prevent Next.js from caching a &lt;code&gt;GET&lt;/code&gt; request. One such scenario involves fetching data that depends on user-specific information like cookies. For example, imagine a function that retrieves a user's authentication token from &lt;code&gt;cookies&lt;/code&gt;. Since the token is unique to each user, you wouldn't want Next.js to cache the response, as it wouldn't be valid for other users.&lt;/p&gt;

&lt;p&gt;The Next.js documentation (Data Fetching, Caching, and Revalidating ) explains how requests that involve headers like &lt;code&gt;Authorization&lt;/code&gt; or &lt;code&gt;Cookie&lt;/code&gt; are automatically excluded from caching. This ensures that authenticated users always receive fresh data specific to their accounts, preventing unauthorized access to other users' information.&lt;/p&gt;

&lt;p&gt;In many other cases where cookies are involved, Next.js might also opt-out of caching by default. It's recommended to refer to the official documentation for a comprehensive list of scenarios that trigger this behavior.&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%2Flgyp8oxkb8rv5alau0fu.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%2Flgyp8oxkb8rv5alau0fu.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Manual Opt-In for Caching:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you do want to cache a GET request that involves cookies or other headers that would normally disable caching, you can explicitly instruct Next.js to cache it. This is done by adding the next: { tags: [...] } option to the fetch call. &lt;/p&gt;

&lt;p&gt;&lt;code&gt;fetch(url, { next: { tags: [...] } });&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
The tags property allows you to define a list of identifiers for the cached data. You can then use the revalidateTag function (&lt;a href="https://nextjs.org/docs/app/api-reference/functions/revalidateTag" rel="noopener noreferrer"&gt;https://nextjs.org/docs/app/api-reference/functions/revalidateTag&lt;/a&gt; ) to invalidate the cache for specific tags, triggering a refresh of the data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Benefits of Manual Caching:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Even though user-specific data shouldn't be cached, there could be other GET requests within your application that benefit from caching. By manually opting-in for caching with tags, you can improve the performance of your application by serving cached data for those specific requests. Additionally, using revalidateTag allows you to selectively update cached data when necessary, providing a balance between performance and data freshness.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In Summary:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Next.js automatically caches most GET requests by default.&lt;/p&gt;

&lt;p&gt;Requests involving cookies or other specific headers are typically excluded from caching to ensure data security.&lt;/p&gt;

&lt;p&gt;You can manually opt-in for caching with tags and use revalidateTag for selective cache updates.&lt;/p&gt;

&lt;p&gt;Remember to refer to the official Next.js documentation (&lt;a href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating" rel="noopener noreferrer"&gt;https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating&lt;/a&gt; ) for a more detailed explanation of caching behavior and configuration options.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>nextjs</category>
      <category>react</category>
    </item>
    <item>
      <title>Why Do You Need a JavaScript Framework anyways?? How React, Vue, Can Save You Time and Effort</title>
      <dc:creator>Shreyaan Seth</dc:creator>
      <pubDate>Tue, 13 Dec 2022 17:24:49 +0000</pubDate>
      <link>https://dev.to/shreyaan/why-do-you-need-a-javascript-framework-anyways-how-react-vue-can-save-you-time-and-effort-1h32</link>
      <guid>https://dev.to/shreyaan/why-do-you-need-a-javascript-framework-anyways-how-react-vue-can-save-you-time-and-effort-1h32</guid>
      <description>&lt;h4&gt;
  
  
  As a web developer, I know firsthand how challenging it can be to build a dynamic website using plain JavaScript. Without the right tools and techniques, it can be a struggle to keep your code organized, maintainable, and scalable. That’s why I’m a big fan of JavaScript frameworks like React, Vue, Angular and others — they provide a solid foundation and a standardized structure for your code, making it easier to build complex, dynamic web applications.
&lt;/h4&gt;

&lt;p&gt;As a web developer, you might be wondering, “&lt;strong&gt;Why do I need a JavaScript framework at all?&lt;/strong&gt; Can’t I just write all of my code from scratch using plain JavaScript?” While it’s certainly possible to build a web application without a framework, doing so can be quite difficult and time-consuming.&lt;/p&gt;

&lt;p&gt;Consider, for example, a real-time chat application that needs to update the conversation in real time as new messages are sent and received. With plain JavaScript, you would need to write a lot of code to handle the websocket connections, track the state of the conversation, and update the page in real-time as new messages arrive. This can quickly become overwhelming, as you have to worry about managing all of the different components and interactions yourself.&lt;/p&gt;

&lt;p&gt;You would need to write code to create and manage the WebSocket connections, as well as code to track the state of the conversation and update the page in real-time as new messages arrive. You would also need to write code to handle user interactions, such as sending and receiving messages, and code to handle any errors or edge cases that might arise. All of this code would need to be carefully organized and maintained to ensure that your application works correctly and efficiently.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In contrast, a JavaScript framework like React would provide a standardized structure for building this chat application&lt;/strong&gt;. React would handle the WebSocket connections, state management, and real-time updates for you, allowing you to focus on the core functionality of your application. With React, you could write a chat application with just a few lines of code, using the framework’s standardized structure and built-in optimization techniques to create a performant, efficient application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;lets take another example: a simple to-do list app&lt;/strong&gt;. With &lt;strong&gt;plain/ vanilla JavaScript&lt;/strong&gt;, you would need to write a lot of code to create the app, including code to handle user interactions, track the state of the to-do list, and update the page in real-time as items are added and removed. Here’s a sample of what that code might look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;toDoList&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;updatePage&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;removeToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;splice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;updatePage&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;updatePage&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// code to update the page with the current to-do list&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, this code is relatively simple, but it would quickly become overwhelming as you add more features and functionality to your app. You would need to write code to handle user interactions, such as adding and removing items from the list, as well as code to update the page in real-time. This can quickly become difficult to manage, especially as your app grows and evolves.&lt;/p&gt;

&lt;p&gt;But with a JavaScript framework like &lt;strong&gt;React&lt;/strong&gt;, you can easily build this same to-do list app with just a few lines of code. React provides a standardized structure for your code, allowing you to break your application into small, reusable components that can be easily composed and updated as the state of your application changes. Here’s a sample of what that code might look like using React:&lt;/p&gt;

&lt;p&gt;here’s a sample of what the &lt;strong&gt;to-do list app might look like using React:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ToDoList&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setToDoList&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;([]);&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setToDoList&lt;/span&gt;&lt;span class="p"&gt;([...&lt;/span&gt;&lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;removeToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setToDoList&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;toDoList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;removeToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Remove&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;
        &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt;
        &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Add a to-do"&lt;/span&gt;
        &lt;span class="na"&gt;onKeyDown&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;key&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Enter&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;addToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;As you can see, using React allows you to build this to-do list app with just a few lines of code.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(the code may look bigger but its almost an complete app!!! unlike plain javascript which will do nothing)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Additionally &lt;strong&gt;React’s component-based approach would make it easy to break your application into small, reusable components that can be easily composed and updated as the state of your application changes.&lt;/strong&gt; This can make your code more modular and easier to understand, which can save you time and effort in the long run.&lt;/p&gt;

&lt;p&gt;In short, JavaScript frameworks like React, Vue, Angular and others can provide numerous benefits for web developers. They can save you time and effort, help you write better code, and make your application more performant and efficient. Whether you’re building a simple web page or a complex web application, a JavaScript framework can be a valuable tool in your toolkit.&lt;/p&gt;

</description>
      <category>community</category>
    </item>
  </channel>
</rss>
