Nuggets

Data Structures

Bubble Sort

A simple sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in wrong order. The process continues until no more swaps are needed, meaning the list is sorted.

Try it here →

Selection Sort

A sorting algorithm that divides the list into two parts: sorted and unsorted. It repeatedly finds the minimum element from the unsorted part and puts it at the end of the sorted part.

Try it here →

Circular Buffer

A fixed-size data structure that uses a single, continuous block of memory. When the buffer is full, new data overwrites the oldest data. It's efficient for handling data streams where only the most recent data is needed.

Try it here →

Binary Tree

A tree data structure where each node has at most two children, referred to as left child and right child. Each node contains a value and pointers to its children. It's used for hierarchical data representation.

Try it here →

Binary Search Tree

A binary tree with a special property: for each node, all values in its left subtree are less than the node's value, and all values in its right subtree are greater. This property enables efficient searching, insertion, and deletion.

Try it here →

Left Skewed Binary Tree

A binary tree where each node has only a left child, creating a structure that extends only to the left. This results in a linear structure similar to a linked list, with each node pointing only to its left child.

Try it here →

Right Skewed Binary Tree

A binary tree where each node has only a right child, creating a structure that extends only to the right. Like the left-skewed tree, it forms a linear structure but extends in the opposite direction.

Try it here →

Adjacency Matrix

A 2D array representation of a graph where each cell [i][j] indicates whether there is an edge between vertex i and vertex j. It uses 1 for connected vertices and 0 for disconnected ones, providing O(1) edge lookup time.

Try it here →

Adjacency List

A graph representation where each vertex maintains a list of its adjacent vertices. It's more space-efficient than an adjacency matrix for sparse graphs, as it only stores existing connections.

Try it here →

Depth First Search (DFS)

A graph traversal algorithm that explores as far as possible along each branch before backtracking. It uses a stack (either explicit or implicit through recursion) to keep track of vertices to visit.

Try it here →

Breadth First Search (BFS)

A graph traversal algorithm that explores all vertices at the present depth before moving to vertices at the next depth level. It uses a queue to keep track of vertices to visit, ensuring level-by-level exploration.

Try it here →

Frontend

Why Array as useEffect Dependency is a Bad Idea

Using an array directly as a dependency in useEffect can cause an infinite loop because a new array reference is created on every render.

import { useEffect, useMemo } from "react";

const Component = () => {
  const array = useMemo(() => [1, 2, 3], []); // Memoize the array

  useEffect(() => {
    console.log("This runs only when the array changes.");
  }, [array]);

  return <div>Check the console!</div>;
};

Template Literal Types from Enums in TypeScript

Using template literal types with enums allows you to create a union type of its values dynamically.

enum Status {
  PENDING = "PENDING",
  APPROVED = "APPROVED",
  REJECTED = "REJECTED"
}

type StatusType = `${Status}`; // Equivalent to "PENDING" | "APPROVED" | "REJECTED"

const updateStatus = (status: StatusType) => {
  console.log(`Updating status to: ${status}`);
};

updateStatus("APPROVED"); // ✅ Valid
updateStatus("DENIED"); // ❌ Type error

Node Js

Interactive V8 Engine Visualizer

A tool that helps you see how the V8 JavaScript engine works. It shows how V8 stores objects and arrays in memory, and explains optimizations like Hidden Classes and Inline Caching.

Try it here →

Operating System

Visualizing Process States

An interactive simulation showing how the OS manages process state transitions in response to various events. Part of a project to visualize concepts from Operating Systems.

Try it here →

Visualizing the fork() System Call

An interactive simulation demonstrating how the fork() system call creates new processes by duplicating the current one, including parent and child process behavior.

Try it here →