Forem: Dhruv Kumar

Technical Deep Dive: Building an AI-Powered Real Time Root Cause Analysis System

Dhruv Kumar — Thu, 12 Jun 2025 09:00:54 +0000

Core Components and Implementation

1. AI and Context Management

Retrieval-Augmented Generation (RAG): The system uses a RAG pipeline to provide dynamic, context-aware responses. Instead of relying only on the LLM's pre-trained knowledge, the RAG model retrieves relevant, up-to-date information from our data sources and uses this context to generate a more accurate analysis.
Conversational Context: We used LangChain's BufferMemory to manage conversation history. This was configured with a 2000-token sliding window, allowing the system to maintain context across multiple user interactions within a session for coherent multi-turn dialogue.

2. Data Processing and Performance

Asynchronous Data Processing with Web Workers: To keep the UI responsive during intensive data transformations, we delegated these tasks to a Web Worker. The formatProductData.worker.js script handles complex client-side calculations, such as traffic metrics, conversion analysis, and campaign-level aggregations, running them in a separate background thread.
Data Chunking and Filtering: To efficiently manage large datasets, the pipeline automatically chunks incoming data. Targeted filters are applied based on the query context and data type (e.g., traffic, revenue, impressions), ensuring only relevant data segments are processed.
Real-time Token Streaming: For quicker feedback during AI generation, we implemented token-level streaming using LangChain’s callback architecture. This displays the response word-by-word as generated by the LLM, rather than waiting for the full response to finish.

3. Frontend Development

Rich Text Rendering: The chat interface uses TipTap, a headless editor framework, to render rich text and parse Markdown. This supports various formats, including bold, lists, tables, links, and code blocks, directly in the chat output.

4. Backend and System Stability

Rate Limiting and Request Queuing: To maintain stability and manage costs, the backend implements a rate limiter that allows a 1-second interval between requests to the LLM API. A queuing system handles concurrent requests, preventing API overloads during peak times.
Caching Strategy: A custom in-memory caching system stores the results of completed analyses. This persistence avoids redundant processing for repeated queries, improving response times significantly.
Error Handling: We implemented fail-safe layers across all asynchronous operations. In case of an error, the system provides human-readable messages and graceful fallbacks to ensure a consistent user experience.

Technical Challenges and Solutions

Challenge	Solution
Real-time Processing Latency	We implemented a combination of data chunking, aggressive caching of analysis results, and token-level streaming to the UI.
Maintaining Context	We used `LangChain's BufferMemory` with an optimized token window for seamless multi-turn interactions.
API Rate Throttling	We developed a queue-based request management system with a fixed-interval limiter to stabilize performance.
Data Accuracy & Hallucination	We employed a RAG architecture with validated prompts and result-checking layers to ground LLM responses in factual data.

How Indexes Really Work

Dhruv Kumar — Wed, 02 Apr 2025 01:57:40 +0000

Alright, we know indexes make databases faster. But why? It's not just magic; it's about efficiently navigating the way data is physically stored and reducing the amount of work the database has to do, specifically when reading from disk.

Think of your database table, maybe a Users table, as a massive collection of records (rows in SQL, documents in NoSQL). These records aren't just floating in memory; they have to be serialized and stored persistently on disk (HDD or SSD).

The Slow Lane: Life Without Indexes (Full Table Scans)

Let's visualize how data hits the disk. Imagine our Users table:

CREATE TABLE Users (
    ID INT PRIMARY KEY, -- Let's say 4 bytes
    Name VARCHAR(60),   -- 60 bytes
    Age INT,            -- 4 bytes
    Bio TEXT,           -- 128 bytes (can be large!)
    TotalBlogs INT      -- 4 bytes
);

Based on these sizes, each user record takes up 4 + 60 + 4 + 128 + 4 = 200 bytes when stored.

Now, disks don't read data byte-by-byte. They read in blocks (or pages). A common block size is 4KB, but for simplicity, let's use the transcript's example of 600 bytes per block.

If each record is 200 bytes and a block is 600 bytes, we can fit 600 / 200 = 3 user records into a single disk block.

Let's say our Users table has 100 rows. To store these, we'd need:
100 rows / 3 rows/block = 33.33 blocks
Since we can't have a fraction of a block, we need 34 blocks to store the entire table sequentially.

Now, the critical part: Disk I/O is slow! Reading a block from disk is orders of magnitude slower than reading from memory.

Consider this query:

SELECT * FROM Users WHERE Age = 23;

Without an index on Age, how does the database find these users? It has no choice but to perform a full table scan:

Read Block 1 (contains rows 1-3) into memory.
Check the Age for each of those 3 rows. Keep matches. Discard the block (conceptually).
Read Block 2 (contains rows 4-6) into memory.
Check the Age for rows 4-6. Keep matches. Discard the block.
... Repeat for all 34 blocks.

Even if only two users have Age = 23, the database still had to read and process all 34 blocks just to find them. If reading one block takes a hypothetical 1 second (as per the transcript's illustration – it's much faster in reality, but the principle holds), this query takes 34 seconds. That's painful.

The Fast Lane: Introducing Indexes

An index is essentially a separate, smaller, and specially structured table that acts like a quick lookup guide for your main table data. It stores the indexed column's value and a pointer (like the row ID or primary key) to the actual data row.

Let's create an index on our Age column:

CREATE INDEX idx_users_age ON Users(Age);

This idx_users_age index might look something like this conceptually (it's often stored in more complex structures like B+ Trees, but let's simplify):

Age	Row ID (Pointer)
21	2
21	7
22	3
22	5
23	1
23	4
24	6
...	...
(Sorted by Age)

Key characteristics:

Smaller: Each index entry only contains the indexed value (Age, 4 bytes) and the pointer (ID, 4 bytes) = 8 bytes. Much smaller than the full 200-byte record!
Sorted: The index is kept sorted by the indexed value (Age). This is crucial for fast lookups.

