Some of my regrets from bachelors:
1. Read “Theory of Computation” (TOC) and Compiler just to pass the exam.
2. Not understanding “Comp Architecture” fully.

Anyways,

The more I read and learn about computers, more I become thankful. We are the luckiest generation because a older people have already figured out things like electricity, computers, softwares, graphics blabla… fundamentals are already figured out.

But it raises a question, what’s our purpose? well i don’t know either..
Maybe all the inventions that made the current reality possible where, I am laying on my bed with my laptop and writing this blog. Maybe, we are making small progresses in the field of AI and some years later, some other Gaurab will write directly from the brain, thanking our generation for researching in AI.

( Where is my contribution in AI ?? lmao)

UNIX: (one of the greatest step)

Unix is simply the first developed operating system which really enhanced the interactivity between humans and computers. Seeing it’s features today won’t sound exciting but at that time, it was the most exciting and most wonderful thing every developed.

About the History (5 min read):

Read the history, telegraph and starting of the shell. https://thevaluable.dev/guide-terminal-shell-console

Must watch video: best video

Video Link ——- https://www.youtube.com/watch?v=tc4ROCJYbm0&t=296s

Shell: aka command interpreter

Shell is from where you interact to the UNIX systems. ( think of it as terminal ). The terminal window in front of you contains shell, and shell allows you by use of commands to interact with your computer, hence retrieve or store data, process information and various other simple or even extremely complex tasks.

Script:

The command you write in the shell. commands we run are the prewritten small files in our file system and our shell knows which file to execute when that command/code/programme is run. like "ls" command Locates the binary file, typically at /usr/bin/ls, which then executes that binary to list the content.

The shell interacts with shared libraries, mostly the C library, and the libraries make system calls to the kernel. The kernel itself is the operating system. The shell is a piece of software that facilitates interactions between the user and the kernel.

so simply: "primary interface between you and the operating system's kernel"

Shell Script:

It is a file where we write a bunch of programmes (commands) and store in the file. That file runs it form top-bottom. eg: Creating a backup which includes maybe moving file, zipping file and saving somewhere. Best explained at : 15:00 in video.

Kernel: (the core)

Kernel is where the system calls happens. System calls is when the programme we wrote, the file we open, actually interacts with the hardware. eg: ReadFile( ), open( ), close( ) …

Figure from AT&T Archives

(Outermost is terminal you use like alaricty, kitty, gnome terminal )

Blog to read for writing Shell Scripting: https://linuxconfig.org/bash-scripting-tutorial-for-beginners#h1-bash-shell-scripting-definition

What are bash, zsh, fish?

They are the shell programmes.

What is actually different between shells?

The differences are mainly in language and user experience. (syntax, configurations made easy with fish using web etc)

Step Example of What Actually Happens

You enter: "ls"

1️⃣ Terminal sends input
2️⃣ Shell reads the command
3️⃣ Shell finds /bin/ls
4️⃣ Shell calls: system calls the functions that makes the system calls

fork()
execve("/bin/ls")

5️⃣ Kernel creates process
6️⃣ ls runs
7️⃣ Output printed to terminal

Change the SHELL you use and customize it:

1. cat ./.bashrc is the default bash file, the shell you use and likewise zsh. ./.zshrc

2. for fish you need to exit this: "~/.config/fish/config.fish"

config.fish
functions/
completions/
fish_variables

Each shell loads different startup files.

So when you switch shells, the old config is ignored.

Since your config is bash I suppose:

Steps:

a) First check your current shell : echo $SHELL

if output is : "/usr/bin/bash" Proceed to 1
else enter below command to make bash the default shell:
"chsh -s /usr/bin/bash"

Now you're default shell is bash:

1. Install these two libraries:

sudo apt-get install fortune cowsay

1. Open the file : "vim ./.bashrc " or "nano ./.bashrc"

2. inside that in the bottom put the command:

fortune | cowsay -r

1. Now everytime you open your terminal, there is something new quote and character in the terminal. its because of the fortune pipe cowsay with -r flag.

Thankyou !! Please comment or reach out to me at : "oe.gaurav@gmail.com" if there's some improvements or mistakes. Let's do some projects together, I am always willing to learn and work

