Forem: gautam kumar

LangChain + Supabase Vector Store (pgvector) - A Beginner‑Friendly Guide

gautam kumar — Wed, 10 Sep 2025 18:05:32 +0000

LangChain + Supabase Vector Store (pgvector) - A Beginner‑Friendly Guide

This guide walks you through building a tiny semantic search demo using:

LangChain.js - to orchestrate embeddings and vector search
Supabase (Postgres + pgvector) - to store your vectors and query them efficiently
OpenAI embeddings - we’ll use text-embedding-3-small

By the end, you’ll be able to insert documents into a Supabase table and query similar text with just a few lines of code.

Never hardcode real API keys in code. Use environment variables. Also, do not expose your Supabase Service Role Key to the browser-keep it server-side only.

What you’ll build

We’ll index 4 short facts into a documents table and then ask a question:

“Mitochondria are made of what?”

The code will return the most similar document (spoiler: the one explaining mitochondria).

How vector search works (in plain English)

Embed text: Convert text into high‑dimensional vectors using an embedding model.
Store vectors: Save those vectors in Postgres via pgvector (the vector data type).
Search: Embed the user’s query and find nearest neighbors (cosine similarity / distance).

That’s it. No keywords, no exact string matching-semantic similarity does the heavy lifting.

Prerequisites

Node.js 18+
A Supabase project (free tier is fine)
An OpenAI API key
Basic terminal familiarity

1) Create a new project

mkdir lc-supabase-demo
cd lc-supabase-demo
npm init -y

Use ESM imports (since our code uses import). Add "type": "module" to your package.json:

{
  "name": "lc-supabase-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "node index.mjs",
    "seed": "node seed.mjs"
  }
}

2) Install dependencies

npm i @langchain/community @langchain/openai @supabase/supabase-js dotenv

@langchain/community – community integrations (Supabase vector store lives here)
@langchain/openai – OpenAI embeddings and chat models for LangChain
@supabase/supabase-js – Supabase client SDK
dotenv – load env variables from .env

3) Create your `.env` (do not commit this)

Create a file named .env in the project root:

touch .env

Put the following into .env (replace with your values):

# OpenAI
OPENAI_API_KEY=sk-your-openai-key

# Supabase
SUPABASE_URL=https://your-project-id.supabase.co
# Service role key must be kept server-side only (NEVER expose in frontend code)
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

4) Prepare your database (Supabase)

Open your Supabase dashboard -> SQL Editor. Run the SQL below to enable pgvector, create a table, index it, and add an RPC function for searching.

If you prefer UUID ids, use the first block and don’t pass custom ids when inserting. If you want to pass string ids like "1", use the Text ID variant.

4.1 Enable `pgvector`

-- The extension name is "vector"
create extension if not exists vector;

4.2 Create the `documents` table (UUID id)

create table if not exists public.documents (
  id uuid primary key default gen_random_uuid(),
  content text,
  metadata jsonb,
  embedding vector(1536)  -- matches OpenAI text-embedding-3-small
);

OR (Text ID, if you plan to insert ids like "1","2"):

create table if not exists public.documents (
  id text primary key,
  content text,
  metadata jsonb,
  embedding vector(1536)
);

1536 matches the default dimensionality for text-embedding-3-small.

4.3 Optional index for faster search (cosine)

create index if not exists documents_embedding_idx
on public.documents
using ivfflat (embedding vector_cosine_ops)
with (lists = 100);

IVFFlat speeds up ANN (approximate nearest neighbor) search. You can tune lists later.

4.4 Create the `match_documents` RPC

This function returns the top‑N most similar rows using cosine distance:

create or replace function public.match_documents(
  query_embedding vector(1536),
  match_count int default 5,
  filter jsonb default '{}'
)
returns table (
  id text,
  content text,
  metadata jsonb,
  similarity float
)
language plpgsql
as $$
begin
  return query
  select
    d.id::text,
    d.content,
    d.metadata,
    1 - (d.embedding <=> query_embedding) as similarity
  from public.documents d
  where d.metadata @> filter
  order by d.embedding <=> query_embedding  -- cosine distance (smaller is closer)
  limit match_count;
end;
$$;

If you used uuid for id, you can still cast to text in the return shape as shown.

5) Project structure

lc-supabase-demo/
├─ .env
├─ package.json
├─ startup.mjs
├─ seed.mjs
└─ index.mjs

6) `startup.mjs` - initialize clients and vector store

// startup.mjs
import "dotenv/config";
import { createClient } from "@supabase/supabase-js";
import { OpenAIEmbeddings } from "@langchain/openai";
import { SupabaseVectorStore } from "@langchain/community/vectorstores/supabase";