Now, let's calculate the size of this index for our 100-row table:
100 entries * 8 bytes/entry = 800 bytes.

Using our 600-byte blocks, how many blocks does the index need?
800 bytes / 600 bytes/block = 1.33 blocks -> 2 blocks.

How the Query Runs With the Index

Let's run that same query again:

SELECT * FROM Users WHERE Age = 23;

This time, the database query planner sees the index on Age and uses it:

Scan the Index: Instead of scanning the main table, it scans the tiny index. Because the index is sorted, it can quickly find all entries where Age = 23. In the worst case (using the transcript's simple scan model), it reads the entire index. How many blocks is that? Just 2 blocks.
- (Optimization Note: Real databases using B+ Trees are even smarter and often don't need to read all index blocks, but let's stick to the simple model for comparison.)
Identify Relevant Row IDs: From scanning the index, the database finds the pointers for rows where Age = 23. In our example, it gets Row ID 1 and Row ID 4.
Fetch Actual Rows: Now, armed with the specific Row IDs, the database goes directly to the main table blocks containing those rows.
- Row ID 1 is in Block 1. Read Block 1 (1 block read).
- Row ID 4 is in Block 2. Read Block 2 (1 block read).
Return Results: Collect the full data for rows 1 and 4 and return them.

Total disk blocks read in this indexed query:
2 blocks (for index scan) + 1 block (for row 1) + 1 block (for row 4) = **4 blocks**.

The Payoff: Comparing Performance

Without Index: 34 block reads (34 hypothetical seconds)
With Index: 4 block reads (4 hypothetical seconds)

That's an 8x performance improvement in this simplified example, just by adding an index! In real-world scenarios with larger tables and more complex queries, the difference can be even more dramatic (100x, 1000x, or more!).

Why Does This Matter For You?

Reduced Disk I/O: This is the core win. Indexes drastically cut down the number of blocks read from slow disk storage.
Targeted Reads: Instead of blindly scanning everything, the database uses the index to pinpoint exactly which data blocks it needs.
Query Planning: Understand that your database's query planner tries to use indexes for columns in your WHERE, JOIN ON, ORDER BY, and sometimes GROUP BY clauses.
Index Selectivity: Indexes work best on columns where the values are diverse (high selectivity). Indexing a gender column with only 'M', 'F', 'Other' might be less effective than indexing an email column.
The Trade-off: Indexes aren't free! They consume disk space and slightly slow down INSERT, UPDATE, and DELETE operations because the index needs to be updated too. Choose your indexes wisely based on your read patterns.

Conclusion

Indexes are not a silver bullet, but they are arguably the single most impactful tool for optimizing database read performance. By creating these smaller, sorted lookup structures, we drastically reduce the need for costly full table scans, minimizing disk I/O and making our queries fly.

Next time you face a slow query, don't just throw more hardware at it. Analyze the query plan (EXPLAIN ANALYZE), check your WHERE and JOIN clauses, and ensure you have appropriate indexes on the right columns. Your users (and your servers) will thank you.
Credit : Arpit Bhayani

Building a Real-Time Flask and Next.js Application with Redis, Socket.IO, and Docker Compose

Dhruv Kumar — Sat, 21 Dec 2024 08:01:51 +0000

In this blog, we’ll walk through the process of integrating WebSocket functionality using Socket.IO, adding caching support with Redis, and hosting a full-stack application built with Flask and Next.js using Docker Compose. By the end, you’ll have a scalable, real-time web application architecture ready to deploy.

Tech Stack Overview

Backend: Flask with extensions like Flask-SocketIO for real-time communication, Flask-Session for session management, and SQLAlchemy for database interactions.
Frontend: Next.js with client-side Socket.IO for real-time content synchronization.
Database: PostgreSQL for persistent data storage.
Cache: Redis for caching and quick data access.
Hosting: Docker Compose for containerized deployment.

Step 1: Backend Setup with Flask and Redis

Flask Backend Structure

Here’s the structure of our Flask backend:

Initialize Flask and Extensions:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_socketio import SocketIO
from flask_session import Session
import redis, os

app = Flask(__name__)
app.config["SECRET_KEY"] = "your_secret_key"
app.config["SQLALCHEMY_DATABASE_URI"] = "postgresql://username:password@postgres:5432/dbname"
app.config["SESSION_TYPE"] = "redis"
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_USE_SIGNER"] = True
app.config["SESSION_KEY_PREFIX"] = "session:"
app.config["SESSION_REDIS"] = redis.StrictRedis(host=os.getenv('REDIS_HOST', 'redis'), port=6379, db=0)

# Initialize extensions
socketio = SocketIO(app, cors_allowed_origins="*")
db = SQLAlchemy(app)
Session(app)

Add Real-Time WebSocket Functionality:

from flask_socketio import emit, join_room, leave_room

@socketio.on('join_room')
def handle_join_room(data):
    room = data.get('contentId')
    join_room(room)
    emit('user_joined', {'msg': 'A new user has joined the room'}, to=room)

@socketio.on('edit_content')
def handle_edit_content(data):
    content_id = data.get('contentId')
    content = data.get('content')
    emit('content_update', {'content': content}, to=content_id, skip_sid=request.sid)

@socketio.on('leave_room')
def handle_leave_room(data):
    room = data.get('contentId')
    leave_room(room)
    emit('user_left', {'msg': 'A user has left the room'}, to=room)

Session and Redis Configuration:

import redis

cache = redis.StrictRedis(host=os.getenv('REDIS_HOST', 'redis'), port=6379, db=0)

Environment Configuration (.env file):

SECRET_KEY=your_secret_key
SQLALCHEMY_DATABASE_URI=postgresql://postgres:postgres@postgres:5432/postgres
SQLALCHEMY_TRACK_MODIFICATIONS=False

APP_URL=AWS EC2 IP address

HOST=redis

Step 2: Frontend Setup with Next.js and Socket.IO

Client-Side Socket.IO Setup

Install Socket.IO Client:

npm install socket.io-client

Create a Socket Instance:

// socket.js
import { io } from "socket.io-client";

const SOCKET_URL = process.env.NEXT_PUBLIC_SOCKET_URL;

const socket = io(SOCKET_URL, {
  autoConnect: false,
});

export default socket;

Integrate TipTap Editor with Real-Time Updates:

"use client";

import socket from "@/shared/socket";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { useEffect, useState } from "react";

const Tiptap = ({ content = "", contentId }) => {
  const [isSaving, setIsSaving] = useState(false);
  const editor = useEditor({
    extensions: [StarterKit],
    content,
    onUpdate: ({ editor }) => {
      const updatedContent = editor.getHTML();
      if (contentId) {
        setIsSaving(true);
        socket.emit("edit_content", { contentId, content: updatedContent });
        setTimeout(() => setIsSaving(false), 1000);
      }
    },
  });

  useEffect(() => {
    if (contentId) {
      if (!socket.connected) socket.connect();
      socket.emit("join_room", { contentId });

      socket.on("content_update", (data) => {
        if (editor && data.content !== editor.getHTML()) {
          editor.commands.setContent(data.content);
        }
      });

      return () => {
        socket.emit("leave_room", { contentId });
        socket.off("content_update");
      };
    }
  }, [contentId, editor]);

  return <EditorContent editor={editor} />;
};

export default Tiptap;

Environment Configuration (.env file):

NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_SOCKET_URL=http://localhost:5000

DATABASE_NAME=postgres
DATABASE_USER=postgres
DATABASE_PASSWORD=postgres

Step 3: Docker Compose for Deployment

\** Configuration**:

version: "3.8"

services:
  nginx:
    image: nginx:alpine
    container_name: nginx_proxy
    ports:
      - "443:443"
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - backend
      - website
    networks:
      - app-network

  website:
    build:
      context: ./website
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL}
    container_name: website
    environment:
      - NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
    expose:
      - "3000"
    networks:
      - app-network

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: backend
    expose:
      - "5000"
    networks:
      - app-network

  redis:
    image: redis:alpine
    container_name: redis
    expose:
      - "6379"
    networks:
      - app-network

  postgres:
    image: postgres:14-alpine
    container_name: postgres
    environment:
      - POSTGRES_DB=${DATABASE_NAME}
      - POSTGRES_USER=${DATABASE_USER}
      - POSTGRES_PASSWORD=${DATABASE_PASSWORD}
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  postgres_data:

Nginx Configuration for Proxy:

server {
  listen 80;
  server_name _;

  location / {
    proxy_pass http://website:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location /api/ {
    proxy_pass http://backend:5000;
    proxy_set_header Host $host;
  }

  location /socket.io/ {
    proxy_pass http://backend:5000/socket.io/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

Step 4: Running the Application

Build and start the services:

docker-compose up --build

Access the application:
- Frontend: http://localhost
- Backend API: http://localhost/api

**GitHub : https://github.com/aixart12/colobrate-editor

Understanding Go through the Lens of TypeScript/JavaScript

Dhruv Kumar — Fri, 25 Oct 2024 00:32:22 +0000

If you're coming from a TypeScript/JavaScript background and diving into Go, it can be helpful to draw parallels between the two languages to speed up your learning. While they are fundamentally different in many ways (Go being a statically-typed, compiled language, and TypeScript/JavaScript being dynamically typed, interpreted or transpiled languages), there are some useful analogies that will help make Go more intuitive.

1. Structs in Go ≈ Types in TypeScript

In TypeScript, you define types and interfaces to describe the shape of objects. Similarly, Go has structs, which are used to define custom types. A struct can contain fields of different types, similar to how a TypeScript type or interface may contain different properties.

TypeScript:

type Book = {
  title: string;
  pages: number;
  read(): void;
}

Go:

type Book struct {
    Title string
    Pages int
}

func (b Book) Read() {
    fmt.Println("Reading", b.Title)
}

In both cases, you are defining the structure of an object. However, Go’s structs are more rigid and do not support inheritance, unlike TypeScript, which allows for more dynamic behavior with interfaces and class inheritance.

2. Methods in Go: Receivers ≈ Prototypes in JavaScript

In JavaScript, when you define a method on an object’s prototype, it’s associated with instances of that object. Go uses a similar concept with receiver functions that are tied to a specific struct. This feels similar to how functions are attached to objects in JavaScript via prototypes.

JavaScript:

function Book(title, pages) {
    this.title = title;
    this.pages = pages;
}

Book.prototype.read = function() {
    console.log("Reading", this.title);
}

Go:

type Book struct {
    Title string
    Pages int
}

func (b Book) Read() {
    fmt.Println("Reading", b.Title)
}

In Go, the Read method has a receiver (b Book), which acts similarly to how methods are associated with prototypes in JavaScript. It gives you the object’s instance (b here), letting you access the fields and use the method.

3. `let`, `var`, `const` in TypeScript ≈ Variable Declaration in Go

The way you declare variables in Go is reminiscent of JavaScript’s let, var, and const. In Go, variables are declared with var, and constants with const, much like TypeScript.

TypeScript:

let name: string = "TypeScript";
const maxItems: number = 100;

Go:

var name string = "Go"
const maxItems int = 100

The := shorthand in Go feels somewhat like JavaScript’s let in that it allows for quick variable declaration:

name := "Go" // type inference, like in TypeScript

In Go, there is no distinction between let and const like in JavaScript. By default, all variables in Go are mutable when declared with var, meaning their values can be changed later. If you want to make a variable immutable in Go, you must explicitly use the const keyword. Unlike JavaScript, where you have both let for mutable variables and const for immutable ones, in Go, everything is mutable unless you declare it as const.

4. Go Interfaces ≈ TypeScript Interfaces (with differences)

TypeScript interfaces define the shape of objects, while Go interfaces define behavior (i.e., a set of methods an object must have). In Go, an object "implements" an interface implicitly by having all required methods, which contrasts with TypeScript's explicit implementation.

TypeScript:

interface Reader {
  read(): void;
}

class Book implements Reader {
  read() {
    console.log("Reading a book");
  }
}

Go:

type Reader interface {
    Read()
}

type Book struct {
    Title string
}

func (b Book) Read() {
    fmt.Println("Reading", b.Title)
}

In Go, any type that implements the Read method is considered to implement the Reader interface, even without explicitly declaring it.

5. Error Handling in Go ≈ Try-Catch in JavaScript (but different)

Error handling in Go feels very different compared to JavaScript’s try-catch. In Go, error handling is done explicitly with return values, while JavaScript uses exceptions.

JavaScript:

try {
    // Some code
} catch (error) {
    console.error(error);
}

Go:

file, err := os.Open("file.txt")
if err != nil {
    log.Fatal(err)
}

In Go, errors are returned from functions and need to be checked explicitly, which leads to more predictable control flow but requires more manual error handling compared to JavaScript’s try-catch mechanism.

6. Package System in Go ≈ ES Modules in TypeScript

In TypeScript, you organize your code into modules that can import/export other pieces of functionality. Go has a similar package system where each file is part of a package, and packages can import functionality from other packages.

TypeScript:

// module1.ts
export const greet = () => console.log("Hello");

// module2.ts
import { greet } from "./module1";
greet();

Go:

// main.go
package main

import "fmt"

func main() {
    fmt.Println("Hello, Go")
}

In Go, package main is the entry point of your application, similar to how a main file might serve as an entry point for a TypeScript project using ES modules.

7. Concurrency in Go: Goroutines ≈ Asynchronous Programming

JavaScript's asynchronous programming with async/await and promises feels somewhat analogous to Go’s goroutines. Goroutines allow functions to run concurrently, making Go’s concurrency model very powerful.

JavaScript:

async function fetchData() {
    const data = await fetch(url);
    console.log(data);
}

Go:

func fetchData() {
    fmt.Println("Fetching data...")
}

go fetchData() // Runs concurrently

With Go's goroutines, you can launch functions concurrently with the go keyword, while TypeScript achieves this through async/await and promises.

Conclusion

Switching from TypeScript/JavaScript to Go might seem daunting at first, but drawing these comparisons can help make the transition smoother. Understanding Go's stricter type system, explicit interfaces, and concurrency model will make your journey rewarding. Once you get the hang of Go’s more explicit and structured nature, you’ll appreciate its performance and reliability in building robust systems.

From Static to Stunning: Animate with GSAP

Dhruv Kumar — Sun, 29 Sep 2024 11:59:17 +0000

When it comes to building engaging, visually appealing websites, animations play a critical role in enhancing user experience. While there are several animation libraries available, one that stands out is the GreenSock Animation Platform (GSAP). GSAP is a robust JavaScript library that allows you to create fast, fluid, and cross-browser animations with minimal code.

In this blog, we’ll cover the basics of using GSAP to create stunning animations, even if you’re just getting started. Let's dive into how to animate with GSAP.

Why GSAP?

Here are some reasons GSAP is the go-to tool for many developers:

Performance: GSAP is known for being incredibly fast and optimized for high-performance animation, even on complex UIs.
Compatibility: It works seamlessly across all major browsers, including Internet Explorer (for legacy projects).
Ease of Use: Its API is straightforward, making it accessible even for developers new to animation.
Advanced Features: From timeline-based animations to scroll-based effects, GSAP offers a wealth of features for both simple and complex animations.

Getting Started

1. Setting Up GSAP

To begin, you'll need to include GSAP in your project. You can either use a CDN or install it via npm if you're using a bundler like Webpack or Parcel.

Using a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

Or, install via npm:

npm install gsap

Now, GSAP is ready to be used in your project.

2. Basic GSAP Animation

At its core, GSAP animates any property of a DOM element. Here’s a simple example of animating a box element from point A to point B.

HTML:

<div class="box"></div>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

GSAP JavaScript:

gsap.to(".box", {
  x: 300,
  duration: 2
});

In this example, GSAP moves the .box element 300 pixels along the x-axis over 2 seconds. The gsap.to() method is used to animate properties from their current value to a new value.

3. Common GSAP Methods

gsap.to(): Animates properties from their current value to the specified target values.

  gsap.to(".box", { x: 300, duration: 1 });

gsap.from(): Animates properties from a specified value to the current value.

  gsap.from(".box", { opacity: 0, duration: 1 });

gsap.fromTo(): Defines both the starting and ending values of the animation.

  gsap.fromTo(".box", { opacity: 0 }, { opacity: 1, duration: 1 });

4. Creating Sequential Animations with Timeline

Often, you’ll want to create a sequence of animations that happen one after the other. GSAP provides the gsap.timeline() feature, allowing you to create complex animations in a series.

const tl = gsap.timeline();

tl.to(".box", { x: 300, duration: 1 })
  .to(".box", { y: 200, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 });

Here, the .box will first move horizontally to 300 pixels, then vertically to 200 pixels, and finally, rotate by 360 degrees. Each action happens sequentially with the timeline managing the order.

5. Easing Effects

GSAP provides a variety of easing functions that control how the animation progresses over time, making animations more natural. The default easing is power1.out, but you can change it to a different easing function for different effects.

gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "bounce.out"
});

