<?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: dravid p a</title>
    <description>The latest articles on DEV Community by dravid p a (@dravidpa7).</description>
    <link>https://dev.to/dravidpa7</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3332600%2Ffa6e8306-dacc-4e19-b4f0-b0bd19db319a.png</url>
      <title>DEV Community: dravid p a</title>
      <link>https://dev.to/dravidpa7</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dravidpa7"/>
    <language>en</language>
    <item>
      <title>Understanding Why `main` and `dev` Diverged</title>
      <dc:creator>dravid p a</dc:creator>
      <pubDate>Sun, 21 Jun 2026 12:52:22 +0000</pubDate>
      <link>https://dev.to/dravidpa7/understanding-why-main-and-dev-diverged-3acd</link>
      <guid>https://dev.to/dravidpa7/understanding-why-main-and-dev-diverged-3acd</guid>
      <description>&lt;h2&gt;
  
  
  Scenario
&lt;/h2&gt;

&lt;p&gt;You were working on the &lt;code&gt;dev&lt;/code&gt; branch.&lt;/p&gt;

&lt;p&gt;While you were making commits locally, someone (or you) also made changes directly to the &lt;code&gt;main&lt;/code&gt; branch on GitHub.&lt;/p&gt;

&lt;p&gt;As a result, both branches moved forward independently.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Happened?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Initial State
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A (common commit)
│
├── main
└── dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both branches point to the same commit.&lt;/p&gt;




&lt;h3&gt;
  
  
  Changes Added to Main
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A ── B ── C   (main)
│
└───────────  (dev)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;B = README update&lt;/li&gt;
&lt;li&gt;C = CodeQL update&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Changes Added to Dev
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A ── B ── C          (main)
│
└── D ── E ── F      (dev)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;D = Base crawler&lt;/li&gt;
&lt;li&gt;E = Class-based crawler&lt;/li&gt;
&lt;li&gt;F = Concurrency implementation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now both branches contain unique commits.&lt;/p&gt;

&lt;p&gt;This situation is called:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Branches have diverged.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Why &lt;code&gt;git pull main&lt;/code&gt; Did Not Work
&lt;/h1&gt;

&lt;p&gt;Many developers think:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git pull main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Pull changes from main branch"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But Git interprets it differently.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;main&lt;/code&gt; is only a local branch name.&lt;/p&gt;

&lt;p&gt;Git expects:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git pull &amp;lt;remote&amp;gt; &amp;lt;branch&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git pull origin main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Where:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;origin&lt;/code&gt; = GitHub repository&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;main&lt;/code&gt; = branch on GitHub&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Correct Way to Update Dev
&lt;/h1&gt;

&lt;p&gt;While on the &lt;code&gt;dev&lt;/code&gt; branch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git fetch origin
git merge origin/main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  What Does &lt;code&gt;git fetch&lt;/code&gt; Do?
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git fetch origin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Downloads the latest information from GitHub.&lt;/p&gt;

&lt;p&gt;Before fetch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Local Git:
main -&amp;gt; C

GitHub:
main -&amp;gt; G
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After fetch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;main         -&amp;gt; C
origin/main  -&amp;gt; G
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Git now knows about the latest remote commits.&lt;/p&gt;

&lt;p&gt;No files are changed yet.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Does &lt;code&gt;git merge origin/main&lt;/code&gt; Do?
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git merge origin/main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Git combines:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dev
+
latest main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before merge:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A ── B ── C          (origin/main)
│
└── D ── E ── F      (dev)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After merge:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A ── B ── C
│         \
│          M      (dev)
│         /
└── D ── E ── F
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;M&lt;/code&gt; = Merge Commit&lt;/p&gt;

&lt;p&gt;Now &lt;code&gt;dev&lt;/code&gt; contains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All main changes&lt;/li&gt;
&lt;li&gt;All dev changes&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  If Merge Conflicts Occur
&lt;/h1&gt;

&lt;p&gt;Git may stop and show:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;Both branches modified:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;README&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;md&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Git cannot decide which version to keep.&lt;/p&gt;

&lt;p&gt;You must manually fix the file.&lt;/p&gt;

&lt;p&gt;After fixing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Git creates the merge commit.&lt;/p&gt;




&lt;h1&gt;
  
  
  Push Updated Dev
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git push origin dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now GitHub receives the merged version.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;main -&amp;gt; C

dev -&amp;gt; M
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Create Pull Request
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dev  ---&amp;gt;  main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;GitHub PR contains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;README updates&lt;/li&gt;
&lt;li&gt;CodeQL updates&lt;/li&gt;
&lt;li&gt;Crawler changes&lt;/li&gt;
&lt;li&gt;Concurrency changes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything together.&lt;/p&gt;




&lt;h1&gt;
  
  
  Alternative Workflow
&lt;/h1&gt;

