<?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: chandra penugonda</title>
    <description>The latest articles on DEV Community by chandra penugonda (@chandrapenugonda).</description>
    <link>https://dev.to/chandrapenugonda</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%2F461999%2F7bd8bd81-b576-428e-a1fe-550dbfe60176.jpeg</url>
      <title>DEV Community: chandra penugonda</title>
      <link>https://dev.to/chandrapenugonda</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/chandrapenugonda"/>
    <language>en</language>
    <item>
      <title>🚨 Stop Picking the Wrong Queue: You’re Probably Killing Your System 🚨</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Mon, 11 May 2026 16:01:59 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/stop-picking-the-wrong-queue-youre-probably-killing-your-system-1707</link>
      <guid>https://dev.to/chandrapenugonda/stop-picking-the-wrong-queue-youre-probably-killing-your-system-1707</guid>
      <description>&lt;p&gt;You’re architecting a new system. You need asynchronous communication. Someone yells “Kafka!” Someone else says “RabbitMQ is easier.” Another person pipes up with “Just use SQS.”&lt;/p&gt;

&lt;p&gt;They look similar on the surface. They are not interchangeable. They are not even in the same category. Picking the wrong one—and worse, misunderstanding the fundamental concepts—won’t just make your life harder. It will introduce cascading failures that take months to debug and fix.&lt;/p&gt;

&lt;p&gt;Before you write a single line of code, there are four conceptual pillars you must master. If you get these wrong, your system will take itself down the first time a downstream service has a slight slowdown.&lt;/p&gt;

&lt;p&gt;Let’s go.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pillar 1: The Problem We’re Fixing (Decoupling)
&lt;/h2&gt;

&lt;p&gt;Why are we even using queues? We’re trying to solve the problem of synchronous coupling.&lt;/p&gt;

&lt;p&gt;Imagine your Checkout Service has to call your Inventory Service directly via an API.&lt;/p&gt;

&lt;p&gt;Checkout calls Inventory directly. Inventory slows down (maybe it’s under high load, maybe the DB is lagging). It doesn’t crash; it just takes 5 seconds to respond instead of 50ms.&lt;/p&gt;

&lt;p&gt;Because the connection is synchronous, Checkout’s threads pile up waiting. Then the internal pool exhausts. Then Checkout is out of threads. Now, anything depending on Checkout is also down.&lt;/p&gt;

&lt;p&gt;This is Cascading Failure. It spreads like wildfire. The real cause isn’t the slow inventory; it’s the synchronous coupling that forces overload to feed on itself (retries, timeouts, waiting).&lt;/p&gt;

&lt;h3&gt;
  
  
  Now Watch What Happens With a Queue 🛡️
&lt;/h3&gt;

&lt;p&gt;A queue acts as a buffer between the two services.&lt;/p&gt;

&lt;p&gt;When Inventory slows down, messages simply accumulate in the queue. The Checkout service writes its “Order Placed” message and immediately moves on.&lt;/p&gt;

&lt;p&gt;This is the whole point of a queue: It decouples the producer from the consumer in three critical dimensions:&lt;/p&gt;

&lt;p&gt;Time ⏳: They don’t need to run at the same moment.&lt;/p&gt;

&lt;p&gt;Availability ✅: One can be down for maintenance without taking the other down.&lt;/p&gt;

&lt;p&gt;Speed ⚡️: The fast one isn’t held hostage by the slow one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pillar 2: Work vs. Events (Point-to-Point vs. Pub/Sub)
&lt;/h2&gt;

&lt;p&gt;A team shipped a feature on a Friday. By Monday morning, every single user was getting 50 duplicate welcome emails. 📧🤯&lt;/p&gt;

&lt;p&gt;The root cause was one simple conceptual mistake: They put a “Work Job” (Send This Email) onto a “Topic” (a fan-out mechanism). They had 50 worker processes. The topic did its job and fanned out one copy of the message to all 50 workers. One question asked in review would have saved their weekend:&lt;/p&gt;

&lt;p&gt;“Should this message be handled ONCE, or should MULTIPLE services REACT to it?”&lt;/p&gt;

&lt;h3&gt;
  
  
  Handled Once (The Work Queue) 👷‍♂️
&lt;/h3&gt;

&lt;p&gt;This is Point-to-Point. It’s a “Job” or “Work Queue.” Examples include: Resize this image, Charge this credit card, Send this one email. Any worker in the pool can grab it, but only one must process it. The message disappears once handled.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reacted to by Many (The Event) 📣
&lt;/h3&gt;

&lt;p&gt;This is Pub/Sub (Publisher/Subscriber), often called Topics.&lt;/p&gt;

&lt;p&gt;An Event is a statement of fact: An order got placed. The Email Service cares (needs to send a receipt). The Shipping Service cares (needs to label a box). The Analytics Service cares (needs to update dashboards). Three independent, parallel reactions to the same fact. Each gets its own copy of the message.&lt;/p&gt;

&lt;p&gt;The tool the team used (perhaps RabbitMQ or Kafka) wasn’t broken. Their semantic understanding of the message intent was wrong. Don’t argue about words (”Kafka Queue” vs. “RabbitMQ Topic”). Ask what actually happens to a message when it arrives.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pillar 3: Delivery Guarantees (The Exactly Once Myth)
&lt;/h2&gt;

&lt;p&gt;You’ll see three delivery guarantees advertised. One is, quite literally, impossible in general distributed systems.&lt;/p&gt;

&lt;p&gt;At Most Once: Fire and forget. We send the message and don’t check. If it drops, it drops. Fine for metrics where one lost data point doesn’t matter.&lt;/p&gt;

&lt;p&gt;At Least Once (The Real Default): The producer retries until it gets an acknowledgement (ACK) from the broker. If the ACK gets lost, the message gets resent. You will not lose data, but you will get duplicates. This is what most systems use by default.&lt;/p&gt;

&lt;p&gt;Exactly Once: This is where vendors get creative with marketing.&lt;/p&gt;

&lt;h3&gt;
  
  
  The “Exactly Once” Reality 🛡️⚔️🛡️
&lt;/h3&gt;

&lt;p&gt;Exactly once delivery across an unreliable network is not achievable. It’s tied to a result called the Two Generals Problem. Picture it: A producer sends a message. The broker gets it and sends back an ACK. The ACK vanishes. Now the producer has two choices: Retry (and maybe cause a duplicate) or Give Up (and maybe lose data). The network never tells you which scenario occurred.&lt;/p&gt;

&lt;p&gt;When a system advertises “Exactly Once Semantics,” what’s actually happening is At Least Once Delivery PLUS either:&lt;/p&gt;

&lt;p&gt;Idempotent Processing: The consumer is smart enough to handle duplicates.&lt;/p&gt;

&lt;p&gt;Transactional Writes: The write to the final storage (DB) is part of a distributed transaction.&lt;/p&gt;

&lt;p&gt;The distinct concept to keep in your head: Exactly Once Delivery over a network (No), exactly once EFFECT (Yes, through work).&lt;/p&gt;

&lt;h3&gt;
  
  
  🚨 Actionable Takeaway: Build Idempotent Consumers 🛡️
&lt;/h3&gt;

&lt;p&gt;My advice: Assume “At Least Once” and build Idempotent Consumers. Every message handler must check: “Have I seen this unique Event ID before?” and skip if it has. This single pattern prevents standard nightmare bugs: double charges, duplicate emails, and inventory drifting.&lt;/p&gt;

&lt;p&gt;If you do one thing after this post, check your handlers. If they aren’t idempotent, make them idempotent.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pillar 4: When Things Fail (DLQs and Backpressure)
&lt;/h2&gt;

&lt;p&gt;The Poison Message and the DLQ 🤮&lt;br&gt;
Your consumer receives one malformed message. The code crashes. The message goes back to the queue, is retried immediately, crashes the consumer again... this creates a “retry storm” that consumes all CPU and blocks every message behind it.&lt;/p&gt;

&lt;p&gt;The fix is the Dead Letter Queue (DLQ). After X failed attempts, the “poison message” is moved to a separate holding area, allowing the main pipeline to resume.&lt;/p&gt;

&lt;p&gt;[Image suggestion: A standard, orderly queue line on one side. Below it, a large, dark graveyard pit with skeletons of messages.]&lt;/p&gt;

&lt;h3&gt;
  
  
  🚨 Crucial Check: A DLQ Without a Replay Path is a Graveyard 🪦
&lt;/h3&gt;

&lt;p&gt;Most teams set up the DLQ, celebrate, and go home. Messages land in it, they fix the bug, and then... nothing. You must build tooling to replay messages back into the main queue. Without a replay path, your DLQ is just where problems go to be forgotten.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Pager Goes Off: Memory Exhaustion and Backpressure 💥
&lt;/h4&gt;

&lt;p&gt;It’s 3 a.m. The pager goes off. The broker is out of memory. Why? The producer was writing at 10,000 messages/second, but the consumer was only reading at 2,000/second—and had been for hours. The gap doesn’t close itself.&lt;/p&gt;

&lt;p&gt;Backpressure is the umbrella term for how a slow consumer pushes back on a fast producer. You will reach for three techniques:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bounded Queues (Cap it!): Set a max size. When full, the producer must fail or block. This is loud, fails early, and forces a resolution while you still have time.&lt;/li&gt;
&lt;li&gt;Autoscale the Consumers: If the queue depth crosses a threshold, spin up more workers. (Works well for stateless consumers).&lt;/li&gt;
&lt;li&gt;Credit-Based Flow Control: The consumer tells the producer: “I am ready for 5 messages.” The producer sends 5 and stops, waiting for the next request. This is the model behind reactive streams (Project Reactor, Akka).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The takeaway: Every queue has a limit. Either you pick it and plan, or the OS picks it for you by killing the process.&lt;/p&gt;

&lt;h2&gt;
  
  
  Decision Matrix: Kafka, RabbitMQ, or SQS?
&lt;/h2&gt;

&lt;p&gt;These are not three flavors of the same tool. They are three different categories of technology.&lt;/p&gt;

&lt;h3&gt;
  
  
  RabbitMQ 🐇: The Broker
&lt;/h3&gt;

&lt;p&gt;RabbitMQ’s superpower is Complex Routing 🛣️.&lt;/p&gt;

&lt;p&gt;[Image suggestion: A complex transportation hub. An arrow points to an exchange (routing center). A dispatcher is configuring dials, directing messages via exact matches, broadcast patterns, or headers into specific destination queues.]&lt;/p&gt;

&lt;p&gt;Messages don’t go to queues directly; they go to an Exchange, and the Exchange decides which queues they belong in based on complex, configurable rules. The broker does all the routing for you. And when a message is acknowledged, it is gone.&lt;/p&gt;

&lt;p&gt;Reach for RabbitMQ when: Routing is the interesting part of your problem; you need per-message delivery control; raw throughput isn’t the primary bottleneck.&lt;/p&gt;

&lt;h3&gt;
  
  
  Kafka 🪵: The Log
&lt;/h3&gt;

&lt;p&gt;Kafka is fundamentally a Distributed, Append-Only Log 📜.&lt;/p&gt;

&lt;p&gt;[Image suggestion: An endless reel of old, unrolling film tape (the log). A timeline shows consumers tracking their position (offsets). One new ‘fraud detection’ consumer is seen actively pulling the tape reel backward to re-read ‘last 30 days of data’ without disturbing other live readers.]&lt;/p&gt;

&lt;p&gt;In Kafka, consumed messages stay in the log for 7 days, 30 days, or forever. Consumers track their own position (offsets). This means any consumer can rewind history.&lt;/p&gt;