Popular easing functions include:

power1, power2, power3, power4
bounce
elastic
back
expo

These allow you to create bouncy, elastic, or easing-in/out effects that bring life to your animations.

6. Animating Multiple Elements

You can target multiple elements at once using GSAP by specifying the class or element selector. The library will animate all matching elements simultaneously.

gsap.to(".box", { x: 300, duration: 2 });
gsap.to(".circle", { y: 200, duration: 1 });

You can also pass an array of elements:

gsap.to([ ".box", ".circle" ], { rotation: 180, duration: 2 });

7. Scroll Animations with ScrollTrigger

GSAP also provides a powerful plugin called ScrollTrigger, which allows you to create scroll-based animations effortlessly. This feature lets you trigger animations as you scroll down the page.

To use it, first include the plugin:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

Basic example:

gsap.to(".box", {
  scrollTrigger: ".box", // trigger animation when ".box" enters the viewport
  x: 500,
  duration: 3
});

Here, the .box element will animate when it enters the viewport as the user scrolls.

Conclusion

GSAP is an extremely versatile and powerful library for creating web animations. Whether you’re animating a button, building complex scroll-based effects, or creating a full-blown animation-driven experience, GSAP makes it straightforward with its intuitive syntax and rich set of features.

If you’re just starting out, don’t feel overwhelmed! Try out some basic animations and gradually explore more advanced concepts like timelines and scroll triggers. GSAP has excellent documentation that will guide you through everything from beginner to advanced animations.