Building Short, Shareable URLs in Your Application (Base62 + Drizzle ORM)

When building modern applications, long URLs can look messy — especially when sharing them on social media or messaging apps. For example, your post URL might currently look like:

http://localhost:3000/users/posts/?postid=2

or

https://yourdomain.com/users/posts/?postid=2

This exposes unnecessary route structure like /users/posts/. Instead, wouldn’t it be much cleaner if you could share something like:

https://yourdomain.com/f4sxdx

Just like GoFundMe, each post can have multiple short, unique URLs generated any time a user clicks Share.

In this guide, we’ll walk through how to build this entire system using:

• Base62 encoding for generating short codes

• Drizzle ORM

• Next.js API Routes

• PostgreSQL

🎯 What We Need to Achieve

Each short URL must:

1. Uniquely identify a post or record

2. Redirect to the correct full/original URL

3. Allow multiple different short URLs for the same post

4. Store visit history for analytics

We’ll use the popular library base62-ts:
https://www.npmjs.com/package/base62-ts

Base62 encoding converts the numeric ID from the database (1, 2, 3…) into a compact, shareable string like:
0 → 0, 10 → A, 61 → z, 125 → 21, etc.

🗄️ Step 1 — Create the Database Table

We’ll store each short link in its own row:

import { serial, varchar, integer, timestamp, jsonb } from "drizzle-orm/pg-core";
import { pgTable } from "drizzle-orm/pg-core";
import { posts } from "./posts";

export const urls = pgTable("urls", {
  id: serial("id").primaryKey(),
  short_url: varchar("short_url"),
  redirect_url: varchar("redirect_url"),
  visited_history: jsonb("visited_history").$type<string[]>().default([]),
  post_id: integer("post_id")
    .notNull()
    .references(() => posts.id, { onDelete: "cascade" }),
  created_at: timestamp("created_at").defaultNow().notNull()
});

Meaning of each column:

• short_url → The Base62 + padded string (e.g., /fundA12)

• redirect_url → The original full URL

• visited_history → Array of timestamps (useful for analytics)

• post_id → Foreign key to your posts table

• id → Auto-incremented number we will encode

⚙️ Step 2 — Generate a Short URL

When the user triggers Share, we hit a POST endpoint that:

1. Inserts a row containing the full redirect URL

2. Reads the inserted row’s ID

3. Encodes that ID using Base62

4. Pads the string to a fixed length (optional)

5. Updates the row with the generated short_url

6. Returns the new short URL

Ready-to-use API code:

import { NextRequest, NextResponse } from "next/server";
import base62 from "base62-ts";
import { db } from "@/lib/drizzle-client";
import { urls } from "@/db/schema/urls";
import { eq } from "drizzle-orm";

export async function POST(req: NextRequest) {
  const reqPostID = await req.json();
  const { postID } = reqPostID;

  if (!postID) {
    return NextResponse.json(
      { error: "Post ID is required" },
      { status: 400 }
    );
  }

  // Construct the original redirect URL
  const redirect_url = `${process.env.BASE_URL}/donate/${postID}`;

  try {
    // Insert row and get the unique auto-incremented ID
    const [row] = await db
      .insert(urls)
      .values({ redirect_url, post_id: postID })
      .returning({ insertedId: urls.id });

    const insertedId = Number(row.insertedId);

    // Encode the ID using Base62
    let encoded62 = base62.encode(insertedId);
    encoded62 = encoded62.toString();

    // Ensure a fixed length (e.g., 6 chars)
    const encoded = encoded62.padStart(6, "fund");

    // Update with the short URL
    await db
      .update(urls)
      .set({ short_url: `/${encoded}` })
      .where(eq(urls.id, insertedId));

    return NextResponse.json({
      message: "Short URL created",
      shortURL: `/${encoded}`
    });
  } catch (error) {
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Unknown error" },
      { status: 500 }
    );
  }
}

Why padStart(6, "fund")?

padStart ensures that even tiny Base62 values (like "1") become 6-character strings:

"1" → "fundf1"
"23" → "fund23"
"i8" → "fundi8"

This makes URLs consistent and harder to guess.

🔗 Step 3 — Redirect Short URL → Original URL

Your redirect route must:

1. Extract the short code from the URL

2. Look it up in the urls table

3. Log the visit time

4. Redirect the user to the real page

Example:

interface ResponseData {
  id: number;
  short_url: string | null;
  redirect_url: string | null;
  visited_history: string[] | null;
  created_at: Date;
}

export async function GET(
  req: NextRequest,
  { params }: { params: Promise<{ shortURL: string }> }
) {
  const { shortURL } = await params;

  try {
    const result: ResponseData[] = await db
      .select()
      .from(urls)
      .where(eq(urls.short_url, `/${shortURL}`));

    if (result.length === 0) {
      return NextResponse.json({ message: "No URL found" }, { status: 404 });
    }

    const row = result[0];

    // Append visit timestamp
    const updatedHistory = [
      ...(row.visited_history || []),
      new Date().toISOString()
    ];

    await db
      .update(urls)
      .set({ visited_history: updatedHistory })
      .where(eq(urls.id, row.id));

    if (!row.redirect_url) {
      return NextResponse.json(
        { message: "Invalid redirect URL" },
        { status: 500 }
      );
    }

    return NextResponse.redirect(row.redirect_url);
  } catch (error) {
    return NextResponse.json(
      { message: "Unexpected error" },
      { status: 500 }
    );
  }
}

🧠 Summary of the Redirect Logic

1. Receive the short code from the URL

2. Query the database

3. Drizzle always returns an array, even for one record

4. If found → log the visit timestamp

5. Redirect the user

If the short URL doesn’t exist, simply return a 404.

That’s where cursor-based pagination comes in, it’s faster, more stable, and widely used in APIs like Twitter or GitHub.

What Is Cursor-Based Pagination?

Instead of asking:

“Give me page 2”

We say:

“Give me the next 3 items after this record (cursor).”

Each response includes:

• data → list of results

• next_cursor → the next record’s ID

• hasNextPage → whether more data exists

This makes it more reliable when data is constantly changing.

Backend — Next.js API Route + Drizzle ORM

Let’s start with the backend logic.

We’ll handle both initial and subsequent requests from the frontend.
When no cursor is provided → fetch the first batch.
When cursor exists → fetch results after that cursor.

import { posts } from "@/db/schema";
import db from "@/lib/drizzle";
import { desc, lte } from "drizzle-orm";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);

  const cursor = Number(searchParams.get("cursor")) || null;
  const limit = Number(searchParams.get("page_size")) || 3;

  // Fetch one extra to check if more results exist
  const effectiveLimit = limit + 1;

  let hasNextPage = false;
  let next_cursor = null;

  const data = await db
    .select()
    .from(posts)
    .where(cursor ? lte(posts.id, cursor) : undefined)
    .orderBy(desc(posts.id))
    .limit(effectiveLimit);

  // If we got more data than limit, that means there’s a next page
  if (data.length > limit) {
    hasNextPage = true;
    next_cursor = data[data.length - 1].id;
    data.pop(); // remove the extra fetched item
  }

  return NextResponse.json({
    data,
    next_cursor,
    hasNextPage,
    message: "Fetched successfully",
  });
}

Backend logic summary:

• Fetch (limit + 1) rows.

• If extra data exists → hasNextPage = true.

• Remove the extra record and send the remaining ones.

• Return next_cursor for the next request.

Frontend - React (Next.js Client Component)

The frontend keeps track of:

• data

• cursor

• hasNextPage

• loading state

Each time we fetch, we append new results to the existing list.

"use client";

import axios from "axios";
import { useEffect, useState } from "react";

interface Post {
  id: number;
  title: string;
  description: string;
}

