DEV Community: Vaibhav sisodiya

I created this game during my lunch. ⚠️ THIS IS ADDICTIVE ⚠️ Improve your typing speed and accuracy Try: https://type-or-die.vercel.app

Vaibhav sisodiya — Thu, 06 Feb 2025 09:46:41 +0000

Don't use DeepSeek R1 before this!

Vaibhav sisodiya — Thu, 30 Jan 2025 09:37:50 +0000

Unless you've just woken up from a coma or have sworn off technology entirely (which, let’s be honest, would be impressive if you’re reading this), you’ve probably heard about the AI model that’s shaking up the industry—R1 by Deepseek.

R1 has left American AI companies in the dust, effortlessly outperforming OpenAI’s so-called “best” model, O1, which comes with a hefty $200/month price tag. The real kicker? R1 is completely free and open-source.

But before you jump on the hype train, let’s take a moment to talk about the potential risks of using R1.

🚨 Why You Should Avoid Deepseek.com

Yes, you read that right. Do not use Deepseek.com.

While this is the official website for accessing R1, the problem lies in the fact that Deepseek AI originates from China. If history has taught us anything about China's tech policies, it’s that privacy isn’t exactly their strong suit.

Upon inspecting Deepseek.com, it's evident that the site meticulously tracks every action you perform. Here’s a screenshot showing just how aggressively they monitor user behavior:

If you value data privacy and security, using their website might not be the best idea.

✅ The Better Alternative: Self-Hosting R1

So, what’s the best way to use R1 without compromising your privacy?

There are two safer alternatives:

Use Their API – This is a viable option, but it involves recurring costs and isn’t very scalable.
Host the Model Yourself – This is the best solution if you want full control and privacy.

To run R1 on your local machine (or a cloud server), you can use Ollama—a tool that lets you download and run various AI models effortlessly.

You can find all Deepseek AI models on Ollama, including R1. Here’s the link to the R1 model:
👉 https://ollama.com/library/deepseek-r1

📌 Choosing the Right Model Size

R1 comes in multiple variants, ranging from 1.5B to 70B parameters. Here’s a breakdown:

If you're unsure where to start, the 8B model is a great middle ground between performance and resource consumption.

🖥️ GUI Options for the Non-Terminal Folks

If you’re not comfortable with command-line tools and prefer a more visual approach, there are GUI wrappers for Ollama like OpenWebUI. These make running AI models as easy as clicking a button.

💻 Integrating R1 into Your Own Application

For developers, Ollama also offers an npm package that allows seamless integration of R1 into web apps:
👉 https://www.npmjs.com/package/ollama

Final Thoughts 💭

R1 is an impressive leap in AI technology, but using it through Deepseek.com might not be the best move if you care about your data privacy. Self-hosting the model via Ollama ensures both security and flexibility.

What are your thoughts on R1? Let’s discuss in the comments!

System Design of a Referral System

Vaibhav sisodiya — Sat, 02 Nov 2024 17:57:41 +0000

Introduction to System Design

System design is a crucial aspect of software engineering that focuses on defining the architecture, components, modules, and interfaces of a system to meet specific requirements. In essence, it’s about planning how the parts of a system will interact with each other to fulfill the intended use cases.

System design principles include scalability, reliability, performance, and maintainability. When creating a new system, understanding these fundamentals can guide us to a solution that can handle anticipated loads, adapt to growth, and provide a smooth user experience. In this blog, we’ll break down the system design process by building a referral system, specifically focusing on a case similar to Google Pay’s Diwali offer.

System Design Process

We'll approach the referral system design with six main steps:

Clarify the Problem and Define Requirements
Capacity Estimates
High-Level Design
API Design
Data Schema Creation
Detailed Design

Step 1: Define Problem Scope and Requirements

Project Example

Imagine a referral system for a payment app (e.g., Google Pay) where:

The referrer (person who sends the invite) earns ₹201 when the invitee (person who joins via the invite) completes their first transaction.
The invitee gets ₹51 upon joining and completing their first transaction.

Functional Requirements

The system should allow users to generate a unique invite link.
Users should be able to create an account with profile photos.
Referrers should be notified and rewarded when someone joins and completes a transaction using their referral link.
A user can view the list of people who joined using their referral link.

Non-functional Requirements

Scalability: The system should handle a large number of users and referral transactions.
Reliability: Referral tracking should be accurate and reward distribution consistent.
Performance: Users should receive rewards promptly, without long delays.

Step 2: Determine Capacity Estimates

Estimating capacity requirements helps in planning the resources and ensuring that the system can handle the expected load. For example:

Profile Photos: Assume each profile photo is 3MB, and we expect 5000 new users daily. This means:
- Daily storage for images: (5000 \times 3 \text{ MB} = 15 \text{ GB})
- Daily bandwidth requirement: (15 \text{ GB} \times 1000 = 3 \text{ TB})
Unique Code Storage: Using a 5-character alphanumeric code (A-Z, a-z, 0-9), we can support approximately 91 million unique combinations. This should be sufficient for our user base.

Step 3: High-Level Design

Unique Link Creation

The referral system will generate unique codes or links to ensure each invite is identifiable.

Length of Unique Code: For a 5-character alphanumeric code, we have enough combinations for our user volume.
Unique Code Generation:
- Brute Force: Generate a random code, check if it’s unique, and assign it to the user.
- Hash-Based (MD5): Use the MD5 hash of the user’s email with an incremental counter if duplicates arise.

Example Code for MD5 Generation:

def generate_unique_code(email, attempt=0):
    if attempt > 5:
        return None
    hash = calculate_hash(email + str(attempt))
    if is_unique(hash):
        return hash
    else:
        return generate_unique_code(email, attempt + 1)

Step 4: API Design

API endpoints will handle the interactions between users and the system. Key APIs include:

Generate Unique Link for User:
- Endpoint: generateUniqueLink(email: string)
- Parameters: email – User’s email
- Function: Generates and returns a unique referral link for the user.
Get Unique Link:
- Endpoint: getUniqueLink(email: string)
- Parameters: email – User’s email
- Function: Retrieves the unique referral link for a user.
Mark Referral:
- Endpoint: markReferral(email: string, referralCode: string)
- Parameters:
  - email – New user’s email
  - referralCode – Code of the referring user
- Function: Marks the new user as referred and initiates the reward process.
Get All Referrals of a User:
- Endpoint: getAllReferrals(email: string)
- Parameters: email – User’s email
- Function: Returns a list of users who joined via the referrer’s link.

Step 5: Database Schema Design

A well-structured database is essential for managing user data and referral tracking.

Step 6: Detailed Design

This phase addresses potential bottlenecks and performance optimization:

Handling High Traffic:
- Solution: Use load balancing and server autoscaling to manage high traffic volumes.
Efficient Key Generation:
- Solution: Consider longer codes or stronger algorithms to reduce the probability of duplicates.
Caching:
- Solution: Implement caching for frequent API calls, such as retrieving a user’s referral list, to reduce database load.
Database Sharding:
- Solution: Distribute data across multiple databases to manage growth and reduce latency.