&lt;p&gt;You may also update your local &lt;code&gt;main&lt;/code&gt; first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git checkout main
git pull origin main

git checkout dev
git merge main

git push origin dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;latest main
+
latest dev
=
updated dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Simple Mental Model
&lt;/h1&gt;

&lt;p&gt;Think of branches as two roads.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;            main road
          B ── C
         /
A
         \
          D ── E ── F
            dev road
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both roads started from the same place.&lt;/p&gt;

&lt;p&gt;Before creating a Pull Request, connect the roads:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;            B ── C
           /      \
A                 M
           \      /
            D ── E ── F
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now everything is connected.&lt;/p&gt;




&lt;h1&gt;
  
  
  Safe Workflow Summary
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git checkout dev

git fetch origin
git merge origin/main

&lt;span class="c"&gt;# fix conflicts if needed&lt;/span&gt;

git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit

git push origin dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create PR:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dev → main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the safest and most common workflow when &lt;code&gt;main&lt;/code&gt; and &lt;code&gt;dev&lt;/code&gt; have diverged.&lt;/p&gt;

</description>
      <category>git</category>
      <category>github</category>
      <category>programming</category>
      <category>learning</category>
    </item>
    <item>
      <title>A Discord Group Accessed a Restricted AI That Finds Zero-Day Bugs -Here’s How It Happened</title>
      <dc:creator>dravid p a</dc:creator>
      <pubDate>Sun, 26 Apr 2026 00:52:48 +0000</pubDate>
      <link>https://dev.to/dravidpa7/a-discord-group-accessed-a-restricted-ai-that-finds-zero-day-bugs-heres-how-it-happened-529m</link>
      <guid>https://dev.to/dravidpa7/a-discord-group-accessed-a-restricted-ai-that-finds-zero-day-bugs-heres-how-it-happened-529m</guid>
      <description>&lt;p&gt;🚨 &lt;strong&gt;This is NOT a typical “AI breach” this is worse.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A small Discord group just got &lt;strong&gt;unauthorized access&lt;/strong&gt; to one of the most powerful AI security tools ever built.&lt;/p&gt;

&lt;p&gt;Let that sink in.&lt;/p&gt;

&lt;p&gt;This isn’t just any AI.&lt;br&gt;
This model (Mythos) is designed to:&lt;/p&gt;

&lt;p&gt;→ Find &lt;strong&gt;zero-day vulnerabilities&lt;/strong&gt;&lt;br&gt;
→ Break down &lt;strong&gt;operating systems &amp;amp; browsers&lt;/strong&gt;&lt;br&gt;
→ Potentially simulate &lt;strong&gt;real cyberattacks&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And it was supposed to be &lt;strong&gt;highly restricted&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧠 What actually happened?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A few users from a &lt;strong&gt;private Discord group&lt;/strong&gt; gained access&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Not through advanced hacking… but through:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Contractor access loopholes&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Smart guessing (internal URLs, patterns)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Public data scraping (GitHub, OSINT tools)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 No direct breach of core systems&lt;br&gt;
👉 The weakness? &lt;strong&gt;Third-party access&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  ⚠️ Why this is a BIG deal
&lt;/h3&gt;

&lt;p&gt;This AI can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Discover critical bugs faster than humans&lt;/li&gt;
&lt;li&gt;Expose weaknesses in widely used software&lt;/li&gt;
&lt;li&gt;Potentially accelerate cyberattacks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now imagine that in the wrong hands.&lt;/p&gt;




&lt;h3&gt;
  
  
  🤯 The most important insight
&lt;/h3&gt;

&lt;p&gt;Everyone will focus on:&lt;br&gt;
“AI tool fell into the wrong hands”&lt;/p&gt;

&lt;p&gt;But the real problem is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Even the most restricted, powerful AI systems are only as secure as their weakest access point.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Not the model.&lt;br&gt;
Not the infrastructure.&lt;br&gt;
But the &lt;strong&gt;people + ecosystem around it.&lt;/strong&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  🌍 Who should care?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Tech companies 🏢&lt;/li&gt;
&lt;li&gt;Governments 🏛️&lt;/li&gt;
&lt;li&gt;Developers 👨‍💻&lt;/li&gt;
&lt;li&gt;Basically… anyone using software (so, everyone)&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🧩 Current status
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Investigation is ongoing&lt;/li&gt;
&lt;li&gt;No confirmed large-scale damage (yet)&lt;/li&gt;
&lt;li&gt;Some viral claims were &lt;strong&gt;fake / AI-generated&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But one thing is clear 👇&lt;/p&gt;




&lt;h3&gt;
  
  
  ⚡ Final thought
&lt;/h3&gt;

&lt;p&gt;We’re entering a world where:&lt;/p&gt;