export default function Page() {
  const [data, setData] = useState<Post[]>([]);
  const [cursor, setCursor] = useState<number | null>(null);
  const [hasNextPage, setHasNextPage] = useState(false);
  const [loading, setLoading] = useState(false);

  async function fetchPosts(cursor: number | null, page_size = 3) {
    try {
      setLoading(true);
      const res = await axios.get(`/api/fetchPosts?cursor=${cursor}&page_size=${page_size}`);
      setData((prev) => [...prev, ...res.data.data]);
      setCursor(res.data.next_cursor);
      setHasNextPage(res.data.hasNextPage);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchPosts(null);
  }, []);

  return (
    <div>
      {data.map((post) => (
        <div key={post.id} className="bg-gray-100 p-3 mb-2 rounded-md">
          <h2 className="font-semibold text-lg">{post.title}</h2>
          <p className="text-sm text-gray-700">{post.description}</p>
        </div>
      ))}

      {hasNextPage && (
        <button
          disabled={loading}
          onClick={() => fetchPosts(cursor)}
          className="bg-blue-500 text-white px-4 py-2 rounded-md"
        >
          {loading ? "Loading..." : "Load More"}
        </button>
      )}
    </div>
  );
}

Frontend logic summary:

• On first render → fetch initial data.

• On “Load More” click → send the last cursor.

• Append new results to the state.

• Hide the button if there are no more pages.

Why Cursor Pagination Is Better

Cursor pagination is ideal for real-time apps like feeds, dashboards, or infinite scrolls.

Final Thoughts

Cursor-based pagination gives you both performance and consistency.
It ensures you always fetch the right data even when your dataset changes frequently.

If you’re building a product with constantly updating data, like posts, comments, or stock market lists, this approach will scale much better than traditional offset-based pagination.

💬 Have any questions or improvements? Drop a comment below!

You just need 2 patterns of implementing pagination as dev’s while starting out:

1. Off-Set based pagination — (recommended if small data)

2. Cursor based pagination — (recommended if you have large data)

Offset-based pagination

In offset-based pagination, we use SQL’s LIMIT and OFFSET to fetch only a specific chunk of records.

page_size = how many items to show per page
page_number = which page to fetch (e.g., if page_size = 10, then page 3 returns items 21–30)

The client (frontend) sends these values to the backend, like:

/posts?page_size=3&page_number=2

The backend reads those parameters and runs a query such as:

SELECT * FROM posts LIMIT 3 OFFSET 3;

Advantage:

• It allows the clients to view the total number of pages.

• It allows clients to jump to a specific page by passing the page number.

Disadvantage:

• The database looks up for (offset + limit) number of records before discarding the unwanted ones and returning the remaining.
  Hence, the query time increases drastically as the offset increase

• If an item in a previous page is deleted, data will shift forward, causing some results to be skipped.

Cursor Based Pagination

In cursor-based pagination, instead of using page numbers, we use a cursor, a unique pointer that refers to a specific record in the database.

The client sends a cursor (like a record ID) and a page_size to fetch data that comes after or before that record.

GET /api/users?cursor=12345&page_size=10

SELECT * FROM users
WHERE id <= 12345
ORDER BY id DESC
LIMIT 11;  -- (page_size + 1)

The backend fetches page_size + 1 records.
If there’s an extra record, it means there’s another page, and that extra record’s ID becomes the next_cursor, we don’t return the extra record (11th record) but we verify that another page/record is still available, store the next_cursor value and hasNextPage named boolean value.

What do we return?

// json return
{
    data: [{...data}],
    next_cursor: (11th record id) or null if no another record
    hasNextPage: True/ False (according to condition),
}

Advantage:

• Since we are fetching from a stable reference point, the addition or deletion of record will not affect the pagination window.

• The database jumps directly to the record without iterating through the unwanted data. Hence, making it more efficient. ——most important——

  Disadvantage:

• The cursor pagination doesn’t allow clients to jump to a specific page.

• Limited sort features. If the requirement is to sort based on a non-unique column (E.g. first name), it will be challenging to implement using cursor pagination. Concatenating multiple columns to get a unique key leads to slower time complexity.

  Encoded Cursor

• The encoded cursor suggests returning an encoded base64 string regardless of the underlying pagination solution.

  When using offset pagination, we encode the page_number and total_page into a base64 string and return it as a cursor to the clients.

    response: {
        // "page=3|offset=20|total_pages=30"
        next_cursor: "dcjadfaXMDdQTQ"
    }
  

  This allows the server to implement different underlying pagination solutions while providing a consistent interface to the API consumers.

    request: {
        cursor: "dcjadfaXMDdQTQ",
        page_size: 10
    }
  