Conclusion

Designing a referral system involves careful consideration of requirements, capacity, and scalability. Starting with a high-level overview and breaking down each aspect of the system, from API design to database schema, enables us to build a system that is scalable, efficient, and user-friendly. By applying these system design principles, you can create a robust referral platform that enhances user engagement and rewards loyalty.

This New AI Tool (FREE) Could Put Claude & v0.dev in the Dust – Here’s Why

Vaibhav sisodiya — Sat, 05 Oct 2024 16:11:24 +0000

The world of AI tools is booming, and for good reason. We’ve all heard about Claude and v0.dev, two popular tools in the AI community, offering sophisticated conversational models and developer-friendly environments to build crazily good UI components and sometimes, full blown application. But, as great as they are, they come with their own set of limitations—daily usage caps and premium pricing tiers. While these platforms have attracted a loyal user base, there's a new player on the block that’s shaking things up: Fragments by E2B. This tool, which I recently discovered on YouTube, promises to provide a similar experience—if not better—without the restrictions that often hold users back.

The Problem with Claude and v0.dev

Claude, developed by Anthropic, has gained traction for its coding capabilities & artifacts thing, often hailed as a strong competitor to other large language models like OpenAI’s GPT. However, there’s a catch: the free version of Claude is capped by daily limits, which can be frustrating for users who need to rely on it for extended work sessions. On the other hand, v0.dev focuses on creating mostly next.js related components through AI, but again, users run into the same issue—daily usage limits and the need to pay for increased access.

While these tools are undoubtedly powerful, it’s hard to ignore that AI enthusiasts and developers want more freedom. Paying for premium features or being forced to stop using the tool due to daily limits interrupts workflow and hampers productivity.

So what is this `Fragments` thing?

Developed by E2B, Fragments is an open-source platform that promises to deliver an AI experience without any of these limits. No daily caps. No hidden charges. Just free, unlimited access. For anyone who’s felt the sting of hitting their daily usage limit on Claude or v0.dev, this sounds like a dream.

But that’s not all. Fragments doesn’t just copy what others are doing—it brings some unique features to the table.

Customizable AI Personas: Fragments allows users to select from a variety of AI personas based on their specific needs. Whether you’re a Python data analyst or a Next.js developer, Fragments has you covered. You can choose from personas like:

Auto (general-purpose AI)
Python Data Analyst
Vue.js Developer
Gradio Developer, and more.

This kind of customization allows users to work in a way that aligns with their specific goals.

A Wide Range of Models: One of the coolest features of Fragments is the sheer variety of AI models available for free. Whether you want to use models like OpenAI’s GPT-4 variants or explore cutting-edge options like Google’s Gemini Flash, Fragments offers a range of models including:

OpenAI's latest & greatest o1-preview, o1-mini, gpt-4o, etc.
Claude 3.5 Sonnet
Google's Gemini Pro & Gemini Flash
Mistral and Llama 3.1 models (Preview)
Ollama Models

These models are typically paid features on other platforms, but Fragments gives access to them without any cost. Plus, you can even control parameters to fine-tune the performance of the models for your tasks.

Attachment and Running Local Models: Fragments also allows you to upload files for analysis—ideal for tasks like data science or complex project development. On top of that, if you prefer more control, you can even self-host the platform locally instead of using the cloud version. This is a big win for developers who want complete autonomy.

Free and Open Source – A Game-Changer

Here’s where things get even more exciting. Fragments is open source, meaning anyone can contribute to it, customize it, or even host it locally. Don’t want to rely on the cloud? No problem, you can set up Fragments on your own infrastructure. This gives developers and organizations a way to integrate AI deeply into their workflows without being tethered to external servers or subscriptions.

But is `Fragments` really "THAT" good?

So to find out, I chose the easiest way: ask it to make something. And guess what did I ask it make for me: Minesweeper game, Yes, that classic old minesweeper game that had a place in the games folder of our good old windows pc(for a very long time, I had no clue what was the actual logic, I played it as a luck based game)

Still can't remember, okay this should help you to remind:

Now, what was the output of code given by AI. Well on my first prompt (which was: create a windows minesweeper clone, who on the earth gives prompt this short🤪).

Output:

At this stage, the game was completely playable. Without even saying it gave this cool tilted card effect. However, it didn't actually clones the UI part of windows version of the game.
Also, the 'New game' button didn't actually worked.

So, what did I do next? What an average software developer does with AI.

And what did AI do?

Yes, it fixed it. And made it even better with scores and flags thing.

But will this stop a developer from going further.

Hell no!

The result was scary good!

You can actually go and play the game on snippets (my very own app where you can store these snippets of code and see them in action without all that hassle of setting up environments) -> https://snip.vaib.live/snippet/79?mode=preview

snip.vaib.live

Also, I actually won it for once(just forgot to take the screenshot😜).

Tell me your thoughts on the tool and the generated outputs in the comments. Lets have a discussion around it.

Simple Guide to Integrate Juspay in Your TypeScript React App

Vaibhav sisodiya — Sun, 15 Sep 2024 13:21:32 +0000

This guide provides step-by-step instructions on how to integrate Juspay into a React app using TypeScript for both front-end and back-end parts of the payment process.

Prerequisites

Ensure you have the following credentials for Juspay:

Merchant ID
Client ID
API Key

Integration Flow

Here is the flow of payment integration using Juspay:

Steps for TypeScript Integration

1. Create Payment Session (Server-Side in TypeScript)

Use Node.js/Express with TypeScript to create the payment session using Juspay's API.

Create a TypeScript `PaymentSession` interface to type your response:

interface PaymentSession {
  payment_link: string;
  order_id: string;
  status: string;
}

TypeScript code for creating a session:

import axios from 'axios';
import base64 from 'base-64';
import { Request, Response } from 'express';

const createSession = async (req: Request, res: Response) => {
  const apiKey = 'your_api_key';
  const authHeader = base64.encode(`${apiKey}:`);

  try {
    const response = await axios.post<PaymentSession>(
      'https://api.juspay.in/session',
      {
        customer_id: 'customer_id_here',
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
      },
      {
        headers: {
          Authorization: `Basic ${authHeader}`,
        },
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: (error as Error).message });
  }
};

export default createSession;

In this code:

PaymentSession interface ensures type safety for the session response.
TypeScript's type assertions ensure accurate error handling (error as Error).

2. Initiate Payment from React Client (TypeScript)

In the React client, create a component that initiates the payment process using a useEffect hook and Axios for API requests.

Define an interface for the session response:

interface PaymentSession {
  payment_link: string;
  order_id: string;
}

Component in TypeScript:

import React, { useState } from 'react';
import axios from 'axios';

