DEV Community: BhargavMantha

The Secret to Perfect Load Balancing: How I Combined Two ISPs with pfSense and ₹0 in New Hardware

BhargavMantha — Mon, 02 Feb 2026 01:37:44 +0000

Last week, my internet went down during a critical work call. Again.

I have two ISP connections at home—Mach 1 (500 Mbps) and Airtel (200 Mbps)—but I was only using one at a time. When Mach 1 dropped, I'd manually switch cables to Airtel like a caveman. There had to be a better way.

48 hours later, I had both connections load-balanced through a single router, with automatic failover. Total cost? ₹0—I used hardware I already had.

The Problem

India's internet infrastructure is... unpredictable. My Mach 1 fiber is blazing fast but drops once a week. Airtel is rock-solid but slower. I wanted:

Automatic failover — If one ISP dies, traffic shifts instantly
Load balancing — Use both connections simultaneously
Single network — One SSID, one LAN, no manual switching

Consumer "dual-WAN" routers exist, but they're either expensive (₹15,000+) or garbage. I needed something proper.

The Hardware I Had

Here's the thing about homelabs—you accumulate hardware. In my drawer:

Device	Specs	Original Purpose
Dell Latitude E7250	i5-5300U, 8GB RAM, 256GB SSD	Old work laptop
TP-Link SG105E	5-port Gigabit Managed Switch	Gathering dust
Tenda AC10	Dual-band router	Mach 1's router
Airtel GPON	Fiber ONT	Airtel's modem

Total new purchases: ₹0.

The Dell laptop has only one Ethernet port. Most guides would say "buy a USB NIC" or "get a proper router." I said: "VLANs."

The Architecture

The magic is using 802.1Q VLANs to carry multiple networks over a single cable. The TP-Link SG105E—a ₹2,000 switch—supports this.

One cable to the Dell laptop carries three isolated networks:

VLAN 10: Mach 1 WAN (PPPoE)
VLAN 20: Airtel WAN (DHCP)
VLAN 30: My home LAN

Step 1: The Switch Configuration

The SG105E has a web interface for VLAN configuration. Here's what I set up:

802.1Q VLAN Table

VLAN ID	Name	Tagged Ports	Untagged Ports
10	WAN1	Port 1	Port 2
20	WAN2	Port 1	Port 3
30	LAN	Port 1	Port 4, 5

PVID Settings

Port	PVID	Purpose
1	1	Trunk (all VLANs tagged)
2	10	Mach 1 ingress
3	20	Airtel ingress
4	30	LAN devices
5	30	LAN devices

This took 10 minutes. The switch does the packet tagging; pfSense sees three separate interfaces over one wire.

Step 2: Installing pfSense