&lt;p&gt;👉 AI can &lt;strong&gt;find and exploit vulnerabilities in hours&lt;/strong&gt;&lt;br&gt;
👉 And access control failures can expose it in minutes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The question isn’t “if” this happens again…&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;It’s “how prepared are we when it does?”&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;💬 What do you think is AI making cybersecurity stronger or more dangerous?&lt;/p&gt;

</description>
      <category>ai</category>
      <category>cybersecurity</category>
      <category>claude</category>
      <category>mythos</category>
    </item>
    <item>
      <title>JavaScript: Single-Threaded but Asynchronous - How Does It Work?</title>
      <dc:creator>dravid p a</dc:creator>
      <pubDate>Tue, 15 Jul 2025 15:23:45 +0000</pubDate>
      <link>https://dev.to/dravidpa7/javascript-single-threaded-but-asynchronous-how-does-it-work-4idb</link>
      <guid>https://dev.to/dravidpa7/javascript-single-threaded-but-asynchronous-how-does-it-work-4idb</guid>
      <description>&lt;p&gt;JavaScript is often described as a &lt;strong&gt;single-threaded language&lt;/strong&gt;, yet it can handle asynchronous operations seamlessly. This might sound contradictory at first, but understanding how JavaScript achieves this is crucial for every developer. Let's break it down with clear examples.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Thread?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;thread&lt;/strong&gt; is an independent sequence of execution within a program. Think of it as a worker that can execute code line by line. Each thread has its own call stack and can run independently.&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;// Imagine this as a single worker (thread) executing tasks&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;Task 1&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;Task 2&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;Task 3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: Task 1, Task 2, Task 3 (in order)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What Does Single-Threaded Mean?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Single-threaded&lt;/strong&gt; means JavaScript has only &lt;strong&gt;one main thread&lt;/strong&gt; (also called the main execution thread) that executes your code. This thread can only process one operation at a time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Single-Threaded 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;heavyTask&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="s2"&gt;Heavy task started&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// Simulate a time-consuming operation&lt;/span&gt;
    &lt;span class="k"&gt;for &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;i&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;1000000000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&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="c1"&gt;// Some computation&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="s2"&gt;Heavy task completed&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="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;Before heavy task&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;heavyTask&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="s2"&gt;After heavy task&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Before heavy task&lt;/span&gt;
&lt;span class="c1"&gt;// Heavy task started&lt;/span&gt;
&lt;span class="c1"&gt;// Heavy task completed&lt;/span&gt;
&lt;span class="c1"&gt;// After heavy task&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice how everything executes &lt;strong&gt;one after another&lt;/strong&gt;. The heavy task blocks everything else until it completes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Synchronous Operations in JavaScript
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Synchronous&lt;/strong&gt; means tasks execute &lt;strong&gt;one by one, in order&lt;/strong&gt;, and each task must complete before the next one starts.&lt;/p&gt;

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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Step 1&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;Step 2&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;Step 3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Step 1&lt;/span&gt;
&lt;span class="c1"&gt;// Step 2&lt;/span&gt;
&lt;span class="c1"&gt;// Step 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each &lt;code&gt;console.log&lt;/code&gt; waits for the previous one to finish before executing.&lt;/p&gt;

&lt;h3&gt;
  
  
  Real-world Synchronous 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;calculateSum&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Calculating sum...&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;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;function&lt;/span&gt; &lt;span class="nf"&gt;displayResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="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;Result:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="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;Starting calculation&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;calculateSum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;displayResult&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&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="s2"&gt;Calculation complete&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Starting calculation&lt;/span&gt;
&lt;span class="c1"&gt;// Calculating sum...&lt;/span&gt;
&lt;span class="c1"&gt;// Result: 15&lt;/span&gt;
&lt;span class="c1"&gt;// Calculation complete&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The Puzzle: How Can Single-Threaded JavaScript Handle Asynchronous Operations?
&lt;/h2&gt;

&lt;p&gt;Here's where it gets interesting. JavaScript can handle asynchronous operations despite being single-threaded. But how?&lt;/p&gt;

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



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Start&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;setTimeout&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="s2"&gt;This runs after 2 seconds&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="mi"&gt;2000&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="s2"&gt;End&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Start&lt;/span&gt;
&lt;span class="c1"&gt;// End&lt;/span&gt;
&lt;span class="c1"&gt;// This runs after 2 seconds (after 2 seconds)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice how "End" prints before the setTimeout callback, even though setTimeout was called first!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Secret: Event Loop and Browser APIs
&lt;/h2&gt;