const {
  OPENAI_API_KEY,
  SUPABASE_URL,
  SUPABASE_SERVICE_ROLE_KEY,
} = process.env;

if (!OPENAI_API_KEY || !SUPABASE_URL || !SUPABASE_SERVICE_ROLE_KEY) {
  throw new Error("Missing required env vars. Check your .env.");
}

export const embeddings = new OpenAIEmbeddings({
  model: "text-embedding-3-small",
  apiKey: OPENAI_API_KEY,
  // Optional: dimensions: 1536, // stick to default 1536
});

export const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);

// Table and RPC function names must match what you created in SQL
const vectorStore = new SupabaseVectorStore(embeddings, {
  client: supabase,
  tableName: "documents",
  queryName: "match_documents",
});

export default vectorStore;

7) `seed.mjs` - add documents

// seed.mjs
import vectorStore from "./startup.mjs";

const doc1 = {
  pageContent: "The powerhouse of the cell is the mitochondria.", // fixed typo
  metadata: { page: 1, source: "https://example.com" },
};
const doc2 = {
  pageContent: "Buildings are commonly made out of brick.",
  metadata: { page: 2, source: "https://example.com" },
};
const doc3 = {
  pageContent: "Mitochondria membranes are rich in lipids.",
  metadata: { page: 3, source: "https://example.com" },
};
const doc4 = {
  pageContent: "The 2024 Olympics were hosted in Paris.",
  metadata: { page: 4, source: "https://example.com" },
};

const documents = [doc1, doc2, doc3, doc4];

// Option A) Let DB auto-generate ids (use UUID schema)
await vectorStore.addDocuments(documents);

// Option B) If you created a text id column and want custom ids:
// await vectorStore.addDocuments(documents, { ids: ["1", "2", "3", "4"] });

console.log("Seeded documents!");

8) `index.mjs` - run a similarity search

// index.mjs
import vectorStore from "./startup.mjs";

const query = "Mitochondria are made of what?";
const k = 1;

const results = await vectorStore.similaritySearch(query, k);
console.log(results);

/*
Example shape:
[
  {
    pageContent: 'Mitochondria membranes are rich in lipids.',
    metadata: { page: 3, source: 'https://example.com' },
    id: '...'
  }
]
*/

9) Run it

# 1) Seed the data (one-time or whenever you change documents)
npm run seed

# 2) Query
npm run dev

Troubleshooting & common gotchas

PGRST202 could not find function public.match_documents

You didn’t create the RPC, or it’s not in the public schema, or the name mismatches your queryName option.
Dimension mismatch

Ensure your table column and RPC vector dimensions match your embedding model (1536 for text-embedding-3-small).
Service role key exposure

Use SUPABASE_SERVICE_ROLE_KEY only on the server. For browser apps, create a secure backend route that proxies requests.
Inconsistent ids

If your table uses uuid, don’t pass custom ids in addDocuments. If you want to pass your own ids, define id text primary key.
Performance

Create the ivfflat index (cosine ops), and consider increasing lists and probes depending on data size and latency targets.

Why this works

LangChain.js ships a SupabaseVectorStore integration in @langchain/community, which expects a documents table and an RPC (default match_documents) to perform similarity search.
pgvector provides the vector type, distance operators, and ANN indexes for fast semantic search.
OpenAI text-embedding-3-small gives high‑quality, low‑cost embeddings with 1536 dimensions, perfect for quick demos and many production workloads.

Next steps

Add metadata filters (e.g., filter: { source: "https://example.com" }) to scope search.
Batch insert larger datasets and tweak ANN index parameters.
Swap in other embedding providers (Cohere, Voyage, local models) if needed.
Build a RAG pipeline: chunk PDFs/HTML -> store -> query -> rerank -> answer with citations.

Full source (copy‑paste friendly)

startup.mjs

import "dotenv/config";
import { createClient } from "@supabase/supabase-js";
import { OpenAIEmbeddings } from "@langchain/openai";
import { SupabaseVectorStore } from "@langchain/community/vectorstores/supabase";

const {
  OPENAI_API_KEY,
  SUPABASE_URL,
  SUPABASE_SERVICE_ROLE_KEY,
} = process.env;

if (!OPENAI_API_KEY || !SUPABASE_URL || !SUPABASE_SERVICE_ROLE_KEY) {
  throw new Error("Missing required env vars. Check your .env.");
}

export const embeddings = new OpenAIEmbeddings({
  model: "text-embedding-3-small",
  apiKey: OPENAI_API_KEY,
});

export const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);

const vectorStore = new SupabaseVectorStore(embeddings, {
  client: supabase,
  tableName: "documents",
  queryName: "match_documents",
});

