Fueling Curiosity, One Insight at a Time

Next.js Typed Routes

Next.js now provides TypeScript support for route parameters and navigation, helping catch routing errors at compile time rather than runtime.

Next.js automatically generates route types based on our file structure in the app directory.

For example, if we have:

app/
  users/
    [id]/
      page.tsx
  posts/
    [slug]/
      page.tsx

The generated types will understand routes like /users/123 and /posts/my-post-slug.

import { useRouter } from 'next/navigation'
import Link from 'next/link'

// TypeScript knows about our routes
const router = useRouter()
router.push('/users/123') // ✅ Valid
router.push('/invalid-route') // ❌ TypeScript error

// Link component is also typed
<Link href="/posts/my-slug">My Post</Link> // ✅ Valid
<Link href="/wrong-path">Invalid</Link> // ❌ TypeScript error

#nextjs #typescript

How LLM's temperature affects AI output:

LLM models use a parameter called temperature to control randomness in generated responses.
temperature: 0 → deterministic output (same input = same output)
temperature: 1 → default setting, balanced creativity
temperature > 1 → more random, creative, but less reliable

Tip: Use lower temperatures when you need reliable, consistent responses, and higher temperatures for creative or exploratory tasks.
#llm

Traits in FactoryBot allow you to define reusable pieces of attributes that can be mixed into factories to create variations of objects without duplicating code.

FactoryBot.define do
  factory :user do
    name { "John Doe" }

    trait :admin do
      role { "admin" }
    end
  end
end

create(:user, :admin)

Here, :admin is a trait that overrides or adds attributes (role: "admin").
You can pass traits to create, build, or attributes_for to easily generate variations.
#CU6U0R822 #RSpec

Boost Query Performance with Prisma's Rust-free Engine(v6.7.0+)

Why?
• Quick Setup
• Faster queries
• 85–90% bundle size reduce
• Smoother & Better DX
Setup Steps :

1. Update Your schema.prisma

generator client {
  provider        = "prisma-client-js" // or `prisma-client`
  previewFeatures = ["queryCompiler", "driverAdapters"]
  output          = "../generated/prisma"
}

2. Re-Generate Prisma Client

npx prisma generate

3. Install Driver Adapter
• For Postgres: npm install @prisma/adapter-pg
• For other DBs: https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/no-rust-engine#3-install-the-driver-adapter|Prisma Adapter Docs
4. Instantiate Prisma Client
• For Postgres:

import { PrismaPg } from '@prisma/adapter-pg'
import { PrismaClient } from './generated/prisma'

const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL })
const prisma = new PrismaClient({ adapter })

• For other DBs: https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/no-rust-engine#4-instantiate-prisma-client|Prisma Client Docs
5. All done!🎉 Now your can query as usual.

🔗 https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/no-rust-engine|Official Rust-free Prisma Docs

Picture-in-Picture (PiP) API – Enabling Floating Video Playback

The Picture-in-Picture (PiP) API enables developers to present an HTML <video> element in a small, floating, always-on-top window. This allows users to continue watching a video while interacting with other applications or browser tabs.

How to use it (basic example):

html

<video id="myVideo" src="video.mp4" controls></video>
<button id="pipButton">Enter PiP</button>

js

const video = document.getElementById('myVideo');
const button = document.getElementById('pipButton');

button.addEventListener('click', async () => {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  } catch (err) {
    console.error(`Failed to toggle PiP: ${err}`);
  }
});

Key Concepts
• video.requestPictureInPicture(): Initiates PiP mode for the video element.
• document.exitPictureInPicture() : Exits PiP mode.
• document.pictureInPictureElement : Returns the element currently in PiP, or null.
• Associated Events:
◦ enterpictureinpicture
◦ leavepictureinpicture

video.addEventListener('enterpictureinpicture', () => {
  console.log('Video entered PiP mode');
});

video.addEventListener('leavepictureinpicture', () => {
  console.log('Video left PiP mode');
});

⚠️ Limitations
• Only applicable to native <video> elements.
• Most browsers require the video to be playing before entering PiP.
• Must be triggered through a user gesture (e.g., a click).
• Safari has limited support and relies on its own implementation.
🌐 Browser Support
• Chrome
• Edge
• Opera
• Firefox (with some restrictions)
#CCT1JMA0Z

File Preview in React — Beyond Just Images
Building a file preview system in React can surface several helpful patterns — especially when working with images, PDFs, media, and plain text files.

