Tech logs

Canvas 01 : Pixels, Paths and the Coordinate Lie

Sat, 11 Apr 2026 00:00:00 +0530

Part 1 of the HTML Canvas series. We go from a blank screen to a fully drawn static Pac-Man frame — covering coordinates, paths, arcs, colors and text along the way.

01 : Js Foundation

Fri, 13 Mar 2026 23:19:51 +0530

Blog Summary: 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.

1. Why Programming Languages?

[SOURCE — COURSE MATERIAL]

Computers understand only binary (0s and 1s). Languages exist so humans can write readable instructions that compilers/interpreters then convert to binary.

Human-written code → Compiler → 01010101 → CPU executes

The flow:

Developer writes high-level code (JS, Python, C++)
A compiler/runtime converts it to machine code
CPU executes machine code from RAM
SSD holds the program at rest; RAM holds it while running

2. Compiled vs Interpreted (Scripting) Languages

[SOURCE — COURSE MATERIAL]

Canvas 02 : Making Things Move

Sun, 12 Apr 2026 00:00:00 +0530

Part 2 of the HTML Canvas series. We build the animation loop that powers every canvas game, understand state vs render separation, and finish with a fully playable Snake game.

02 : Node.js, HTTP Servers, Express & Git

Fri, 13 Mar 2026 23:21:12 +0530

Blog Summary: 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.

1. JavaScript Runtimes

[SOURCE — COURSE MATERIAL]

ECMAScript — The Spec

ECMAScript defines the core language: var, const, let, function, Date, setTimeout, etc. It’s the specification, not the implementation.

Browser JS = ECMAScript + Browser APIs

Browser JS:
  ├── ECMAScript (core language)
  ├── setTimeout / setInterval
  ├── fetch (HTTP requests)
  ├── document (DOM access)
  └── localStorage

Node.js = ECMAScript + Backend APIs

Node.js:
  ├── ECMAScript (core language)
  ├── setTimeout
  ├── fs (file system)
  ├── http (create HTTP servers)
  └── path, crypto, os...

How Node.js Was Born

[ADDED — IMPORTANT BACKGROUND]

Canvas 03 : Gravity, Input and the Feel of Things

Wed, 15 Apr 2026 00:00:00 +0530

Part 3 of the HTML Canvas series. We add continuous physics, gravity and procedural obstacles, then build a fully playable Flappy Bird. Also covers game states and the art of making things feel right.

03 : Middlewares, Authentication, Zod & MongoDB

Fri, 13 Mar 2026 23:22:09 +0530

Blog Summary: Adds production patterns to the Express server: middleware chains, JWT-based auth, schema validation with Zod, and persistent storage with MongoDB via Mongoose.

1. Middlewares

[SOURCE — COURSE MATERIAL]

The Problem

Every route needs auth checks, input validation, logging. Repeating these in every handler is messy.

// BAD — repeated logic in every route
app.get("/kidney", (req, res) => {
  // auth check here
  // input validation here
  // actual logic here
});

app.put("/kidney", (req, res) => {
  // auth check here (copied!)
  // input validation here (copied!)
  // actual logic here
});

What Is Middleware?

A function that runs between the request and the route handler. Has access to req, res, and next.

Canvas 04 : Pixels Are Just Numbers

Thu, 16 Apr 2026 00:00:00 +0530

Part 4 of the HTML Canvas series. We get into drawImage, sprite sheets and raw pixel manipulation via getImageData. Project is full Pac-Man with a tile map, ghost AI and proper collision.

04 : DOM, Why Frontend Frameworks & MongoDB Deep Dive

Fri, 13 Mar 2026 23:23:33 +0530

Blog Summary: 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.

1. Browser JavaScript & the DOM

[SOURCE — COURSE MATERIAL]

What Is the DOM?

Document Object Model — the browser’s in-memory representation of a web page as a tree of objects.

HTML File:                    DOM Tree:
<html>                          document
  <body>                         └── html
    <div id="app">                    └── body
      <h1>Hello</h1>                       └── div#app
      <button>Click</button>                    ├── h1 ("Hello")
    </div>                                      └── button ("Click")
  </body>
</html>

JavaScript can read and modify this tree in real-time → dynamic web pages.

Canvas 05 : Fake Depth, Real Math

Mon, 20 Apr 2026 00:00:00 +0530

Final part of the HTML Canvas series. We cover ctx transforms, build a fake 3D rotating cube using projection math, then create an image-to-ASCII and live webcam-to-ASCII renderer.

05 : React Deep Dive

Fri, 13 Mar 2026 23:41:11 +0530

Blog Summary: Mastering React’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.

1. The React Mental Model

[SOURCE — COURSE MATERIAL]

Every frontend app has two things:

State              Components
─────              ──────────
The data           The view function
(what changes)     state → rendered HTML