export default vectorStore;

seed.mjs

import vectorStore from "./startup.mjs";

const document1 = {
  pageContent: "The powerhouse of the cell is the mitochondria.",
  metadata: { page: 1, source: "https://example.com" },
};

const document2 = {
  pageContent: "Buildings are commonly made out of brick.",
  metadata: { page: 2, source: "https://example.com" },
};

const document3 = {
  pageContent: "Mitochondria membranes are rich in lipids.",
  metadata: { page: 3, source: "https://example.com" },
};

const document4 = {
  pageContent: "The 2024 Olympics were hosted in Paris.",
  metadata: { page: 4, source: "https://example.com" },
};

const documents = [document1, document2, document3, document4];

// Option A: auto UUID
await vectorStore.addDocuments(documents);

// Option B: custom ids (if table uses text id)
// await vectorStore.addDocuments(documents, { ids: ["1", "2", "3", "4"] });

console.log("Seed complete.");

index.mjs

import vectorStore from "./startup.mjs";

const query = "Mitochondria are made of what?";
const results = await vectorStore.similaritySearch(query, 1);
console.log(results);

Security checklist

API keys live in .env, not source files.
Service role key is used only on trusted servers (Node, serverless function, etc.).
Rate limit and auth‑gate any routes that call your vector store.
Consider Row Level Security (RLS) and custom filters in match_documents to restrict result visibility.

Happy building!

How Hirenom Helps You Ace Interviews with AI-Powered Mock Sessions & Smart Resume Tools

gautam kumar — Fri, 20 Jun 2025 15:47:02 +0000

Ace Your Dream Job with Hirenom: AI-Powered Mock Interviews, Resume Builder & LinkedIn Optimization

Are you preparing for job interviews but not sure where to start? Struggling with resume writing or optimizing your LinkedIn profile? Hirenom is your one-stop platform powered by AI to help you prepare confidently, apply smartly, and stand out from the competition.

What Is Hirenom?

Hirenom.com is an AI-powered platform built for job seekers, freshers, and professionals who want to:

Practice mock interviews with real-time AI feedback
Generate ATS-friendly resumes using smart prompts
Improve their LinkedIn profiles for better recruiter visibility

AI Mock Interviews: Practice Like a Pro

Our AI Interview Assistant simulates real interview scenarios technical, behavioral, or domain-specific and provides instant feedback.

Key features:

Voice-based interviews powered by LLMs (like GPT-4)
Feedback on your responses (clarity, relevance, confidence)
Custom interview types: React, Java, System Design & more

Helps reduce real interview anxiety

Speeds up preparation with tailored questions

AI Resume Builder: Impress with Every Word

Tired of confusing resume templates? Hirenom generates professional resumes based on your:

Skills
Work experience
Job roles you’re targeting

Highlights:

Custom sections with AI-generated content
Export as PDF or Docx
Designed to pass ATS (Applicant Tracking Systems)

Try the Resume Builder →

LinkedIn Optimizer: Be More Visible to Recruiters

Recruiters search LinkedIn with very specific filters. We help you:

Optimize your headline and summary
Add relevant skills and certifications
Rephrase your experience with impact-driven language

Outcome? More visibility. Better inbound messages.

How Hirenom Works

Sign up (Free account available)
Choose a tool: Mock Interview / Resume / LinkedIn
Follow prompts or upload your data
Download, practice, and apply!

Who Should Use Hirenom?

Final-year students preparing for placements
Working professionals switching jobs
Tech enthusiasts brushing up on interviews
Freshers without professional coaching access

Why Hirenom Stands Out

AI-powered real-time coaching
Designed by engineers & hiring managers
Super simple UI no tech skills required
Used by 2,000+ users monthly & growing

Try Hirenom Today

Give yourself the best shot at your dream job with AI on your side.

Get started with Hirenom →

Final Thoughts

Whether you're a fresher or an experienced professional, consistent practice and smart tools make all the difference. Hirenom combines both so you save time, improve faster, and interview with confidence.

Follow us on Twitterfor tips, updates & career hacks!

Caching Techniques Explained: How to Speed Up Data Retrieval Efficiently

gautam kumar — Thu, 06 Mar 2025 11:28:24 +0000

Caching is a technique used to store frequently accessed data in a temporary storage location (cache) to improve performance and speed up data retrieval. Instead of fetching data from the main source (like a database or server) repeatedly, caching keeps a copy of the data closer to where it's needed.

However, since cache storage is limited, we need strategies to decide which data to keep and which to remove when the cache is full. The following are some common cache eviction policies:

1. LRU (Least Recently Used)

Concept:
LRU removes the least recently used item from the cache when it reaches its limit.

