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: Dec 18, 2025
Author: Satya

When two models are associated—for example, a Chat that has many Messages—you can create a message using @chat.messages.build instead of instantiating Message.new. This automatically sets the chat_id on the message, so it’s never niland the association is correctly maintained

#ActiveRecord #Rails

Published: Dec 18, 2025
Author: Syed Sibtain
System Analyst

What is Framing in WebSockets?
Framing is how WebSocket data is split, structured, and transmitted over the wire. Framing is protocol-level, not app-level

WebSockets do not send raw strings or JSON directly. Instead, every message is wrapped inside WebSocket frames.

Each WebSocket frame contains:
• FIN bit – is this the final frame?
• Opcode – what type of data?
• Payload length
• Masking key (client → server)
• Payload data
Frame Types
Data frames
• Text frame → UTF-8 text (JSON, strings)
• Binary frame → raw bytes (files, protobuf)
Control frames
• PING → check if connection is alive
• PONG → response to ping
• CLOSE → graceful shutdown
#websockets #client #server

Published: Nov 24, 2025
Author: Swasthik K

Cron in GitHub Actions
In GitHub Actions, you can schedule workflows using cron syntax inside the on.schedule field. It uses UTC time format.
Example:

Code

on:
  schedule:
    # Runs at 5:30 AM and 5:30 PM UTC every day
    - cron: '30 5,17 * * *'
    # Runs every 15 minutes
    - cron: '*/15 * * * *'
    # Runs every Monday at 9:00 AM UTC
    - cron: '0 9 * * 1'

Cron format:
┌───────── minute (0–59)
│ ┌─────── hour (0–23)
│ │ ┌───── day of month (1–31)
│ │ │ ┌─── month (1–12)
│ │ │ │ ┌─ day of week (0–6, Sun=0)
│ │ │ │ │
* * * * *

#GitHubActions #DevOps

Published: Nov 5, 2025
Author: Swasthik K

Syntax Highlighting & Language Detection with Highlight.js

It's a lightweight JS library that automatically highlights and detects code syntax on web pages — no need for manual markup.

Installing Highlight.js

Code

pnpm add highlight.js

Detect Language & Highlight

Code

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

const code = `function sum(a, b) { return a + b; }`;
const { value, language } = hljs.highlightAuto(code);

console.log(language); // e.g. "javascript"
console.log(value); // highlighted HTML

• You can pass value to your React component and render it inside a code element with the hljs class for styling.
Highlight.js automatically detects the language and highlights it — perfect when your app handles multiple code types dynamically.

#JavaScript #Frontend #HighlightJS

Published: Nov 5, 2025
Author: Vaibhav Yadav
Senior System Analyst

Clean up merged Git branches easily

You can quickly delete all local branches that have already been merged into your current branch (like master or main) using a single command:

Code

git branch --merged | egrep -v "(^\*|master|main)" | xargs git branch -d

This command lists all merged branches, filters out the current and main branches, and deletes the rest safely. Perfect for keeping your local repo tidy after merging multiple feature branches.

#git #github #vcs

Published: Oct 10, 2025
Author: Puneeth kumar
System Analyst

Understanding the Difference Between Regular Imports and .forRoot() in NestJS

In NestJS, modules can be imported in two main ways — but they behave differently:

1 Regular Imports
• Example imports: [ProjectsModule, UserModule]
• These are simple — they bring in the module’s exports (like services or guards).
• They don’t need any setup or configuration.
2.1 forRoot() Imports
• Example imports: [SlackModule.forRoot(dbClient)
• These are special. They let a module set itself up with configuration or dependencies (like a DB client, API key, etc.).
• They create a global instance that’s initialized once across the app.
2.2 forRootAsync()
• Used when setup depends on async config — like environment variables.
• Example :

Code

PgBossModule.forRootAsync({
  useFactory: async (config) => ({
    connectionString: config.get('DATABASE_URL'),
  }),
  inject: [ConfigService],
});

Conclusion
• Regular imports are sufficient when we just need access to a module’s services or exports.
• forRoot() is useful when a module requires initial configuration or dependencies.
• forRootAsync() is ideal when configuration depends on asynchronous operations, such as reading environment variables or fetching secrets.
#NestJS #import_module

Published: Oct 10, 2025
Author: Syed Sibtain
System Analyst

getBoundingClientRect() A crucial DOM method that gives us an element's position and size relative to the viewport, not the document.

Example:

Code

const rect = container.getBoundingClientRect();

What getBoundingClientRect() returns?

Code

{
  top: 100,      // Distance from viewport top to element top
  left: 200,     // Distance from viewport left to element left  
  right: 400,    // Distance from viewport left to element right
  bottom: 300,   // Distance from viewport top to element bottom
  width: 200,    // Element width
  height: 200,   // Element height
  x: 200,        // Same as left (for compatibility)
  y: 100         // Same as top (for compatibility)
}

Real Usage Example: Image Comparison Slider:

Code

// User drags the slider to compare two images
handleDrag(event) {
  const container = this.getContainer(); // The image container
  const rect = container.getBoundingClientRect();
  
  // Convert global mouse position to slider position
  const x = event.clientX - rect.left;  // Mouse X relative to container
  const percentage = this.calculatePercentage(x, rect.width);
  
  // Update slider position (0-100%)
  this.sliderPosition = percentage;
  this.updateSliderPosition(percentage);
}

Step-by-Step Breakdown:
1. User drags mouse → event.clientX = 350 (global position)
2. Get container bounds → rect.left = 200 (container starts at 200px from viewport left)
3. Calculate relative position → 350 - 200 = 150px (mouse is 150px from container's left edge)
4. Convert to percentage → 150 / 400 = 37.5% (150px out of 400px container width)
5. Update slider → Move slider to 37.5% position
getBoundingClientRect() is the bridge between global coordinates and element-relative coordinates.

#CCT1JMA0Z #stimulus

Published: Oct 8, 2025
Author: Syed Sibtain
System Analyst

When we rewrite git history (like squashing commits, interactive rebase), our local branch diverges from the remote branch.
A regular git push will be rejected because the histories don't match. The first option is git push --force, which overwrites the remote branch with our local version.

The Usual Approach: git push --force

Code

# DANGEROUS - can overwrite other people's work
# We do it everyday though
git push --force origin <feature-branch>

The Safer Alternative: git push --force-with-lease

Code

# SAFER - includes safety checks
git push --force-with-lease origin feature-branch

How --force-with-lease works:
• Checks if the remote branch has moved since we last fetched it.
• Only overwrites if the remote is exactly where we expect it to be.
• Fails safely if someone else has pushed commits we don't have locally.
• Prevents accidental overwrites of other people's work.
PS: Might sound simple, but helps a lot when working with bigger teams.

#git #github

Published: Oct 7, 2025
Author: Nived Hari
System Analyst

If a port (say 3000) is already in use, you can check what’s running on it with:

Code

lsof -i :3000

Here, lsof stands for “List Open Files” — and in Unix/Linux, everything is a file, including network sockets.

So this command lists all processes that have files (or ports) open.
Example output:

Code

COMMAND   PID  USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node     1234  nived  22u  IPv6  0x...      0t0  TCP *:3000 (LISTEN)

Now you can see the PID (Process ID) of the program using the port.

To stop it, run:

Code

kill 1234

The kill command sends a signal to a process — by default, it’s SIGTERM (Signal Terminate), which politely asks the process to shut down.
If the process refuses to die, you can forcefully stop it with:

Code

kill -9 1234

Here, -9 represents the SIGKILL (Signal Kill) — which immediately ends the process without cleanup.

#unix

Published: Oct 7, 2025
Author: Mohammad hussain
System Analyst

The JavaScript console isn’t just console.log. It provides specialized methods for different scenarios:
• console.error() → logs errors in red.
• console.warn() → highlights warnings.
• console.table() → formats arrays or objects as tables.
• console.group() / console.groupEnd() → groups related logs for better organization.
💡 Using these methods makes debugging clearer and more structured than relying only on console.log.
#Javascript

Showing 1 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