Key insight: You never manipulate the DOM directly. You update state. React figures out the DOM.

06 : React Hooks: useEffect, useMemo, useCallback, useRef

Fri, 13 Mar 2026 23:41:51 +0530

Blog Summary: Deep dive into React’s hook system. Covers when and why each hook exists, common pitfalls, reconciliation internals, and performance optimization patterns.

1. Reconciliation — How React Updates the DOM

[SOURCE — COURSE MATERIAL]

The CA Analogy

You = developer (provide state/data)
CA (Chartered Accountant) = React reconciler
Bank statements = state
Tax filing = DOM update

React receives your updated state and calculates what changed in the DOM — it doesn’t re-create everything.

07 : Routing, Prop Drilling, Context API & Recoil

Fri, 13 Mar 2026 23:42:32 +0530

Blog Summary: Covers client-side routing for SPAs, solves the prop drilling problem with Context API, and introduces Recoil as a production-grade state management solution.

1. Routing in React

[SOURCE — COURSE MATERIAL]

Jargon First

Single Page Application (SPA):

Browser downloads ONE HTML file
React controls what to show based on URL
No full page reloads when navigating

Client-Side Bundle:

All your React code compiled into JS files
Browser downloads once, runs locally

Client-Side Routing:

08 : Mastering Redux Toolkit

Mon, 06 Apr 2026 10:12:08 +0530

Welcome to the big leagues. If you’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.

So right now, a very valid question is probably popping up in your head: “If Recoil and Context API solve my problems, why on earth am I learning Redux?”

Let’s clear that up before we write a single line of code.

09 : Custom Hooks - Write Once, Use Everywhere

Sun, 31 May 2026 14:00:00 +0530

Blog Summary: React’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.

So we have been through useState, useEffect, useMemo, useCallback, useRef. Those are all hooks React ships with. And honestly, they cover a lot.

10 : TypeScript - JavaScript But It Yells at You First

Sun, 31 May 2026 12:00:00 +0530

Blog Summary: 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.

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 .toUpperCase() on something that turned out to be undefined at runtime. Or a function expecting an object with a name 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.

Git and GitHub: The Guide That Actually Makes You Comfortable

Sat, 30 May 2026 00:00:00 +0530

Not another clone-add-commit-push walkthrough. This covers what you actually hit in real work: forking, pull requests, merge conflicts, rebase, stash, upstream setup, and how to recover when things go wrong.

Learning Neovim From Scratch

Tue, 14 Apr 2026 00:00:00 +0530

How a broken keyboard forced me into Neovim, how I went down the rabbit hole building a config from scratch, and everything I learned so you don't have to spend months figuring it out the hard way.

Learning Tmux From Scratch

Tue, 31 Mar 2026 00:44:32 +0530

A practical guide that takes you from never hearing about tmux to having it feel completely natural, with exercises, spaced repetition, and my exact config.

🐳 Complete Docker Guide: From Basic to Advanced

Sun, 22 Mar 2026 22:38:20 +0530

A Comprehensive, Self-Learning Docker Resource

📑 Table of Contents

PART 1: FOUNDATIONS

PART 2: WORKING WITH CONTAINERS

PART 3: CREATING IMAGES

PART 4: DATA PERSISTENCE

PART 5: DOCKER COMPOSE

PART 6: NETWORKING

PART 7: ADVANCED TOPICS

PART 8: REAL-WORLD PROJECTS

APPENDICES

PART 1: FOUNDATIONS

1. Introduction to Docker

1.1 What is Docker?

Simple Definition: Docker is a platform that packages applications and their dependencies into containers - portable, isolated environments that run consistently across any computer.

C++ for DSA & Competitive Programming

Wed, 18 Mar 2026 19:32:06 +0530

Complete Notes — From Zero to Solving Problems

How to use these notes: Read each section once top to bottom. Then close the notes and try to recall the patterns. Come back only to verify. Retention comes from recall, not re-reading.

1. The Mindset

This is not a general C++ course. The goal is one thing:

Algorithm idea → immediate, clean C++ implementation

Every concept in these notes exists to eliminate the friction between knowing how to solve a problem and actually writing the code. If a topic does not appear in DSA solutions, it is not here.

How I built a Human-Like Memory for My Local LLM Without Using Any Special Library

Mon, 16 Mar 2026 20:25:26 +0530

This is a very naive and beginner way to just get the thing done in the most easy and raw way possible, I won’t be using any specific library or complex code for this project, this is just an exploration code.

Ok, so I am a beginner coder, currently in my sophomore year of college, and recently I got super obsessed with running local AI models on my laptop using Ollama.

About

Fri, 13 Mar 2026 18:47:19 +0530

$ whoami

Hey, I’m Eshan, a CSE student.

This blog is basically my learning log.