Real-Life Example:
Imagine a small bookshelf that can hold only 5 books. You keep replacing the books based on how recently you read them. If you pick a book and read it today, it stays. But if a book hasn’t been read for weeks, it gets removed first to make space for a new one.

Use Case:
LRU is used in web browsers to manage cached pages. If you visit multiple websites, but some haven’t been accessed in a while, the browser removes the oldest ones to store new ones.

Algorithm Pseudocode

Initialize an empty cache with a fixed size. Use a HashMap to store key-value pairs. Use a Doubly Linked List to maintain access order (most recent at the front). When accessing an item: - If it exists, move it to the front (most recently used). - If it's missing, add it to the front. - If the cache is full, remove the least recently used item from the back.

Node.js Express Implementation

const express = require('express');
const app = express();
const PORT = 3000;

class LRUCache {
    constructor(size) {
        this.size = size;
        this.map = new Map();
    }

    get(key) {
        if (!this.map.has(key)) return null;
        const value = this.map.get(key);
        this.map.delete(key);
        this.map.set(key, value); 
        return value;
    }

    put(key, value) {
        if (this.map.has(key)) this.map.delete(key);
        else if (this.map.size >= this.size) this.map.delete(this.map.keys().next().value); 
        this.map.set(key, value);
    }
}

const cache = new LRUCache(3);