Code Implementation in NextJS:

Implementing Cursor-Based Pagination in Next.js + Drizzle ORM

Pagination helps load data efficiently without fetching everything at once.
While offset-based pagination (using page and limit) is simple, it can become inefficient with large datasets.

That’s where cursor-based pagination comes in — it’s faster, more stable, and widely used in APIs like Twitter or GitHub.

What Is Cursor-Based Pagination?

Instead of asking:

“Give me page 2”

We say:

“Give me the next 3 items after this record (cursor).”

Each response includes:

• data → list of results

• next_cursor → the next record’s ID

• hasNextPage → whether more data exists

This makes it more reliable when data is constantly changing.

Backend — Next.js API Route + Drizzle ORM

Let’s start with the backend logic.

We’ll handle both initial and subsequent requests from the frontend.
When no cursor is provided → fetch the first batch.
When cursor exists → fetch results after that cursor.

import { posts } from "@/db/schema";
import db from "@/lib/drizzle";
import { desc, lte } from "drizzle-orm";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);

  const cursor = Number(searchParams.get("cursor")) || null;
  const limit = Number(searchParams.get("page_size")) || 3;

  // Fetch one extra to check if more results exist
  const effectiveLimit = limit + 1;

  let hasNextPage = false;
  let next_cursor = null;

  const data = await db
    .select()
    .from(posts)
    .where(cursor ? lte(posts.id, cursor) : undefined)
    .orderBy(desc(posts.id))
    .limit(effectiveLimit);

  // If we got more data than limit, that means there’s a next page
  if (data.length > limit) {
    hasNextPage = true;
    next_cursor = data[data.length - 1].id;
    data.pop(); // remove the extra fetched item
  }

  return NextResponse.json({
    data,
    next_cursor,
    hasNextPage,
    message: "Fetched successfully",
  });
}

Backend logic summary:

• Fetch (limit + 1) rows.

• If extra data exists → hasNextPage = true.

• Remove the extra record and send the remaining ones.

• Return next_cursor for the next request.

Frontend — React (Next.js Client Component)

The frontend keeps track of:

• data

• cursor

• hasNextPage

• loading state

Each time we fetch, we append new results to the existing list.

"use client";

import axios from "axios";
import { useEffect, useState } from "react";

interface Post {
  id: number;
  title: string;
  description: string;
}

export default function Page() {
  const [data, setData] = useState<Post[]>([]);
  const [cursor, setCursor] = useState<number | null>(null);
  const [hasNextPage, setHasNextPage] = useState(false);
  const [loading, setLoading] = useState(false);

  async function fetchPosts(cursor: number | null, page_size = 3) {
    try {
      setLoading(true);
      const res = await axios.get(`/api/fetchPosts?cursor=${cursor}&page_size=${page_size}`);
      setData((prev) => [...prev, ...res.data.data]);
      setCursor(res.data.next_cursor);
      setHasNextPage(res.data.hasNextPage);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchPosts(null);
  }, []);

  return (
    <div>
      {data.map((post) => (
        <div key={post.id} className="bg-gray-100 p-3 mb-2 rounded-md">
          <h2 className="font-semibold text-lg">{post.title}</h2>
          <p className="text-sm text-gray-700">{post.description}</p>
        </div>
      ))}

      {hasNextPage && (
        <button
          disabled={loading}
          onClick={() => fetchPosts(cursor)}
          className="bg-blue-500 text-white px-4 py-2 rounded-md"
        >
          {loading ? "Loading..." : "Load More"}
        </button>
      )}
    </div>
  );
}

Frontend logic summary:

• On first render → fetch initial data.

• On “Load More” click → send the last cursor.

• Append new results to the state.

• Hide the button if there are no more pages.

Why Cursor Pagination Is Better

Cursor pagination is ideal for real-time apps like feeds, dashboards, or infinite scrolls.

Final Thoughts