Start experimenting, and you’ll quickly see how GSAP can transform your web projects into engaging, interactive experiences!

Integration of Calendar for Efficient Meeting Scheduling

Dhruv Kumar — Sat, 10 Aug 2024 08:31:39 +0000

As someone actively applying for remote jobs, I've encountered a common issue: scheduling meetings with recruiters. The back-and-forth communication to finalize a time was causing unnecessary delays, sometimes wasting 2-3 days. To address this, I decided to integrate a calendar into my profile, allowing recruiters to see my availability and schedule meetings directly.

After researching several tools, I found that cal.com was the easiest and most efficient solution for this purpose. Below, I’ll walk you through the steps I took to integrate cal.com into my workflow using React.

Steps for Integration:

1. Create a cal.com account.

To get started, I created an account on cal.com, a platform designed to simplify meeting scheduling.

2. Navigate to the "Event Types" section and click on "Embed."

Once logged in, I went to the "Event Types" section, clicked on the three-dot symbol ("...") on the right side, and selected "Embed."

3. Create a React project and install the necessary packages.

Next, I created a new React project and installed the required package using the following command:

npm i @calcom/embed-react

4. Copy and use the provided embed code in the React project.

I then copied the embed code provided by cal.com and implemented it into my React project.

5. Outcome:

After completing these steps, the result was a seamless calendar integration, allowing recruiters to view my available slots and schedule meetings with just a few clicks.

This integration has significantly improved the efficiency of my job application process, reducing delays and ensuring that meetings are scheduled promptly.

Setting Up Listmonk: An Open-Source Newsletter Mailing System

Dhruv Kumar — Sat, 22 Jun 2024 13:12:01 +0000

If you're looking for a robust, open-source newsletter and mailing list manager, Listmonk is an excellent choice. This guide will walk you through the process of setting up Listmonk on your server. The steps below will help you configure your domain, secure it with Let's Encrypt SSL certificates, and customize Listmonk for your needs.

Prerequisites

Before diving into the setup, ensure you have the following:

A server instance with Nginx installed.
Docker and Docker Compose installed on your server.
A custom domain that you want to use for Listmonk.
Basic knowledge of shell commands and editing configuration files.

Step-by-Step Guide

1. Clone the Listmonk Repository

Start by cloning the Listmonk repository to your server:

https://github.com/yasoob/listmonk-setup

2. Modify `init-letsencrypt.sh`

This script sets up Let's Encrypt SSL certificates for your domain. You'll need to edit the script to include your custom domain and email address.

Open init-letsencrypt.sh in your favorite text editor and make the following changes:

Line 8: Replace example.com with your custom domain.
Line 11: Add your email address.

domains=(yourdomain.com)
email="youremail@example.com"

3. Edit `config.toml`

Next, configure the administrative credentials for Listmonk. Open config.toml and modify the following lines:

Line 9: Set your admin username.
Line 10: Set your admin password.

admin_user = "your_admin_username"
admin_password = "your_admin_password"

4. Update Nginx Configuration

Listmonk uses Nginx as a reverse proxy. You'll need to update the Nginx configuration to point to your custom domain. Open data/nginx/nginx.conf and replace all instances of example.com with your domain.

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        proxy_pass http://listmonk:9000;
        ...
    }
    ...
}

5. Obtain SSL Certificates and Launch Listmonk

Run the init-letsencrypt.sh script to obtain SSL certificates and start Listmonk:

./init-letsencrypt.sh

This script will handle the SSL certificate setup and launch Listmonk using Docker. Follow the on-screen prompts to complete the process.

6. Verify Installation

Once the script completes, open a web browser and navigate to https://yourdomain.com. You should see the Listmonk login page. Log in using the admin credentials you set in config.toml.

Conclusion

Congratulations! You now have Listmonk up and running on your custom domain with SSL protection. Listmonk provides a powerful, self-hosted solution for managing newsletters and mailing lists, and with the steps above, you can ensure it's set up securely and customized to your needs.

For more detailed configuration and usage instructions, refer to the official Listmonk documentation. Happy mailing! 🚀

Streamlining Angular Deployment with GitHub Actions, GitHub Container registry , Docker, and Nginx

Dhruv Kumar — Thu, 06 Jun 2024 19:50:35 +0000

In modern web development, setting up an efficient CI/CD pipeline for deploying your Angular applications can significantly enhance your workflow. This blog post guides you through setting up a GitHub Actions pipeline to build and deploy an Angular application using Docker, Nginx, and ensuring basic security group configurations in EC2.

Prerequisites

A GitHub repository containing your Angular application.
Docker installed on your local machine.
GitHub Container Registry (GHCR) for storing Docker images.
An EC2 instance or any server with Docker and Nginx installed.
Proper security group settings on your EC2 instance.

Step 1: Modify Dockerfile to Accept Build Arguments

First, we need to update our Dockerfile to accept build arguments that specify the Angular environment. This ensures that our build process can dynamically adjust based on the environment.