app.get('/users/:id', (req, res) => {
    const userId = req.params.id;
    let user = cache.get(userId);

    if (!user) {
        user = { id: userId, name: `User_${userId}` };
        cache.put(userId, user);
    }

    res.json({ cachedUsers: Array.from(cache.map.values()) });
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. MRU (Most Recently Used)

Concept:
MRU removes the most recently used item first when the cache is full.

Real-Life Example:
Think of a music playlist with limited slots. You recently played a song, and now you want to add a new one. Instead of removing an old song, you remove the most recently played song because you assume it won’t be played again soon.

Use Case:
MRU is useful in cases where the older data is more valuable than the most recently used one, such as databases where the most recent queries are likely temporary.

Algorithm Pseudocode

Use a HashMap to store key-value pairs. Use a Doubly Linked List to maintain access order. When accessing an item: - If it exists, move it to the front. - If it’s missing, add it to the front. - If the cache is full, remove the most recently used item (from the front).

Node.js Express Implementation
Use Case: Session management (removing the last logged-in user first)

class MRUCache {
    constructor(size) {
        this.size = size;
        this.map = new Map();
    }

    get(key) {
        if (!this.map.has(key)) return null;
        const value = this.map.get(key);
        this.map.delete(key);
        this.map.set(key, value);
        return value;
    }

    put(key, value) {
        if (this.map.has(key)) this.map.delete(key);
        else if (this.map.size >= this.size) {
            let lastKey = Array.from(this.map.keys()).pop();
            this.map.delete(lastKey);
        }
        this.map.set(key, value);
    }
}

const sessionCache = new MRUCache(3);

app.get('/login/:user', (req, res) => {
    const user = req.params.user;
    sessionCache.put(user, { username: user, loggedInAt: new Date() });

    res.json({ activeSessions: Array.from(sessionCache.map.values()) });
});

3. LFU (Least Frequently Used)

Concept:
LFU removes the least frequently used items first. It keeps track of how often each item is used and removes the ones that are used the least.

Real-Life Example:
Imagine a cafeteria menu where some dishes are more popular than others. If space is limited, the manager removes the least ordered dishes from the menu while keeping the bestsellers.

Use Case:
LFU is used in content delivery networks (CDNs) where the most accessed web pages and media files are cached, and less accessed ones are removed.

Algorithm Pseudocode

Use a HashMap to store key-value pairs. Maintain a frequency counter for each item. When adding new items: - If the cache is full, remove the least frequently used item.

Node.js Express Implementation
Use Case: Caching most used products in an e-commerce API

class LFUCache {
    constructor(size) {
        this.size = size;
        this.map = new Map();
        this.freq = new Map();
    }

    get(key) {
        if (!this.map.has(key)) return null;
        this.freq.set(key, (this.freq.get(key) || 0) + 1);
        return this.map.get(key);
    }

    put(key, value) {
        if (this.map.size >= this.size) {
            let lfuKey = [...this.freq.entries()].reduce((a, b) => (a[1] < b[1] ? a : b))[0];
            this.map.delete(lfuKey);
            this.freq.delete(lfuKey);
        }
        this.map.set(key, value);
        this.freq.set(key, 1);
    }
}

const productCache = new LFUCache(3);

app.get('/product/:id', (req, res) => {
    const productId = req.params.id;
    let product = productCache.get(productId);

    if (!product) {
        product = { id: productId, name: `Product_${productId}` };
        productCache.put(productId, product);
    }

    res.json({ cachedProducts: Array.from(productCache.map.values()) });
});

4. FIFO (First In, First Out)

Concept:
FIFO removes the oldest item first, just like a queue.

Real-Life Example:
Think of a vending machine where snacks are loaded from the back. The first snack placed inside is the first one that comes out.

Use Case:
FIFO is commonly used in message queues and task scheduling where processing happens in the order requests arrive.

Algorithm Pseudocode

Use a queue to store items. When adding a new item: - If the cache is full, remove the oldest item (first added).

Node.js Express Implementation
Use Case: Queueing user requests in a rate limiter

class FIFOCache {
    constructor(size) {
        this.size = size;
        this.queue = [];
    }

    put(value) {
        if (this.queue.length >= this.size) this.queue.shift();
        this.queue.push(value);
    }

    getAll() {
        return this.queue;
    }
}

const requestCache = new FIFOCache(5);

app.get('/request/:id', (req, res) => {
    requestCache.put(`Request_${req.params.id}`);
    res.json({ recentRequests: requestCache.getAll() });
});

5. LIFO (Last In, First Out)

Concept:
LIFO removes the most recently added item first. It works like a stack where the last item placed is the first to be removed.

Real-Life Example:
Imagine a stack of plates in a restaurant. The waiter always places clean plates on top, and the next customer takes the topmost plate.

Use Case:
LIFO is used in undo operations in text editors, where the most recent action is undone first.

Algorithm Pseudocode

Use a stack (array) to store items. When adding a new item: - If the cache is full, remove the last added item.

Node.js Express Implementation
Use Case: Tracking the last performed API request

class LIFOCache {
    constructor(size) {
        this.size = size;
        this.stack = [];
    }

    put(value) {
        if (this.stack.length >= this.size) this.stack.pop();
        this.stack.push(value);
    }

    getLast() {
        return this.stack[this.stack.length - 1];
    }
}

const actionCache = new LIFOCache(3);

app.get('/action/:name', (req, res) => {
    actionCache.put(req.params.name);
    res.json({ lastAction: actionCache.getLast() });
});

6. RR (Round Robin)

Concept:
Round Robin cycles through items in order, giving each a fair chance before repeating.

Real-Life Example:
Imagine a queue of people waiting to ask questions in a classroom. The teacher answers one question per student before moving to the next, ensuring everyone gets a turn.

Use Case:
RR is commonly used in load balancing for servers to distribute incoming requests fairly across multiple servers.

Algorithm Pseudocode

Use a circular queue. Each request gets assigned to the next available server in order.

Node.js Express Implementation
Use Case: Load balancing incoming requests to different servers

const servers = ['Server_1', 'Server_2', 'Server_3'];
let index = 0;

app.get('/request', (req, res) => {
    const assignedServer = servers[index];
    index = (index + 1) % servers.length; 
    res.json({ assignedServer });
});

Conclusion

Each caching technique has its advantages and is useful in different scenarios. If you need fast access to recent data, LRU is a good choice. If older data is important, MRU or LFU might be better. FIFO and LIFO are useful for queues and stacks, while RR is great for fair resource distribution.
Please ignore any typos, and let me know your thoughts on this.

Understanding the DOM Tree: A Beginner's Guide to Understanding Web Page Structure

gautam kumar — Mon, 27 Jan 2025 07:43:20 +0000

The DOM (Document Object Model) is a representation of an HTML document as a tree structure. It allows programming languages (like JavaScript) to interact with, modify, and manipulate web pages dynamically.

What is the DOM Tree?

Imagine a webpage as a family tree where:

The entire document (HTML) is the root.
Different parts of the document (head, body, elements) are like branches and leaves.
Each element inside the page is a node in this tree.

How the DOM Tree Represents the HTML

Example 1: With new line and space

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Document
├── html
│   ├── head
│   │   ├── title
│   │   │   └── "My Page"
│   │   └── "\n  "
│   ├── "\n  "
│   └── body
│       ├── "\n    "
│       ├── h1
│       │   └── "Hello, World!"
│       ├── "\n    "
│       ├── p
│       │   └── "This is a paragraph."
│       └── "\n  "
└── "\n"

you can see for each new line there is a TextNodes "\n "

Example 2: Without and new line and space

<html>
  <head><title>My Page</title></head><body><h1>Hello, World!</h1><p>This is a paragraph.</p></body>
</html>

                [Document]
                    |
                <html>
                /     \\
          <head>       <body>
             |             |
          <title>         <h1>     <p>
             |              |       |
        "My Page"     "Hello,..." "This is..."

In this scenario, there are no new lines (TextNodes)

Breaking it down:

Root Node: Document – The whole page (browser creates it automatically).
Element Nodes: <html>, <head>, <body>, <h1>, <p> – Represent HTML tags.
Text Nodes: Inside elements, like "\n ", "My Page", "Hello, World!", and "This is a paragraph."
Attributes (not shown in tree): Elements can have attributes like id, class, etc.

Types of Nodes in the DOM Tree

The DOM tree consists of different types of nodes:

Document Node: Represents the entire document (document in JS).
Element Nodes: HTML elements (e.g., <body>, <h1>, <p>).
Text Nodes: Text inside elements (e.g., "\n ", Hello, World!).
Attribute Nodes: Represent element attributes (e.g., class="example").
Comment Nodes: Represent HTML comments ().

Accessing the DOM Using JavaScript

JavaScript allows us to manipulate the DOM using methods like:

1. Accessing Elements

console.log(document.documentElement); // Gets <html> element
console.log(document.body);            // Gets <body> element
console.log(document.title);           // Gets page title

2. Selecting Specific Elements

const heading = document.querySelector('h1'); // Select <h1>
console.log(heading.textContent);  // Output: Hello, World!

DOM Tree Relationships

The DOM tree has relationships between nodes:

Parent Node: A node that contains other nodes inside it.
- Example: <body> is the parent of <h1> and <p>.
Child Nodes: Nodes inside a parent node.
- Example: <h1> and <p> are children of <body>.
Sibling Nodes: Nodes at the same level under the same parent.
- Example: <h1> and <p> are siblings.

Example (Relationships)

<html>
  <head></head>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

Parent: <html>
Children: <head>, <body>
Siblings: <h1> and <p>

Get different elements

const rootElement = document.getRootNode(); // To get the root node
console.log(rootElement); // Output: #document object

const childNodesOfRoot = rootElement.childNodes;  // To get all the child nodes of any Element
console.log(childNodesOfRoot) // Output: #html object

const childNodesOfHTML = childNodesOfRoot[0].childNodes;  // To get all the child nodes of any Element
console.log(childNodesOfHTML) // Output: #head object,  #textNode("\n ") object,  #body object

Conclusion

The DOM represents the structure of an HTML document in a tree format.
JavaScript can be used to manipulate the DOM to update content dynamically.
Understanding DOM relationships helps in selecting and modifying elements easily.

How JavaScript Executes Code: A Step-by-Step Breakdown of Program Execution

gautam kumar — Sun, 26 Jan 2025 07:03:02 +0000

JavaScript is a high-level, interpreted, and just-in-time (JIT) compiled programming language that follows a process to execute code in a structured way. Understanding how JavaScript executes a program helps in writing efficient code and avoiding potential issues.

JavaScript Execution Flow Overview

When you write JavaScript code, the JavaScript engine (e.g., V8 for Chrome and Node.js, SpiderMonkey for Firefox) processes it in multiple steps:

Parsing (Syntax Analysis)
Early Error Checking
Compilation (JIT Compilation)
Execution (Execution Context Creation and Code Execution)

Step-by-Step Execution Process

Step 1: Parsing (Syntax Analysis)

The first thing the JavaScript engine does is parse the code.
It breaks the source code into tokens (small meaningful units like keywords, identifiers, etc.).
A syntax tree (AST - Abstract Syntax Tree) is generated from these tokens.
If the syntax is incorrect, an early error occurs, and execution is stopped.

Example: Syntax Error

console.log("Hello, World");
console.log("test line) // Missing quotes or closing parenthesis
console.log("last line")

If the engine finds a syntax error during parsing, the script will not run.

Step 2: Early Error Checking

Before execution, JavaScript performs early error checking, such as:
- Variable declarations and re-declarations.
- Reserved keyword usage.
- Block scoping violations (e.g., using let variables before declaration).
- Incorrect function calls.

Example: Early Error Checking

let x = 5;
let x = 10;  // Early error: 'x' has already been declared
const y;    // Missing initializer in const declaration

If an early error is detected, execution is stopped immediately, and an error is thrown.

Step 3: Compilation (JIT Compilation)

JavaScript is not purely interpreted language. Modern engines like V8 (Chrome, Node.js) and SpiderMonkey (Firefox) use Just-In-Time (JIT) Compilation to optimize code execution.

The compilation happens in two stages:

Interpreter (Baseline Compiler)
- Quickly converts code into machine code for fast startup.
Optimizer (JIT Compiler)
- Analyzes repeated code patterns and optimizes them for performance.

Thus, JavaScript has a mix of interpreted and compiled behavior, improving speed.

Step 4: Execution (Execution Context Creation and Code Execution)

Before running the program, JavaScript prepares the environment by setting up Execution Contexts, where each script runs inside a Global Execution Context (GEC).

Execution Context Creation Steps:

Creation Phase:
- The global execution context is created.
- The this keyword is assigned a value (e.g., window in the browser, global in Node.js) in the GEC (global execution context)
- Memory is allocated for variables and functions (but they are not executed yet).
Define Scope Before Execution

Before the code runs, JavaScript sets up the scope of variables, which determines their visibility and accessibility. This happens in the creation phase of the execution context.

Variables declared with var are hoisted to the top of their scope and initialized with undefined.

Variables declared with let and const are hoisted but not initialized (this results in a Temporal Dead Zone (TDZ) error if accessed before declaration).

Example: Variable Hoisting
```
console.log(a); // undefined (due to hoisting with `var`)
var a = 10;

console.log(b); // ReferenceError (due to temporal dead zone)
let b = 20;
```
Execution Phase:
- The code is executed line by line.
- Variables and function calls are resolved.
- The call stack is used to track execution.
Understanding Call Stack in Execution

JavaScript has a single-threaded execution model, meaning it can execute one command at a time using the Call Stack.

When a function is called, it gets pushed onto the stack.

When it completes execution, it is popped from the stack.

Example: Call Stack
```
function greet() {
  console.log("Hello");
}

function sayGoodbye() {
  console.log("Goodbye");
}

greet();
sayGoodbye();
```
Execution order in the call stack:
1. greet() → Push to stack → Execute → Pop
2. sayGoodbye() → Push to stack → Execute → Pop

Example: Putting It All Together

Let's consider a simple code snippet and understand how it runs:

console.log("Start");

function multiply(a, b) {
  return a * b;
}

let result = multiply(2, 3);

console.log("Result:", result);
console.log("End");

Execution Steps:

Parsing: No syntax errors, move to the next step.
Early Error Checking: No variable scope or redeclaration issues.
Compilation: Functions and variables are set in memory.
Execution:
- "Start" is printed.
- multiply(2, 3) is called.
- "Result: 6" is printed.
- "End" is printed.

Key Takeaways

Execution Phases:

JavaScript code goes through parsing, compilation, and execution.
Early error checking prevents runtime crashes.

Scope Handling:

Variables are hoisted before execution.
var vs. let/const differences affect how the code behaves.

Efficient Execution:

JavaScript's JIT compilation speeds up repeated operations.
Call stack manages function execution order.

Summary

Phase	Description
Parsing	Code is broken into tokens and checked for syntax
Early Error Check	Detects issues like re-declarations and scoping
Compilation	JIT compiles code for optimized performance
Execution	Code runs in an execution context

JavaScript Hoisting Explained in details: var, let, const, and Functions

gautam kumar — Wed, 22 Jan 2025 06:42:31 +0000

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase, before code execution.

This means you can use variables and functions before they are declared in your code.
However, only the declarations are hoisted, not the initializations.

Hoisting with `var`

When using var, the variable declaration is hoisted to the top of its scope (global or function scope), but the initialization remains in place. If you try to access the variable before initialization, it will return undefined.

Example 1: Hoisting with var

console.log(a); // undefined
var a = 10;
console.log(a); // 10

Explanation:
Behind the scenes, JavaScript interprets the code like this

var a;      // Declaration is hoisted to the top
console.log(a); // undefined (since initialization hasn't happened yet)
a = 10;     // Initialization remains in place
console.log(a); // 10

Key Points for var hoisting:

The declaration is hoisted, but the assignment is not.
Variables declared with var have function scope, meaning they are accessible anywhere inside the function they are declared in.
Accessing the variable before declaration results in undefined instead of a ReferenceError.

Hoisting with `let` and `const`

Variables declared with let and const are hoisted, but they are not initialized. Accessing them before declaration results in a ReferenceError due to the "Temporal Dead Zone (TDZ)."

Example 2: Hoisting with let and const

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;
console.log(c); // 30

Explanation:
Behind the scenes, JavaScript hoists the declarations but doesn't initialize them:

// Declarations are hoisted, but they are in the Temporal Dead Zone (TDZ)
let b;  // Hoisted, but inaccessible before initialization
const c;  // Hoisted, but inaccessible before initialization

console.log(b); // ReferenceError
b = 20;
console.log(b); // 20

Key Points for let and const hoisting:

The declaration is hoisted, but initialization is not.

Accessing them before initialization throws a ReferenceError.

Variables have block scope, meaning they are only accessible within the block {} they are defined in.

const must be initialized at the time of declaration, unlike let.

Hoisting in Function Declarations vs Function Expressions

Function Declarations (Hoisted)

Function declarations are hoisted entirely, meaning they can be called before their declaration.

sayHello(); // Works fine
function sayHello() {
  console.log("Hello!");
}

Function Expressions (Not Hoisted Fully)

Function expressions (assigned to variables) are subject to variable hoisting rules.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

In the above case, greet is hoisted, but it is treated as undefined before initialization.

Temporal Dead Zone (TDZ) with `let` and `const`

The Temporal Dead Zone (TDZ) is the period between the start of a block and when a variable is declared. During this period, any access to the variable results in a ReferenceError.

console.log(myVar); // ReferenceError
let myVar = 50;
console.log(myVar); // 50

In the above example, the area before the let myVar declaration is the TDZ, meaning you cannot access myVar before it's declared.

Comparison of `var`, `let`, and `const` in Hoisting

Feature	var	let	const
Hoisted?	Yes	Yes	Yes
Initialization?	`undefined` (default)	No (TDZ occurs)	No (TDZ occurs)
Scope	Function Scope	Block Scope	Block Scope
Reassignment?	Yes	Yes	No
Must initialize?	No	No	Yes

Conclusion

Hoisting moves variable and function declarations to the top of the scope.
var is hoisted and initialized with undefined.
let and const are hoisted but not initialized (TDZ applies).
Function declarations are hoisted, but function expressions are not fully hoisted.
Always follow best practices to write predictable and maintainable code.

4 Effective Ways to Use the

Forem: gautam kumar

LangChain + Supabase Vector Store (pgvector) - A Beginner‑Friendly Guide

LangChain + Supabase Vector Store (pgvector) - A Beginner‑Friendly Guide

What you’ll build

How vector search works (in plain English)

Prerequisites

1) Create a new project

2) Install dependencies

3) Create your .env (do not commit this)