&lt;p&gt;Reach for Kafka when: You need stream processing, event sourcing, or “time travel” (replaying history); raw throughput is critical (millions of events/sec). (Kafka now supports queue-style share groups, but the log is still its core reason for being).&lt;/p&gt;

&lt;h3&gt;
  
  
  SQS ☁️: The Managed Queue
&lt;/h3&gt;

&lt;p&gt;SQS is Zero Ops ☕. It is three API calls (Send, Receive, Delete) running inside AWS. Nothing to tune, nothing to patch.&lt;/p&gt;

&lt;p&gt;[Image suggestion: A minimalist, clean conveyor belt stretching into a bright cloud (AWS). A small button is labeled ‘Just Send It.’ A single person sits relaxing with coffee, simply pushing ‘Receive.’]&lt;/p&gt;

&lt;p&gt;It comes in two flavors: Standard (at least once, best effort ordering, massive throughput) and FIFO (strict ordering, at least once).&lt;/p&gt;

&lt;p&gt;Reach for SQS when: You want a queue, not a new operations commitment; you value fast time-to-market over complex features.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pick the Simplest Tool
&lt;/h2&gt;

&lt;p&gt;The biggest architectural mistake isn’t picking SQS when you could use Kafka. It’s picking the most massive, operational-heavy tool because you “might” need it in three years.&lt;/p&gt;

&lt;p&gt;I have seen systems running full Kafka clusters to handle 40 messages an hour. 40. Every incident on that team took longer because the tool was exponentially more complicated than the problem it was solving.&lt;/p&gt;

&lt;p&gt;Pick the simplest tool that meets your real requirements. Use SQS or managed RabbitMQ first. You can migrate to Kafka the day you have a real reason—and on that day, you’ll know.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hands-on Architecture:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Building an app like Instagram 📸 or Uber 🚗 is a great way to see these tools in action. Since these platforms handle millions of users, they use “polyglot messaging”—using different tools for different jobs.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s look at Uber as an example. When you request a ride, the system has to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Find a Driver: Send the request to nearby drivers (Work Queue).&lt;/li&gt;
&lt;li&gt;Update Analytics: Track demand in that neighborhood (Event/Log).&lt;/li&gt;
&lt;li&gt;Notify Billing: Prepare the transaction (Reliable Task).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Design Challenge&lt;/p&gt;

&lt;h4&gt;
  
  
  Imagine we are building the “Driver Dispatch” part of the app.🚕
&lt;/h4&gt;

&lt;p&gt;When a rider hits “Request,” we need to alert the closest 5 drivers. If a driver accepts, the request must disappear for the other 4 drivers immediately. We also need to ensure that even if our “Dispatch Service” crashes, we don’t “lose” the rider’s request.&lt;/p&gt;

&lt;p&gt;Given what we’ve discussed, how should we handle the Rider Request?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Option A: SQS (Managed Queue). Easy to scale, ensures the request is handled, and handles retries if a driver’s app glitches.&lt;/li&gt;
&lt;li&gt;Option B: Kafka (Distributed Log). Good for tracking where every driver has been for the last hour, but might be “overkill” for a simple one-to-one dispatch.&lt;/li&gt;
&lt;li&gt;Option C: RabbitMQ (Message Broker). Excellent if we want to use “Geographic Routing” to send messages only to drivers in a specific “NYC-Brooklyn” exchange.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Which tool would you pick to ensure the request is routed correctly based on location and deleted the moment it’s accepted?&lt;/p&gt;

&lt;p&gt;--&lt;br&gt;
RabbitMQ 🐇 is the standout for this specific task because of its sophisticated routing capabilities.&lt;/p&gt;

&lt;p&gt;While SQS is great for simple queues, Uber’s dispatching needs are more dynamic. Using RabbitMQ, you can leverage Exchanges 📂 to route rider requests to specific queues based on geographic metadata (like longitude/latitude or neighborhood IDs).&lt;/p&gt;

&lt;h3&gt;
  
  
  Why RabbitMQ fits the Dispatcher:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Selective Routing:&lt;/strong&gt; You can create a “Topic Exchange” where the routing key is something like geo.us.nyc.brooklyn. Only drivers subscribed to that specific area will see the request.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Direct Interaction:&lt;/strong&gt; Once a driver accepts the ride, the “Competing Consumer” pattern ensures that the message is acknowledged and removed from the queue so no one else can take it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Low Latency:&lt;/strong&gt; For real-time dispatching where every second counts, RabbitMQ’s push-based model is slightly snappier than the polling required by SQS.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Architecture Final Check 🏗️
&lt;/h3&gt;

&lt;p&gt;In a real system like Uber, we wouldn’t just use RabbitMQ. We’d likely use a combination of all three tools we discussed:&lt;/p&gt;

&lt;p&gt;RabbitMQ for the “Hot” path: Finding and notifying the driver right now.&lt;/p&gt;

&lt;p&gt;Kafka for the “Audit” path: Recording every location update and request for the data science team to analyze later.&lt;/p&gt;

&lt;p&gt;SQS for the “Side” path: Sending the email receipt or a push notification after the ride is over—tasks that aren’t time-critical but must happen eventually.&lt;/p&gt;

</description>
      <category>distributedsystems</category>
      <category>kafka</category>
      <category>eventdriven</category>
      <category>rabbitmq</category>
    </item>
    <item>
      <title>Design Patterns in JavaScript — Explained with Practical Examples</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Mon, 16 Feb 2026 02:22:16 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/design-patterns-in-javascript-explained-with-practical-examples-2kf</link>
      <guid>https://dev.to/chandrapenugonda/design-patterns-in-javascript-explained-with-practical-examples-2kf</guid>
      <description>&lt;h2&gt;
  
  
  🚀 Design Patterns in JavaScript — Explained with Practical Examples
&lt;/h2&gt;

&lt;p&gt;Design patterns are reusable solutions to common software design problems.&lt;/p&gt;

&lt;p&gt;Instead of memorizing definitions, understand this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A design pattern solves a recurring engineering problem.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In this article, we’ll walk through &lt;strong&gt;Creational&lt;/strong&gt;, &lt;strong&gt;Structural&lt;/strong&gt;, and &lt;strong&gt;Behavioral&lt;/strong&gt; patterns with simple JavaScript examples.&lt;/p&gt;




&lt;h2&gt;
  
  
  🏗 CREATIONAL PATTERNS
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;(How objects are created)&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  1️⃣ Factory Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Hide object creation logic and delegate it to subclasses.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;You don’t want object creation logic scattered everywhere.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;UPI&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;upi class&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;class&lt;/span&gt; &lt;span class="nc"&gt;Card&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;card class&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;class&lt;/span&gt; &lt;span class="nc"&gt;PaymentFactory&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;createPayment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;UPI&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="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;UPI&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Card&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="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Card&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;paymentFactory&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PaymentFactory&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;paymentFactory&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createPayment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;UPI&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;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When object creation is complex&lt;/li&gt;
&lt;li&gt;When multiple subclasses exist&lt;/li&gt;
&lt;li&gt;When you want to hide instantiation logic&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  2️⃣ Builder Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Construct complex objects step by step.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Too many constructor parameters make code unreadable.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Car&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&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;setCar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;car&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;car&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;getCar&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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;car&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;class&lt;/span&gt; &lt;span class="nc"&gt;CarBuilder&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Car&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;build&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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;car&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;carBuilder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;CarBuilder&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;car&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;carBuilder&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;build&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setCar&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="s1"&gt;Car&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Red&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000000&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getCar&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When object creation involves many optional fields&lt;/li&gt;
&lt;li&gt;When readability matters&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3️⃣ Singleton Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Only one instance of a class should exist.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;You don’t want multiple DB connections or config objects.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;DBConnection&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;DBConnection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;DBConnection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;DBConnection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Logger&lt;/li&gt;
&lt;li&gt;Database connection&lt;/li&gt;
&lt;li&gt;Configuration manager&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  4️⃣ Prototype Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Clone an existing object instead of creating a new one.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Object creation is expensive.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&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;existingObject&lt;/span&gt; &lt;span class="o"&gt;=&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="s1"&gt;Car&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Red&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1000000&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;newObject&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;existingObject&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="nx"&gt;newObject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;When object creation is costly&lt;/li&gt;
&lt;li&gt;When cloning is cheaper than instantiation&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🧱 STRUCTURAL PATTERNS
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;(How objects are composed)&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  5️⃣ Facade Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Hide complex logic behind a simple interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Clients shouldn’t know internal system complexity.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;check&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;class&lt;/span&gt; &lt;span class="nc"&gt;OrderService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;process&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;class&lt;/span&gt; &lt;span class="nc"&gt;PaymentProcessor&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;payment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PaymentFactory&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;order&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OrderService&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;AuthService&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;placeOrder&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;auth&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;check&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;order&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;process&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;payment&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createPayment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;UPI&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;paymentProcessor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PaymentProcessor&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;paymentProcessor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;placeOrder&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;To simplify large subsystems&lt;/li&gt;
&lt;li&gt;To reduce coupling&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  6️⃣ Adapter Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Convert one interface into another expected by the client.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Legacy code doesn’t match your new interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;OldApi&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;adaptor pattern&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;class&lt;/span&gt; &lt;span class="nc"&gt;NewApi&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;oldApi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OldApi&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;getUser&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="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;oldApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getUser&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;newApi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;NewApi&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;newApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Integrating third-party libraries&lt;/li&gt;
&lt;li&gt;Migrating legacy systems&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  7️⃣ Decorator Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Add functionality without modifying original code.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;You want to extend behavior dynamically.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&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="nx"&gt;args&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="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;Running...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;apply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;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="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;loggerSum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;loggerSum&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="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🎯 When to Use
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Logging&lt;/li&gt;
&lt;li&gt;Caching&lt;/li&gt;
&lt;li&gt;Authentication wrappers&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🧠 BEHAVIORAL PATTERNS
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;(How objects communicate and behave)&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  8️⃣ Strategy Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Encapsulate algorithms and make them interchangeable.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Too many &lt;code&gt;if-else&lt;/code&gt; conditions for similar behaviors.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Strategy&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&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;Must implement execute&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStrategyA&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Strategy&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing strategy A&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStrategyB&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Strategy&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing strategy B&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;class&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;strategy&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;strategy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;strategy&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;setStrategy&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;strategy&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;strategy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;strategy&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;executeStrategy&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;strategy&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;execute&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;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStrategyA&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeStrategy&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setStrategy&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStrategyB&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeStrategy&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  9️⃣ Observer Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Notify multiple objects when state changes.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Many components depend on one object’s state.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Subject&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observers&lt;/span&gt; &lt;span class="o"&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;addObserver&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;observer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observers&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;observer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;notifyObservers&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;observers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;observer&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;observer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteObserver&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Observer updated&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;subject&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Subject&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;observer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteObserver&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addObserver&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;observer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;notifyObservers&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔟 State Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Behavior changes when internal state changes.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;Too many conditional state checks.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;State&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&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;Must implement execute&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStateA&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;State&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing state A&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStateB&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;State&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing state B&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;class&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;executeState&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;execute&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;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStateA&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeState&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteStateB&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeState&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  1️⃣1️⃣ Command Pattern
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🧠 Core Idea
&lt;/h3&gt;

&lt;p&gt;Encapsulate a request as an object.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❓ Problem
&lt;/h3&gt;