I grabbed the Netgate Installer (pfSense's official installer) and wrote it to a USB drive:

gunzip -c netgate-installer-amd64.iso.gz | sudo dd of=/dev/sdf bs=4M status=progress

One snag: the Dell E7250 has an Intel WiFi card that crashes FreeBSD's kernel. The fix? Disable WiFi in BIOS. This is a router—it doesn't need WiFi.

The installation was straightforward until interface assignment. When pfSense asked about VLANs, I created:

Parent interface: em0
VLAN 10 → em0.10 (WAN)
VLAN 20 → em0.20 (WAN2)  
VLAN 30 → em0.30 (LAN)

Step 3: Configuring Dual-WAN

With pfSense installed and interfaces assigned, configuration happens in the web GUI.

WAN Interface (Mach 1)

Mach 1 uses PPPoE authentication:

Setting	Value
IPv4 Type	PPPoE
Username	`your_username`
Password	`your_password`

WAN2 Interface (Airtel)

Airtel is simpler—just DHCP:

Setting	Value
IPv4 Type	DHCP

The Gateway Group

This is where the magic happens. Under System → Routing → Gateway Groups, I created:

Gateway	Tier
WAN_DHCP (Mach 1)	Tier 1
WAN2_DHCP (Airtel)	Tier 1

Both at Tier 1 = Load Balancing. Traffic distributes across both ISPs.

If I wanted pure failover (Airtel only when Mach 1 dies), I'd set Airtel to Tier 2.

Applying to LAN Traffic

Finally, edit the default LAN firewall rule and set the Gateway to LoadBalance_WAN.

The Result

Status → Gateways

| Gateway    | IP          | RTT     | Loss | Status |
|------------|-------------|---------|------|--------|
| WAN_DHCP   | 192.168.0.1 | 0.843ms | 0.0% | Online |
| WAN2_DHCP  | 192.168.1.1 | 0.638ms | 0.0% | Online |

Both gateways online. Both ISPs active. One network.

What I Learned

Lesson 1: VLANs are underrated.
A single Ethernet port + a cheap managed switch = infinite virtual interfaces. Most "you need more NICs" advice is wrong.

Lesson 2: Load balancing ≠ Bonding.

This confused me initially:

Type	What Happens	Speed Test Result
Load Balancing	Each connection uses one WAN	~500 Mbps OR ~200 Mbps
True Bonding	Single connection uses both	~700 Mbps combined

pfSense does load balancing—great for multiple devices/streams, but a single speed test won't show 700 Mbps. True bonding requires MPTCP and a cloud aggregation server (Speedify, OpenMPTCProuter).

Lesson 3: Gateway monitoring is critical.

Set the Trigger Level to "Packet Loss or High Latency." Without this, pfSense won't detect a degraded-but-not-dead connection.

The Financials

Item	Cost
Dell E7250	₹0 (already owned)
TP-Link SG105E	₹0 (already owned)
USB Drive	₹0 (already owned)
Total	₹0

Monthly benefit:

No more dropped calls during ISP outages
Both connections utilized instead of one sitting idle
Professional-grade routing without professional-grade prices

Current Setup

The Dell E7250 now runs 24/7 as my home router. Power draw is ~15W idle. It handles:

Dual-WAN load balancing + failover
NAT for 30+ devices
Firewall rules
Future: VPN server, traffic shaping, pfBlockerNG

The laptop screen stays closed. It's headless, fanless (at idle), and silent.

Quick Reference: Complete Port Map

FINAL SETUP

Discussion

Have you set up dual-WAN at home? Did you go the pfSense/OPNsense route, or use a commercial solution? What's your ISP redundancy story?

Drop a comment below—I'd love to hear how others are solving the "Indian ISP lottery" problem. 👇

I Exposed My $70 Kubernetes Cluster to the Internet (Without Opening a Single Port)

BhargavMantha — Sun, 11 Jan 2026 01:28:12 +0000

In my previous post, I talked about how I built a 3-node Kubernetes cluster for ₹6,000 ($70) to host my AI models and home lab. It worked great, but there was one ugly problem: Networking.

The Problem
Accessing my services meant one of two things:

Locally: Typing http://192.168.0.173:30300 for Grafana. Ugly, but works.
Remotely: Setting up WireGuard or Tailscale. Secure, but I can't ask my friends to install a VPN client just to see a dashboard or chat with my LLM.
I considered opening ports on my router (Port Forwarding) pointing to an Nginx Proxy Manager. Bad idea. Opening ports to the internet is like leaving your front door unlocked because you lost your keys. I didn't want to wake up to a crypto-miner running on my GTX 1070 Ti.

I needed a solution that was:

Secure (No open ports).
Free (I'm still on a budget).
Public (Accessible via subdomain.domain.com).

Enter Cloudflare Tunnel.

What I Did

The Zero Trust Switch
I realized Cloudflare provides a "Zero Trust" plan that is completely free for up to 50 users. This includes Tunnels. A tunnel creates an outbound-only connection from your cluster to Cloudflare's edge network. Traffic flows out to Cloudflare, then back in to your services. No inbound ports needed on my router.
DNS Migration
My domain (bhargavmantha.dev) was hosting a static site on Netlify. To use Tunnels effectively, I needed Cloudflare to manage the DNS.

Old way: Squarespace Registrar -> Netlify DNS.
New way: Squarespace Registrar -> Cloudflare DNS -> Netlify (for main site) + Tunnel (for subdomains).

I migrated my nameservers to Cloudflare, which automatically imported my existing records. Zero downtime.

Deploying cloudflared to K8s Instead of running a binary on my variety of nodes (Pop!_OS desktop, Ubuntu laptop), I deployed the tunnel connector as a native Kubernetes deployment.

I created a simple manifest
cloudflared.yaml
that takes a token (from the Cloudflare dashboard) and runs 2 replicas for high availability.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: cloudflared
spec:
  replicas: 2
  template:
    spec:
      containers:
      - name: cloudflared
        image: cloudflare/cloudflared:latest
        args:
        - tunnel
        - --no-autoupdate
        - run
        - --token
        - $(TUNNEL_TOKEN)

Now, my cluster dials out to Cloudflare automatically. If I reboot a node, K8s reschedules the pod, and the tunnel reconnects instantly.

Goodbye NodePorts, Hello Subdomains This is the magic part. In the Cloudflare Dashboard (Network > Tunnels), I simply mapped public hostnames to my internal ClusterIPs (or NodePorts).

grafana.bhargavmantha.dev -> http://192.168.0.173:30300
ollama.bhargavmantha.dev -> http://192.168.0.173:31434
uptime.bhargavmantha.dev -> http://192.168.0.173:30001

SSL certificates are handled automatically by Cloudflare at the edge. I get the padlock icon without setting up cert-manager or LetsEncrypt inside my cluster.

What I Learned

Lesson 1: Ingress Controllers are Overkill for Homelabs. I spent days trying to get Traefik or Nginx Ingress to play nice with MetalLB on a bare-metal cluster. Cloudflare Tunnel bypassed that entire layer. I don't need an Ingress Controller; I just need a connector.

Lesson 2: Security can be convenient. By putting everything behind Cloudflare, I can also add an "Access Application" layer later—meaning I can put grafana.bhargavmantha.dev behind a Google/GitHub logic screen, adding 2FA to apps that don't even support it natively.

Current State
Now my cheap K8s cluster feels like a production cloud environment.

Publicly Accessible: Grafana, Uptime Kuma, and Open WebUI.
Cost: still $0 (Cloudflare Free Tier).
Security: 0 Open Ports.

How I Quit the Cloud and Built a 3-Node GPU K8s Cluster for ₹6,000

BhargavMantha — Wed, 24 Dec 2025 03:03:05 +0000

Last month, I realized I was paying ₹2,500/month across various cloud services—photo backups, file sync, a VPN, and a small VM for side projects.

When I added up the annual cost and compared it to the price of a used ThinkPad on OLX, the math was obvious. Three weeks later, I had a 3-node Kubernetes cluster running in my living room.

The Problem

I wanted the real Kubernetes experience—not Minikube, not Docker Compose pretending to be orchestration. I needed something that could:

Run GPU workloads for local LLMs (Ollama).
Host my photo library (Immich).
Sync files and run Home Assistant.

Every "budget homelab" guide I found assumed you'd drop ₹50,000+ on a NUC cluster. I had a laptop, an old desktop with a gaming GPU, and about ₹15,000 to spend.

What I Did

1. The Hardware Hustle

I started with what I had. My desktop had a GTX 1070 Ti collecting dust. My old ThinkPad E14 (16GB RAM, i5) was sitting in a drawer. The only purchase was a ₹6,000 used laptop with a GTX 1650 Ti from a local seller—decent specs, terrible screen, perfect for a headless node.

Total hardware cost: ₹6,000.

2. K3s over K8s

Full Kubernetes would have eaten my RAM alive. K3s gave me 90% of the functionality at ~20% of the resource overhead. The control plane runs on the ThinkPad, which also hosts lightweight services: Grafana, Prometheus, Home Assistant, and PostgreSQL. Installation was literally one command per node.

3. The GPU Scheduling "Hack"

I wanted to run Ollama on the 1070 Ti, but I also wanted to use that desktop for work/gaming. The solution? A simple script that joins/leaves the K3s cluster on demand.

# athena.sh
./athena.sh gpu claim   # Joins cluster, pulls workloads
./athena.sh gpu release # Drains node, returns GPU to OS

The cluster adapts, pods reschedule, and life continues.

4. NodePort Everything

I wasted two days trying to get proper pod networking across nodes before accepting reality: my home network and cheap router weren't going to play nice with complex Ingress. I switched to NodePort services with a 30xxx range:

Prometheus: :30900
Grafana: :30300
Ollama: :31434

Not elegant? Maybe. Reliable? Absolutely.

What I Learned

Lesson 1: Scope is everything.
My first attempt tried to replicate a production setup (Traefik, cert-manager, etc.). It was fragile. The working version is simpler: hostPath volumes instead of a storage provisioner, and NodePorts instead of ingress. "Production-grade" and "Actually usable at home" are different goals.

Lesson 2: GPUs in K8s are easier than they look.
Install the NVIDIA device plugin, add a RuntimeClass, and set resource limits. The hard part isn't the tech; it's the workflow of sharing hardware between "Work" and "Cluster."

Current State

The cluster now runs 25+ services:

AI: Ollama + Open WebUI
Media/Files: Immich, Nextcloud, Jellyfin
Home: Home Assistant
Stack: Prometheus, Grafana, Postgres

The Financials:

Power Draw: ~80W idle / 200W load.
Monthly Electricity: ~₹400.
Annual Savings: ~₹25,000 (and I own my data).

Discussion

Have you built a homelab on a budget? What tradeoffs did you make between "doing it right" and "getting it done"? Let me know in the comments!

CQRS

BhargavMantha — Thu, 04 Apr 2024 18:08:30 +0000

CQRS Like You Were a 5-Year-Old

Imagine you have a toy box. When you want to play with your toys, you ask your mom to open the toy box and give you the toys you want. That's like asking a question, or in computer terms, a query. You're not changing anything, just looking at what toys you have.

Now, imagine after playing, you decide to put some of your toys back in a different way. Maybe you're putting them in order of size or grouping them by type. This time, you're not just looking; you're changing how things are arranged. In computer terms, that's like a command because you're telling the toy box (or a computer system) to change something.

CQRS stands for Command Query Responsibility Segregation.

It's a fancy way of saying that when we use computers or apps, there are two main things we can do: look at stuff (queries) and change stuff (commands). CQRS is like having two separate toy boxes: one for looking at toys and another for deciding how to organize them. This way, it's easier and faster to either find your toys or organize them, because you're not mixing up looking and changing toys in the same toy box.

Now Comes the Fun Part

You have 2 different toy boxes: 1 to find and 1 to arrange. But if I change the arrangement of the toys in 1 box, won't the same need to be made in the other box as well, in order to maintain consistency? In the current case, the changes of arrangement are not going to reflect in the other toy box, right?

Absolutely Right!!!

If you change how your toys are arranged in one toy box, you'd want the other toy box to show those changes too, so everything matches up. In our CQRS world, this means when you do something in the change stuff box, someone (usually a smart part of the computer or app) has to make sure the look at stuff box knows about those changes.

Let's Continue With Our Toy Analogy

Imagine you have a magic notebook that keeps track of what you do in the change stuff box. Every time you move a toy, you write it down in the notebook. Then, there's a friendly elf who takes a look at your notebook while you're asleep, and he makes sure everything you did in the change stuff box is also done in the look at stuff box. When you wake up and decide to play again, both your boxes are up to date, and everything matches.

In computer systems, this magic notebook can be something like a list of all the changes you've made (we call these events), and the friendly elf can be a piece of software that makes sure both sides (the command side and the query side) are kept in sync. This way, whether you're looking at your data or changing it, you always see the latest version.

Let's Explain How CQRS Might Work Using Node.js, MongoDB, and Any Additional Pieces Necessary to Make It Clear

Imagine you're building a simple app where you can add toys to a collection and view your collection. In a CQRS approach, you would have two main parts: one for adding or changing toy information (the command side) and another for viewing your toy collection (the query side).

1. MongoDB Setup

You'll use MongoDB to store your toys. But, following the CQRS principle, you might have two collections:

Toys_Commands: This is where you add or update toy information. Think of it as the "change stuff" box.
Toys_Queries: This collection is optimized for reading and displaying toy data. It's your "look at stuff" box.

2. Node.js Application

Your Node.js app will have different routes or endpoints for commands (adding/updating toys) and queries (getting toy information).

Command Side

When you want to add a new toy or update an existing one, you'll use a command endpoint like POST /toys or PUT /toys/:toyId. This part of the app will interact with the Toys_Commands collection. When a toy is added or updated, the app will also send a message (let's think of it as our "magic notebook" entry) to a messaging system (like RabbitMQ or Kafka), indicating what change was made.

Query Side

The query part of the app has endpoints like GET /toys to view the toy collection. It reads from the Toys_Queries collection, which is optimized for fast, read-only access.

Keeping Things in Sync

Now, we need our friendly elf to keep the command and query sides in sync. This can be a separate service or part of your app that listens for messages about changes made on the command side (our magic notebook). When it receives a message about a change, it updates the Toys_Queries collection accordingly. This way, the next time you go to view your toys, the collection is up-to-date with all the latest changes.

Additional Pieces

Messaging System (RabbitMQ/Kafka):

This acts as the intermediary that passes messages from the command side to the service responsible for updating the query side. It ensures that all changes are queued and processed reliably.

Separate Services/Workers for Syncing:

These are specialized parts of your app (or separate apps) that listen to the messaging system and update the query side based on the command side's changes.

Example Flow

Add a Toy (Command):

You send a request to POST /toys to add a new toy. The toy is added to Toys_Commands, and a message is sent to RabbitMQ noting the addition.

Syncing:

A separate service listens to RabbitMQ, receives the message about the new toy, and adds this toy to Toys_Queries.

View Toys (Query):

When you request GET /toys, the app reads from Toys_Queries, showing you the latest collection, including the toy you just added.

This setup, with Node.js, MongoDB, and a messaging system, helps keep your app organized according to CQRS principles, separating the concerns of modifying data and reading it, while also ensuring consistency between those views.

Reflect-metadata in JavaScript

BhargavMantha — Mon, 11 Dec 2023 13:01:20 +0000

Reflection in JavaScript refers to the ability to inspect and modify a program's structure and behaviour at runtime. This concept is not unique to JavaScript but is a common feature in many programming languages. In JavaScript, reflection is typically achieved through certain objects and methods that allow you to work with the properties and methods of other objects dynamically. Here are some key aspects of reflection in JavaScript:

typeof Operator: This operator is used to determine the type of a variable. It's a basic form of reflection, as it allows you to inspect the type of an object at runtime.

instanceof Operator: This is used to check whether an object is an instance of a specific class or a prototype.

Object Introspection: JavaScript provides various ways to inspect an object, such as:

Object.keys(obj): Returns an array of a given object's property names.
Object.getOwnPropertyNames(obj): Similar to Object.keys but includes non-enumerable properties.
Object.getPrototypeOf(obj): Retrieves the prototype of an object.
Property Access and Modification: JavaScript allows for dynamic property access and modification. You can use bracket notation (e.g., obj["property"]) to access properties dynamically based on their names, which can be computed at runtime.

Function Reflection: Functions in JavaScript are objects, and you can inspect their properties like any other object. Additionally, you can use methods like Function.prototype.apply() and Function.prototype.call() to invoke functions with a specified this context and arguments.

Proxy Objects: Introduced in ES6, proxies allow you to create a wrapper for a target object, where you can intercept and redefine fundamental operations for that object, such as property lookup, assignment, enumeration, function invocation, etc.

Dynamic Code Execution: Functions like eval() allow for the execution of code represented as a string. This is a powerful but potentially risky tool, as it can run arbitrary code.

Reflection in JavaScript can be powerful for building flexible and dynamic systems, but it should be used judiciously. Overuse of reflection can lead to code that is hard to understand, maintain, and debug. Additionally, it can introduce security vulnerabilities if not handled carefully, especially in the context of dynamic code execution.

The term "Reflect metadata" in JavaScript is typically associated with the Reflect API and decorators, which are a part of the JavaScript extensions proposed for future ECMAScript versions. These features are more commonly used in TypeScript, a superset of JavaScript, but they're also relevant in the context of modern JavaScript development. Here's a breakdown of these concepts:

Reflect API: This is a built-in object that provides methods for interceptable JavaScript operations. The methods are similar to those of proxy handlers but are static. For example, Reflect.get() is used to retrieve a property from an object, mirroring the functionality of a proxy's get handler.
Metadata Reflection API: This is a proposed extension to the Reflect API that allows for the annotation and retrieval of metadata on classes and class members. It's inspired by similar features in languages like C# and Java. The Metadata Reflection API is not part of standard JavaScript but can be used with a library like reflect-metadata in a TypeScript or modern JavaScript environment.
Decorators: These are a proposed feature for JavaScript (and already available in TypeScript) that allows you to annotate and modify classes and properties at design time. Decorators use the Reflect API to attach metadata to class definitions. For instance, you can define a decorator to mark a class method as deprecated, and then use reflection to check if a method is deprecated before invoking it.
Relationship Between Reflect and Metadata: The Reflect API, combined with the Metadata Reflection API, enables a more powerful form of reflection in JavaScript. It allows developers not only to inspect and modify the structure and behavior of programs but also to attach and retrieve metadata. This metadata can be used for a variety of purposes, such as defining serialization rules, specifying dependency injection parameters, or applying custom behavior to class members.
Usage in Frameworks: Many modern JavaScript frameworks and libraries, especially those that use TypeScript, leverage these concepts for advanced features like dependency injection, ORM (Object-Relational Mapping), and custom decorators for various purposes (like in Angular or NestJS).

In summary, the Reflect metadata in JavaScript refers to the use of the Reflect API and decorators to annotate and modify classes and class members, and to attach and retrieve metadata. While this functionality is not yet part of the ECMAScript standard, it's available through libraries and is widely used in TypeScript and modern JavaScript development.

Critical Rendering Path

BhargavMantha — Thu, 20 Apr 2023 04:30:52 +0000

There are two important aspects to websites:

Speed
Look

Even for seasoned web developers, increasing a website's page rendering speed is easier said than done. To get there, we must comprehend what is meant by the term "Critical Rendering Path" in order to understand how we may reduce it and increase the speed at which pages are rendered.

What is the Critical Rendering Path?

Engineers refer to the code and resources needed to create the initial view of a web page as the "critical rendering path." We label it as "critical" because doing so results in a "white screen of death" until all the necessary page elements render and are made visible. A webpage's "initial view" is also known as its "above the fold" information. A pretty complex series of interactions could make up the crucial rendering path. We can decide how to organise the parts in the best way if we understand how they affect one another.

Why should I care?

Optimising the critical rendering path allows the browser to paint the page as quickly as possible: faster pages translate into higher engagement, more pages viewed, and improved conversion.
To minimise the amount of time a visitor spends viewing a blank screen, we need to optimise which resources are loaded and in what order.

Main components of the Critical Rendering Path

Network Overhead (Web Server Response Time): Keep in mind that cell networks ALWAYS have a longer "latency" (also known as round trip time) than other types of networks.
HTML code: Without the Document Object Model and completely downloaded HTML, we simply cannot render a web page. Outside Link. opens in a fresh tab. (DOM) tree that the browser is creating. Once those events take place, rendering can begin.
CSS: The DOM must also be created and applied to the CSSOM, the CSS language's own object model. The rendering process is halted by the CSSOM building phase.
Webfonts: These are fonts that must be downloaded in order to use them on a page.
JavaScript: JavaScript is maybe the most disruptive component in the code because it can interact with both HTML and CSS. Browsers halt rendering while JavaScript is downloading and running unless additional measures are done.

IMAGES EVEN THOUGH THEY ARE THE HEAVIEST PART OF THE WEBSITE, REQUIRE NO SPECIAL HANDING AS THEY ARE NOT PART OF THE DOM TREE.

Consider the following:
We are not taking into account the time to fetch resources from

cache or
the network.

Consider the following:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critical Path: No Style</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Check It Out

Without any CSS or JavaScript, we'll start with simple HTML code and a single image. Let's examine the generated resource waterfall by opening the Network timeline in Chrome DevTools:

The process:

The predicted download time for the HTML file was 340 milliseconds.
Note that the solid portion of the blue line indicates how long it takes to complete the download after the first response bytes have been received, while the transparent half of the line shows how long the browser waits on the network before receiving any response bytes.
Since the HTML download is so small (4K), retrieving the entire file only requires one roundtrip.
The HTML content must therefore be fetched, which takes about 340ms, of which half is spent waiting on the network and the other waiting on the server answer.
The browser parses the bytes, transforms them into tokens, and creates the DOM tree as soon as the HTML content is made available.
The DOMContentLoaded event's time is easily reported by DevTools at the bottom (595ms), which also matches to the blue vertical line. The time it takes the browser to assemble the DOM tree—in this case, just a few milliseconds—is shown by the space between the end of the HTML download and the blue vertical line (DOMContentLoaded).
As described earlier, the "awesome photo" does not block the domContentLoad event.

When talking about CRP we only talk about the loading mechanisms of HTML markup, CSS, and Javascript.

Now Adding Javascript and CSS to the Mix

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Script</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
    <script src="timing.js"></script>
  </body>
</html>

Check it out

External CSS and JavaScript files increase our waterfall by two requests, which the browser sends out all at around the same time. However, observe that the interval between the domContentLoaded and onload events is now considerably shorter.

Why is that?

In contrast to our example of plain HTML, we also need to fetch and parse the CSS file in order to create the CSSOM, and the DOM and CSSOM are both required in order to create the render tree.
The domContentLoaded event is delayed until the CSS file has downloaded and been parsed because the page also contains a parser-blocking JavaScript file. Because JavaScript may query the CSSOM, we must delay JavaScript execution until the CSS file has downloaded.

Lets discuss what happens if an inline script is used in place of our external script in the next article.

SSH configuration on UBUNTU

BhargavMantha — Thu, 01 Sep 2022 08:24:29 +0000

Prerequisites:

~/.ssh exists
access to root user

Step 1 — Creating the Key Pair

The first step is to create a key pair on the client machine (usually your computer):

ssh-keygen

By default, recent versions of ssh-keygen will create a 3072-bit RSA key pair, which is secure enough for most use cases (you may optionally pass in the -b 4096 flag to create a larger 4096-bit key).

After entering the command, you should see the following output:

when asked for a file name please enter a name of your choice followed by the enter key

Press enter to save the key pair into the .ssh/ subdirectory in your home directory, or specify an alternate path.

If you had previously generated an SSH key pair, you may see the following prompt:

If you choose to overwrite the key on disk, you will not be able to authenticate using the previous key anymore. Be very careful when selecting yes, as this is a destructive process that cannot be reversed.

You should then see the following prompt:

Here can enter a secure passphrase, which is highly recommended. A passphrase adds a layer of security to prevent unauthorized users from logging in.

You should then see the output similar to the following:

You now have a public and private key that you can use to authenticate. The next step is to place the public key on your server so that you can use SSH-key-based authentication to log in.

Step 2:

Copying the Public Key The Ubuntu Server

ssh-copy-id username@remote_host

Output
The authenticity of host '103.0.113.132 (103.0.113.132)' can't be established.
ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
Are you sure you want to continue connecting (yes/no)? yes

Next, the utility will scan your local account for the bhargavTest.pub key that we created earlier. When it finds the key, it will prompt you for the password of the remote user’s account:

Output
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
bhargav@103.0.113.132's password:

Type in the password (your typing will not be displayed, for security purposes) and press ENTER. The utility will connect to the account on the remote host using the password you provided. It will then copy the contents of your ~/.ssh/id_rsa.pub key into a file in the remote account’s home ~/.ssh directory called authorized_keys.

You should see the following output:

Output
Number of key(s) added: 1

Now try logging into the machine, with:   "ssh 'bhargav@103.0.113.132'"
and check to make sure that only the key(s) you wanted were added.

Step 3 — Authenticating Your Ubuntu Server Using SSH Keys

If you have completed one of the procedures above, you should be able to log into the remote host without providing the remote account’s password.

The basic process is the same:

ssh username@remote_host

in my case

bhargav@103.0.113.132

If this is your first time connecting to this host (if you used the last method above), you may see something like this:

Output
The authenticity of host '103.0.113.132 (103.0.113.132)' can't be established.
ECDSA key fingerprint is rd:rd:r4:g7:77:fe:73:84:e1:65:00:ad:d6:6d:22:fe.
Are you sure you want to continue connecting (yes/no)? yes

This means that your local computer does not recognize the remote host. Type “yes” and then press ENTER to continue.

If you did not supply a passphrase for your private key, you will be logged in immediately. If you supplied a passphrase for the private key when you created the key, you will be prompted to enter it now (note that your keystrokes will not display in the terminal session for security). After authenticating, a new shell session should open for you with the configured account on the Ubuntu server.

If key-based authentication was successful, continue to learn how to further secure your system by disabling password authentication.

At this point, if you can log in to the server without a password you have successfully configured ssh.

Step - 4

confirm that your remote account has administrative privileges, log into your remote server with SSH keys, either as root or with an account with sudo privileges. Then, open up the SSH daemon’s configuration file:

sudo nano /etc/ssh/sshd_config
Inside the file, search for a directive called PasswordAuthentication. This line may be commented out with a # at the beginning of the line. Uncomment the line by removing the #, and set the value to no. This will disable your ability to log in via SSH using account passwords:

/etc/ssh/sshd_config

PasswordAuthentication no

Save and close the file when you are finished by pressing CTRL+X, then Y to confirm saving the file, and finally ENTER to exit nano. To activate these changes, we need to restart the sshd service:

sudo systemctl restart ssh

As a precaution, open up a new terminal window and test that the SSH service is functioning correctly before closing your current session:

ssh username@remote_host
Once you have verified your SSH service is functioning properly, you can safely close all current server sessions.

The SSH daemon on your Ubuntu server now only responds to SSH-key-based authentication. Password-based logins have been disabled.

Design Pattern in TypeScript: Command Pattern

BhargavMantha — Tue, 03 May 2022 09:24:30 +0000

## Pattern Sub-class

Behavioral Design Patterns-
Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

Defination

Encapsulate a request as an object, thereby letting you parametrize clients with different requests, and support undoable operations.

It turns a request into a stand-alone object that contains all the information about the request. This transformation lets you pass requests as a method arguments, delay or queue a request’s execution, and support undoable operations.

Psudo Names

Actions, Transaction

Why

Consider you are building a text-editor app. You want to create a user interface toolkit that includes objects like buttons and menus that carry out a request in response to user input.
Only applications that use the tool kit know what should be done on which object.
As toolkit designers we have no way of knowing the receiver of the request or the operation that it will carry out.

You have a generic Button class that can be used on the toolbar, as well as for generic buttons in various toolbars.

Though all these buttons look similar they perform different things.

THE SIMPLEST SOLUTION IS TO CREATE TONS OF SUB-CLASSES FOR EACH PLACE THE BOTTON IS USED. THE SUBCLASSES WOULD HAVE TO CONTAIN CODE TO BE EXECUTED ON A BUTTON CLICK

So what is wrong with this approach

You have an enormous number of subclasses
code will break in a subclass in case of modification of base Button class
some operation logic such as copying/pasting in this case of text editor would need to be invoked from multiple places:

User clicks the copy button on the toolbar or copies something using CTRL+C or CMD+C

Solution

Separation of Concerns
break the app into multiple layers

The command pattern intuitively says that send the request by extracting all the requirements for making the decision such as the object being called the name of the method and the list of arguments into a single command class with the single method that triggers the request.

The command architucture:

The next step is to make your commands implement the same interface. Usually, it has just a single execution method that takes no parameters. This interface lets you use various commands with the same request sender, without coupling it to concrete classes of commands. As a bonus, now you can switch command objects linked to the sender, effectively changing the sender’s behavior at runtime.

Example Code:

In case the above does not load :
Stack Blits editor url

Stack Blits application url

Linked List in TS

BhargavMantha — Thu, 21 Apr 2022 09:11:26 +0000

What are Linked Lists

Linear dynamic Data Structure
Expensive to maintain in comparison to arrays in terms of insertion and deletion
comprises nodes
last element points to null
can grow and shrink on demand
made of 2 items of data and reference to the next node

MAJOR DISADVANTAGE OF LINKED LIST - O(n) for access to an element in the worst case.

Basic Operations

traverse linked list
push
pop
insertAtFirst
deleteByIndex

Design Pattern in TypeScript: Strategy Pattern

BhargavMantha — Wed, 13 Apr 2022 03:01:09 +0000

Definition - Design Patterns

According to Christopher Alexander- Each Pattern describes a problem that occurs over and over again in our environments, and then describes the core solution to that problem, in such a way that you can use this solution as a million times over without doing it the same way twice

The only difference between the patterns described by Christopher Alexander and the patterns in the case of computer language is that he expresses solutions in terms of Walls and doors Whereas we express them in terms of Objects and Interfaces

A pattern has 4 essential elements:

The Pattern Name
The problem
The Solution
The Consequence

What Design Patterns are not:

designs that are encoded or added into the classes and reused as is like Trees, Stacks ...
Nor are they complex,domain-specific designs for an entire applications or subsystems

WHAT DESIGN PATTERNS DO SOLVE ON THE OTHER HAND ARE COMMUNICATION BETWEEN OBJECTS AND CLASSES THAT ARE CUSTOMIZED TO SOLVE A GENERAL DESIGN PROBLEM IN A PARTICULAR CONTEXT

It names, abstracts, and identifies the key aspects of a common design structure that makes it useful for creating a reusable object-oriented design

The first design pattern we are going to discuss is the strategy Pattern

Defination - STRATEGY

Define a family of algorithms, encapsulate each one and make them interchangeable. Strategy lets the algorithm vary independently from the client that uses it.

THE STRATEGY PATTERN COMES UNDER THE CLASS OF BEHAVIORAL PATTERN - Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

Also know as Policy

Many algorithms exist for breaking a stream of text into lines

How to identify Strategy patterns:

there are multiple algorithms that will be needed at different times we do not want to support multiple algorithms using line breaking/conditionals
it is difficult to accommodate change when implemented using line breaks and conditionals

When to use Strategy pattern:

many related classes differ only in their behavior. Strategies provide a way to configure a class with one of many behaviors.
you need different variants of an algorithm
an algorithm uses data that clients should not know about
a class defines such behavior and these appear as multiple conditional statements in an operations

Different actors in strategy:

Strategy declares an interface common to all supported algorithms. Context uses the interface to call the algorithm defined by a ConcreteStrategy
ConcreteStrategy implementation of the algorithm using the Strategy interface
Context maintains a reference to the strategy object

Refer to the following for the code:

Errors

BhargavMantha — Wed, 03 Nov 2021 04:14:52 +0000

It seems that perfection is attained not when there is nothing more to add but when there is nothing more to take away — Antoin de Saint-Exupery

There is a lot that can be inferred/taken by the above statement. Errors only occur in programs if they are not perfect in every way. Antoin also gives us the insight that anything can be made perfect by taking things away from it not adding things to it.
Douglas Crockford in his book JS the Good parts says if a feature is sometimes useful and some times dangerous. and you have a better option always use the better option.

WE ARE NOT PAID TO WRITE PROGRAMS THAT USE ALL THE FEATURES OF THE LANGUAGE. INSTEAD, WE ARE PAID TO WRITE PROGRAMS THAT ARE ERROR-FREE AND WORK WELL.

My thoughts/take-aways on the above idea

Always Always Always(I know I am stressing this out too much but it’s a fact), Remember to know how, why, and when to use the specific concept of the language.
here is a very simple example, we all use >, < operators in JS right for instance consider the following example

Number(true);//1
Number(false);//0
1 < 2;//true
2 < 3;//true
1 < 2 < 3;//true
( 1 < 2 ) < 3
( true ) < 3//Auto Coercion by js
1 < 3//true
But (Wait for it)
3 > 2 > 1
( 3 > 2 ) > 1
(true) > 1
1 > 1 //false

what!!! but we know that thats not true, this is one of the corner cases in js with auto conversion from boolean to number :’( .

My point being that if we knew about this corner case this could easily be prevented.

By this, I don't mean that we should go to extremes and follow

Type Rigidity or Static Types or Type Soundness.
People say that JS’s dynamic typing is its biggest weakness. I feel that its one of its greatest strengths. I mean, I couldn't imagine js without its dynamic typing. We would have been deprived of so many paradigms if we didn't have dynamic typing.

So what I mean to say is people. Nothing in a language is magic, everything happens to cause its either meant to be that way or because of historical reasons(in order to not break the older functionality ). Please ppl, remember to understand why questioning the same at every point(there is no stupid question remember). Always understand why before applying.

ERRORS occur usually (not including the corner cases :) because we do not understand the language and because of our own stupidity, Not the other way round

REFERENCES -
The Better Parts. Douglas Crockford.
Kyle Sympson — Javascript Foundation(You don't know Javascript).

Do not agree with me, Change my view ❤

Running the stored procedure from NestJs

BhargavMantha — Sun, 25 Jul 2021 14:43:40 +0000

using the repository that was created,
for instance you want to interact with the table users
and say you have the repository UserRepository.

dependency inject the user repository into the current service

constructor(
@InjectRepository(Users)
private  userRepository:  Repository<UserRepository>
)  {}

now use the created userReposotory to run the command to invoke the stored procedure

this.userRepository.query("call dev_db.listUsers(?)",[the_input_paramenters_required]);

--the above query returns a promise with result of stored Procedure or error
So make sure you add await to function having the above line