4) Prepare your database (Supabase)

4.1 Enable pgvector

4.2 Create the documents table (UUID id)

4.3 Optional index for faster search (cosine)

4.4 Create the match_documents RPC

5) Project structure

6) startup.mjs - initialize clients and vector store

7) seed.mjs - add documents

8) index.mjs - run a similarity search

9) Run it

Troubleshooting & common gotchas

Why this works

Next steps

Full source (copy‑paste friendly)

Security checklist

How Hirenom Helps You Ace Interviews with AI-Powered Mock Sessions & Smart Resume Tools

Ace Your Dream Job with Hirenom: AI-Powered Mock Interviews, Resume Builder & LinkedIn Optimization

What Is Hirenom?

AI Mock Interviews: Practice Like a Pro

Key features:

AI Resume Builder: Impress with Every Word

Highlights:

LinkedIn Optimizer: Be More Visible to Recruiters

How Hirenom Works

Who Should Use Hirenom?

Why Hirenom Stands Out

Try Hirenom Today

Final Thoughts

Caching Techniques Explained: How to Speed Up Data Retrieval Efficiently

1. LRU (Least Recently Used)

2. MRU (Most Recently Used)

3. LFU (Least Frequently Used)

4. FIFO (First In, First Out)

5. LIFO (Last In, First Out)