&lt;p&gt;You want to queue, log, or undo actions.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Command&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&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;Must implement execute&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteCommandA&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Command&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing command A&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;class&lt;/span&gt; &lt;span class="nc"&gt;ConcreteCommandB&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Command&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Executing command B&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;class&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;setCommand&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;executeCommand&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;execute&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;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Context&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteCommandA&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeCommand&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setCommand&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ConcreteCommandB&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeCommand&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🎯 Final Takeaway
&lt;/h2&gt;

&lt;p&gt;Instead of memorizing names, remember problems:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Problem&lt;/th&gt;
&lt;th&gt;Pattern&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Hide object creation&lt;/td&gt;
&lt;td&gt;Factory&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Build complex object&lt;/td&gt;
&lt;td&gt;Builder&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Only one instance&lt;/td&gt;
&lt;td&gt;Singleton&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Clone object&lt;/td&gt;
&lt;td&gt;Prototype&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Simplify complex system&lt;/td&gt;
&lt;td&gt;Facade&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Convert interface&lt;/td&gt;
&lt;td&gt;Adapter&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Extend functionality&lt;/td&gt;
&lt;td&gt;Decorator&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Replace if-else logic&lt;/td&gt;
&lt;td&gt;Strategy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Notify subscribers&lt;/td&gt;
&lt;td&gt;Observer&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Behavior changes by state&lt;/td&gt;
&lt;td&gt;State&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Encapsulate request&lt;/td&gt;
&lt;td&gt;Command&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

</description>
      <category>designpatterns</category>
      <category>ai</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>🚀 Rebuilding useEffect From Scratch to Truly Understand React</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Sat, 14 Feb 2026 11:50:38 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/rebuilding-useeffect-from-scratch-to-truly-understand-react-4m08</link>
      <guid>https://dev.to/chandrapenugonda/rebuilding-useeffect-from-scratch-to-truly-understand-react-4m08</guid>
      <description>&lt;h2&gt;
  
  
  Inside React: Rebuilding &lt;code&gt;useEffect&lt;/code&gt; to Understand Hook Internals
&lt;/h2&gt;

&lt;p&gt;Most developers can explain what &lt;code&gt;useEffect&lt;/code&gt; does.&lt;/p&gt;

&lt;p&gt;Very few can explain &lt;strong&gt;how React makes it work internally&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This article is not about usage.&lt;/p&gt;

&lt;p&gt;It’s about rebuilding a minimal hook runtime to understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How React tracks hooks across renders&lt;/li&gt;
&lt;li&gt;Why hook order is mandatory&lt;/li&gt;
&lt;li&gt;How dependency arrays actually work&lt;/li&gt;
&lt;li&gt;Why effects run after commit (not during render)&lt;/li&gt;
&lt;li&gt;Where React’s real complexity lives&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let’s build a simplified version of &lt;code&gt;useEffect&lt;/code&gt; and dissect it.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 1 — A Minimal Hook Runtime
&lt;/h2&gt;

&lt;p&gt;Here’s a simplified custom implementation:&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;hooks&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;currentHookIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;myUseEffect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;effect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;deps&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;hookIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentHookIndex&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;oldHook&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;hooks&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;hookIndex&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;shouldRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&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="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;deps&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;shouldRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;shouldRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;prevDeps&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;deps&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;shouldRun&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
      &lt;span class="nx"&gt;deps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;prevDeps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt;
      &lt;span class="nx"&gt;prevDeps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;some&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;ol&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="o"&gt;!&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;is&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ol&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;deps&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="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;shouldRun&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;cleanup&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;cleanup&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;cleanup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;effect&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="nx"&gt;hooks&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;hookIndex&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;deps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="nx"&gt;cleanup&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;hooks&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;hookIndex&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;currentHookIndex&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;resetHookIndex&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;currentHookIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we use it inside a React component:&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="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&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;counter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCounter&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="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;resetHookIndex&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="nf"&gt;myUseEffect&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="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="nx"&gt;counter&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="o"&gt;=&amp;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="s2"&gt;cleanup&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="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&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;setCounter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&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;Now let’s analyze what this reveals about React internals.&lt;/p&gt;




&lt;h2&gt;
  
  
  1️⃣ Hooks Are Indexed Slots, Not Named Bindings
&lt;/h2&gt;

&lt;p&gt;The most important line:&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;hookIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentHookIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hooks are not tracked by variable name.&lt;br&gt;
They are tracked by &lt;strong&gt;call order&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Internally, React stores hooks as a linked list attached to a Fiber node. Conceptually, though, it behaves 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;Render 1:
Slot 0 → useState
Slot 1 → useEffect

Render 2:
Slot 0 → useState
Slot 1 → useEffect
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If order changes, slot mapping breaks.&lt;/p&gt;

&lt;p&gt;This explains the fundamental rule:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Hooks must be called unconditionally and in the same order.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is not stylistic.&lt;br&gt;
It’s architectural.&lt;/p&gt;


&lt;h2&gt;
  
  
  2️⃣ Dependency Arrays Are Deterministic Equality Checks
&lt;/h2&gt;

&lt;p&gt;This logic:&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="nx"&gt;deps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;prevDeps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt;
&lt;span class="nx"&gt;prevDeps&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;some&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;old&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="o"&gt;!&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;is&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;old&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;deps&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’s essentially what React does.&lt;/p&gt;

&lt;p&gt;Important observations:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Comparison uses &lt;code&gt;Object.is&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Objects are compared by reference&lt;/li&gt;
&lt;li&gt;No deep comparison&lt;/li&gt;
&lt;li&gt;Length mismatch triggers re-run&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So 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="nf"&gt;useEffect&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;[{}]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Always re-runs.&lt;/p&gt;

&lt;p&gt;Because each render creates a new object reference.&lt;/p&gt;

&lt;p&gt;The “magic” is just shallow reference comparison.&lt;/p&gt;




&lt;h2&gt;
  
  
  3️⃣ Cleanup Is Just Stored State
&lt;/h2&gt;

&lt;p&gt;Notice:&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="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;cleanup&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;oldHook&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;cleanup&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;React stores cleanup functions alongside dependency arrays.&lt;/p&gt;

&lt;p&gt;On dependency change:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Run previous cleanup&lt;/li&gt;
&lt;li&gt;Execute new effect&lt;/li&gt;
&lt;li&gt;Store returned cleanup&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;On unmount:&lt;/p&gt;

&lt;p&gt;React iterates through all effect hooks and runs their cleanup.&lt;/p&gt;

&lt;p&gt;There is no mystery.&lt;br&gt;
It’s just stored state and deterministic lifecycle transitions.&lt;/p&gt;


&lt;h2&gt;
  
  
  4️⃣ The Critical Difference: Render vs Commit
&lt;/h2&gt;

&lt;p&gt;Here’s where our implementation diverges from real React.&lt;/p&gt;

&lt;p&gt;In our version:&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;cleanup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;effect&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Effect runs &lt;strong&gt;during render&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In real React:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Render phase (pure, no side effects)&lt;/li&gt;
&lt;li&gt;Commit phase (DOM mutations applied)&lt;/li&gt;
&lt;li&gt;Passive effects (&lt;code&gt;useEffect&lt;/code&gt;) executed&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Why does React separate this?&lt;/p&gt;

&lt;p&gt;Because React supports:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Interruptible rendering&lt;/li&gt;
&lt;li&gt;Concurrent mode&lt;/li&gt;
&lt;li&gt;Multiple render passes before commit&lt;/li&gt;
&lt;li&gt;Aborted renders&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If effects ran during render:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Side effects could fire for aborted renders&lt;/li&gt;
&lt;li&gt;Subscriptions could leak&lt;/li&gt;
&lt;li&gt;State updates could cascade incorrectly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;React instead builds an effect list during render and flushes it after commit.&lt;/p&gt;

&lt;p&gt;Conceptually:&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;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nf"&gt;collectEffects&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nf"&gt;commit&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nf"&gt;flushEffects&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This separation is what enables concurrency.&lt;/p&gt;




&lt;h2&gt;
  
  
  5️⃣ Why Resetting Hook Index Is Required
&lt;/h2&gt;

&lt;p&gt;In our simplified runtime:&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;resetHookIndex&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We manually reset before each render.&lt;/p&gt;

&lt;p&gt;React does this internally when it begins rendering a fiber.&lt;/p&gt;

&lt;p&gt;During render:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A pointer walks through hook slots&lt;/li&gt;
&lt;li&gt;Each hook call advances the pointer&lt;/li&gt;
&lt;li&gt;After render completes, pointer resets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is how state persists across renders while still maintaining order.&lt;/p&gt;




&lt;h2&gt;
  
  
  6️⃣ Where React’s Real Complexity Lives
&lt;/h2&gt;

&lt;p&gt;The hook logic itself is simple.&lt;/p&gt;

&lt;p&gt;The hard part is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fiber tree reconciliation&lt;/li&gt;
&lt;li&gt;Cooperative scheduling&lt;/li&gt;
&lt;li&gt;Priority lanes&lt;/li&gt;
&lt;li&gt;Interruptible rendering&lt;/li&gt;
&lt;li&gt;Effect queues&lt;/li&gt;
&lt;li&gt;Batching&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hooks are just a deterministic layer on top of Fiber.&lt;/p&gt;

&lt;p&gt;The true engine is the scheduler + reconciliation algorithm.&lt;/p&gt;




&lt;h2&gt;
  
  
  7️⃣ A Subtle Edge Case: State Updates Inside Effects
&lt;/h2&gt;

&lt;p&gt;Consider:&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;myUseEffect&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="nf"&gt;setCounter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="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 our implementation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Effect runs during render&lt;/li&gt;
&lt;li&gt;State updates synchronously&lt;/li&gt;
&lt;li&gt;Potential infinite loops&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In real React:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Effect runs after commit&lt;/li&gt;
&lt;li&gt;State update schedules a new render&lt;/li&gt;
&lt;li&gt;Batching prevents infinite loops&lt;/li&gt;
&lt;li&gt;Strict Mode may double-invoke in dev&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This difference shows why phase separation matters.&lt;/p&gt;




&lt;h2&gt;
  
  
  8️⃣ Why This Exercise Matters for Senior Engineers
&lt;/h2&gt;

&lt;p&gt;Understanding this changes how you think about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Stale closures&lt;/li&gt;
&lt;li&gt;Dependency bugs&lt;/li&gt;
&lt;li&gt;Infinite render loops&lt;/li&gt;
&lt;li&gt;Memoization&lt;/li&gt;
&lt;li&gt;Performance issues&lt;/li&gt;
&lt;li&gt;React Strict Mode behavior&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also sharpens your mental model for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Runtime systems&lt;/li&gt;
&lt;li&gt;Deterministic execution&lt;/li&gt;
&lt;li&gt;Slot-based state machines&lt;/li&gt;
&lt;li&gt;Referential equality&lt;/li&gt;
&lt;li&gt;Scheduling systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is the difference between:&lt;/p&gt;

&lt;p&gt;Framework user&lt;br&gt;
vs&lt;br&gt;
Framework-aware engineer&lt;/p&gt;




&lt;h2&gt;
  
  
  9️⃣ Extending This Experiment
&lt;/h2&gt;

&lt;p&gt;If you want to go deeper:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Implement &lt;code&gt;myUseState&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Add a render loop&lt;/li&gt;
&lt;li&gt;Queue effects instead of running immediately&lt;/li&gt;
&lt;li&gt;Simulate commit phase&lt;/li&gt;
&lt;li&gt;Add batching logic&lt;/li&gt;
&lt;li&gt;Model multiple component instances&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At that point, you’ll start thinking like React’s runtime.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Takeaway
&lt;/h2&gt;

&lt;p&gt;React Hooks are not magic.&lt;/p&gt;