# Use the official Node.js image as a base
FROM node:14

# Create and set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application files
COPY . .

# Set the environment variable to increase memory limit
ENV NODE_OPTIONS=--max_old_space_size=4096

# Build the Angular application based on the provided environment
ARG ANGULAR_ENV=production
RUN npm run build -- --configuration=$ANGULAR_ENV

# Expose the port the app runs on
EXPOSE 80

# Command to run the application
CMD ["npm", "start"]

Step 2: Set Up GitHub Actions Workflow

Next, we'll configure a GitHub Actions workflow to handle the build and deployment process.

name: Build and Deploy Angular

on:
  push:
    branches:
      - main # Change this to your main branch name

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: Log in to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }} # Use GitHub token secret

      - name: Extract Git Commit Hash
        id: vars
        run: echo "COMMIT_HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV

      - name: Build Docker Image
        run: |
          docker build --build-arg ANGULAR_ENV=production -t ghcr.io/yourusername/angular-docker:${{ env.COMMIT_HASH }} .

      - name: Push Docker Image to GitHub Container Registry
        run: |
          docker push ghcr.io/yourusername/angular-docker:${{ env.COMMIT_HASH }}

      - name: SSH and Deploy to Server
        env:
          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }} # This is the private key secret for SSH
          COMMIT_HASH: ${{ env.COMMIT_HASH }}
        run: |
          echo "$PRIVATE_KEY" > private_key.pem
          chmod 600 private_key.pem
          ssh -o StrictHostKeyChecking=no -i private_key.pem ubuntu@your-ec2-instance <<EOF
            echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
            docker pull ghcr.io/yourusername/angular-docker:${COMMIT_HASH}
            docker stop angular-app || true
            docker rm angular-app || true
            docker run -d --name angular-app -p 8080:80 ghcr.io/yourusername/angular-docker:${COMMIT_HASH}
            sudo systemctl restart nginx
            docker system prune -a -f --volumes
          EOF
          rm -f private_key.pem

    permissions:
      contents: read
      packages: write
      id-token: write

Step 3: Nginx Configuration

Update your Nginx configuration to correctly proxy requests to the Docker container.