const PaymentPage: React.FC = () => {
  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);

  const initiatePayment = async () => {
    try {
      const response = await axios.post<PaymentSession>('/api/create-session', {
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
        customer_id: 'your-customer-id',
      });
      setPaymentUrl(response.data.payment_link);
    } catch (error) {
      console.error('Error initiating payment:', error);
    }
  };

  return (
    <div>
      <h1>Initiate Payment</h1>
      <button onClick={initiatePayment}>Pay Now</button>
      {paymentUrl && (
        <div>
          <a href={paymentUrl} target="_blank" rel="noopener noreferrer">
            Complete Payment
          </a>
        </div>
      )}
    </div>
  );
};

export default PaymentPage;

In this code:

PaymentSession ensures the expected structure of the response from the backend.
The initiatePayment function sends the request to initiate the payment and handles the response.

3. Handling Return URL and Checking Payment Status

When the user is redirected back after the payment, you need to check the payment status and display it.

TypeScript Interface for Payment Status:

interface PaymentStatus {
  status: string;
  order_id: string;
  amount: number;
}

React Component to Handle Payment Status:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const PaymentStatusPage: React.FC = () => {
  const [paymentStatus, setPaymentStatus] = useState<string | null>(null);

  useEffect(() => {
    const checkPaymentStatus = async () => {
      try {
        const response = await axios.get<PaymentStatus>('/api/check-status', {
          params: { order_id: 'your-order-id' },
        });
        setPaymentStatus(response.data.status);
      } catch (error) {
        console.error('Error fetching payment status:', error);
      }
    };

    checkPaymentStatus();
  }, []);

  return (
    <div>
      <h1>Payment Status</h1>
      {paymentStatus ? (
        <p>Payment Status: {paymentStatus}</p>
      ) : (
        <p>Checking payment status...</p>
      )}
    </div>
  );
};

export default PaymentStatusPage;

In this component:

You send the order_id to your backend to check the payment status.
The backend should return the status based on the response from Juspay's API.

4. Handling Webhooks with TypeScript (Backend)

Juspay will send a webhook to notify you of payment status changes. Below is how to handle this in a TypeScript environment.

import { Request, Response } from 'express';

interface JuspayWebhook {
  order_id: string;
  status: string;
  amount: number;
  currency: string;
}

const handleWebhook = (req: Request, res: Response) => {
  const paymentUpdate: JuspayWebhook = req.body;

  console.log('Payment Update Received:', paymentUpdate);

  // Process the payment update (e.g., update your database)

  // Respond to Juspay to confirm receipt
  res.status(200).send('Webhook received');
};

export default handleWebhook;

5. Respond to Juspay with a 200 OK (Backend)

To confirm receipt of the webhook notification, your server should return a 200 OK status:

app.post('/api/webhook', (req: Request, res: Response) => {
  // Acknowledge the webhook
  res.status(200).send('OK');
});

Conclusion

By following these steps and leveraging TypeScript for both client and server-side code, you can integrate Juspay into your React app efficiently and safely. TypeScript adds the benefit of type safety, reducing errors and ensuring your integration is smooth.

Client Side: You initiate payment using React components and check the status.
Server Side: Your Node.js/Express backend handles the payment session, status, and webhook notifications.

This guide provides a complete overview of how to integrate Juspay into a modern web stack using TypeScript.

Building a Dynamic Grid System for Responsive Meeting Tiles in React

Vaibhav sisodiya — Tue, 27 Aug 2024 08:08:51 +0000

In the era of remote work and virtual meetings, creating a responsive and dynamic grid system for displaying participant video tiles is crucial. Inspired by platforms like Google Meet, I recently developed a flexible grid system in React that adapts seamlessly to varying numbers of participants and different screen sizes. In this blog post, I'll walk you through the implementation, explaining the key components and how they work together to create an efficient and responsive layout.

Introduction
Grid Layout Definitions
Selecting the Appropriate Grid Layout
The useGridLayout Hook
Example Usage
Styling the Grid
Conclusion

Introduction

Creating a dynamic grid system involves adjusting the layout based on the number of items (or "tiles") and the available screen real estate. For video conferencing applications, this ensures that each participant's video feed is displayed optimally, regardless of the number of participants or the device being used.

The solution I developed leverages React hooks and CSS Grid to manage and render the grid layout dynamically. Let's dive into the core components of this system.

Grid Layout Definitions

First, we define the possible grid layouts that our system can use. Each layout specifies the number of columns and rows, as well as constraints on the minimum and maximum number of tiles it can accommodate.

import { useState, useEffect, RefObject } from 'react';

export type GridLayoutDefinition = {
  name: string;
  columns: number;
  rows: number;
  minTiles: number;
  maxTiles: number;
  minWidth: number;
  minHeight: number;
};

export const GRID_LAYOUTS: GridLayoutDefinition[] = [
  { columns: 1, rows: 1, name: '1x1', minTiles: 1, maxTiles: 1, minWidth: 0, minHeight: 0 },
  { columns: 1, rows: 2, name: '1x2', minTiles: 2, maxTiles: 2, minWidth: 0, minHeight: 0 },
  { columns: 2, rows: 1, name: '2x1', minTiles: 2, maxTiles: 2, minWidth: 900, minHeight: 0 },
  { columns: 2, rows: 2, name: '2x2', minTiles: 3, maxTiles: 4, minWidth: 560, minHeight: 0 },
  { columns: 3, rows: 3, name: '3x3', minTiles: 5, maxTiles: 9, minWidth: 700, minHeight: 0 },
  { columns: 4, rows: 4, name: '4x4', minTiles: 10, maxTiles: 16, minWidth: 960, minHeight: 0 },
  { columns: 5, rows: 5, name: '5x5', minTiles: 17, maxTiles: 25, minWidth: 1100, minHeight: 0 },
];

Explanation

GridLayoutDefinition: A TypeScript type that defines the properties of each grid layout.
GRID_LAYOUTS: An array of predefined layouts, ordered by complexity. Each layout specifies:
- columns and rows: The number of columns and rows in the grid.
- name: A descriptive name for the layout (e.g., '2x2').
- minTiles and maxTiles: The range of tile counts that the layout can accommodate.
- minWidth and minHeight: The minimum container dimensions required for the layout.

Selecting the Appropriate Grid Layout

The core logic for selecting the right grid layout based on the number of tiles and container size is encapsulated in the selectGridLayout function.

function selectGridLayout(
  layouts: GridLayoutDefinition[],
  tileCount: number,
  width: number,
  height: number,
): GridLayoutDefinition {
  let currentLayoutIndex = 0;
  let layout = layouts.find((layout_, index, allLayouts) => {
    currentLayoutIndex = index;
    const isBiggerLayoutAvailable = allLayouts.findIndex((l, i) => 
      i > index && l.maxTiles === layout_.maxTiles
    ) !== -1;
    return layout_.maxTiles >= tileCount && !isBiggerLayoutAvailable;
  });

  if (!layout) {
    layout = layouts[layouts.length - 1];
    console.warn(`No layout found for: tileCount: ${tileCount}, width/height: ${width}/${height}. Fallback to biggest available layout (${layout?.name}).`);
  }

  if (layout && (width < layout.minWidth || height < layout.minHeight)) {
    if (currentLayoutIndex > 0) {
      const smallerLayout = layouts[currentLayoutIndex - 1];
      layout = selectGridLayout(
        layouts.slice(0, currentLayoutIndex),
        smallerLayout.maxTiles,
        width,
        height,
      );
    }
  }

  return layout || layouts[0];
}