• You can preview any local file before upload using:

URL.createObjectURL(file)

It works seamlessly with:
• Images
• PDFs
• Audio files
• Videos
• Plain text
Tip: Always call URL.revokeObjectURL() when the preview is no longer needed to prevent memory leaks.

🔄 Handling Local and Server Files Together
To support previews for both uploaded and already-stored files, use a union type:

// Local preview
{ isLocal: true, file: File }

// Server-hosted file
{ url: '/api/files/:id', name: string, type: string }

Then render conditionally based on file.type. Rendering Previews Based on File Type
• <img> → for images
• <iframe> → for PDFs or text files
• <audio> / <video> → for media files
#CCT1JMA0Z #react

📌 Using Alpine.js in Rails to Toggle Content Efficiently

You can use Alpine.js in a Rails app to handle simple UI interactions like showing, hiding, or toggling content — with zero overhead and great maintainability.

🧠 How it works:
• Alpine adds lightweight reactivity directly in your HTML using attributes like x-data, @click, and x-show.
• Clicking a button updates the type (or any reactive) value.
• Alpine automatically re-evaluates all x-show (and related) bindings when that reactive value changes.
• It then updates the UI by toggling styles like display: none, not by re-rendering or manipulating the DOM.
• On clicking the "Urgent" button, Alpine applies display: none to the normal_partial and removes it from urgent_partial, effectively toggling visibility between the two.
💡 Example in Rails ERB:

<div x-data="{ type: 'normal' }">
  <button @click="type = 'normal'">Normal</button>
  <button @click="type = 'urgent'">Urgent</button>

  <div x-show="type === 'normal'">
    <%= render "normal_partial" %>
  </div>

  <div x-show="type === 'urgent'">
    <%= render "urgent_partial" %>
  </div>
</div>

• Both partials are rendered server-side on initial load
• Alpine just toggles their visibility using CSS (e.g., display: none), it wont manipulate DOM.
• No data loss or performance bottleneck — ideal for UI tab switching or inline modals
✅ Why it's great:
• No page reloads or re-renders
• No JavaScript DOM manipulation — just CSS toggling
• Preserves state and DOM structure
• Ideal for tabs, modals, section toggles, and lightweight UI
#Rails #Alphine.js

Creating Google Calendar Events with NestJS

Integrating Google Calendar event creation in a NestJS backend can be done seamlessly using the googleapis package.
Key Steps:
• Set up OAuth2 with access and refresh tokens.
• Use calendar.events.insert() to create events.
• Always include the timeZone field to ensure accurate scheduling.
Sample code:

const event = {
  summary: 'Team Sync',
  start: { dateTime: '2025-06-26T10:00:00+05:30', timeZone: 'Asia/Kolkata' },
  end: { dateTime: '2025-06-26T11:00:00+05:30', timeZone: 'Asia/Kolkata' },
};

await calendar.events.insert({
  calendarId: 'primary',
  requestBody: event,
});

Common Pitfalls:
• Incorrect scopes → leads to permission denied errors.
• Missing timeZone → causes unexpected event timings.
• Expired tokens → results in 401 Unauthorized errors.
#NestJS

Understanding ExecutionContext in NestJS Guards

Today I learned how ExecutionContext works in NestJS — it's a powerful tool for accessing low-level request details within Guards, Interceptors, and Custom Decorators.
While building a custom AuthGuard, I used ExecutionContext to extract the request object and retrieve the authenticated user like so:

import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean {
    const request = context.switchToHttp().getRequest();
    const user = request.user;

    return !!user; // or apply custom authorization logic
  }
}

Why It Matters:
• ExecutionContext wraps the current request lifecycle and gives you flexible access to request-specific information.
• You can switch between different transport layers (HTTP, RPC, WebSockets) using methods like switchToHttp(), switchToRpc(), etc.
• It's essential for building dynamic and context-aware logic in guards, interceptors, and decorators.
Pro Tip:
Use context.getClass() and context.getHandler() to access metadata about the controller and handler being executed — especially useful for implementing role-based access control or custom permission systems.

#CCT1JMA0Z #NestJS

the term Cannibalization in warehouse terms meaning taking components or parts from one unit (often damaged, unused, or scrapped) to use in repairing or completing another unit.
In simple terms we can understand it as refubrished items where later the warehouse can send that to a buyer and then the buyer decide which store to sell these items in a discounted price.

#warehouse #outbound