6. RR (Round Robin)

Conclusion

Understanding the DOM Tree: A Beginner's Guide to Understanding Web Page Structure

What is the DOM Tree?

How the DOM Tree Represents the HTML

Breaking it down:

Types of Nodes in the DOM Tree

Accessing the DOM Using JavaScript

1. Accessing Elements

DOM Tree Relationships

Get different elements

Conclusion

How JavaScript Executes Code: A Step-by-Step Breakdown of Program Execution

JavaScript Execution Flow Overview

Step-by-Step Execution Process

Step 1: Parsing (Syntax Analysis)

Step 2: Early Error Checking

Step 3: Compilation (JIT Compilation)

Step 4: Execution (Execution Context Creation and Code Execution)

Execution Context Creation Steps:

Example: Putting It All Together

Execution Steps:

Key Takeaways

Summary

JavaScript Hoisting Explained in details: var, let, const, and Functions

Hoisting with var

Hoisting with let and const

Hoisting in Function Declarations vs Function Expressions

Temporal Dead Zone (TDZ) with let and const

Comparison of var, let, and const in Hoisting

Conclusion

3) Create your `.env` (do not commit this)

4.1 Enable `pgvector`

4.2 Create the `documents` table (UUID id)

4.4 Create the `match_documents` RPC

6) `startup.mjs` - initialize clients and vector store

7) `seed.mjs` - add documents

8) `index.mjs` - run a similarity search

Hoisting with `var`

Hoisting with `let` and `const`

Temporal Dead Zone (TDZ) with `let` and `const`

Comparison of `var`, `let`, and `const` in Hoisting