&lt;p&gt;They are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Indexed state slots&lt;/li&gt;
&lt;li&gt;Shallow dependency comparisons&lt;/li&gt;
&lt;li&gt;Deterministic lifecycle transitions&lt;/li&gt;
&lt;li&gt;Executed in strict render order&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The complexity of React is not in the API.&lt;br&gt;
It’s in the architecture that enables scheduling, concurrency, and deterministic rendering.&lt;/p&gt;

&lt;p&gt;Once you see that, debugging React becomes much easier.&lt;/p&gt;

&lt;p&gt;And your engineering intuition levels up permanently.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A 90-Day Plan to Become Job-Ready in Python (2026)</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Tue, 20 Jan 2026 04:52:49 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/a-90-day-plan-to-become-job-ready-in-python-2026-745</link>
      <guid>https://dev.to/chandrapenugonda/a-90-day-plan-to-become-job-ready-in-python-2026-745</guid>
      <description>&lt;p&gt;Python is one of the most practical skills you can learn right now. But most people get stuck because they either overlearn theory or jump into advanced topics too early.&lt;/p&gt;

&lt;p&gt;This 90-day plan is designed for &lt;strong&gt;clarity, confidence, and employability&lt;/strong&gt;. If you follow it with discipline, you will be &lt;em&gt;junior-level job ready&lt;/em&gt; by the end.&lt;/p&gt;

&lt;p&gt;No fluff. No “someday I’ll build projects.”&lt;br&gt;
You build from &lt;strong&gt;Day 1&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 1–30: Foundations Without Fear
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What to learn (only the essentials)
&lt;/h3&gt;