Cursor-based pagination gives you both performance and consistency.
It ensures you always fetch the right data even when your dataset changes frequently.

If you’re building a product with constantly updating data — like posts, comments, or stock market lists —
this approach will scale much better than traditional offset-based pagination.

Your browser needs to find the IP address of google.com so it can connect to the web server.
DNS is the system that helps it find that IP.

⚙️ Step 1: Browser & OS Local Cache

When you type google.com:

1. Your browser first checks its own cache (recently visited sites).

2. If not found, your operating system checks its local DNS cache (for example, your /etc/hosts file on Linux or Windows DNS resolver cache).

If found → done (no network query needed).
If not found → move to the next level.

⚙️ Step 2: The Resolver (Usually Your ISP or a Custom One)

Your computer sends the DNS query (like “What is the IP of google.com?”) to a recursive resolver.
This is typically:

• your ISP’s DNS resolver, or

• a public resolver like 8.8.8.8 (Google DNS) or 1.1.1.1 (Cloudflare DNS).

This resolver’s job is to find the answer for you — it does all the hard work by asking other DNS servers in the hierarchy.

If it already has the answer cached → returns it immediately.

If not cached → it starts the DNS resolution process below.

⚙️ Step 3: Root DNS Servers

The resolver sends a query to a Root DNS Server:

“Hey, where can I find info about .com domains?”

Root servers don’t know about individual domains like google.com,
but they do know where the Top-Level Domain (TLD) servers are.

So the root server replies:

“I don’t know google.com, but here’s a list of .com TLD name servers.”

It returns a referral to the .com TLD servers.

⚙️ Step 4: TLD (Top-Level Domain) Name Servers

Now, the resolver contacts one of the .com TLD servers:

“Hey, I need info about google.com — who’s the authoritative server for it?”

The TLD server replies:

“The authoritative name servers for google.com are ns1.google.com, ns2.google.com, etc.”

This is another referral — now we know where the actual zone for google.com is managed.

⚙️ Step 5: Authoritative DNS Server

Finally, the resolver asks Google’s authoritative name server:

“What is the IP address (A record) for google.com?”

This server owns the actual DNS records for google.com.
It replies with something like:

“google.com → 142.250.190.14”

⚙️ Step 6: Returning the Result

The recursive resolver now:

• Stores this result in its cache for some time (defined by the TTL).

• Sends the IP address back to your computer.

Your OS also caches it for a while.
Then your browser uses that IP to make an HTTP(S) request to https://142.250.190.14.

Short Hierarchy:

Question :
Why Caching Matters and what happens when cached?

Because of all following steps below, caching is critical for performance:

• Browser and OS caches: avoid repeated lookups.

• Resolver caches: millions of users share results.

• Each record has a TTL (time-to-live) after which it expires and must be re-fetched.

From above ^^ to below \

“It is basicaly a link preview, like you get a small card like view of the link that you are sharing”

Case*: If you are asked to improve the* SEO of your website, you will have to provide specific metadata and other dynamic meta tags for better results. Open Graph makes it possible for you by providing this link preview.

(Notice the og prefix added to each of them. This ‘og is what helps Open Graph protocol know that the developer wants to convert his webpage into a graph object.)

• og:title - The title of your object as it should appear within the graph.

• og:image - An image URL which should represent your object within the graph.

• og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.

• og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

• og:description - A one to two sentence description of your object.

#Example code I wrote for my portfolio website
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    //compare this to the attached image
    <meta property="og:title" content="Gaurab's portfolio website" />
    <meta property="og:description" content="By clicking onto the website you know a little about me, my life and my projects. Let's make some projects together !!"/>
    <meta property="og:image" content="https://avatars.githubusercontent.com/u/41935487?v=4" />
    <meta property="og:url" content="https://gaurabme.vercel.app/" />
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Gaurab's portfolio website" />
    <meta name="twitter:description" content="By clicking onto the website you know a little about me, my life and my projects. Let's make some projects together !!" />
    <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/41935487?v=4" />
// twitter has it's own way of writing, see on it's docs 

    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link href="/src/style.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gaurab Wagle</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Compare: <meta property="og:title" content="Gaurab's portfolio website" /> to the title that is showing

