TILs - Fueling Curiosity, One Insight at a Time

# This works but is fragile
magick compare -metric AE -fuzz 10% image1.png image2.png NULL: 2>&1

# Problems:
# - Shell command parsing issues
# - Error handling is difficult
# - Output parsing is brittle
# - Cross-platform compatibility issues
# - Hard to debug when things go wrong

# Step 1: Create difference image
difference_image = first_image.composite(second_image) do |c|
  c.compose "difference"
end

# Step 2: Apply fuzz factor using threshold
thresholded_diff = difference_image.dup
thresholded_diff.combine_options do |c|
  c.normalize
  c.threshold "10%"
# This acts as our fuzz factor!
end

# Step 3: Get statistics
mean_value = thresholded_diff.identify do |c|
  c.format "%[fx:mean]"
end

# Step 4: Convert to percentage
percentage = mean_value.to_f * 100

# Devise expects this by default:
class User < ApplicationRecord
  devise :database_authenticatable
  # Uses 'encrypted_password' column automatically
end

# Uses password_digest
create_table :users do |t|
  t.string :password_digest, null: false  # ← Different field name!
  # ... other fields
end

# Devise calls: user.encrypted_password
# Our override returns: user.password_digest

class User < ApplicationRecord
  devise :database_authenticatable, :registerable, :validatable

  # Tell Devise to use our existing password_digest field
  def self.encrypted_password_column
    :password_digest
  end

  # Override the getter method
  def encrypted_password
    read_attribute(:password_digest)
  end

  # Override the setter method  
  def encrypted_password=(value)
    self.password_digest = value
  end
end

<%= form_with model: resource, as: resource_name, url: session_path(resource_name), local: true, class: "space-y-6" do |f| %>

json.req.url: "/api/bankAccounts/*/debit"

{
  "query": {
    "wildcard": {
      "json.req.url": {
        "value": "/api/bankAccounts*/debit"
      }
    }
  }
}

{
  "query": {
    "regexp": {
      "json.req.url": "/api/bankAccounts/[0-9]+/debit"
    }
  }
}

class User < ApplicationRecord
  def full_name
    "#{first_name} #{last_name}"
  end

  # Mark full_name as deprecated
  deprecate :full_name, deprecator: ActiveSupport::Deprecation.new("2.0", "MyApp")
end

DEPRECATION WARNING: full_name is deprecated and will be removed from MyApp 2.0

// ❌ Directly setting the foreign key
users: {
  create: {
    userId: testUser.id,
  },
}

// ✅ Using relation API
users: {
  create: {
    user: {
      connect: { id: testUser.id },
    },
  },
}

npx nx g @nx/workspace:remove <library-name>

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

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

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

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

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

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

create(:user, :admin)

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

npx prisma generate

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

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}`);
  }
});

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

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

URL.createObjectURL(file)

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

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

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

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,
});

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