How It Works

Initial Selection: The function iterates through the layouts array to find the first layout where maxTiles is greater than or equal to tileCount and ensures there's no larger layout with the same maxTiles available.
Fallback Mechanism: If no suitable layout is found, it defaults to the largest available layout and logs a warning.
Responsive Adjustment: If the selected layout's minWidth or minHeight constraints aren't met by the container dimensions, the function recursively selects a smaller layout that fits within the constraints.
Final Return: The selected layout is returned, ensuring that the grid is both adequate for the number of tiles and fits within the container's size.

The `useGridLayout` Hook

To encapsulate the grid selection logic and make it reusable across components, I created the useGridLayout custom hook.

export function useGridLayout(
  gridRef: RefObject<HTMLElement>,
  tileCount: number
): { layout: GridLayoutDefinition } {
  const [layout, setLayout] = useState<GridLayoutDefinition>(GRID_LAYOUTS[0]);

  useEffect(() => {
    const updateLayout = () => {
      if (gridRef.current) {
        const { width, height } = gridRef.current.getBoundingClientRect();
        const newLayout = selectGridLayout(GRID_LAYOUTS, tileCount, width, height);
        setLayout(newLayout);

        gridRef.current.style.setProperty('--col-count', newLayout.columns.toString());
        gridRef.current.style.setProperty('--row-count', newLayout.rows.toString());
      }
    };

    updateLayout();

    window.addEventListener('resize', updateLayout);
    return () => window.removeEventListener('resize', updateLayout);
  }, [gridRef, tileCount]);

  return { layout };
}

Hook Breakdown

Parameters:
- gridRef: A reference to the grid container element.
- tileCount: The current number of tiles to display.
State Management: Uses useState to keep track of the current layout, initializing with the first layout in GRID_LAYOUTS.
Effect Hook:
- updateLayout Function: Retrieves the container's width and height, selects the appropriate layout using selectGridLayout, and updates the state. It also sets CSS variables --col-count and --row-count on the container for styling.
- Event Listener: Adds a resize event listener to update the layout whenever the window size changes. Cleans up the listener on component unmount.
Return Value: Provides the current layout object to the consuming component.

Example Usage

To demonstrate how this dynamic grid system works in practice, here's an example React component that uses the useGridLayout hook.

'use client'