server {
    if ($host = yourdomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    server_name yourdomain.com;
    return 404;
}

server {
    listen 443 ssl http2;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem; # managed by Certbot
}

Step 4: EC2 Security Group Configuration

Ensure your EC2 instance's security group allows inbound traffic on ports 80 and 443.

Log in to AWS Management Console.
Navigate to EC2 Dashboard.
Select Security Groups under "Network & Security".
Find and Select Your Security Group associated with your EC2 instance.
Edit Inbound Rules to allow traffic on ports 80 (HTTP) and 443 (HTTPS):
- HTTP (port 80):
  - Type: HTTP
  - Protocol: TCP
  - Port Range: 80
  - Source: 0.0.0.0/0
- HTTPS (port 443):
  - Type: HTTPS
  - Protocol: TCP
  - Port Range: 443
  - Source: 0.0.0.0/0
- Login ghcr.io to pull the iamges from your github

export CR_PAT=YOUR_TOKEN
echo $CR_PAT | docker login ghcr.io -u USERNAME --password-stdin

Summary

This setup ensures that:

Each deployment uses a Docker image tagged with the specific Git commit hash.
Unused Docker images are removed from your server to free up space.
Your server runs the latest Docker image without accumulating old images.

Understanding the Differences Between Google Agents and Google Chatbots

Dhruv Kumar — Mon, 27 May 2024 18:10:11 +0000

Key differences between Google Agents and Google Chatbots

Businesses and users are increasingly adopting conversational AI solutions to interact with their users and perform routine tasks. When it comes to conversational AI, two technologies stand out: Google Agents and Google Chatbots. Both are designed to establish communication between users and systems, yet they are very different in their application and possibilities. In this blog, we cover those differences to help you decide which product to use.

Chatbots: Informational transactional output

Ref Link : [Get started with ]

Rule-based output:

A Google Chatbot can perform pre-defined specific tasks. They function using rules and are best suited for simple FAQs and information access. For instance, your chatbot may respond to user queries like store opening/closing times, product information, simple technical support instructions etc.

Live Interactions:

Most Chatbots offer live interactions to users. This means that the user poses a question and the bot replies immediately. Though this is synchronous in nature, such conversations are usually restricted to a single response and not suited for complex or extended discussions.

Limited automation:

Chatbots can be used to automate simple, routine tasks but the possibilities remain limited to basic use cases. They are good at providing fast, transactional data but not so much at interpreting more complex user intent.

Agents: Goal oriented task performers

Ref Link : [Get started with ]

User Intent:

Google Agents are advanced, goal oriented technology. They are focused on interpreting user intent which in turn helps them manage complex conversations. Agents are programmed to understand conversations in context and perform relevant actions that achieve user objectives.

Non Live Interactions:

Agents unlike chatbots can participate in non live or asynchronous conversations. They have the ability to get started, engage in conversation over time, interact with other agents and systems and perform actions consistently to achieve a desired outcome.

Connectivity to APIs:

Connectivity to APIs is perhaps the biggest differentiator for agents. They can be integrated to any API and perform relevant actions on behalf of the user. This means agents have the potential to book appointments, process purchases or even authenticate and authorize user logins.

Flexibility:

Agents by design are flexible and perform a diverse range of tasks with optimum efficiency. They can handle complex workflows, assess user inputs and respond with relevant personalized information that meets user objectives.

Agent Builder platform for easy agent creation

Google has made available Agent Builder platforms to ease the creation and deployment of conversational agents. Particularly, Vertex AI's Agent Builder (previously Dialogflow CX) offers a highly scalable cloud-based conversational AI development platform using generative playbooks and the react pattern. Together these help developers create powerful agents capable of handling complex conversations and driving related business workflows.

Conclusion: Choosing the Right Technology

When deciding between Google Chatbots and Google Agents, consider the nature of the tasks you need to automate. If your requirements are limited to basic information retrieval and simple, rule-based interactions, a chatbot might be sufficient. However, if you need a more sophisticated solution capable of understanding user intent, performing actions, and handling complex tasks, an agent is the way to go.

By leveraging the appropriate technology, you can enhance user interactions, improve operational efficiency, and deliver a more engaging and productive experience for your customers.

Inbox Invasion: The Ultimate Spam Content Calculator

Dhruv Kumar — Sun, 14 Apr 2024 05:44:31 +0000

This is a submission for the Cloudflare AI Challenge.

What We Built

Email marketing is a vast and lucrative field, and professionals understand its immense value. The golden rule of email marketing is crystal clear: your email must land in the inbox, not the spam folder. That's where the real treasure lies. Email delivery involves many factors such as domain scores and more, but content is king. That's why we've developed an AI that helps you enhance your email content, making it more spam-resistant. Let our AI do the heavy lifting, so you can reap the rewards and strike gold!

Demo

App Link

My Code

aixart12 / cloudflare-ai-email-analysis

Email Spam Percentage Calaulator

Anaylis your marketing email chance to drop in inbox Cloudflare AI x DEV challenge.

Demo

🔗 https://dev-cloudflare-ai.dhruvlol12.workers.dev

Features

Take the email content and anyalis the email on following things

trigger words
natural language and conversation tone
unsubscribe link

Installation Steps

Make sure you have the cloud flare account logged-in .
Run npm i
Run npm run dev to run the project locally

View on GitHub

Journey

Genesis of the Spam Slayer

The Tale of Inbox Invasion: Ultimate Spam Content Calculator—a masterpiece crafted to determine the likelihood of an email being marked as spam and strategies to avoid it. The inspiration for this project came from a lunch conversation with a marketing colleague who expressed frustration about their emails consistently landing in spam, despite their efforts and without understanding why.

Fueling Innovation with Competition

Motivated by an upcoming contest, we decided to build a tool to help users understand spam rules better and craft their emails more effectively. Our research began with exploring the filters used by email services, including a deep dive into Cloudflare, which was a new area for us. We then moved on to developing the app, with plans to evolve it into a plugin for every email service provider, complete with a variety of pre-designed templates to minimize the time and effort spent on writing emails.

Tech Stack and Tools

Technologies used included JavaScript, HTML, CSS, and Hono, with the @cf/meta/llama-2-7b-chat-int8 model.

Triumph Amidst Trials

One aspect we're particularly proud of is how we managed our time. Balancing this project with our regular 9-to-9 jobs and a tight one-week deadline was a significant challenge. We faced numerous hurdles, such as acquiring email data for testing and aligning with the marketing team's needs, which were initially unfamiliar territories for us. Despite these challenges, the experience was thrilling and rewarding.

The Team

@diaaswani

Frappe Docker Development Setup Guide for Custom Apps

Dhruv Kumar — Fri, 05 Apr 2024 01:48:24 +0000

This guide outlines the steps to set up a development environment using Frappe Docker, which will enable you to develop and debug Frappe and Frappe-based applications efficiently.

Prerequisites

Ensure you have the following installed on your system:

Docker: A containerization platform.
Docker Compose: A tool for defining and running multi-container Docker applications.
Git: A version control system.
Visual Studio Code (VSCode): A source-code editor that supports the DevContainer extension.

Setup Instructions

Clone the Repository

Start by cloning the frappe_docker repository and navigate into the directory:

git clone https://github.com/frappe/frappe_docker.git
cd frappe_docker

Configure Development Container

Copy the example development container configuration:

cp -R devcontainer-example .devcontainer

Copy the VSCode configuration for the development container to set up basic debugging capabilities:

cp -R development/vscode-example development/.vscode

Open in VSCode

Open the project in VSCode. If the Remote Containers extension is installed, you should see a prompt to reopen the project in a container. If not, reload the window or press Ctrl + Shift + P, then search for and select "Rebuild and Reopen in Container".

Modify Application Configuration

Edit apps-example.json to point to the correct repository and branch for your application:

[
  {
    "url": "https://{{PAT}}@github.com/example/your_private_repo.git",
    "branch": "main"  // can change according
  }
]

Replace {{PAT}} with your GitHub Personal Access Token (PAT).

Reference Link : https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

Install Dependencies and Setup Application

Run the Python installer script with the appropriate repository and tag:

python installer.py -r {{your_forked_frappe_repo}} -t {{forked_repo_branch_name}} -p {{python-version}}

Reference Link : https://github.com/frappe/frappe_docker/blob/main/docs/development.md

Activate the Python virtual environment:

source env/bin/activate

Navigate to the application directory, and install the required Python packages:

cd apps/{{you_app_name}}/
pip install -r requirements.txt

Set the default site in Bench:

bench use development.localhost

Start the Development Server

Navigate back to the frappe-bench directory and start the development server using either of the following commands:

cd ../frappe-bench
bench start

honcho start web socketio watch schedule worker

Conclusion

Following these steps will set up your Frappe Docker development environment, allowing you to develop and debug applications within a containerized environment seamlessly.

Integrating Storybook with PrimeNG and TailwindCSS in an Nx Workspace

Dhruv Kumar — Sat, 09 Mar 2024 17:38:06 +0000

In the evolving landscape of front-end development, efficiency and scalability are key. Leveraging a powerful trio of technologies—Nx workspace, Storybook, PrimeNG, and TailwindCSS—can significantly streamline the development process. This guide walks through integrating these tools into an existing Nx workspace, ensuring a seamless setup for building a robust and visually appealing UI.

Prerequisites

Before diving into the integration process, ensure you have a pre-existing Nx workspace. If you're new to Nx, it's a suite of powerful, extensible dev tools to help you architect, test, build, and maintain your Angular (and more) projects with ease.

Step 1: Generate a New Library with TailwindCSS

Start by creating a new library within your Nx workspace that's configured to be buildable and adds TailwindCSS out of the box:

npx nx generate @nx/angular:lib lib/shared/custom-button --buildable --addTailwind

This command scaffolds a new Angular library called custom-button, ready for development with TailwindCSS integrated from the get-go.

Step 2: Configure Storybook for the New Library

Next, set up Storybook for your custom-button library to enable an isolated development environment, making UI component creation and testing a breeze:

npx nx g @nx/angular:storybook-configuration custom-button

After configuring Storybook, you can launch it with:

npx nx run custom-button:storybook

Step 3: TailwindCSS Configuration

To ensure TailwindCSS works seamlessly within your Nx workspace, follow the configuration steps detailed in guide by Nrwl. It will walk you through setting up TailwindCSS so that it can be used across your projects within the workspace.

After configuring Tailwind, update your styles.scss to include Tailwind's layers, PrimeNG styles, and any custom utilities:

@layer tailwind-base, tailwind-utilities {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

This setup ensures that TailwindCSS and PrimeNG styles are properly loaded and can be used throughout your application.

Step 4: Update Storybook Configuration

To use PrimeNG components with animations in your Storybook, update your library's Storybook configuration to include necessary Angular modules:

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

export default {
  decorators: [
    moduleMetadata({
      imports: [CommonModule, BrowserAnimationsModule],
    }),
  ],
};

This ensures that your Storybook can render PrimeNG components with animations correctly.

Step 5: Adjust `project.json` for the Library

Lastly, enhance your library's project.json to include global styles and PrimeNG theme CSS. This ensures that your Storybook instances have the correct styles and themes applied:

"styles": [
  "apps/saas/src/styles.scss",
  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

Integrating TailwindCSS with PrimeNG Components

When integrating TailwindCSS with PrimeNG components, you can directly apply Tailwind's utility classes to PrimeNG components for styling. Here's an example of how you can apply TailwindCSS classes to a PrimeNG button component:

<button
  pButton
  pRipple
  [label]="text"
  class="inline-flex items-center justify-center px-5 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
></button>

This code snippet demonstrates adding TailwindCSS classes to a PrimeNG <button> component, enhancing its appearance with Tailwind's utility-first CSS classes for a more modern and responsive design.

Conclusion

Integrating Storybook with PrimeNG and TailwindCSS in an Nx workspace elevates your development workflow, making it more efficient and your applications more scalable and visually consistent. This setup not only accelerates the UI development process but also ensures a cohesive look and feel across your projects, leveraging the best of what these individual technologies offer. Whether you're building enterprise-level applications or smaller projects, this robust combination provides a solid foundation for your development needs.

Forem: Dhruv Kumar

Technical Deep Dive: Building an AI-Powered Real Time Root Cause Analysis System

Core Components and Implementation

1. AI and Context Management

2. Data Processing and Performance

3. Frontend Development

4. Backend and System Stability

Technical Challenges and Solutions

How Indexes Really Work

The Slow Lane: Life Without Indexes (Full Table Scans)

The Fast Lane: Introducing Indexes

How the Query Runs With the Index

The Payoff: Comparing Performance

Why Does This Matter For You?

Conclusion

Building a Real-Time Flask and Next.js Application with Redis, Socket.IO, and Docker Compose

Tech Stack Overview

Step 1: Backend Setup with Flask and Redis

Flask Backend Structure

Step 2: Frontend Setup with Next.js and Socket.IO

Client-Side Socket.IO Setup

Step 3: Docker Compose for Deployment

Step 4: Running the Application

**GitHub : https://github.com/aixart12/colobrate-editor

Understanding Go through the Lens of TypeScript/JavaScript

1. Structs in Go ≈ Types in TypeScript

2. Methods in Go: Receivers ≈ Prototypes in JavaScript

3. let, var, const in TypeScript ≈ Variable Declaration in Go

4. Go Interfaces ≈ TypeScript Interfaces (with differences)

5. Error Handling in Go ≈ Try-Catch in JavaScript (but different)

6. Package System in Go ≈ ES Modules in TypeScript

7. Concurrency in Go: Goroutines ≈ Asynchronous Programming

Conclusion

From Static to Stunning: Animate with GSAP

Why GSAP?

Getting Started

1. Setting Up GSAP

2. Basic GSAP Animation

3. Common GSAP Methods

4. Creating Sequential Animations with Timeline

5. Easing Effects

6. Animating Multiple Elements

7. Scroll Animations with ScrollTrigger

Conclusion

Integration of Calendar for Efficient Meeting Scheduling

Steps for Integration:

Setting Up Listmonk: An Open-Source Newsletter Mailing System

Prerequisites

Step-by-Step Guide

1. Clone the Listmonk Repository

2. Modify init-letsencrypt.sh

3. Edit config.toml

4. Update Nginx Configuration

5. Obtain SSL Certificates and Launch Listmonk

6. Verify Installation

Conclusion

Streamlining Angular Deployment with GitHub Actions, GitHub Container registry , Docker, and Nginx

Prerequisites

Step 1: Modify Dockerfile to Accept Build Arguments

Step 2: Set Up GitHub Actions Workflow

Step 3: Nginx Configuration

Step 4: EC2 Security Group Configuration

Summary

Understanding the Differences Between Google Agents and Google Chatbots

Key differences between Google Agents and Google Chatbots

Chatbots: Informational transactional output

Agents: Goal oriented task performers

Agent Builder platform for easy agent creation

Conclusion: Choosing the Right Technology

Inbox Invasion: The Ultimate Spam Content Calculator

What We Built

Demo

My Code

aixart12 / cloudflare-ai-email-analysis

Email Spam Percentage Calaulator

Demo

Features

Installation Steps

Journey

The Team

3. `let`, `var`, `const` in TypeScript ≈ Variable Declaration in Go

2. Modify `init-letsencrypt.sh`

3. Edit `config.toml`

Step 5: Adjust `project.json` for the Library