For a better understanding please refer to this official website and get detailed understanding.
I will further upload the blog about writing the dynamic og tags because as our app grows bigger, we need dynamic descriptions.

Click: Open Graph Protocol, og, official website

Like/Comment if you want to know how to setup dynamic og’s for different pages.

Image: A photo representation of an empty classroom

Context: Nepal, Kathmandu University

As a frustrated Computer Science student at KU, I can say that most university classes are a waste of time and energy. Few students actually pay attention to the teacher.I wake up early, travel a long distance,6 km(3 km of walk) only to learn very little from under-qualified professors in terms of the thinking and teaching capabilities. Education is free on internet, I find better resources for free on the internet like YouTube, online sites, and ChatGPT.I believe only 10% of my success until now is due to my teachers.

The current trend is gradually shifting, and I believe that in the next 3-5 years, colleges in Nepal will begin to close due to brain drain after high school. The primary reason for this brain drain is the outdated curriculum in Nepal, as a four-year degree holds little relevance in the real world.

In the near future, universities like KU, TU, and PU may experience this issue. As a result, there is increasing interest in colleges affiliated with foreign universities because they offer a 3 year( shorter duration ) course with concise syllabus focused on job, skill and readiness and internships upon completion.

As a concluding remark, I strongly advise against studying in Nepal and wasting your 4 year time period for any programmes in bachelors, particularly the four-year engineering program. My question to the readers is:

What percentage of students would attend university classes if there wasn't an attendance requirement of 80%?
Would you still attend your classes????

It's often said that female dogs exhibit greater loyalty towards their home and owners. We took good care of her. At the time, I was in 5th or 6th grade, and it was then that I began to develop a feeling for dogs. She gave birth right beside our house, which was convenient as there was a good spot for her to deliver the puppies – an old bed that provided warmth. When I first saw the litter of seven, they were smaller than average mice. For about two months, they grew, developed fur, opened their eyes, and came out of the bed. Realizing that it would be impossible for anyone to take care of all eight of them, Sabin, the owner of the attached house, decided to remove the bed and clean the area. We had a bench underneath was a small warm spot for her to live, which my dad had designed for himself to enjoy coffee, admiring the garden view. All eight puppies began to reside under that bench. For a month, we took care of them all. These black and white pups began to explore the house garden and even came indoors. They developed a good habit of going far away from the house to poop, away from their mother (Pintu). Among them, there were three males and four females. Unfortunately, being born female meant there was no hope of them finding adoptive homes.

One dark day, the decision was made to move all of them. It was a rainy night, and as I held the light and umbrella, Sabin dai carried the box containing the seven puppies. Meanwhile, Dai, who lived in the neighbouring rented house, tied the rope to Pintu. Together, we went towards the jungle to release them. Lightning and the rain poured down relentlessly, creating a scene that now feels of a movie. We traveled about 4 km's away from home into the jungle, where we unboxed the pups and unleashed the mother. My last glimpse of them was seeing those tiny puppies coming out from the box into the rain, scattering around the area in that dark rainy night. The mother looked at me with a sense of helplessness, I still remember vividly. Deciding to return home from a different route, each step heavier than the last, stumbling along the way. The rain fell relentlessly, as if the sky itself was shedding tears of pain. Pintu followed us along the jungle road, but we threw stones at her to prevent her from following us further.

That day, we left a mother stranded alone in the jungle with her seven little innocent puppies, who were scattering from the box. She never imagined such a fate for her family. Whom to handle? My owners are going a different way, and my kids are scattered in a jungle on a dark, rainy night. Helpless and scared of other animals.

Who would've guessed that same night, Pintu would bring those kids back home? She grabbed the puppies by their neck and carried them all the way to our house. She managed to carry four of them through the night. At one point, she left one about two-thirds of the way home, then went back for the others, one by one. The next morning, we learned from my sister that one of the males had been adopted by her friend, who lived near the area where they were left. The other four puppies made it back home. We were amazed and didn't know what to do next after witnessing such an incredible feat of love and determination.