import React, { useState, useRef, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { useGridLayout, GridLayoutDefinition } from './useGridLayout'

export default function Component() {
  const [tiles, setTiles] = useState<number[]>([1, 2, 3, 4]);
  const [containerWidth, setContainerWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1000);
  const gridRef = useRef<HTMLDivElement>(null);

  const { layout } = useGridLayout(gridRef, tiles.length);

  useEffect(() => {
    const handleResize = () => {
      setContainerWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const addTile = () => setTiles(prev => [...prev, prev.length + 1]);
  const removeTile = () => setTiles(prev => prev.slice(0, -1));

  return (
    <div className="flex flex-col items-center gap-4 p-4 w-full">
      <div className="flex flex-wrap justify-center gap-2 mb-4">
        <Button onClick={addTile}>Add Tile</Button>
        <Button onClick={removeTile}>Remove Tile</Button>
      </div>
      <div className="w-full border border-gray-300 p-4">
        <div 
          ref={gridRef} 
          className="grid gap-4"
          style={{
            gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
            gridTemplateRows: `repeat(var(--row-count), 1fr)`,
          }}
        >
          {tiles.slice(0, layout.maxTiles).map((tile) => (
            <div key={tile} className="bg-primary text-primary-foreground p-4 rounded flex items-center justify-center">
              Tile {tile}
            </div>
          ))}
        </div>
      </div>
      <div className="text-center mt-4">
        <p>Current Layout: {layout.name} ({layout.columns}x{layout.rows})</p>
        <p>Container Width: {containerWidth}px</p>
        <p>Visible Tiles: {Math.min(tiles.length, layout.maxTiles)} / Total Tiles: {tiles.length}</p>
      </div>
    </div>
  )
}

Component Breakdown

State Management:
- tiles: An array representing the current tiles. Initially contains four tiles.
- containerWidth: Tracks the container's width, updating on window resize.
Refs:
- gridRef: A reference to the grid container, passed to the useGridLayout hook.
Using the Hook:
- Destructures the layout object from the useGridLayout hook, which determines the current grid layout based on the number of tiles and container size.
Event Handling:
- Add Tile: Adds a new tile to the grid.
- Remove Tile: Removes the last tile from the grid.
- Resize Listener: Updates containerWidth on window resize.
Rendering:
- Controls: Buttons to add or remove tiles.
- Grid Container:
  - Uses CSS Grid with dynamic gridTemplateColumns and gridTemplateRows based on CSS variables set by the hook.
  - Renders tiles up to the layout.maxTiles limit.
- Info Section: Displays the current layout, container width, and the number of visible versus total tiles.

What Happens in Action

Adding Tiles: As you add more tiles, the useGridLayout hook recalculates the appropriate grid layout to accommodate the new number of tiles while respecting the container's size.
Removing Tiles: Removing tiles triggers a layout recalculation to potentially use a smaller grid layout, optimizing space.
Resizing: Changing the window size dynamically adjusts the grid layout to ensure that the tiles remain appropriately sized and positioned.

Styling the Grid

The grid's responsiveness is primarily handled via CSS Grid properties and dynamically set CSS variables. Here's a brief overview of how the styling works:

/* Example Tailwind CSS classes used in the component */
/* The actual styles are managed via Tailwind, but the key dynamic properties are set inline */

.grid {
  display: grid;
  gap: 1rem; /* Adjust as needed */
}

.grid > div {
  /* Example styles for tiles */
  background-color: var(--color-primary, #3490dc);
  color: var(--color-primary-foreground, #ffffff);
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

Dynamic CSS Variables

In the useGridLayout hook, the following CSS variables are set based on the selected layout:

--col-count: Number of columns in the grid.
--row-count: Number of rows in the grid.

These variables are used to define the gridTemplateColumns and gridTemplateRows properties inline:

style={{
  gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
  gridTemplateRows: `repeat(var(--row-count), 1fr)`,
}}

This approach ensures that the grid layout adapts seamlessly without the need for extensive CSS media queries.

Conclusion

Building a dynamic grid system for applications like video conferencing requires careful consideration of both the number of elements and the available display space. By defining a set of responsive grid layouts and implementing a custom React hook to manage layout selection, we can create a flexible and efficient system that adapts in real-time to user interactions and screen size changes.

This approach not only enhances the user experience by providing an optimal viewing arrangement but also simplifies the development process by encapsulating the layout logic within reusable components. Whether you're building a video conferencing tool, a dashboard, or any application that requires dynamic content arrangement, this grid system can be a valuable addition to your toolkit.

Feel free to customize and extend this system to suit your specific needs. Happy coding!

This weird IFRAME thing wasted my 2 days (and counting...)

Vaibhav sisodiya — Sun, 21 Jul 2024 06:15:16 +0000

This is not a post about a solution but rather a blog about the problem which I began to solve and in the journey, the challenges I had to face so that you can avoid them.

The PROBLEM I faced

(never thought it would be a big one☠️)

So I working on this project named 'snippets'.

Basically, this is a website to store your little nextjs components, see them live, play with them & share them with public (Live Link). I thought of adding a preview feature. Basically, if anyone adds or edits a snippet, I would save the preview of their component and show that on the list view for easy navigation(and it's a cool thing too😜).

Solution 1: Screenshot URL API (This was it, at least that's what I thought)

It's a very basic idea. Few days back, I got to know about this tool named 'microlink' which is a free Browser-as-API sdk. One of its feature was that you provide it a url and it will give you a screenshot of that particular page.

But as soon as I wrote the first iteration, I got to know that it wasn't a cakewalk. The page I was trying to capture screenshot of did not render the preview as soon as it loaded. I am using Sandpack by codesandbox to render react/nextjs components and it takes around 35-40 seconds to load up the preview(it runs every thing on machine[WASM baby], such a 😎 cool tech).

Then I added option in the sdk to wait for loading to end but it was my bad fate😔 to know that the maximum timeout of the sdk was 28 seconds(acc to their docs, the error message showed 27 btw).

SO I HAD TO GIVE UP ON THIS SOLUTION😭.

Solution 2: Take screenshot when user opens it (I am smartest🧠, at least that's what I thought)

As soon as I gave up on solution 1, I thought that I could not give up too soon. So I thought of another solution.

My new approach: Whenever user will open the preview and it would load completely, I will take a screenshot programatically using html2canvas library and later store in the db. I wrote code and it worked as I thought except for one part. Everything was fine in the screenshot, except the preview part. IT WAS BLANK, LIKE COMPLETELY BLANK. Oh my god! How is this possible? What on earth is wrong that every solution I coming up has its own problem attached with it.

But WHAT was the problem in it.

After researching alot (github issues, reddit and what not), I got to know that YOU CAN NOT TAKE SCREENSHOTS of content inside IFRAME if it is of CROSS DOMAIN. 😭 Why this happens with me GOD!

Solution 3: Printing it (I am going to give up, at least that's what I thought)

Cmd+Shift+P (print dialog) was printing it correctly. I thought that I would do it programatically, later convert pdf to png(that a different problem). Long story short, it didn't work either. It opened a print dialog for user instead.

Conclusion

I haven't solved it yet. Let me know what you would do to solve it or what am I doing wrong.

For now, I am signing off.
This is VAIB

Why Stake's mines is nearly IMPOSSIBLE TO WIN?

Vaibhav sisodiya — Tue, 21 May 2024 22:30:15 +0000

Stake.com has been the talk of the town in recent times. It has become quite popular among youth. Specially, games like gems, crash, plingo etc. are played largely.

This platform allows you play with zero investment just to check if you could win (trust me it's addictive). Then my engineer brain brained that is it worth the try?

So, before throwing the money into this pond, I thought of doing a set of trials just like we did in probability in the mathematics lecture (if you did you know).

Let's begin with MINES

I chose the game 'mines'. Let me introduce you to the game (in case you don't know). In this game, we have a grid of 5x5 tiles where any X tiles will have mines and rest will have gems. You can customise this value of X and the profits change accordingly. The more the mines, the higher the profit on win. If you choose a mine, you lose the game (your bet becomes zero). Else if you choose a gem, you can either continue playing on same grid (with the open tiles as it is and mines still hidden) or can cashout the amount and be profitable.

Experiment I did

So I chose this game and ran the following experiment:

I chose 6 mines in the game. Selecting 3 tiles as gems continuously in a single trial gives me 2.35x of my bet. I will start with Rs. 1, every time I loose, I will double the bet and move to next trial. Every time I win, I will reset bet amount to 1 & stop.

What's ChatGPT says about it?

I gave ChatGPT the same scenario and asked what would be the profit if I win of nth trial in an experiment of n trials.

Total Amount Bet After n Trials: 1+2+4+…+2^(n−1) = 2^(n) - 1
Total Winnings After n Trials: 2.35×2^(n−1)
Total Profits After n Trials: 0.35×2^(n−1)+1

Next I asked it, if it is a profitable strategy then here was it's response:

The strategy of doubling bet after each loss and resetting after a win, known as the Martingale strategy, is risky.

Reasoning behind the Martingale Strategy being Risky

Probability of Winning:

Expected Loss and Gain: In the long run, because you are always risking more than you can win in a single round (since your bet increases exponentially, while your payout remains linearly tied to the bet), there is a high risk that a prolonged losing streak will exhaust your funds or reach the house limit.
Profit Calculation: From the profit formula derived
0.35 × 2^(𝑛−1)+1, you can see that while you make a small profit when you finally win, the amount you have to bet grows exponentially. A single loss after several wins can wipe out all previous gains plus more.
Risk of Ruin: The most significant risk is that a prolonged losing streak will require you to bet amounts that are either unsustainable for your bankroll or exceed the maximum betting limit allowed by the game. This can lead to a situation where you cannot continue to double down, and you suffer a massive loss.
Long-Term Viability: Although theoretically, the Martingale system can make a profit in the short term if you stop after a win or a small number of trials, it is generally not profitable in the long term. The exponential growth of bets required after each loss combined with the limits of practical betting conditions (like table limits and personal bankroll limits) and the less than 1:1 payoff (since 2.35 × bet does not fully cover the exponential growth of the bet amounts) make it unsustainable.

Is this strategy usable?

In conclusion, while this strategy can yield profits in a specific, controlled scenario, it is not advisable as a long-term betting strategy due to the high risk of significant financial loss. It is generally better to look for strategies that manage risk and offer more sustainable returns.

Let's run this experiment

Let's adjust the calculations based on a limit of 10 trials.

Calculation if you win on the 10th trial:

Bet Amount on the 10th Trial:

The bet amount on the 10th trial is ( 2^{10-1} = 2^9 = 512 ) rupees.

Total Bet by the 10th Trial:

The sum of the bets for the first 10 trials (assuming you lose the first 9 and win the 10th) is a geometric series: Total Bet = 1 + 2 + 4 + ... + 2^9 The sum of this series is: Total Bet = 2^{10} - 1 = 1,023 rupees

Total Winnings on the 10th Trial:

If you win on the 10th trial, your winnings are: Winnings = 2.35 x 512 = 1,203.20 rupees

Profit Calculation:

Profit is calculated as: Profit = Winnings - Total Bet Profit = 1,203.20 - 1,023 = 180.20 rupees

Calculation if you lose all 10 trials:

Total Loss After 10 Trials:

If you lose all 10 trials, the total loss is simply the sum of all the bets placed: Total Loss = 1,023 rupees

In this scenario, with a limit of 10 trials:

If you win on the 10th trial, your profit would be approximately 180.20 rupees.
If you lose all 10 trials, your total loss would be 1,023 rupees.

These results further underline how critical a win is when using this betting strategy, as your potential profit is closely tied to achieving at least one win within the limited number of trials.

Is there any better strategy than this one

Fixed Wager Strategy
Instead of increasing your bets after losses, you simply bet the same fixed amount each time. This strategy limits your losses and can keep you in the game longer, though it also means that a win only recovers a single bet rather than covering all previous losses.
Proportional Betting
In this strategy, you bet a proportion of your bankroll, typically a small percentage like 1% to 5%. This means that when your bankroll increases, your bet size increases, and when your bankroll decreases, your bet size decreases. This method helps in managing your bankroll more effectively and decreases the risk of losing everything in a short period.
Stop-Loss Strategy
Set a stop-loss limit—this is an amount you’re prepared to lose in a session. Once your losses reach this limit, stop playing. This can help prevent the emotion-driven decisions that can lead to larger losses.
Taking Profits
Similar to a stop-loss, you can set a take-profit limit. This is a pre-set amount at which you cash out any profits above your starting bankroll. This helps lock in profits and prevents them from turning into losses.
Play for Bonuses
If you’re playing an online game that offers bonuses or free spins, try to make use of these offers to increase your chances without having to increase your stake. This can sometimes provide a buffer or free opportunities to win.
Decreasing Bet Strategy
Rather than increasing your bet after a loss, you could decrease your bet following a win, consolidating what you’ve won. This is essentially the opposite of the Martingale strategy and can sometimes be more sustainable.
Mathematically Informed Betting
Some betting strategies involve a more complex mathematical basis, such as the Fibonacci sequence, where bets are calculated based on the Fibonacci numbers. This still involves increasing bets after a loss but does so less aggressively than the Martingale.
Prudent Bankroll Management
Ensure your betting strategy allows you to play many rounds rather than burning out after a few large bets. Smaller, more manageable bets relative to your overall bankroll can help you withstand the natural variance in games of chance.

Why I chose only 3 mines in a trial?

I asked GPT, which is better: 1.74x for 2 tiles, 2.35x for 3 tiles, 3.23x for 4 tiles and here's the calculation:

Calculating the Probabilities

Choosing 2 Tiles (1.74x profit)
- The probability of picking a gem (no mine) sequentially two times with 6 mines out of 25 tiles is: P(2 gems) = 25/19 × 24/18 = 0.57
Choosing 3 Tiles (2.35x profit)
- The probability of picking a gem (no mine) sequentially three times with 6 mines out of 25 tiles is: P(3 gems)= 19/25 × 18/24 x 17/23 ≈ 0.5287
Choosing 4 Tiles (3.23x profit)
- If you choose to pick a fourth tile after successfully picking three gems: P(4 gems) = P(3 gems) x 16/22 = 0.3846

Calculating Expected Values

The expected value (EV) for each option can be calculated using the formula:
EV = (Probability of Winning) x Payout - (Probability of Losing) x Bet

Assuming the bet amount is 1 unit for simplicity in all cases.

Expected Value for Choosing 2 Tiles
EV2 = 0.57 × 1.74 - (1 - 0.57) × 1
EV2 = 0.9918 - 0.43 = 0.5618
Expected Value for Choosing 3 Tiles
EV3 = 0.5287 × 2.35 - (1 - 0.5287) × 1
EV3 = 1.2425 - 0.4713 = 0.7712
Expected Value for Choosing 4 Tiles
EV4 = 0.3846 × 3.23 - (1 - 0.3846) x 1
EV4 = 1.2423 - 0.6154 = 0.6269

Analysis

Choosing 2 Tiles: The expected value of choosing 2 tiles is approximately 0.5618 units.
Choosing 3 Tiles: The expected value of choosing 3 tiles is approximately 0.7712 units.
Choosing 4 Tiles: The expected value of choosing 4 tiles is approximately 0.6269 units.

From this analysis, choosing 3 tiles for a 2.35x profit is a better option as it yields a higher expected value than choosing 4 tiles for a 3.23x profit.

Is this type of game generally profitable?

Games involving mines, similar to other forms of gambling with elements of both skill and chance, are generally designed to be profitable for the operator or the house rather than for the player over the long term.

Conclusion

By all the calculation, we can come to this result that you might make some few bucks if you are ready to invest a ton of it. Please see might is bold.

Please note that I haven't invested any money on this platform nor do I promote it. Its just a mathematical experiment and logical reasoning behind these types of games.

Day 0: JavaScript Revision | The last REACT course you need

Vaibhav sisodiya — Thu, 15 Jun 2023 08:10:59 +0000

Welcome to Day 0 of 'The last React course you need'! In this blog post, we will cover a comprehensive overview of JavaScript concepts, providing you with a solid foundation to kickstart your journey in React. Whether you are a beginner or looking to refresh your JavaScript skills, this article is perfect for you. Let's dive in!

If you feel that you understand the concepts easily using videos then here is the youtube lecture for the same:

Here is the code we used, go and play around with it to build your concepts stronger:

Variables

Variables are used to store and manipulate data in JavaScript. In this section, we will explore different variable declarations and their characteristics.

`let`

The let keyword is used to declare variables that can be updated. It provides block scope, meaning the variable is only accessible within its block. Here's an example:

let name = 'Vaib';
console.log(name); // Output: Vaib

`const`

The const keyword is used to declare variables that cannot be updated. It also provides block scope. It is preferred to use const when the variable won't be updated. Here's an example:

const api = '45656sdfsdfsdf55660';
console.log(api); // Output: 45656sdfsdfsdf55660

`var`

The var keyword is an older way to declare variables. It can be updated and has global scope, which means it is accessible throughout the program. It is recommended to avoid using var whenever possible. Here's an example:

var isDark = true;
console.log(isDark); // Output: true

Operators

Operators are used to perform operations on values or variables. In this section, we will explore different types of operators.

Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations. Here are some examples:

console.log(5 + 2); // Output: 7
console.log(5 - 2); // Output: 3
console.log(5 * 2); // Output: 10
console.log(5 / 2); // Output: 2.5
console.log(5 % 2); // Output: 1
console.log(5 ** 2); // Output: 25

Assignment Operators

Assignment operators are used to assign values to variables and perform calculations simultaneously. Here's an example:

let count = 3;
count += 2; // Equivalent to count = count + 2
console.log(count); // Output: 5

Comparison Operators

Comparison operators are used to compare values and return a Boolean result. Here are some examples:

let count = 5;
console.log(count == '5'); // Output: true
console.log(count === '5'); // Output: false
console.log(count < 10); // Output: true
console.log(count > 10); // Output: false
console.log(count <= 5); // Output: true
console.log(count >= 10); // Output: false
console.log(count != '5'); // Output: false
console.log(count !== '5'); // Output: true

Logical Operators

Logical operators are used to combine or negate conditions. Here's an example:

let count = 5;
let name = 'Vaib';
console.log(count == 5 && name == 'Vaib'); // Output: true
console.log(count == 5 || name == 'Vaib'); // Output: true
console.log(!false); // Output: true

Data Types

Data types determine the type of values in JavaScript. In this section, we will explore different data types.

Primitive Data Types

Primitive data types are basic types that store a

single value. The main primitive data types in JavaScript are:

String: Represents a sequence of characters. Example: "Hello, World!".
Number: Represents numeric values. Example: 42.
Boolean: Represents true or false values. Example: true.
Null: Represents the absence of any object value. Example: null.
Undefined: Represents an uninitialized variable. Example: undefined.

Non-Primitive Data Types

Non-primitive data types are more complex and can store multiple values. The main non-primitive data type in JavaScript is:

Object: Represents a collection of key-value pairs. Example: { name: "Vaib", age: 25 }.

Conditionals

Conditionals allow us to make decisions based on specific conditions. In this section, we will explore different conditional statements.

if...else if...else

The if...else if...else statement is used to execute different blocks of code based on different conditions. Here's an example:

let num = 5;
if (num > 0) {
  console.log("Positive");
} else if (num < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

Ternary Operator

The ternary operator provides a concise way to write conditional statements. It takes three operands: a condition, a value if the condition is true, and a value if the condition is false. Here's an example:

let age = 18;
let message = (age >= 18) ? "You are an adult" : "You are not an adult";
console.log(message);

Loops

Loops are used to repeat a block of code multiple times. In this section, we will explore different types of loops.

for Loop

The for loop is used to iterate over a block of code for a specific number of times. Here's an example:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while Loop

The while loop is used to execute a block of code as long as a specific condition is true. Here's an example:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do...while Loop

The do...while loop is similar to the while loop, but it always executes the block of code at least once. Here's an example:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for-in Loop

The for-in loop is used to iterate over the properties of an object. Here's an example:

let person = { name: "Vaib", age: 25 };
for (let key in person) {
  console.log(key + ": " + person[key]);
}

for-of Loop

The for-of loop is used to iterate over the elements of an array or other iterable objects. Here's an example:

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

Strings

Strings are used to represent text in JavaScript. In this section, we will explore various string operations.

String Literals

String literals are sequences of characters enclosed in single or double quotes. Here's an example:

let message = "Hello, World!";
console.log(message);

Escape Sequence Characters

Escape sequence

characters are used to represent special characters within strings. Here are some examples:

\" represents a double quote character.
\' represents a single quote character.
\\ represents a backslash character.
\n represents a new line.
\t represents a tab space.

String Properties/Methods

Strings have several built-in properties and methods for manipulation. Here are a few examples:

length: Returns the length of a string.
toUpperCase(): Converts a string to uppercase.
toLowerCase(): Converts a string to lowercase.
trim(): Removes whitespace from both ends of a string.

let message = "   Hello, World!   ";
console.log(message.length); // Output: 18
console.log(message.toUpperCase()); // Output: HELLO, WORLD!
console.log(message.toLowerCase()); // Output: hello, world!
console.log(message.trim()); // Output: Hello, World!

Arrays

Arrays are used to store multiple values in a single variable. In this section, we will explore array operations.

Array Properties/Methods

Arrays have several built-in properties and methods for manipulation. Here are a few examples:

length: Returns the number of elements in an array.
push(): Adds an element to the end of an array.
pop(): Removes the last element from an array.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // Output: 3
fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]
fruits.pop();
console.log(fruits); // Output: ["apple", "banana", "cherry"]

Looping through Arrays

Looping through arrays allows us to access and manipulate each element individually. Here's an example using a for loop:

let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Functions

Functions are reusable blocks of code that perform a specific task. In this section, we will explore different ways to define functions.

The `function` Keyword

The function keyword is used to define a function with a name and parameters. Here's an example:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Vaib"); // Output: Hello, Vaib!

Arrow Functions

Arrow functions provide a concise way to define functions. They are anonymous functions and can be assigned to variables. Here's an example:

const greet = (name) => {
  console.log("Hello, " + name + "!");
}

greet("Vaib"); // Output: Hello, Vaib!

Congratulations on completing Day 0 of 'The last React course you need'! We covered a wide range of fundamental concepts that will empower you in your journey of learning React. Stay tuned for the upcoming days, where we will explore the amazing concepts of React.

If you're ready to take your frontend skills to the next level and learn React, Appwrite, Tailwind, DaisyUI, React Router, Zustand (state management tool), and even create projects including AI, stay tuned. Our comprehensive curriculum will provide you with all the knowledge you need to become a frontend expert.

Stay tuned for the next blog posts in this series, and happy coding!

#JavaScript #JSRevision #ReactCourse #RecurseCodeSchool

P&S Cheatsheet for Distributions

Vaibhav sisodiya — Sat, 22 Apr 2023 06:34:16 +0000

Hello, I am sharing with you my very own cheatsheet for quick revision for distributions.

Share it with your friends with credits.

Also, Join the community of people learning probability and statistics on whatsapp: https://chat.whatsapp.com/IZk7DKKvH314vaIDNl2CEf

Download Link: https://github.com/Vaib215/RandomMe/raw/main/Probability_Stats/Dist_CS.pdf

How I made Image to PDF converter tool in JavaScript

Vaibhav sisodiya — Thu, 20 Apr 2023 20:03:49 +0000

Have you ever needed to convert a bunch of images into a single PDF document? Maybe you have a collection of scanned documents, or you want to share some photos in a more organized way. Whatever the reason, this task can be time-consuming if done manually.

But don't worry, I got you covered! In this blog post, I'll share with you how I created a simple Image to PDF converter tool using JavaScript, HTML, and CSS.

But before you move further, if you want to try out the convert, do checkout https://codepen.io/vaib215/pen/WNaoMBr

The Plan

To create our Image to PDF converter tool, we need to break down the plan into smaller steps:

Allow users to select multiple images from their device.
Display selected images on the webpage.
Convert the images into a single PDF document.
Allow the user to download the PDF document.

The Code

HTML

Let's start by creating the HTML structure. We'll create three main elements:

A container to display selected images.
A container to display the order of selected images.
A button to trigger the conversion process.



    <header>
    <h1>Image to PDF Converter</h1>
  </header>
  <div class="container">
    <input type="file" id="fileInput" multiple>
    <button style="--clr:#008cba;--hov:#006080;" id="addImageButton">Add Images</button>
    <button style="--clr:#3e8d75;--hov:#3e8e41;" id="convertButton">Convert to PDF</button>
    <button style="--clr:#f44336;--hov:#ff6b6b;" id="clearButton">Clear Images</button>
    <div id="pdfDownloadLink"></div>
    <div id="imageContainer"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

CSS

Next, we'll add some basic CSS to make the page look good. We'll center the image container and the order container and add some padding to the body. Also, some style to make the UI better.



body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}
.container {
  margin: 20px auto;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.imageBox {
  width: 200px;
  height: 200px;
  margin: 10px;
  position: relative;
}
.imageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deleteButton:hover {
  background-color: #ff6b6b;
}
#imageContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#imageContainer img {
  max-width: 100%;
}
#pdfDownloadLink {
  margin: 20px auto;
  text-align:center;
  background: "red";
  width:100%;
}

#fileInput {
  display: none;
}
button{
  border: none;
  background: var(--clr);
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 20px auto;
  cursor: pointer;
  border-radius: 5px;
}

button:hover{
  background: var(--hov);
}

.deleteButton {
  background-color: #f44336;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  padding: 0;
  right: 5px;
}

JavaScript

Now, let's write some JavaScript code to handle the functionality of our Image to PDF converter tool. We'll start by creating some variables to store references to our HTML elements.



const imageContainer = document.getElementById('imageContainer');
const convertButton = document.getElementById('convertButton');
const pdfDownloadLink = document.getElementById('pdfDownloadLink');
const orderContainer = document.getElementById('orderContainer');
let imageFiles = [];

Next, we'll create a function to render the selected images in the UI.



const renderImages = () => {
  imageContainer.innerHTML = '';
  orderContainer.innerHTML = '';
  imageFiles.forEach((file, index) => {
    const imageElement = document.createElement('img');
    imageElement.src = URL.createObjectURL(file);
    imageElement.classList.add('image-item');
    imageElement.setAttribute('data-index', index);
    imageContainer.appendChild(imageElement);

    const orderInput = document.createElement('input');
    orderInput.type = 'text';
    orderInput.classList.add('order-input');
    orderInput.setAttribute('data-index', index);
    orderInput.value = index;
    orderContainer.appendChild(orderInput);
  });
};

This function loops through the imageFiles array and creates an image element and an order input element for each image file. We set the src attribute of the image element to a data URL created from the image file.

Next, we'll create a function to convert the images into a single PDF document.



const convertToPdf = () => {
const doc = new jsPDF();
imageFiles.forEach((file) => {
doc.addImage(file, 'JPEG', 10, 10, 190, 0);
if (imageFiles.indexOf(file) !== imageFiles.length - 1) {
doc.addPage();
}
});
pdfDownloadLink.href = doc.output('blobURL');
pdfDownloadLink.download = 'converted.pdf';
pdfDownloadLink.click();
};

This function creates a new jsPDF instance, loops through the imageFiles array, adds each image as a JPEG image to the PDF document, and adds a new page to the document for every image except the last one. Finally, we set the href and download attributes of the pdfDownloadLink element to the blob URL of the PDF document and the desired file name, respectively, and trigger a click on the element to download the PDF document.

Finally, we'll add some event listeners to our HTML elements to handle user interactions.



document.addEventListener('DOMContentLoaded', () => {
convertButton.addEventListener('click', convertToPdf);
});

document.addEventListener('change', (event) => {
if (event.target.type === 'file') {
imageFiles = Array.from(event.target.files);
renderImages();
}
});

document.addEventListener('keyup', (event) => {
if (event.target.classList.contains('order-input')) {
updateOrder();
}
});

We add a click event listener to the convertButton element to trigger the conversion process when the user clicks on it. We add a change event listener to the document to handle file input changes and call the renderImages function to update the UI when the user selects new images.

Code Link: https://codepen.io/vaib215/pen/WNaoMBr

Conclusion

In this blog post, we learned how to create a simple Image to PDF converter tool using JavaScript, HTML, and CSS. By breaking down the task into smaller steps, we were able to create a functional tool that allows users to select multiple images, order them based on their preference, and convert them into a single PDF document. Feel free to try out the code and customize it to fit your needs.

Probability & Statistics NPTEL Week 2 Handwritten Assignment Solution

Vaibhav sisodiya — Sun, 26 Mar 2023 07:00:20 +0000

Week 2 Assignment -

DEV Community: Vaibhav sisodiya

I created this game during my lunch. ⚠️ THIS IS ADDICTIVE ⚠️ Improve your typing speed and accuracy Try: https://type-or-die.vercel.app

Don't use DeepSeek R1 before this!

🚨 Why You Should Avoid Deepseek.com

✅ The Better Alternative: Self-Hosting R1

📌 Choosing the Right Model Size

🖥️ GUI Options for the Non-Terminal Folks

💻 Integrating R1 into Your Own Application

Final Thoughts 💭

System Design of a Referral System

Introduction to System Design

System Design Process

Step 1: Define Problem Scope and Requirements

Project Example

Functional Requirements

Non-functional Requirements

Step 2: Determine Capacity Estimates

Step 3: High-Level Design

Unique Link Creation

Example Code for MD5 Generation:

Step 4: API Design

Step 5: Database Schema Design

Step 6: Detailed Design

Conclusion

This New AI Tool (FREE) Could Put Claude & v0.dev in the Dust – Here’s Why

The Problem with Claude and v0.dev

So what is this Fragments thing?

Free and Open Source – A Game-Changer

But is Fragments really "THAT" good?

Simple Guide to Integrate Juspay in Your TypeScript React App

Prerequisites

Integration Flow

Steps for TypeScript Integration

1. Create Payment Session (Server-Side in TypeScript)

Create a TypeScript PaymentSession interface to type your response:

TypeScript code for creating a session:

2. Initiate Payment from React Client (TypeScript)

Define an interface for the session response:

Component in TypeScript:

3. Handling Return URL and Checking Payment Status

TypeScript Interface for Payment Status:

React Component to Handle Payment Status:

4. Handling Webhooks with TypeScript (Backend)

5. Respond to Juspay with a 200 OK (Backend)

Conclusion

Building a Dynamic Grid System for Responsive Meeting Tiles in React

Table of Contents

Introduction

Grid Layout Definitions

Explanation

Selecting the Appropriate Grid Layout

How It Works

The useGridLayout Hook

Hook Breakdown

Example Usage

Component Breakdown

What Happens in Action

Styling the Grid

Dynamic CSS Variables

Conclusion

This weird IFRAME thing wasted my 2 days (and counting...)

The PROBLEM I faced

(never thought it would be a big one☠️)

Solution 1: Screenshot URL API (This was it, at least that's what I thought)

Solution 2: Take screenshot when user opens it (I am smartest🧠, at least that's what I thought)

Solution 3: Printing it (I am going to give up, at least that's what I thought)

Conclusion

Why Stake's mines is nearly IMPOSSIBLE TO WIN?

Let's begin with MINES

Experiment I did

What's ChatGPT says about it?

Reasoning behind the Martingale Strategy being Risky

Is this strategy usable?

Let's run this experiment

Calculation if you win on the 10th trial:

Calculation if you lose all 10 trials:

Is there any better strategy than this one

Why I chose only 3 mines in a trial?

Calculating the Probabilities

Calculating Expected Values

So what is this `Fragments` thing?

But is `Fragments` really "THAT" good?

Create a TypeScript `PaymentSession` interface to type your response:

The `useGridLayout` Hook

`let`

`const`

`var`

The `function` Keyword