&lt;p&gt;You don’t need everything. You need the &lt;strong&gt;core&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Focus on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Variables &amp;amp; data types&lt;/li&gt;
&lt;li&gt;Conditionals (&lt;code&gt;if / else&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Loops (&lt;code&gt;for&lt;/code&gt;, &lt;code&gt;while&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Functions&lt;/li&gt;
&lt;li&gt;Lists &amp;amp; dictionaries&lt;/li&gt;
&lt;li&gt;File handling&lt;/li&gt;
&lt;li&gt;Basic error handling (&lt;code&gt;try / except&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal here is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Write small Python scripts without panicking.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you can read a problem and think, “I know how to start,” you’re winning.&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 1–30: Build While You Learn
&lt;/h2&gt;

&lt;p&gt;Do &lt;strong&gt;not&lt;/strong&gt; wait until you “finish learning Python.”&lt;/p&gt;

&lt;p&gt;Build immediately.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tiny projects to build
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Calculator&lt;/li&gt;
&lt;li&gt;Password generator&lt;/li&gt;
&lt;li&gt;File renamer&lt;/li&gt;
&lt;li&gt;CSV cleaner&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These projects:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Teach you how Python is actually used&lt;/li&gt;
&lt;li&gt;Force you to debug&lt;/li&gt;
&lt;li&gt;Build confidence fast&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Tiny projects are not “beginner stuff.”&lt;br&gt;
They are &lt;strong&gt;skill accelerators&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 31–60: Real-World Python
&lt;/h2&gt;

&lt;p&gt;Now Python stops being syntax and starts being &lt;strong&gt;useful&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  What to learn
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Python standard library&lt;/li&gt;
&lt;li&gt;Working with APIs (&lt;code&gt;requests&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Basic SQL (CRUD, joins, simple queries)&lt;/li&gt;
&lt;li&gt;Git &amp;amp; GitHub (non-negotiable)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is where skills connect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python + data&lt;/li&gt;
&lt;li&gt;Python + web services&lt;/li&gt;
&lt;li&gt;Python + version control&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you skip this phase, you stay stuck at “tutorial level.”&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 31–60: Practical Projects
&lt;/h2&gt;

&lt;p&gt;Build things people actually use.&lt;/p&gt;

&lt;h3&gt;
  
  
  Project ideas
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;API data fetcher&lt;/li&gt;
&lt;li&gt;Expense tracker&lt;/li&gt;
&lt;li&gt;Automation script (files, emails, reports)&lt;/li&gt;
&lt;li&gt;CLI tool&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Rules
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Push &lt;strong&gt;everything&lt;/strong&gt; to GitHub&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Write simple README files:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What it does&lt;/li&gt;
&lt;li&gt;How to run it&lt;/li&gt;
&lt;li&gt;What you learned&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Recruiters don’t want perfection.&lt;br&gt;
They want &lt;strong&gt;proof of work&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 61–90: Job-Ready Skills
&lt;/h2&gt;

&lt;p&gt;This phase separates hobbyists from professionals.&lt;/p&gt;

&lt;h3&gt;
  
  
  Focus on
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Clean folder structure&lt;/li&gt;
&lt;li&gt;Readable code&lt;/li&gt;
&lt;li&gt;Debugging techniques&lt;/li&gt;
&lt;li&gt;Logging (instead of &lt;code&gt;print&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Virtual environments (&lt;code&gt;venv&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Basic Linux commands&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Key mindset shift:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Readable &amp;gt; clever&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If someone else can understand your code, you’re already ahead of most juniors.&lt;/p&gt;




&lt;h2&gt;
  
  
  Days 61–90: Portfolio Phase
&lt;/h2&gt;

&lt;p&gt;Now you go deeper, not broader.&lt;/p&gt;

&lt;h3&gt;
  
  
  Build 2–3 strong projects
&lt;/h3&gt;

&lt;p&gt;Choose from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Automation tool&lt;/li&gt;
&lt;li&gt;Data analysis script&lt;/li&gt;
&lt;li&gt;Small backend or API (Flask / FastAPI)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These should feel like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Yes, this could actually be used.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Quality beats quantity here.&lt;/p&gt;




&lt;h2&gt;
  
  
  What “Job-Ready” Looks Like by Day 90
&lt;/h2&gt;

&lt;p&gt;By the end of this plan, you should have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;6–10 total projects&lt;/li&gt;
&lt;li&gt;An active GitHub profile&lt;/li&gt;
&lt;li&gt;Ability to explain your code clearly&lt;/li&gt;
&lt;li&gt;Confidence with Python basics&lt;/li&gt;
&lt;li&gt;Comfort debugging problems on your own&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s &lt;strong&gt;junior-level Python ready&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Advice
&lt;/h2&gt;

&lt;p&gt;Consistency matters more than talent.&lt;br&gt;
One hour a day for 90 days beats random weekend grinding.&lt;/p&gt;

&lt;p&gt;Python rewards builders.&lt;br&gt;
Start small.&lt;br&gt;
Ship often.&lt;br&gt;
Explain what you build.&lt;/p&gt;

&lt;p&gt;That’s how you get hired.&lt;/p&gt;

&lt;p&gt;If you stick to this plan, you won’t just “know Python.”&lt;br&gt;
You’ll &lt;strong&gt;use Python&lt;/strong&gt; — and that’s what companies pay for.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>python</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>AWS Pricing Models Explained: (A Beginner's Guide)</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Sun, 11 Jan 2026 12:01:24 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/aws-pricing-models-explained-a-beginners-guide-3o0a</link>
      <guid>https://dev.to/chandrapenugonda/aws-pricing-models-explained-a-beginners-guide-3o0a</guid>
      <description>&lt;h2&gt;
  
  
  AWS Pricing Models Explained: How I Saved 75% on Cloud Costs (A Beginner's Guide)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Day 1 of the 7 Days of AWS Challenge&lt;/strong&gt; 🚀&lt;/p&gt;




&lt;h2&gt;
  
  
  📋 Table of Contents
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;AWS Pricing Models: The Complete Breakdown&lt;/li&gt;
&lt;li&gt;Real-World Cost Comparison&lt;/li&gt;
&lt;li&gt;Cloud Models: On-Premises vs Cloud vs Hybrid&lt;/li&gt;
&lt;li&gt;IaaS vs PaaS vs SaaS: Finally Explained&lt;/li&gt;
&lt;li&gt;AWS History: From Bookstore to Cloud Giant&lt;/li&gt;
&lt;li&gt;The Free Tier: Your Best Friend&lt;/li&gt;
&lt;li&gt;Key Takeaways&lt;/li&gt;
&lt;li&gt;What's Next?&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  AWS Pricing Models: The Complete Breakdown
&lt;/h2&gt;

&lt;p&gt;Most developers default to &lt;strong&gt;Pay-as-you-go&lt;/strong&gt; pricing because it's the default option. Big mistake. You're likely overpaying by 50-75%.&lt;/p&gt;

&lt;p&gt;AWS offers four main pricing models, each designed for different use cases:&lt;/p&gt;

&lt;h3&gt;
  
  
  💳 Pay-as-you-go
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Testing, development, and unpredictable workloads&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;No upfront costs&lt;/li&gt;
&lt;li&gt;Complete flexibility&lt;/li&gt;
&lt;li&gt;No long-term commitments&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;Most expensive option&lt;/li&gt;
&lt;li&gt;Hard to predict costs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Use when:&lt;/strong&gt; You're learning or testing new services&lt;/p&gt;




&lt;h3&gt;
  
  
  📦 Reserved Instances
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Steady, production workloads&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;Up to 75% cost savings&lt;/li&gt;
&lt;li&gt;Capacity reservation&lt;/li&gt;
&lt;li&gt;Predictable budgeting&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;1-3 year commitment&lt;/li&gt;
&lt;li&gt;Less flexibility&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Use when:&lt;/strong&gt; You know you'll use the service 24/7 for 1+ years&lt;/p&gt;




&lt;h3&gt;
  
  
  ⚡ Spot Instances
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Fault-tolerant, interruptible workloads&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;Up to 90% discount&lt;/li&gt;
&lt;li&gt;Massive cost savings&lt;/li&gt;
&lt;li&gt;Perfect for batch processing&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;Can be interrupted by AWS&lt;/li&gt;
&lt;li&gt;Not suitable for databases&lt;/li&gt;
&lt;li&gt;Requires fault-tolerant architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Use when:&lt;/strong&gt; Running batch jobs, CI/CD, data processing&lt;/p&gt;




&lt;h3&gt;
  
  
  🎁 Free Tier
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Learning and small projects&lt;/p&gt;

&lt;p&gt;AWS offers 12 months of free services including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;750 hours/month of EC2 (t2.micro or t3.micro)&lt;/li&gt;
&lt;li&gt;5GB of S3 storage&lt;/li&gt;
&lt;li&gt;1M Lambda requests per month&lt;/li&gt;
&lt;li&gt;25GB of DynamoDB&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Value:&lt;/strong&gt; Approximately $150-200/month in free services&lt;/p&gt;




&lt;h2&gt;
  
  
  Real-World Cost Comparison
&lt;/h2&gt;

&lt;p&gt;Let's say you need an EC2 instance running 24/7 for a year. Here's how each pricing model compares:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Pricing Model&lt;/th&gt;
&lt;th&gt;Annual Cost&lt;/th&gt;
&lt;th&gt;Savings&lt;/th&gt;
&lt;th&gt;Best For&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Pay-as-you-go&lt;/td&gt;
&lt;td&gt;$1,000&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;Testing, learning&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Reserved (1-year)&lt;/td&gt;
&lt;td&gt;$600&lt;/td&gt;
&lt;td&gt;40%&lt;/td&gt;
&lt;td&gt;Production apps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Reserved (3-year)&lt;/td&gt;
&lt;td&gt;$350&lt;/td&gt;
&lt;td&gt;65%&lt;/td&gt;
&lt;td&gt;Stable workloads&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Spot Instances&lt;/td&gt;
&lt;td&gt;$100&lt;/td&gt;
&lt;td&gt;90%&lt;/td&gt;
&lt;td&gt;Batch processing&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Example Scenario:
&lt;/h3&gt;

&lt;p&gt;You're running a web application that needs to be always available.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Pay-as-you-go approach&lt;/span&gt;
&lt;span class="nv"&gt;$0&lt;/span&gt;.08/hour × 24 hours × 365 days &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$700&lt;/span&gt;/year

&lt;span class="c"&gt;# Reserved Instance (1-year)&lt;/span&gt;
&lt;span class="nv"&gt;$0&lt;/span&gt;.04/hour × 24 hours × 365 days &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$350&lt;/span&gt;/year

&lt;span class="c"&gt;# You save: $350/year (50% savings)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Pro Tip:&lt;/strong&gt; Start with the Free Tier for learning, then switch to Reserved Instances once you move to production.&lt;/p&gt;




&lt;h2&gt;
  
  
  Cloud Models: On-Premises vs Cloud vs Hybrid
&lt;/h2&gt;

&lt;p&gt;When I started, I thought "cloud" meant putting everything on AWS. I was wrong. Here's when to use each model:&lt;/p&gt;

&lt;h3&gt;
  
  
  🏢 On-Premises Infrastructure
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Definition:&lt;/strong&gt; You own and manage all hardware and software in your own data center.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use On-Premises when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're a bank/government with strict compliance&lt;/li&gt;
&lt;li&gt;You have massive data transfer requirements&lt;/li&gt;
&lt;li&gt;You need complete control over security&lt;/li&gt;
&lt;li&gt;You have specialized hardware needs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Avoid when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're a startup&lt;/li&gt;
&lt;li&gt;You need to scale quickly&lt;/li&gt;
&lt;li&gt;You want to minimize upfront costs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Real-world example:&lt;/strong&gt; Financial institutions processing millions of transactions daily often keep core systems on-premises for compliance.&lt;/p&gt;




&lt;h3&gt;
  
  
  ☁️ Cloud Computing (AWS, GCP, Azure)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Definition:&lt;/strong&gt; Rent computing resources from a cloud provider.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use Cloud when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're a startup or growing company&lt;/li&gt;
&lt;li&gt;You need to scale quickly&lt;/li&gt;
&lt;li&gt;You want to minimize upfront costs&lt;/li&gt;
&lt;li&gt;You have a distributed team&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; 95% of startups and modern businesses&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why I chose AWS for my learning journey:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;200+ services available&lt;/li&gt;
&lt;li&gt;Largest market share (32%)&lt;/li&gt;
&lt;li&gt;Most documentation and community support&lt;/li&gt;
&lt;li&gt;Free tier for learning&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🔄 Hybrid Cloud
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Definition:&lt;/strong&gt; A mix of on-premises and cloud resources.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use Hybrid when:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're a large enterprise migrating slowly&lt;/li&gt;
&lt;li&gt;You have regulatory requirements for some data&lt;/li&gt;
&lt;li&gt;You want cloud burst for peak loads&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;Complex architecture&lt;/li&gt;
&lt;li&gt;Requires skilled team&lt;/li&gt;
&lt;li&gt;Higher operational overhead&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  When to Choose What
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Company Type&lt;/th&gt;
&lt;th&gt;Recommended Model&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Startup&lt;/td&gt;
&lt;td&gt;Cloud (AWS)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Small business&lt;/td&gt;
&lt;td&gt;Cloud (AWS)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Medium enterprise&lt;/td&gt;
&lt;td&gt;Cloud (AWS)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Large enterprise&lt;/td&gt;
&lt;td&gt;Hybrid or Cloud&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bank/Government&lt;/td&gt;
&lt;td&gt;On-Premises or Hybrid&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  IaaS vs PaaS vs SaaS: Finally Explained
&lt;/h2&gt;

&lt;p&gt;This topic confused me for weeks. Here's the breakdown that finally made it click:&lt;/p&gt;

&lt;h3&gt;
  
  
  IaaS (Infrastructure as a Service)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You rent:&lt;/strong&gt; Virtual hardware&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You manage:&lt;/strong&gt; Operating system, runtime, data, applications&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS manages:&lt;/strong&gt; Physical hardware, networking&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS Examples:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;EC2 (Virtual servers)&lt;/li&gt;
&lt;li&gt;S3 (Storage)&lt;/li&gt;
&lt;li&gt;EBS (Block storage)&lt;/li&gt;
&lt;li&gt;VPC (Networking)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Think of it as:&lt;/strong&gt; Renting a computer in the cloud&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Full control, learning infrastructure&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; You want to set up a web server from scratch.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Launch EC2 (IaaS)&lt;/span&gt;
&lt;span class="c"&gt;# Install OS (Ubuntu/Amazon Linux)&lt;/span&gt;
&lt;span class="c"&gt;# Configure web server (Nginx/Apache)&lt;/span&gt;
&lt;span class="c"&gt;# Deploy your application&lt;/span&gt;
&lt;span class="c"&gt;# You control everything!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  PaaS (Platform as a Service)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You rent:&lt;/strong&gt; A platform for running applications&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You manage:&lt;/strong&gt; Data, applications&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS manages:&lt;/strong&gt; Runtime, operating system, hardware, networking&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS Examples:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS Lambda (Serverless functions)&lt;/li&gt;
&lt;li&gt;Elastic Beanstalk (App deployment)&lt;/li&gt;
&lt;li&gt;AWS Fargate (Container orchestration)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Think of it as:&lt;/strong&gt; Renting a platform to run your code&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; Developers who want to focus on code, not infrastructure&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt; You want to deploy an app without managing servers.&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="c1"&gt;// Lambda function (PaaS)&lt;/span&gt;
&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;handler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &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="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Just write your code!&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&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="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello from AWS Lambda&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="c1"&gt;// AWS handles everything else&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  SaaS (Software as a Service)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;You rent:&lt;/strong&gt; Complete software solution&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You manage:&lt;/strong&gt; Nothing (just use the software)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS manages:&lt;/strong&gt; Everything&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS Examples:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;WorkMail (Email service)&lt;/li&gt;
&lt;li&gt;WorkDocs (Document sharing)&lt;/li&gt;
&lt;li&gt;Amazon Chime (Video conferencing)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Think of it as:&lt;/strong&gt; Using software in your browser&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Best for:&lt;/strong&gt; End users, businesses wanting turnkey solutions&lt;/p&gt;




&lt;h3&gt;
  
  
  Comparison Table
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;IaaS&lt;/th&gt;
&lt;th&gt;PaaS&lt;/th&gt;
&lt;th&gt;SaaS&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Applications&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Data&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Runtime&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;OS&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ You manage&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Infrastructure&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;td&gt;❌ AWS manages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;EC2, S3&lt;/td&gt;
&lt;td&gt;Lambda, Beanstalk&lt;/td&gt;
&lt;td&gt;WorkMail&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  Recommended Learning Path
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Start with IaaS&lt;/strong&gt; (EC2) to understand infrastructure&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Move to PaaS&lt;/strong&gt; (Lambda) to increase productivity&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use SaaS&lt;/strong&gt; when appropriate for your needs&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  AWS History: From Bookstore to Cloud Giant
&lt;/h2&gt;

&lt;p&gt;Understanding AWS's evolution helps you appreciate why certain services exist:&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Milestones
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;2002:&lt;/strong&gt; AWS launched (just a few services)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2004:&lt;/strong&gt; Simple Queue Service (SQS) - AWS's first service&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2006:&lt;/strong&gt; EC2 and S3 launched 💡 The game changers&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2011:&lt;/strong&gt; AWS CloudFormation (Infrastructure as Code)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2014:&lt;/strong&gt; AWS Lambda introduced (Serverless revolution)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2016:&lt;/strong&gt; 1 million active customers&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2020:&lt;/strong&gt; $45 billion in revenue&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;2024:&lt;/strong&gt; 200+ services, $85 billion annual revenue&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  The Origin Story
&lt;/h3&gt;

&lt;p&gt;AWS didn't start as a product—it was born from necessity.&lt;/p&gt;

&lt;p&gt;Amazon had excess infrastructure capacity after the holiday season. Instead of letting it sit idle, they realized they could rent it out to other companies.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The insight that changed everything:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"We built AWS for ourselves, then realized others needed it too."&lt;br&gt;
— Andy Jassy, AWS CEO&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Why AWS Dominates
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Market Share:&lt;/strong&gt; 32% (largest cloud provider)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Services:&lt;/strong&gt; 200+ and counting&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Availability:&lt;/strong&gt; 30 geographic regions, 96 availability zones&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Customers:&lt;/strong&gt; From startups to Netflix, Disney, and the CIA&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Lessons for Developers
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Build internal tools, then turn them into products&lt;/li&gt;
&lt;li&gt;Solve your own problems first&lt;/li&gt;
&lt;li&gt;Launch early, iterate often&lt;/li&gt;
&lt;li&gt;Customer obsession drives innovation&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  The Free Tier: Your Best Friend
&lt;/h2&gt;

&lt;p&gt;The AWS Free Tier is the best way to learn without spending money. Here's how to make the most of it:&lt;/p&gt;

&lt;h3&gt;
  
  
  What's Included (12 Months)
&lt;/h3&gt;

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

&lt;ul&gt;
&lt;li&gt;750 hours/month of EC2 (t2.micro or t3.micro)&lt;/li&gt;
&lt;li&gt;1,000 GB-month of Elastic Load Balancing&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;5 GB of S3 storage&lt;/li&gt;
&lt;li&gt;30 GB of EBS storage&lt;/li&gt;
&lt;li&gt;1 GB of snapshot storage&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;25 GB of DynamoDB&lt;/li&gt;
&lt;li&gt;750 hours of db.t2.micro or db.t3.micro&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;1M Lambda requests per month&lt;/li&gt;
&lt;li&gt;400,000 GB-seconds of compute time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Total Value:&lt;/strong&gt; $150-200/month in free services&lt;/p&gt;




&lt;h3&gt;
  
  
  ⚠️ Critical Warning
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;I know someone who racked up $500 in ONE DAY&lt;/strong&gt; by accidentally using non-free tier services.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to protect yourself:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Set up billing alerts immediately&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Go to AWS Console → Billing → Budgets&lt;/span&gt;
&lt;span class="c"&gt;# Create a budget with $0 limit&lt;/span&gt;
&lt;span class="c"&gt;# Set email alerts at 80% and 100%&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Monitor your usage regularly&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Check your free tier usage&lt;/span&gt;
aws ce get-cost-and-usage &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--time-start&lt;/span&gt; StartOfCurrentMonth &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--time-end&lt;/span&gt; EndOfCurrentMonth &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--granularity&lt;/span&gt; MONTHLY &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--metrics&lt;/span&gt; BlendedCost
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Know what's NOT free&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Not Free Tier Services (Common Mistakes):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Large instance types (m5.large, c5.xlarge)&lt;/li&gt;
&lt;li&gt;NAT Gateways ($0.045/hour + data transfer)&lt;/li&gt;
&lt;li&gt;Data transfer out (first 100GB/month free)&lt;/li&gt;
&lt;li&gt;Elastic IPs (free when attached, $0.005/hour when idle)&lt;/li&gt;
&lt;li&gt;AWS Support (Business &amp;amp; Enterprise plans)&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Free Tier Checklist
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;[ ] Create AWS account with Free Tier&lt;/li&gt;
&lt;li&gt;[ ] Set up billing alerts (DO THIS NOW!)&lt;/li&gt;
&lt;li&gt;[ ] Enable AWS Budgets with $0 limit&lt;/li&gt;
&lt;li&gt;[ ] Launch your first EC2 instance (Free Tier eligible)&lt;/li&gt;
&lt;li&gt;[ ] Upload files to S3 (First 5GB free)&lt;/li&gt;
&lt;li&gt;[ ] Create a Lambda function (First 1M requests free)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Key Takeaways
&lt;/h2&gt;

&lt;p&gt;After spending Day 1 deep-diving into AWS fundamentals, here are my top takeaways:&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Do This
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✓ Start with the Free Tier for learning&lt;/li&gt;
&lt;li&gt;✓ Use Reserved Instances for steady production workloads (save 40-75%)&lt;/li&gt;
&lt;li&gt;✓ Consider Spot Instances for batch processing (save up to 90%)&lt;/li&gt;
&lt;li&gt;✓ Set up billing alerts IMMEDIATELY&lt;/li&gt;
&lt;li&gt;✓ Learn IaaS first (EC2), then move to PaaS (Lambda)&lt;/li&gt;
&lt;li&gt;✓ Choose Cloud over On-Premises unless you have specific compliance needs&lt;/li&gt;
&lt;li&gt;✓ Use AWS Budgets to cap your spending at $0 while learning&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  ❌ Avoid This
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✗ Defaulting to Pay-as-you-go for production (too expensive)&lt;/li&gt;
&lt;li&gt;✗ Using Spot Instances for databases (they will be interrupted)&lt;/li&gt;
&lt;li&gt;✗ Leaving EC2 instances running when not in use&lt;/li&gt;
&lt;li&gt;✗ Skipping billing alerts (it will cost you)&lt;/li&gt;
&lt;li&gt;✗ Ignoring the Free Tier limits&lt;/li&gt;
&lt;li&gt;✗ Using On-Premises when Cloud would suffice&lt;/li&gt;
&lt;li&gt;✗ Launching services without understanding pricing&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  💰 Cost-Saving Cheat Sheet
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Scenario&lt;/th&gt;
&lt;th&gt;Best Choice&lt;/th&gt;
&lt;th&gt;Savings&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Learning &amp;amp; testing&lt;/td&gt;
&lt;td&gt;Free Tier&lt;/td&gt;
&lt;td&gt;100%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Steady production workload&lt;/td&gt;
&lt;td&gt;Reserved Instances (1-year)&lt;/td&gt;
&lt;td&gt;40%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Long-term stable workload&lt;/td&gt;
&lt;td&gt;Reserved Instances (3-year)&lt;/td&gt;
&lt;td&gt;75%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Batch processing jobs&lt;/td&gt;
&lt;td&gt;Spot Instances&lt;/td&gt;
&lt;td&gt;90%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Development environment&lt;/td&gt;
&lt;td&gt;Pay-as-you-go (small instances)&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;This is Day 1 of my 7-day AWS learning journey. Here's what's coming:&lt;/p&gt;

&lt;h3&gt;
  
  
  Week Overview
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Day 1 ✅:&lt;/strong&gt; AWS Fundamentals &amp;amp; Pricing Models&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 2:&lt;/strong&gt; EC2 Deep Dive (Launch your first server!)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 3:&lt;/strong&gt; S3 &amp;amp; Storage Services&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 4:&lt;/strong&gt; VPC &amp;amp; Networking&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 5:&lt;/strong&gt; Databases (RDS, DynamoDB)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 6:&lt;/strong&gt; Lambda &amp;amp; Serverless&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Day 7:&lt;/strong&gt; Final Project &amp;amp; Certification Prep&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Day 2 Preview
&lt;/h3&gt;

&lt;p&gt;Tomorrow, I'll dive deep into &lt;strong&gt;Amazon EC2&lt;/strong&gt;—the heart of AWS compute. I'll cover:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to launch your first EC2 instance&lt;/li&gt;
&lt;li&gt;Security Groups (don't get hacked!)&lt;/li&gt;
&lt;li&gt;Choosing the right instance type&lt;/li&gt;
&lt;li&gt;Connecting via SSH&lt;/li&gt;
&lt;li&gt;Deploying a web application&lt;/li&gt;
&lt;li&gt;Cost optimization strategies&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📚 Resources &amp;amp; Links
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Official AWS Resources:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/free/" rel="noopener noreferrer"&gt;AWS Free Tier&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://calculator.aws/" rel="noopener noreferrer"&gt;AWS Pricing Calculator&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/economics/" rel="noopener noreferrer"&gt;AWS Cloud Economics Center&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/architecture/well-architected/" rel="noopener noreferrer"&gt;AWS Well-Architected Framework&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;My Learning Path:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Challenge: &lt;a href="https://twitter.com/TrainWithShubham" rel="noopener noreferrer"&gt;7 Days of AWS&lt;/a&gt; by &lt;a class="mentioned-user" href="https://dev.to/trainwithshubham"&gt;@trainwithshubham&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Hashtag: #AWSwithTWS&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🙏 Discussion
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Question for you:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;What's your biggest AWS cost surprise or mistake?&lt;/p&gt;

&lt;p&gt;Drop a comment below—I'd love to hear your experiences (and learn from them)!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Also, let me know:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which pricing model do you use most?&lt;/li&gt;
&lt;li&gt;Did I miss anything important about AWS pricing?&lt;/li&gt;
&lt;li&gt;What AWS topic should I cover in an upcoming article?&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🏷️ Tags
&lt;/h2&gt;

&lt;h1&gt;
  
  
  aws #cloudcomputing #devops #beginners #tutorial #awstutorial #cloud #awspricing #serverless #7daysofaws #tech #programming #webdev #learning #certification
&lt;/h1&gt;




&lt;p&gt;&lt;strong&gt;Follow me for daily AWS articles this week!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Use the hashtag &lt;strong&gt;#7DaysOfAWS&lt;/strong&gt; and &lt;strong&gt;#AWSwithTWS&lt;/strong&gt; to share your progress!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;This is Day 1 of my 7-day AWS learning journey. Follow along for daily tutorials and insights!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Next:&lt;/strong&gt; Day 2 - EC2 Deep Dive (Coming soon!)&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>cloud</category>
      <category>aws</category>
    </item>
    <item>
      <title>Dockerizing a Node.js To-Do List and Deploying to AWS ECS</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Sat, 03 Jan 2026 10:27:12 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/dockerizing-a-nodejs-to-do-list-and-deploying-to-aws-ecs-3cgf</link>
      <guid>https://dev.to/chandrapenugonda/dockerizing-a-nodejs-to-do-list-and-deploying-to-aws-ecs-3cgf</guid>
      <description>&lt;p&gt;Building full-stack projects is a great way to learn modern development tools. &lt;/p&gt;

&lt;p&gt;In this post, we’ll take our glassmorphic Todo List application and deploy it to the cloud using &lt;strong&gt;Docker&lt;/strong&gt;, &lt;strong&gt;Amazon ECR&lt;/strong&gt;, and &lt;strong&gt;Amazon ECS (Fargate)&lt;/strong&gt;. (code on &lt;a href="https://github.com/chandrakumarreddy/docker_node-todo-list" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;) that uses &lt;strong&gt;Express&lt;/strong&gt; . We’ll show how to build the app locally, containerize it with &lt;strong&gt;Docker&lt;/strong&gt; (using a &lt;code&gt;Dockerfile&lt;/code&gt; and Docker Compose), and then deploy it to &lt;strong&gt;AWS ECS&lt;/strong&gt; (Elastic Container Service). Along the way, we’ll explain key technical concepts and steps in detail. This tutorial is aimed at developers interested in Node.js, Docker, and AWS container deployments.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Stack
&lt;/h2&gt;

&lt;p&gt;Our project is built with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Express&lt;/strong&gt;: A lightweight web framework for Node.js.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vanilla JS&lt;/strong&gt;: Managing state locally in-memory (no external database like Redis required for this simplified version).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CSS3&lt;/strong&gt;: Modern glassmorphism design.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Prerequisites and Setup
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js &amp;amp; npm&lt;/strong&gt;: Install &lt;a href="https://nodejs.org/" rel="noopener noreferrer"&gt;Node.js&lt;/a&gt; (which includes npm) to run the app and manage dependencies.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Git&lt;/strong&gt;: Clone the GitHub repository:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  git clone https://github.com/chandrakumarreddy/docker_node-todo-list.git
  &lt;span class="nb"&gt;cd &lt;/span&gt;docker_node-todo-list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Docker&lt;/strong&gt;: Install &lt;a href="https://docs.docker.com/get-docker/" rel="noopener noreferrer"&gt;Docker Desktop&lt;/a&gt; to build and run containers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you have Node, run &lt;code&gt;npm install&lt;/code&gt; to fetch dependencies. The project’s &lt;code&gt;package.json&lt;/code&gt; defines the main packages: it uses &lt;strong&gt;Express&lt;/strong&gt; as a lightweight web framework for Node.js. The code defines routes to add/delete to-do items, and Redis is used to persist them.&lt;/p&gt;

&lt;p&gt;To test locally (without Docker), start the app with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then visit &lt;code&gt;http://localhost:3000&lt;/code&gt;. The Express server listens on port 3000 by default, rendering the to-do list &lt;/p&gt;

&lt;h2&gt;
  
  
  Containerizing the App with Docker
&lt;/h2&gt;

&lt;p&gt;Next, we’ll containerize the Node.js app. A &lt;strong&gt;Dockerfile&lt;/strong&gt; describes how to build a Docker image that contains the app and its runtime. For example, a typical Dockerfile might look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight docker"&gt;&lt;code&gt;&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="s"&gt; node:16-alpine        # Base image with Node.js&lt;/span&gt;
&lt;span class="k"&gt;WORKDIR&lt;/span&gt;&lt;span class="s"&gt; /app              # Set working directory&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; package*.json ./     # Copy package.json and package-lock.json&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;           &lt;span class="c"&gt;# Install dependencies&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; . .                  # Copy app source code&lt;/span&gt;
&lt;span class="k"&gt;EXPOSE&lt;/span&gt;&lt;span class="s"&gt; 3000               # Expose port&lt;/span&gt;
&lt;span class="k"&gt;CMD&lt;/span&gt;&lt;span class="s"&gt; ["node", "app.js"]    # Default command&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This Dockerfile starts from a small Alpine Linux Node image, copies in the app, installs its npm packages, and defines the startup command. Running &lt;code&gt;docker build -t todo-app .&lt;/code&gt; will build the image.&lt;/p&gt;

&lt;p&gt;After building, verify the image and run a container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker build &lt;span class="nt"&gt;-t&lt;/span&gt; todo-app &lt;span class="nb"&gt;.&lt;/span&gt;
docker run &lt;span class="nt"&gt;-p&lt;/span&gt; 3000:3000 todo-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now the app is running in a container on port 3000.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploying to AWS ECS
&lt;/h2&gt;

&lt;p&gt;With a Docker image ready, we can deploy to &lt;strong&gt;AWS ECS&lt;/strong&gt;. ECS (Elastic Container Service) is Amazon’s way to run Docker containers at scale.&lt;/p&gt;

&lt;p&gt;Good catch 👍 — you’re right. For a Dev.to-quality, beginner-friendly post, &lt;strong&gt;ECR repo creation must be explicit&lt;/strong&gt;. Below is a &lt;strong&gt;drop-in replacement section&lt;/strong&gt; you can paste into your &lt;code&gt;.md&lt;/code&gt; file under &lt;strong&gt;Deploying to AWS ECS&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Push Docker Image to AWS ECR (Step-by-Step)
&lt;/h2&gt;

&lt;p&gt;Before ECS can run your container, we must &lt;strong&gt;store the Docker image in Amazon ECR (Elastic Container Registry)&lt;/strong&gt;. ECR is AWS’s managed Docker image registry.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Create an ECR Repository
&lt;/h3&gt;

&lt;p&gt;You can create the repository either via &lt;strong&gt;AWS Console&lt;/strong&gt; or &lt;strong&gt;AWS CLI&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Option A: Using AWS Console (Beginner Friendly)
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Go to &lt;strong&gt;AWS Console → ECR&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;Create repository&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Choose:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Visibility: &lt;strong&gt;Private&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Repository name: &lt;code&gt;todo-app&lt;/code&gt;

&lt;ol&gt;
&lt;li&gt;Click &lt;strong&gt;Create repository&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Copy the &lt;strong&gt;Repository URI&lt;/strong&gt;, it will look like:
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   123456789012.dkr.ecr.us-east-1.amazonaws.com/todo-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Option B: Using AWS CLI (Recommended for Devs)
&lt;/h3&gt;

&lt;p&gt;Make sure AWS CLI is configured:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws configure
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create the ECR repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws ecr create-repository &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--repository-name&lt;/span&gt; todo-app &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--region&lt;/span&gt; us-east-1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output will include:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"repositoryUri"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"123456789012.dkr.ecr.us-east-1.amazonaws.com/todo-app"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  2. Authenticate Docker with ECR
&lt;/h3&gt;

&lt;p&gt;Docker must authenticate before pushing images.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws ecr get-login-password &lt;span class="nt"&gt;--region&lt;/span&gt; us-east-1 &lt;span class="se"&gt;\&lt;/span&gt;
| docker login &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="nt"&gt;--username&lt;/span&gt; AWS &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="nt"&gt;--password-stdin&lt;/span&gt; 123456789012.dkr.ecr.us-east-1.amazonaws.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If successful, you’ll see:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;






&lt;h3&gt;
  
  
  3. Build the Docker Image
&lt;/h3&gt;

&lt;p&gt;From your project root:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker build &lt;span class="nt"&gt;-t&lt;/span&gt; todo-app &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker images
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  4. Tag the Image for ECR
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker tag todo-app:latest &lt;span class="se"&gt;\&lt;/span&gt;
123456789012.dkr.ecr.us-east-1.amazonaws.com/todo-app:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  5. Push Image to ECR
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker push 123456789012.dkr.ecr.us-east-1.amazonaws.com/todo-app:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once complete, your image will appear in the ECR console.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create an ECS Cluster&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Task Definition&lt;/strong&gt;: Example JSON:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"containerDefinitions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="w"&gt;
       &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"todo-app"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
       &lt;/span&gt;&lt;span class="nl"&gt;"image"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"&amp;lt;aws_account_id&amp;gt;.dkr.ecr.&amp;lt;region&amp;gt;.amazonaws.com/todo-app:latest"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
       &lt;/span&gt;&lt;span class="nl"&gt;"portMappings"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="nl"&gt;"containerPort"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;}],&lt;/span&gt;&lt;span class="w"&gt;
       &lt;/span&gt;&lt;span class="nl"&gt;"environment"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"NODE_ENV"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"value"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"production"&lt;/span&gt;&lt;span class="p"&gt;}]&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="p"&gt;}],&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"requiresCompatibilities"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"FARGATE"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"cpu"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"256"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"memory"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"512"&lt;/span&gt;&lt;span class="w"&gt;
   &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Create a Service&lt;/strong&gt;: Create a new service in your cluster using the above task definition.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  How It Works
&lt;/h2&gt;

&lt;p&gt;The Node.js app uses Express to handle web requests and EJS to render HTML pages. When you visit &lt;code&gt;/&lt;/code&gt;, it reads to-do items from Redis and displays them in a Bootstrap-styled page.&lt;/p&gt;

&lt;p&gt;In Docker, the &lt;code&gt;Dockerfile&lt;/code&gt; specifies the runtime environment. When running a container, Docker Compose sets up networking so that the Redis container and the app container communicate seamlessly.&lt;/p&gt;

&lt;p&gt;On AWS ECS, the Fargate service pulls the Docker image and runs it in the cloud. The ECS task definition acts like our Docker Compose profile.&lt;/p&gt;

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

&lt;p&gt;This tutorial covered building a Node.js to-do app, containerizing it with Docker, and deploying on AWS ECS Fargate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="//docs.aws.amazon.com"&gt;Amazon ECS clusters&lt;/a&gt; - Amazon Elastic Container Service&lt;/li&gt;
&lt;li&gt;
&lt;a href="//developer.mozilla.org"&gt;Express/Node introduction&lt;/a&gt; - Learn web development | MDN&lt;/li&gt;
&lt;li&gt;
&lt;a href="//docs.docker.com"&gt;Containerize | Docker Docs&lt;/a&gt; - Containerize a Node.js application&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>node</category>
      <category>ecs</category>
      <category>docker</category>
      <category>aws</category>
    </item>
    <item>
      <title>Background vs. Foreground Containers</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Sun, 07 Dec 2025 15:57:15 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/background-vs-foreground-containers-3kbb</link>
      <guid>https://dev.to/chandrapenugonda/background-vs-foreground-containers-3kbb</guid>
      <description>&lt;h2&gt;
  
  
  Background vs. Foreground Containers
&lt;/h2&gt;

&lt;p&gt;Foreground: Attaches to your terminal (e.g., &lt;code&gt;-it&lt;/code&gt;); stops on exit.&lt;/p&gt;

&lt;p&gt;Background (detached): Runs silently; use &lt;code&gt;-d&lt;/code&gt; flag.&lt;/p&gt;

&lt;p&gt;Run clock demo in background:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d jpetazzo/clock
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-d&lt;/strong&gt;: Detached mode—container runs without tying to terminal.&lt;/li&gt;
&lt;li&gt;Starts jpetazzo/clock image (displays time); ID returned for reference.&lt;/li&gt;
&lt;li&gt;Frees terminal for other commands.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Monitoring Containers
&lt;/h2&gt;

&lt;p&gt;Check processes:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Lists host processes; Docker containers appear as child processes of dockerd.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;List running containers:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Shows active containers: ID, image, status, ports.&lt;/li&gt;
&lt;li&gt;Filters to running only; use for quick status.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;View last container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps -l
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-l&lt;/strong&gt;: Latest—shows most recent container (running or stopped).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Quiet IDs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps -q
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-q&lt;/strong&gt;: Quiet—outputs only container IDs.&lt;/li&gt;
&lt;li&gt;Pipe to other commands (e.g., &lt;code&gt;docker ps -q | xargs docker stop&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All containers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps -a
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-a&lt;/strong&gt;: All—includes stopped/exited ones.&lt;/li&gt;
&lt;li&gt;Useful for cleanup or history.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Last ID only:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps -ql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Combines &lt;strong&gt;-q&lt;/strong&gt; and &lt;strong&gt;-l&lt;/strong&gt;: Single ID of latest container.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Logs and Introspection
&lt;/h2&gt;

&lt;p&gt;View logs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker logs container-ID
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Fetches stdout/stderr output since start.&lt;/li&gt;
&lt;li&gt;Replace &lt;code&gt;container-ID&lt;/code&gt; with ID from &lt;code&gt;docker ps&lt;/code&gt;; no real-time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Follow logs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker logs container-ID -f
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-f&lt;/strong&gt;: Follow—tails logs in real-time like &lt;code&gt;tail -f&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Monitors ongoing output; Ctrl+C to stop.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Stopping Containers
&lt;/h2&gt;

&lt;p&gt;Graceful stop:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker stop containerId
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Sends SIGTERM; allows cleanup (e.g., save state).&lt;/li&gt;
&lt;li&gt;Waits up to 10s default; container stops cleanly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Immediate kill:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker kill containerId
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Sends SIGKILL; forceful shutdown—no cleanup.&lt;/li&gt;
&lt;li&gt;Use for hung processes; risks data loss.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Resource Limits
&lt;/h2&gt;

&lt;p&gt;Limit memory:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -it --memory 100M python
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;--memory 100M&lt;/strong&gt;: Caps container RAM at 100MB.&lt;/li&gt;
&lt;li&gt;Prevents OOM kills; enforces isolation (e.g., Python script).&lt;/li&gt;
&lt;li&gt;Other limits: &lt;code&gt;--cpus 0.5&lt;/code&gt; for CPU shares.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Pulling and Running Images
&lt;/h2&gt;

&lt;p&gt;Pull image:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull busybox
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Downloads image from registry (Docker Hub default).&lt;/li&gt;
&lt;li&gt;Prepares for offline use; checks for updates if tagged latest.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Run multiple versions:&lt;/p&gt;

&lt;p&gt;Use tags (e.g., &lt;code&gt;redis:7&lt;/code&gt; vs. &lt;code&gt;redis:6&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;docker run -d redis:7
docker run -d redis:6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Tags specify versions; run side-by-side without conflict.&lt;/li&gt;
&lt;li&gt;Containers isolated—ports/names differentiate.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Ports: Container vs. Host
&lt;/h2&gt;

&lt;p&gt;Containers expose internal ports; map to host for access.&lt;/p&gt;

&lt;p&gt;Map ports:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -p 6000:6379 redis
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;-p 6000:6379&lt;/strong&gt;: Binds host port 6000 to container's 6379 (Redis default).&lt;/li&gt;
&lt;li&gt;Access via localhost:6000; host:container direction.&lt;/li&gt;
&lt;li&gt;TCP default; UDP via &lt;code&gt;-p 6000:6379/udp&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Custom name:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d -p 6000:6379 --name redis-old redis
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;--name redis-old&lt;/strong&gt;: Assigns human-readable name.&lt;/li&gt;
&lt;li&gt;Easier reference than IDs; prevents auto-naming.&lt;/li&gt;
&lt;li&gt;Unique per host; use &lt;code&gt;docker rm&lt;/code&gt; to reuse.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Executing in Containers
&lt;/h2&gt;

&lt;p&gt;Shell into running container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker exec -it containerID /bin/bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;exec&lt;/strong&gt;: Runs command in live container.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;-it&lt;/strong&gt;: Interactive terminal; &lt;code&gt;/bin/bash&lt;/code&gt; starts shell.&lt;/li&gt;
&lt;li&gt;Modifies running state (e.g., install tools); exit returns to host.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dive Deeper: Ubuntu Container with figlet
&lt;/h2&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -it ubuntu
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Pulls Ubuntu image.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;-it&lt;/strong&gt;: Interactive root shell (bare-bones system).&lt;/li&gt;
&lt;/ul&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apt-get update
apt-get install figlet
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;update&lt;/strong&gt;: Refreshes repos.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;install&lt;/strong&gt;: Adds figlet (ASCII art); root skips sudo.&lt;/li&gt;
&lt;/ul&gt;

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

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Prints "HELLO" art; install if missing—shows isolation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Key Takeaways
&lt;/h2&gt;

&lt;p&gt;Containers: foreground for dev, background for services. Monitor with &lt;code&gt;ps/logs&lt;/code&gt;, limit resources, map ports. Pull/tag for versions; name/exec for control. Experiment safely—&lt;code&gt;docker rm&lt;/code&gt; cleans.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Day 1: Containers mastered—detach and conquer!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>docker</category>
    </item>
    <item>
      <title>Docker Basics: Getting Started with Containers</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Sat, 06 Dec 2025 16:27:10 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/docker-basics-day-1-getting-started-with-containers-4bf2</link>
      <guid>https://dev.to/chandrapenugonda/docker-basics-day-1-getting-started-with-containers-4bf2</guid>
      <description>&lt;h2&gt;
  
  
  What is Docker?
&lt;/h2&gt;

&lt;p&gt;Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Installing Docker&lt;/code&gt; sets up Docker Engine (background daemon managing containers like VMs) and CLI (interacts via API; other tools use it too).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Running Your First Container&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;Echo test:
docker run busybox echo "hello world"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;docker run: Starts container from image.&lt;/li&gt;
&lt;li&gt;busybox: Minimal Linux image; echo outputs message. Pulls if absent; runs once, exits.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Interactive:&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;docker run -it busybox
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;-it: -i (stdin connect) + -t (pseudo-terminal).&lt;/li&gt;
&lt;li&gt;Shell access; exit stops/removes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Packages count:&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;dpkg -l | wc -l
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;dpkg -l: Lists Debian packages.&lt;/li&gt;
&lt;li&gt;| wc -l: Counts lines (minimal: &amp;lt;100).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dive Deeper: Ubuntu Container with figlet
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Launch:&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;docker run -it ubuntu
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Pulls Ubuntu image.&lt;/li&gt;
&lt;li&gt;-it: Interactive root shell (bare-bones system).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Install:&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;apt-get update
apt-get install figlet

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;update: Refreshes repos.&lt;/li&gt;
&lt;li&gt;install: Adds figlet (ASCII art); root skips sudo.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Test:&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;figlet hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Prints "HELLO" art; install if missing—shows isolation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Key Takeaways
&lt;/h2&gt;

&lt;p&gt;Containers isolate/reproduce envs. Start with docker run. Experiment, exit to clean. Next: Images/volumes.&lt;/p&gt;

</description>
      <category>docker</category>
      <category>containers</category>
    </item>
    <item>
      <title>Topics for Frontend</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Tue, 27 Feb 2024 06:46:42 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/topics-for-frontend-6dp</link>
      <guid>https://dev.to/chandrapenugonda/topics-for-frontend-6dp</guid>
      <description>&lt;p&gt;• How web works?&lt;br&gt;
• Protocols (http, https)&lt;br&gt;
• Rest API&lt;br&gt;
• GraphQL&lt;br&gt;
• Rendering of web page (DOM, CSSOM, paint, Render tree, Layout)&lt;br&gt;
• http2, http3, tcp, udp, smtp, ftp&lt;br&gt;
• Contribute in rest API(header, status code,methods)&lt;br&gt;
• Query/Mutation,dataloader, batching&lt;br&gt;
• gRPC&lt;br&gt;
• RealTime Data(Short polling,webscokets)&lt;br&gt;
•*Long polling,Server sent event, webhooks&lt;br&gt;
Input/Output Sanitization&lt;br&gt;
• XSS&lt;br&gt;
• CSRF&lt;br&gt;
• Https&lt;br&gt;
• CORS&lt;br&gt;
• Auth&lt;br&gt;
Security Headers&lt;br&gt;
• SSRF&lt;br&gt;
• SRI&lt;br&gt;
Permissions Policy&lt;br&gt;
Compliance&lt;br&gt;
Dependency Security&lt;br&gt;
• Why performance is important?&lt;br&gt;
• Performance metrics?&lt;br&gt;
• React Optimization&lt;br&gt;
• Performance monitoring&lt;br&gt;
• Build optimization&lt;br&gt;
• Network optimization&lt;br&gt;
• Asset optimization Performance tools.&lt;br&gt;
Rendering Patterns (CSR, SSR, SSG, RSC)&lt;br&gt;
Caching/Database&lt;br&gt;
• Local Storage&lt;br&gt;
Cookie&lt;br&gt;
Normalization&lt;br&gt;
• State Management&lt;br&gt;
• Session Storage&lt;br&gt;
IndexedDB&lt;br&gt;
Http Caching&lt;br&gt;
• Service Worker&lt;br&gt;
• API caching&lt;br&gt;
• Unit Testing &lt;br&gt;
• Test driven development (TDD) &lt;br&gt;
• Component Testing&lt;br&gt;
• E2E testing&lt;br&gt;
• A/B testing&lt;br&gt;
. Basic of Service worker&lt;br&gt;
• Service worker&lt;br&gt;
• Blob&lt;br&gt;
• PWA&lt;br&gt;
• IndexedDB&lt;br&gt;
Accessbility&lt;br&gt;
Keyboard accessbility&lt;br&gt;
screen recorder&lt;br&gt;
color contracts&lt;br&gt;
Logging and Monitoring &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Telemetry&lt;/li&gt;
&lt;li&gt;Tools&lt;/li&gt;
&lt;li&gt;Alerting&lt;/li&gt;
&lt;li&gt;Fixing&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;LLD For Early Engineer&lt;br&gt;
• State management&lt;br&gt;
• Routing&lt;br&gt;
• Solid principle Autocomplete&lt;br&gt;
• TicTacToe&lt;br&gt;
• Todo App Pagination&lt;br&gt;
• Carousal&lt;br&gt;
HLD for Senior Engineer&lt;br&gt;
• Facebook Feeds&lt;br&gt;
• Diagram Tools&lt;br&gt;
• Live Commentary&lt;br&gt;
• Photo Sharing&lt;br&gt;
• Video Streaming&lt;br&gt;
• Google Doc&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Unlocking Rust Development in Visual Studio Code: A Comprehensive Guide and Top Extensions</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Fri, 19 Jan 2024 04:05:12 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/unlocking-rust-development-in-visual-studio-code-a-comprehensive-guide-and-top-extensions-e2j</link>
      <guid>https://dev.to/chandrapenugonda/unlocking-rust-development-in-visual-studio-code-a-comprehensive-guide-and-top-extensions-e2j</guid>
      <description>&lt;h2&gt;
  
  
  Introduction:
&lt;/h2&gt;

&lt;p&gt;Rust, with its emphasis on performance, safety, and concurrency, has gained popularity among developers for systems programming. Visual Studio Code (VSCode), a versatile and lightweight code editor, has become a favorite among developers for its extensibility and support for a wide range of programming languages. In this blog post, we'll explore the seamless integration of Rust in Visual Studio Code, along with some essential extensions that enhance the development experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started with Rust in Visual Studio Code
&lt;/h2&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;Installation of Rust:&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;Start by installing the Rust programming language on your machine. Visit the official Rust website (&lt;a href="https://www.rust-lang.org/tools/install" rel="noopener noreferrer"&gt;https://www.rust-lang.org/tools/install&lt;/a&gt;) for instructions on installing Rust. This includes the Rust compiler (rustc), package manager (Cargo), and other essential tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  VSCode Installation:
&lt;/h2&gt;

&lt;p&gt;If you haven't already, download and install Visual Studio Code from &lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;https://code.visualstudio.com/&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rust Extension:
&lt;/h2&gt;

&lt;p&gt;The official Rust extension for Visual Studio Code is a must-have. Search for "Rust" in the Extensions view (Ctrl+Shift+X), and install the one provided by the Rust Programming Language.&lt;/p&gt;

&lt;p&gt;This extension provides features like syntax highlighting, autocompletion, and integration with Cargo, making it an indispensable tool for Rust development.&lt;/p&gt;

&lt;h2&gt;
  
  
  Essential Rust Extensions for Visual Studio Code:
&lt;/h2&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;rust-analyzer:&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;The extension enhances the Rust development experience by providing features such as advanced code analysis, intelligent code completion, and quick error feedback. Make sure to install it to take full advantage of Rust's capabilities within VSCode.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;Even Better TOML:&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;Syntax highlighting for TOML documents with TextMate grammar.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;CodeLLDB:&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;For debugging Rust applications, the "CodeLLDB" extension is invaluable. It integrates the LLDB debugger seamlessly with Visual Studio Code, allowing you to set breakpoints, inspect variables, and step through your Rust code with ease.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;Error Lens:&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;crates Simplify Dependency Management in Rust &amp;amp; VSCode&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;Welcome to Crates, the ultimate Rust extension for VSCode! Simplify your dependency management with ease while using Cargo.toml for your project.&lt;/p&gt;

</description>
      <category>rust</category>
      <category>productivity</category>
      <category>codenewbie</category>
      <category>programming</category>
    </item>
    <item>
      <title>Using Promise.all,Implement mapLimit async function</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Tue, 31 Oct 2023 11:45:26 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/using-promiseallimplement-maplimit-async-function-29jj</link>
      <guid>https://dev.to/chandrapenugonda/using-promiseallimplement-maplimit-async-function-29jj</guid>
      <description>&lt;p&gt;&lt;strong&gt;Implement a mapLimit function that is similar to the Array.map() which returns a promise that resolves on the list of output by mapping each input through an asynchronous iteratee function or rejects it if any error occurs. It also accepts a limit to decide how many operations can occur at a time.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The asynchronous iteratee function will accept a input and a callback. The callback function will be called when the input is finished processing, the first argument of the callback will be the error flag and the second will be the result.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Solution:&lt;/em&gt;&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;function getNameById(id, callback) {
  // simulating async request
  const randomRequestTime = Math.floor(Math.random() * 100) + 200;

  setTimeout(() =&amp;gt; {
    callback(id === 3 ? true : false, "User" + id);
  }, randomRequestTime);
}

function mapLimit(arr, limit, iterator, cb) {
  return new Promise((resolve) =&amp;gt; {
    const output = [];
    let startIndex = 0;
    while (startIndex &amp;lt; arr.length) {
      const slicedArr = arr.slice(startIndex, startIndex + limit);
      startIndex += limit;
      output.push(
        Promise.allSettled(
          slicedArr.map((item) =&amp;gt; {
            return new Promise((resolve, reject) =&amp;gt; {
              iterator(item, (err, result) =&amp;gt; {
                if (err) {
                  reject(err);
                } else {
                  resolve(result);
                }
              });
            });
          })
        )
      );
    }
    return resolve(Promise.all(output));
  });
}

let numPromise = mapLimit([1, 2, 3, 4, 5], 3, getNameById, (result) =&amp;gt; {
  console.log(result);
});

numPromise
  .then((result) =&amp;gt; console.log("success:", result[0], result[1]))
  .catch(() =&amp;gt; console.log("no success"));

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

&lt;/div&gt;



&lt;p&gt;Credits: &lt;a href="https://learnersbucket.com/examples/interview/implement-maplimit-async-function/" rel="noopener noreferrer"&gt;https://learnersbucket.com/examples/interview/implement-maplimit-async-function/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>interview</category>
      <category>learning</category>
    </item>
    <item>
      <title>Concatenate new array</title>
      <dc:creator>chandra penugonda</dc:creator>
      <pubDate>Tue, 22 Aug 2023 04:18:27 +0000</pubDate>
      <link>https://dev.to/chandrapenugonda/concatenate-new-array-3dmd</link>
      <guid>https://dev.to/chandrapenugonda/concatenate-new-array-3dmd</guid>
      <description>&lt;p&gt;&lt;strong&gt;Implement a function that takes an array and additional arrays and/or values as arguments and returns a new array by concatenating them together.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&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;function customConcat(array, ...values) {

}

var array = [1];
console.log(customConcat(array, 2, [3], [[4]]));
// [1, 2, 3, [4]]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Solution&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;function customConcat(array, ...values) {
  return array.concat(...values)
}

var array = [1];
console.log(customConcat(array, 2, [3], [[4]]));
// [1, 2, 3, [4]]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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