<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Posts on Tech logs</title>
    <link>/posts/</link>
    <description>Recent content in Posts on Tech logs</description>
    <generator>Hugo -- 0.151.0</generator>
    <language>en</language>
    <lastBuildDate>Sun, 31 May 2026 14:00:00 +0530</lastBuildDate>
    <atom:link href="/posts/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>01 : Js Foundation</title>
      <link>/posts/01-js-foundation/</link>
      <pubDate>Fri, 13 Mar 2026 23:19:51 +0530</pubDate>
      <guid>/posts/01-js-foundation/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; The bedrock of the course. Covers why JS exists, how it runs, and the async programming model that makes JS unique and powerful for web development.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-why-programming-languages&#34;&gt;1. Why Programming Languages?&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;p&gt;Computers understand only binary (0s and 1s). Languages exist so humans can write readable instructions that compilers/interpreters then convert to binary.&lt;/p&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;Human-written code → Compiler → 01010101 → CPU executes
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;strong&gt;The flow:&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Developer writes high-level code (JS, Python, C++)&lt;/li&gt;
&lt;li&gt;A compiler/runtime converts it to machine code&lt;/li&gt;
&lt;li&gt;CPU executes machine code from RAM&lt;/li&gt;
&lt;li&gt;SSD holds the program at rest; RAM holds it while running&lt;/li&gt;
&lt;/ol&gt;
&lt;hr&gt;
&lt;h2 id=&#34;2-compiled-vs-interpreted-scripting-languages&#34;&gt;2. Compiled vs Interpreted (Scripting) Languages&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;</description>
    </item>
    <item>
      <title>02 : Node.js, HTTP Servers, Express &amp; Git</title>
      <link>/posts/02-nodejs/</link>
      <pubDate>Fri, 13 Mar 2026 23:21:12 +0530</pubDate>
      <guid>/posts/02-nodejs/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Moves from JS fundamentals to building real backend servers. Covers the Node.js runtime, the HTTP protocol, creating servers with Express, testing with Postman, and version control with Git.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-javascript-runtimes&#34;&gt;1. JavaScript Runtimes&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;h3 id=&#34;ecmascript--the-spec&#34;&gt;ECMAScript — The Spec&lt;/h3&gt;
&lt;p&gt;ECMAScript defines the core language: &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;const&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, &lt;code&gt;function&lt;/code&gt;, &lt;code&gt;Date&lt;/code&gt;, &lt;code&gt;setTimeout&lt;/code&gt;, etc. It&amp;rsquo;s the specification, not the implementation.&lt;/p&gt;
&lt;h3 id=&#34;browser-js--ecmascript--browser-apis&#34;&gt;Browser JS = ECMAScript + Browser APIs&lt;/h3&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;Browser JS:
  ├── ECMAScript (core language)
  ├── setTimeout / setInterval
  ├── fetch (HTTP requests)
  ├── document (DOM access)
  └── localStorage
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&#34;nodejs--ecmascript--backend-apis&#34;&gt;Node.js = ECMAScript + Backend APIs&lt;/h3&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;Node.js:
  ├── ECMAScript (core language)
  ├── setTimeout
  ├── fs (file system)
  ├── http (create HTTP servers)
  └── path, crypto, os...
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&#34;how-nodejs-was-born&#34;&gt;How Node.js Was Born&lt;/h3&gt;
&lt;p&gt;[ADDED — IMPORTANT BACKGROUND]&lt;/p&gt;</description>
    </item>
    <item>
      <title>03 : Middlewares, Authentication, Zod &amp; MongoDB</title>
      <link>/posts/03-middlewares-auth/</link>
      <pubDate>Fri, 13 Mar 2026 23:22:09 +0530</pubDate>
      <guid>/posts/03-middlewares-auth/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Adds production patterns to the Express server: middleware chains, JWT-based auth, schema validation with Zod, and persistent storage with MongoDB via Mongoose.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-middlewares&#34;&gt;1. Middlewares&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;h3 id=&#34;the-problem&#34;&gt;The Problem&lt;/h3&gt;
