TILs - Fueling Curiosity, One Insight at a Time

At Codemancers, we believe every day is an opportunity to grow. This section is where our team shares bite-sized discoveries, technical breakthroughs and fascinating nuggets of wisdom we've stumbled upon in our work.

Published: Sep 17, 2025
Author: Ashwani Kumar Jha
Senior System Analyst

Nx has a built-in command to remove libraries

Nx provides the @nx/workspace:remove generator that can remove a library from our workspace.

The command:

Code

npx nx g @nx/workspace:remove

What it does automatically:
• Deletes the library folder and all its files
• Removes the project from nx.json and workspace configuration
• Checks for dependencies and warns if other projects still use it
We can use --forceRemove flag if we want to remove a library even when other projects depend on it (though this can break the build).
#nx #monorepo

Published: Sep 2, 2025
Author: Nived Hari
System Analyst

WITH (NOLOCK) is often used to speed up queries by avoiding shared locks, which means the query won’t block other reads or writes. This can improve performance on busy systems, but it comes at the cost of data accuracy.

When using NOLOCK, SQL Server may:
• Read uncommitted (dirty) data that could later be rolled back.
• Return missing or duplicate rows due to page splits and concurrent writes.
• Show inconsistent values within the same row if columns are updated mid-read.
In short: NOLOCK trades reliability for speed. It’s fine for dashboards, reports, or monitoring where approximate numbers are acceptable, but it should be avoided for financial or critical business logic where accuracy is essential.

#sql

Published: Sep 2, 2025
Author: Sudeep Hipparge

Prisma --create-only

npx prisma migrate dev --create-only --name <migration_name>

Creates a migration file with the SQL changes but does not apply them to the database.

Why this is useful:

✅ Safe inspection – lets you review the generated SQL before running it, especially helpful for destructive operations like drops or PK changes.

✅ Manual adjustments – you can tweak the SQL (e.g., add a USING clause for type casting or backfill data before dropping a column).

✅ Separation of responsibilities – you can generate migrations while DBAs/ops review and apply them in controlled environments.

Key takeaway:

👉 --create-only is like a dry run for migration generation – you get the recipe, but the dish isn't cooked yet 🍳.

#postgres

Published: Sep 1, 2025
Author: Mohammad hussain
System Analyst

Rails has a built-in way to reduce repetition in associations—with_options.
When multiple has_many relationships share the same option (like dependent: :destroy), repeating it clutters your model:

Code

class Account < ApplicationRecord
  has_many :customers, dependent: :destroy
  has_many :products,  dependent: :destroy
  has_many :invoices,  dependent: :destroy
  has_many :expenses,  dependent: :destroy
end

Using with_options, you can group them under one block:

Code

class Account < ApplicationRecord
  with_options dependent: :destroy do
    has_many :customers
    has_many :products
    has_many :invoices
    has_many :expenses
  end
end

This makes the intent clearer—all these associations share the same rule.
It's easier to read, less error-prone, and keeps your model DRY ✨
#Rails

Published: Aug 22, 2025
Author: Ashwani Kumar Jha
Senior System Analyst

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:

Code

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

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

Code

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

Published: Jul 30, 2025
Author: Adithya Hebbar
System Analyst

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

Published: Jul 23, 2025
Author: Mohammad hussain
System Analyst

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.

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

Published: Jul 15, 2025
Author: Swasthik K

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

Code

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

2. Re-Generate Prisma Client

Code

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:

Code

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

Published: Jul 8, 2025
Author: Sudeep Hipparge

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):

Code

html

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

Code

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

Code

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

Published: Jul 2, 2025
Author: Sudeep Hipparge

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:

Code

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:

Code

// 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

Showing 3 to 5 of 82 results

Ready to Build Something Amazing?

Codemancers can bring your vision to life and help you achieve your goals

Let's Talk

Address
2nd Floor, Zee Plaza,
No. 1678, 27th Main Rd,
Sector 2, HSR Layout,
Bengaluru, Karnataka 560102
Contact
hello@codemancers.com
+91-9731601276