All of them used to reside under our bench, and one night, there was an attack by jackals. I could hear Pintu's cries from inside, but I was too small to fight out, and it seemed too dangerous. Little did I know, it was a jackal attack. The next morning, we found all the others dead, except for the mother, Pintu, and the current dog we own. The jackals had eaten the bodies of the small pups, leaving only their heads behind. I suspect the others were also killed by jackals. Fortunately, Pintu 2 (our current dog) survived. It had hidden under a few iron window frames that were kept in the neighbouring house, as they were doing some construction. I still remember seeing Pintu 2 there, beside those steel bars, staying up all night.

From 8 down to just 2. We made the decision to keep the surviving one, whom we named after his mother. In this story, I have called him Pintu 2, which is our current dog. He received all the love and care, milk from his mother, and he grew up to be a beautiful and healthy dog.
Pintu helped his mother overcome the dark memories of her six other children and the difficult phase she had gone through.

One day, the mother fell ill, and it was truly terrible, I mean, very dreadful. It was a few months after she had gone through those darkest times of her life. She developed a strange wound in her ear region, which spread all over her body. The smell was so strong that we could detect it from the road when she came home to feed the baby. Insects covered her body. Now, my mother wasn't much of a pet lover. She wouldn't allow the mother dog inside the house because she feared it would transfer the wound and insects to Pintu 2, and the whole house would get infected, and so did I. I could see the pain, but I was helpless. To ease her suffering, we even gave her poison mixed with milk. It was painful to witness others throwing kerosene at her. I could see her crying day and night for nearly a month ++, crying until her last breath. After one or two months, she passed away far from home. She never returned to our house after we stopped letting her in those first few times.
She didn't want to burden us with the difficulty of handling her death. Oh dear, how deeply I feel sorry for your pain, my love.

We didn't know where you came from, didn’t know where you lived before that, didn’t know where you went after that disease, and didn’t know the place you died. Remembering your pain, your cries all day and all night, I hate myself.

I hope you’re watching this and your soul is happy seeing us taking care of Pintu. I have no words, I am sorry, and I ask for your forgiveness, all of us. All those things we did were so hard on you. Remembering you now, we have Pintu in our house; we've given him the same name, he is a living reminder of your presence, a part of you.

The pictures are of Pintu, who has braved through it all and truly deserves all the love and happiness in the world. <3 💛❤️

A virtual environment is a Python environment such that the Python interpreter, libraries and scripts installed into it are isolated from those installed in other virtual environments, and (by default) any libraries installed in a “system” Python, i.e., one which is installed as part of your operating system.

eg: You might need a python version of 10.5 for your project then you will install that python version by making a virtual environment. When you use the vir env you will be using 10.5 version but when you are outside of the vir env you will be using the other version(latest) maybe 20.1 ...

Make sure to install the following things:

• Python
  https://www.python.org/downloads/

• pip, which is a Python package installer.

•   python --version  //to see python version
    python -m ensurepip --upgrade // to install pip
  

For Linux:

python3 -m venv myenv
source myenv/bin/activate

"myenv" is the name of the virtual environment folder.
Source is how we activate the vir env we created.

For Windows:

python3 -m venv myenv
myenv\Scripts\activate

The code we put are just the folders inside of the myenv folder. You can check them.

C://User/Gaurab/Desktop : 
(myenv)

Once activated, your terminal prompt will show (myenv) to indicate the virtual environment is active as shown above ^^.

Deactivate:

deactivate

Just type deactivate and you will see the (myenv) disappear and you're out of the virtual environment.

Some tips:
Always activate the virtual environment before installing any packages. This keeps your project’s dependencies isolated.

• Install packages using pip after activating the environment:

    pip install package-name
  

• Keep your virtual environment folder out of version control (e.g., add myenv/ to .gitignore).

• Deactivate the environment when you're done working by running:

    deactivate
  

• Use requirements.txt to list your project's dependencies:

    pip freeze > requirements.txt
  

  Others can install these dependencies using:

    pip install -r requirements.txt
  

• Avoid using sudo with pip install inside a virtual environment; it's unnecessary and can cause issues.