&lt;p&gt;Every route needs auth checks, input validation, logging. Repeating these in every handler is messy.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-js&#34; data-lang=&#34;js&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;// BAD — repeated logic in every route
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;app&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;get&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;/kidney&amp;#34;&lt;/span&gt;, (&lt;span style=&#34;color:#a6e22e&#34;&gt;req&lt;/span&gt;, &lt;span style=&#34;color:#a6e22e&#34;&gt;res&lt;/span&gt;) =&amp;gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// auth check here
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// input validation here
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// actual logic here
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;app&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;put&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;/kidney&amp;#34;&lt;/span&gt;, (&lt;span style=&#34;color:#a6e22e&#34;&gt;req&lt;/span&gt;, &lt;span style=&#34;color:#a6e22e&#34;&gt;res&lt;/span&gt;) =&amp;gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// auth check here (copied!)
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// input validation here (copied!)
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;  &lt;span style=&#34;color:#75715e&#34;&gt;// actual logic here
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;&lt;/span&gt;});
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;what-is-middleware&#34;&gt;What Is Middleware?&lt;/h3&gt;
&lt;p&gt;A function that runs &lt;strong&gt;between&lt;/strong&gt; the request and the route handler. Has access to &lt;code&gt;req&lt;/code&gt;, &lt;code&gt;res&lt;/code&gt;, and &lt;code&gt;next&lt;/code&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>04 : DOM, Why Frontend Frameworks &amp; MongoDB Deep Dive</title>
      <link>/posts/04-dom-mongodb/</link>
      <pubDate>Fri, 13 Mar 2026 23:23:33 +0530</pubDate>
      <guid>/posts/04-dom-mongodb/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Transitions from backend to frontend. Explores raw DOM manipulation, its limitations, and why React exists. Also covers MongoDB/Mongoose in depth with a complete full-stack data model.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-browser-javascript--the-dom&#34;&gt;1. Browser JavaScript &amp;amp; the DOM&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;h3 id=&#34;what-is-the-dom&#34;&gt;What Is the DOM?&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Document Object Model&lt;/strong&gt; — the browser&amp;rsquo;s in-memory representation of a web page as a tree of objects.&lt;/p&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;HTML File:                    DOM Tree:
&amp;lt;html&amp;gt;                          document
  &amp;lt;body&amp;gt;                         └── html
    &amp;lt;div id=&amp;#34;app&amp;#34;&amp;gt;                    └── body
      &amp;lt;h1&amp;gt;Hello&amp;lt;/h1&amp;gt;                       └── div#app
      &amp;lt;button&amp;gt;Click&amp;lt;/button&amp;gt;                    ├── h1 (&amp;#34;Hello&amp;#34;)
    &amp;lt;/div&amp;gt;                                      └── button (&amp;#34;Click&amp;#34;)
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;JavaScript can read and modify this tree in real-time → &lt;strong&gt;dynamic web pages&lt;/strong&gt;.&lt;/p&gt;</description>
    </item>
    <item>
      <title>05 : React Deep Dive</title>
      <link>/posts/05-react-deep-dive/</link>
      <pubDate>Fri, 13 Mar 2026 23:41:11 +0530</pubDate>
      <guid>/posts/05-react-deep-dive/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Mastering React&amp;rsquo;s core mental model — state, components, JSX, and re-rendering. Understanding how to structure apps and why React re-renders when and how it does.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-the-react-mental-model&#34;&gt;1. The React Mental Model&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;p&gt;Every frontend app has two things:&lt;/p&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;State              Components
─────              ──────────
The data           The view function
(what changes)     state → rendered HTML
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;strong&gt;Key insight:&lt;/strong&gt; You never manipulate the DOM directly. You update state. React figures out the DOM.&lt;/p&gt;</description>
    </item>
    <item>
      <title>06 : React Hooks: useEffect, useMemo, useCallback, useRef</title>
      <link>/posts/06-react-hooks/</link>
      <pubDate>Fri, 13 Mar 2026 23:41:51 +0530</pubDate>
      <guid>/posts/06-react-hooks/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Deep dive into React&amp;rsquo;s hook system. Covers when and why each hook exists, common pitfalls, reconciliation internals, and performance optimization patterns.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-reconciliation--how-react-updates-the-dom&#34;&gt;1. Reconciliation — How React Updates the DOM&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;h3 id=&#34;the-ca-analogy&#34;&gt;The CA Analogy&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;You&lt;/strong&gt; = developer (provide state/data)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;CA (Chartered Accountant)&lt;/strong&gt; = React reconciler&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Bank statements&lt;/strong&gt; = state&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tax filing&lt;/strong&gt; = DOM update&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;React receives your updated state and calculates &lt;strong&gt;what changed&lt;/strong&gt; in the DOM — it doesn&amp;rsquo;t re-create everything.&lt;/p&gt;</description>
    </item>
    <item>
      <title>07 : Routing, Prop Drilling, Context API &amp; Recoil</title>
      <link>/posts/07-react-extra/</link>
      <pubDate>Fri, 13 Mar 2026 23:42:32 +0530</pubDate>
      <guid>/posts/07-react-extra/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; Covers client-side routing for SPAs, solves the prop drilling problem with Context API, and introduces Recoil as a production-grade state management solution.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id=&#34;1-routing-in-react&#34;&gt;1. Routing in React&lt;/h2&gt;
&lt;p&gt;[SOURCE — COURSE MATERIAL]&lt;/p&gt;
&lt;h3 id=&#34;jargon-first&#34;&gt;Jargon First&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Single Page Application (SPA):&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Browser downloads ONE HTML file&lt;/li&gt;
&lt;li&gt;React controls what to show based on URL&lt;/li&gt;
&lt;li&gt;No full page reloads when navigating&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Client-Side Bundle:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;All your React code compiled into JS files&lt;/li&gt;
&lt;li&gt;Browser downloads once, runs locally&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Client-Side Routing:&lt;/strong&gt;&lt;/p&gt;</description>
    </item>
    <item>
      <title>08 : Mastering Redux Toolkit</title>
      <link>/posts/08-react-redux/</link>
      <pubDate>Mon, 06 Apr 2026 10:12:08 +0530</pubDate>
      <guid>/posts/08-react-redux/</guid>
      <description>&lt;p&gt;Welcome to the big leagues. If you&amp;rsquo;ve been following along, we’ve solved the prop-drilling problem using the Context API, and we even looked at Recoil to prevent unnecessary re-renders.&lt;/p&gt;
&lt;p&gt;So right now, a very valid question is probably popping up in your head: &lt;strong&gt;&amp;ldquo;If Recoil and Context API solve my problems, why on earth am I learning Redux?&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Let&amp;rsquo;s clear that up before we write a single line of code.&lt;/p&gt;</description>
    </item>
    <item>
      <title>09 : Custom Hooks - Write Once, Use Everywhere</title>
      <link>/posts/09-custom-hooks/</link>
      <pubDate>Sun, 31 May 2026 14:00:00 +0530</pubDate>
      <guid>/posts/09-custom-hooks/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; React&amp;rsquo;s built-in hooks are great, but the real superpower is building your own. This covers custom hooks from scratch - data fetching, browser APIs, performance patterns, and the SWR library. By the end you will have a solid collection of hooks you can drop into any project.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;So we have been through &lt;code&gt;useState&lt;/code&gt;, &lt;code&gt;useEffect&lt;/code&gt;, &lt;code&gt;useMemo&lt;/code&gt;, &lt;code&gt;useCallback&lt;/code&gt;, &lt;code&gt;useRef&lt;/code&gt;. Those are all hooks React ships with. And honestly, they cover a lot.&lt;/p&gt;</description>
    </item>
    <item>
      <title>10 : TypeScript - JavaScript But It Yells at You First</title>
      <link>/posts/10-typescripts/</link>
      <pubDate>Sun, 31 May 2026 12:00:00 +0530</pubDate>
      <guid>/posts/10-typescripts/</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Blog Summary:&lt;/strong&gt; JavaScript is great until your app crashes at 2am because someone passed a string where a number was expected. TypeScript fixes that. This post covers TypeScript from the ground up - types, interfaces, generics, enums, tsconfig, and how to actually use all of this in real code. By the end you will build a fully typed REST API with Express.&lt;/p&gt;&lt;/blockquote&gt;
&lt;hr&gt;
&lt;p&gt;So I have been writing JavaScript for a while now. And at some point the codebase grew big enough that I started getting these bugs that should never exist. Like calling &lt;code&gt;.toUpperCase()&lt;/code&gt; on something that turned out to be &lt;code&gt;undefined&lt;/code&gt; at runtime. Or a function expecting an object with a &lt;code&gt;name&lt;/code&gt; field but someone passing in just a string. These are not logic bugs. They are type bugs. And TypeScript is specifically designed to catch them before your code even runs.&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