&lt;p&gt;JavaScript achieves asynchronous behavior through:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Event Loop&lt;/strong&gt; - Manages the execution of code&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Web APIs&lt;/strong&gt; - Browser-provided APIs (setTimeout, fetch, DOM events)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Callback Queue&lt;/strong&gt; - Stores completed async operations&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  How It Works:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;1. First&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;setTimeout&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="s2"&gt;3. Timeout callback&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="mi"&gt;0&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="s2"&gt;2. Second&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// 1. First&lt;/span&gt;
&lt;span class="c1"&gt;// 2. Second&lt;/span&gt;
&lt;span class="c1"&gt;// 3. Timeout callback&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What happens:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;console.log("1. First")&lt;/code&gt; executes immediately&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;setTimeout&lt;/code&gt; is handed off to Web API (browser handles the timer)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.log("2. Second")&lt;/code&gt; executes immediately&lt;/li&gt;
&lt;li&gt;When timer completes, callback goes to callback queue&lt;/li&gt;
&lt;li&gt;Event loop puts callback on call stack when stack is empty&lt;/li&gt;
&lt;/ol&gt;

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

&lt;h3&gt;
  
  
  Fetching Data:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Starting data fetch&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.example.com/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&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="s2"&gt;Data received:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Fetch request sent&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Starting data fetch&lt;/span&gt;
&lt;span class="c1"&gt;// Fetch request sent&lt;/span&gt;
&lt;span class="c1"&gt;// Data received: {...} (when response arrives)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Multiple Async Operations:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="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;Start&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;setTimeout&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;Timeout 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&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;Timeout 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="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;Promise&lt;/span&gt;&lt;span class="dl"&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="s2"&gt;End&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// Start&lt;/span&gt;
&lt;span class="c1"&gt;// End&lt;/span&gt;
&lt;span class="c1"&gt;// Promise&lt;/span&gt;
&lt;span class="c1"&gt;// Timeout 2&lt;/span&gt;
&lt;span class="c1"&gt;// Timeout 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;JavaScript is single-threaded&lt;/strong&gt; - Only one main thread executes your code&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Synchronous operations&lt;/strong&gt; block the thread until completion&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Asynchronous operations&lt;/strong&gt; use Web APIs and the event loop to avoid blocking&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The main thread&lt;/strong&gt; handles synchronous code and manages async callbacks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;True parallelism&lt;/strong&gt; requires Web Workers (separate threads)&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Common Misconception
&lt;/h2&gt;

&lt;p&gt;❌ &lt;strong&gt;Wrong&lt;/strong&gt;: "JavaScript runs multiple operations simultaneously"&lt;br&gt;
✅ &lt;strong&gt;Correct&lt;/strong&gt;: "JavaScript delegates async operations to browser APIs and processes their results when ready"&lt;/p&gt;

&lt;p&gt;The main thread itself doesn't run multiple operations at once - it cleverly manages them through the event loop system.&lt;/p&gt;

&lt;p&gt;Understanding this concept is fundamental to writing efficient JavaScript code and avoiding common pitfalls like blocking the main thread with heavy synchronous operations.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>async</category>
    </item>
    <item>
      <title>The 150-Day Promise That Changed Everything</title>
      <dc:creator>dravid p a</dc:creator>
      <pubDate>Mon, 14 Jul 2025 19:46:44 +0000</pubDate>
      <link>https://dev.to/dravidpa7/the-150-day-promise-that-changed-everything-4bf</link>
      <guid>https://dev.to/dravidpa7/the-150-day-promise-that-changed-everything-4bf</guid>
      <description>&lt;p&gt;Hey, I'm Dravid. 20 years old. Newbie dev. &lt;/p&gt;

&lt;p&gt;But here's the thing—I just did something that seemed impossible.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I gave up sugar for 150 days straight.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yeah, you read that right. No candy, no sodas, no "just one bite" of cake at birthday parties. 150 days of saying no when everyone else said yes.&lt;/p&gt;

&lt;p&gt;Why am I telling you this? Because if I can resist a chocolate bar calling my name at 2 AM for 150 days, I can definitely show up here every single day to share what I'm learning in code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here's my deal with you:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The dev world is flooded with creators. I get it. Another 20-year-old talking about JavaScript? Really? &lt;/p&gt;

&lt;p&gt;But here's what makes me different—I don't just talk about consistency. I &lt;em&gt;prove&lt;/em&gt; it. That sugar challenge wasn't just about health. It was about building the mental muscle to stick to commitments when no one's watching.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So here's what we're building together:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Raw, unfiltered learning journey (mistakes included)&lt;/li&gt;
&lt;li&gt;1% better every day, no matter what&lt;/li&gt;
&lt;li&gt;Real projects, real struggles, real breakthroughs&lt;/li&gt;
&lt;li&gt;A community where newbies aren't just welcomed—we're celebrated&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm not promising to be the smartest dev you follow. But I'm promising to be the most consistent one.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ready to grow together?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hit follow if you want to see what happens when someone who conquered 150 days without sugar decides to conquer code. &lt;/p&gt;

&lt;p&gt;Let's make small stories into big victories. 🚀&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Day 1 of sharing starts now.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>motivation</category>
      <category>learning</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
