Chaitanya Varu

Add devise to rails app

Fri, 25 Aug 2023 00:00:00 GMT

Devise is a very useful gem in the rails ecosystem. It provides powerful out-of-the-box solutions for authentication functionalities to add to your rails application.

In this guide, we will look at the basic steps one needs to integrate devise.

Install devise

bundle add devise

This will add install the gem and add it to the gemfile

Generate initial configuration files

rails generate devise:install

In config/environment/dev add config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
- This ensures that Devise-generated emails contain the correct URL.
Set a root path in routes.rb, if not already.

Generate the view files

rails generate devise:views

Use it to modify the default view of signup, login and other authentication-related pages.

Generate user model

rails generate devise User

after generating the model, perform a database migration to add the User model to your database.

rails db:migrate

Now you could explore other features like confirming while signup, forgot password, lock attempts etc.

Git for beginners

Sun, 30 Apr 2023 00:00:00 GMT

Github Repo to Local System

copy SSH link of repo
go to folder in pc where you want the project, then
git clone <link>

Configure Git for a project and Push files

git init
- initializes project
git add .
- adds files to staging area
- . means all files. for specific files, give their names
git commit -m “message”
- “-m” is for message
git remote add origin <link>
- copy SSH link from repo
git push origin <branch_name>
- push command updates the remote repository with local commits
- origin represents a remote name where the user wants to push the changes

Branches

Basics

git branch <branch_name>
- create new branch
git checkout <branch_name>
- to go to another branch
- add -b to create & go to new branch
git branch
- check current branch
git branch -a
- to see list of all branches

Merging branches

go to branch where you want to merge
git merge <branch_name>
<branch_name> is the branch you want to merge into current branch

Renaming branch

git branch -m <oldname> <newname>
git branch -m <newname>
- if you want to rename current branch

Deleting branch

git branch -d <local_branch_name>
- -d deletes only those branches which are merged and pushed to remote branch
git push origin --delete <remote_branch_name>
- to delete remote branch

Cloud Resume Challenge

Wed, 02 Aug 2023 00:00:00 GMT

I wanted to explore cloud so I took the Cloud Resume Challenge. It is a great way to get hands on learning experience on cloud. Here’s my journey through it.

One can take it using any cloud platform like AWS, Azure or GPC. I selected the Azure path.

Adding the basic structure

First, I setup the basic HTML, CSS, JS structure. The page had few social links and a counter. I kept it very minimal since focus is on learning cloud not HTML, CSS.

Hosting Static website

I created Static Web App from the azure portal and hosted the app. This took no time.

Configuring a Custom Domain

From the hosted static app, I went to custom domain on other DNS. Created CNAME record from DNS management from my DNS provider with value as azure hosted url.

Working with Azure Cosmos DB

Created an Azure Cosmos DB account. Make sure to select (consumption) serverless option.

Then created a new container from data explorer and added an item to it.

Implementing Azure Functions

This was the most challenging part. I created an Function app from the portal. Once function app is created, create the function with http Trigger.

Now select Integrate and add input & output bindings. Set binding type as cosmos DB since we have stored the count there and select the database we created earlier. Database name will be database-id and collection name will be container-id.

This is the required function. The data parameter receives data from the Input binding. Then we assign the required value from it to Output binding so that it could be used after function execution. The data is returned in the body. The count value is incremented in output binding and after function execution, it is stored in the database.

module.exports = async function (context, req, data) {
    context.bindings.outputDocument = data[0];
    context.bindings.outputDocument.visitorCount += 1;
    context.res = {
        body: {
            visitorCount: data[0].visitorCount,
        },
    };
};

🚨 Mistake I did was that I kept partition key and the key storing count value same. It was creating a new record instead of updating it. This took up a lot of time.

For this step, articles by Akande Bolaji, Craig Wall and Jeff Brown helped a lot.

Also enable CORS after function is ready.

Using CDN

For CDN I used Front Door and CDN profile from azure portal. Added the static web app’s url as endpoint.

Conclusion

The resume is deployed in azure static web app and is live at ~~chaitanyavaru.tech~~. It is storing the visitor count value in azure cosmos DB whose value is updated by azure function whenever the page is visited. And its using custom domain.

I learned a lot from this challenge. It was a great experience. I will be exploring more of azure in future.

Deploy in Railway

Tue, 25 Apr 2023 00:00:00 GMT

To share our app with others, we need to deploy it. There are many ways to deploy our app, but one of the easiest services I have found is Railway.

Here is a quick guide to deploy your app in Railway.

Go to dashboard
Select deploy from github
Add variables, if any
Then go to settings tab
- Select root directory
- Add build command
- Add sisdfsdftart command
Now deploy

Thats it! Now you can share the app using the domain from the settings tab.

Getting Started with Cloudflare Workers

Thu, 10 Aug 2023 00:00:00 GMT

Serverless can be confusing if you’re new to it. Despite the name “serverless,” it does involve servers in the background. Basically in serverless we write functions and deploy and the platform where functions are deployed takes care of rest of the things.

Cloudflare workers is a simple way to get started with the serverless architecture. Its better to have hands-on learning than just theories. So we will build a serverless resume to understand cloudflare workers.

Wrangler

Cloudflare workers can be managed through the web interface or by its command line tool wrangler.

Installation

To install Wrangler, use the following command:

npm install wrangler --save-dev

Generating project

wrangler generate project_name

This wil generate starter files for cloud flare workers.

Code

Create a new file and add your resume contents in it.
Now in index.js we will import resume and send as response.

import resumeData from './resume';

const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
};

export default {
    async fetch(request, env, ctx) {
        const formatedResume = JSON.stringify(resumeData, null, 2);

        return new Response(formatedResume, {
            headers: {
                'Content-Type': 'application/json',
                ...corsHeaders,
            },
        });
    },
};

To enable cross-origin resource sharing (CORS) ie add its headers.

To make the resume display in a more readable way, we are using JSON.stringify() function. It takes 3 arguments. Original data, a replacer callback function which is null here and space argument which is 2 which means that means that each level of nesting within the JSON structure will be indented by two spaces.

Deploy

In wrangler.toml file, configure project details like name and entry point.

To deploy it use the command:

wrangler deploy

Automating with Github Actions

To automate the deployment process we are using github actions. This workflow deploys updated code whenever changes are pushed to the repository.

Create ‘.github/workflows’ directory
Inside it add a YAML file

Here’s the content of the YAML file

name: Deploy to Cloudflare Workers

on:
    push:
        branches:
            - master

jobs:
    deploy:
        runs-on: ubuntu-latest
        name: Deploy
        steps:
            - uses: actions/checkout@v2
            - name: Publish
              uses: cloudflare/wrangler-action@2.0.0
              with:
                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

To access our Cloudflare account, we are using API token. Generate the token from cloudflare dashboard. Then add it to github secrets of the repository.

Conclusion

Thats it. We built a simple cloudflare workers project to server resume data.

Now when anyone enters the URL associated with the project, they would receive the resume data in response.

How to integrate google APIs to your application

Wed, 07 Jun 2023 00:00:00 GMT

API is a way to use features of other applications in our application. Google has several APIs that could be used in our applications.

In this article, we will see how to integrate Google API with our application.

Prerequisites

Account in Google Cloud Platform

Steps

1. Create Google Cloud Project

From the sidebar, go to APIs & Services > Library.
Search for the API to enable, here we are enabling google sheets API.
Click on Enable.

2. Create Credentials

Now create credentials for the API. For this, there are 3 ways
- OAuth 2.0: to access user data on their behalf.
- API Key: to access public data.
- Service Account: to access our data on behalf of our application.
here we are using a service account.
Add a service account name and click on create.
Fill the required details
Click on Done and download the JSON file which contains the credentials.

3. Integrate API using the credentials

Create an .env file and add GOOGLE_SHEET_CLIENT_EMAIL, GOOGLE_SHEET_PRIVATE_KEY and GOOGLE_SHEET_ID from the downloaded JSON file.
For the private key, include everything from “-----BEGIN PRIVATE KEY-----” to “-----END PRIVATE KEY-----”
Install googleapis package using your package manager.

import { google } from 'googleapis';

export default async function getSheetData() {
    // create auth client
    const auth = new google.auth.GoogleAuth({
        credentials: {
            client_email: process.env.GOOGLE_SHEET_CLIENT_EMAIL,
            private_key: process.env.GOOGLE_SHEET_PRIVATE_KEY,
        },
        scopes: [
            'https://www.googleapis.com/auth/spreadsheets', // to read and write spreadsheets
            'https://www.googleapis.com/auth/drive', // to create a new spreadsheet
        ],
    });

    // create client instance
    const client = await auth.getClient();

    // create google sheet instance
    const sheetInstance = google.sheets({ version: 'v4', auth: client });

    // get all data in range
    const { data } = await sheetInstance.spreadsheets.values.get({
        spreadsheetId: process.env.GOOGLE_SHEET_ID,
        range: 'sheet1', // this is sheet name
    });

    return data.values;
}

My journey of learning Vim Motions

Sun, 10 Dec 2023 00:00:00 GMT

Why vim motions ?

Couple of months back I started having little bit pain around my wrists. So I started doing some basic wrist stretches. There was temporary relief but for a long term solution, I looked around for other solutions as well.

I found that ergonomically it was bad for wrists to move from letter keys to arrow keys & moves frequently. Shifting from letter keys to arrow keys every time when I had to navigate seemed slow. For this I landed upon vim. With vim’s mode based editing, there would be less wrist movement and most of navigation could be done from the home row of keyboard.

However, shifting entirely to terminal based editor(vim) from VS Code felt overwhelming and unnecessary for now. So I decided to focus only on vim motions.

I am using ‘amVim’ extension in VS Code with which we can get some vim features in vscode.

What are vim motions?

Vim motions are ways with which we can edit text efficiently. Most basic example is that instead of arrow keys to navigate, we use h, j, k, l, so no need to lift hand from home row of keyboard.

Another example would be selecting some text inside parenthesis. For that we could use mouse and drag, or in keyboard we could press ctrl + shift + arrow key until we select all text. But with vim motions, we just press three characters. Stay inside parenthesis and press vi( thats it.

More examples would be navigating each word with w, deleting word with dw, toggle upper/lower case of characters with ~.

And these are just on single word or line. By adding numbers in front of commands we can perform them in multiple lines. For example, 10j will move cursor 5 lines below, 5dw will delete next 5 words.

Resources

Most of the learning was from Jaime Gonzalez Garcia’s guide on Vim in VS Code. This is a fantastic guide for anyone looking for vim motions. The site vim adventures and ThePrimagen’s youtube playlist are also good for introduction. After this, it was just google searches for what I needed.

Learning journey

To increase the chances of using vim motions, I enabled them in both VS Code and Obsidian (tool I use for note taking).

For the first few weeks, I enabled vim mode only during weekends, so I don’t get slowed down in my day work. One I got comfortable with vim motions, I started using vim mode full time on both apps.

I already used lot of keybindings instead of using mouse in my vscode so adding new commands to memory was not a challenge. Though getting habituated to using those commands instead of arrow keys took some time. Also remapping caps lock key to escape key was helpful.

Two weeks into vim motions

Now that I am using it for two weeks for full time, editing text has become simpler and fast. The ease of navigation, selecting and modifying text is amazing.

Stil, more practice is required to develop the muscle memory. And I might also change the extension to ‘Vim’ instead of ‘amVim’ so that I could add my own key bindings.

Update: I did moved to ‘Vim’ extension. And because of all the custom settings, I am finding it much better.

My VS Code configurations

Sun, 24 Dec 2023 00:00:00 GMT

The better we know our tools, the better we can use them. - By Someone

For programmers, text editor is one of their most important tool. Its useful to know your editor’s functionalities. It helps to customize it based on your preferences, which can enhance our workflow and productivity.

In this post, I will go through the configurations I use in VS Code.

Theme

Noctis - It is a collection of themes, out of which I use Noctis Obscuro. I find noctis themes very easy for the eyes.
Material Icon Theme
JetBrains Mono - JetBrains Mono focuses on readability a lot. It’s increased letter height and easily distinguishable characters reduces eye strain.

Extensions

Most of these extensions are language agnostic and there are few others which I add/remove depending on the language I am working on.

Advanced-new-file - This extension helps to create new files in specific directories right from the command pallete, without using the file tree.
amVim - Provides vim features inside VS Code.
File Utils - This extension gives features like rename, copy etc right from the command palette. I use this for renaming a lot.
Indent Rainbow - Highlights the indentation.
Live Server - To view simple html files.
Remote SSH - This extension lets us open any folder on remote machine inside VS Code.

Settings

I tend to use the built-in settings whereever possible and use less extensions, and keep the screen minimal.

{

    "editor.suggestSelection": "first",
    "editor.fontSize": 19,
    "editor.fontFamily": "'JetBrains Mono'",
    "editor.fontLigatures": true,
    "breadcrumbs.enabled": false,

    // Scroll
    "editor.fastScrollSensitivity": 1,
    "workbench.list.fastScrollSensitivity": 1,
    "terminal.integrated.fastScrollSensitivity": 1,
    "editor.mouseWheelScrollSensitivity": 1,
    "editor.accessibilitySupport": "off",
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",

    // Terminal
    "terminal.integrated.profiles.windows": {
        "Git Bash": { "path": "C:\\Program Files\\Git\\bin\\bash.exe" }
    },
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.fontSize": 16,
    "terminal.integrated.scrollback": 10000, // lenght of how much we can scroll back
    "terminal.integrated.defaultLocation": "editor",

    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "explorer.compactFolders": false,
    "explorer.openEditors.visible": 1,

    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.tabSize": 2,
    "editor.indentSize": 4,
    "editor.wrappingIndent": "indent",
    "editor.inlineSuggest.enabled": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit"
    },

    // indent guide (the vertical lines)
    "editor.guides.bracketPairs": true,
    "editor.guides.highlightActiveIndentation": true,
    "editor.guides.bracketPairsHorizontal": "active",

    // minimap
    "editor.minimap.enabled": true,
    "editor.minimap.autohide": true,
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 100,

    "editor.cursorSurroundingLines": 10,
    "editor.glyphMargin": false, //  the breakpoint column
    "editor.linkedEditing": true, // auto rename tags

    "editor.stickyScroll.enabled": true,
    "workbench.tree.enableStickyScroll": true,
    "workbench.tree.stickyScrollMaxItemCount": 6,

    "workbench.sideBar.location": "right",
    "workbench.activityBar.location": "hidden",
    "workbench.layoutControl.enabled": false,
    "workbench.editor.pinnedTabSizing": "shrink",
    "workbench.editor.enablePreview": false,
    "workbench.startupEditor": "none",
    "workbench.colorTheme": "Noctis Obscuro",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.tree.indent": 18,
    "workbench.tree.renderIndentGuides": "always",

    "workbench.colorCustomizations": {
        "tab.activeBorderTop": "#d5971a",
        "[Noctis Obscuro]": {
            "tab.activeBorderTop": "#d5971a"
        },

        // editor indent guide colors
        "editorBracketPairGuide.background1": "#2a2a2a",
        "editorBracketPairGuide.background2": "#2a2a2a",
        "editorBracketPairGuide.background3": "#2a2a2a",
        "editorBracketPairGuide.background4": "#2a2a2a",
        "editorBracketPairGuide.background5": "#2a2a2a",
        "editorBracketPairGuide.background6": "#2a2a2a",

        "editorBracketPairGuide.activeBackground1": "#e4e4e4",
        "editorBracketPairGuide.activeBackground2": "#e4e4e4",
        "editorBracketPairGuide.activeBackground3": "#e4e4e4",
        "editorBracketPairGuide.activeBackground4": "#e4e4e4",
        "editorBracketPairGuide.activeBackground5": "#e4e4e4",
        "editorBracketPairGuide.activeBackground6": "#e4e4e4",

        "tree.indentGuidesStroke": "#0f707e" // file explorer indent guides
    },

    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 100,
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,

    "window.commandCenter": false, // the mdiddle box in title bar
    "window.title": " ",
    "window.menuBarVisibility": "compact",

    "diffEditor.renderSideBySide": false,
    "diffEditor.hideUnchangedRegions.enabled": true,

    "gitlens.menus": {
        "editorGroup": false,
        "scmItemInline": {
            "stash": false
        }
    },
    "gitlens.statusBar.enabled": false,
    "gitlens.codeLens.enabled": false,

    "remote.SSH.connectTimeout": 100,

    // aVim
    "amVim.useSystemClipboard": true,
    "amVim.smartRelativeLineNumbers": true,

    //auto close tags
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "typescript.autoClosingTags": true,

    // auto imports
    "javascript.suggest.autoImports": true,
    "typescript.suggest.autoImports": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",

    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "html.completion.attributeDefaultValue": "singlequotes",

    "css.lint.unknownAtRules": "ignore",
    "liveServer.settings.donotShowInfoMsg": true,
}

PWA Basics

Sat, 06 May 2023 00:00:00 GMT

What is a PWA?

Progressive Web Apps (PWA) is a way by which we can run our websites outside of the browser like native apps. They can be accessed from a user’s home screen or app drawer, just like native apps.

Why PWA?

PWAs have fast load times, work offline, and can be accessed from anywhere without the need for a specific app store

Some examples of PWA

Main parts of a PWA

There are 3 main parts of a PWA:

Web App
Manifest File
Service Worker

Web App

It is the regular website part that we usually write.

In the HTML file, add following tags in the head section

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<!-- we can change this theme color using JS, but not the one in manifest file  -->
<meta name="theme-color" content="#ed6606" />

<link rel="manifest" href="./app.webmanifest" />
<link rel="apple-touch-icon" href="./assets/icons/icon_512.png" />

<script src="./sw-registerer.js"></script>

Manifest File

It is a JSON file which acts as the metadata of our app. By convention it is named as manifest.json or app.webmanifest. It is used to provide the browser with information about how the PWA should be installed and displayed to the user. Some of the important fields are:

name: this is the full name of our PWA
short_name: this is the name that will be displayed as the app name on the home screen
icons: it is an array which contains all the icons that will be used for our app. Each icon should have these 3 fields src, sizes, type
- One icon should have the purpose as any which will be used as the icon for the splash screen
- One icon should have the purpose as maskable which will be used as the icon for the splash screen
start_url: the url from where our app will start
display: it is the display mode of our app. Usually kept as standalone
theme_color: it is the color of the status bar when the app runs outside of the browser
background_color: it is the color of the splash screen
scope: scope determines where the service worker will be active
orientation: it is the orientation of the app. Usually kept as portrait
description: description will be desplayd when the user installs the app
screenshots: screenshots will be desplayd when the user installs the app. Structure is similar to the icons array

Service Worker

Service Worker is just a javascript file running in its own thread that will act as a middleware offering a local installed web server or web proxy for your PWA. Basically it is is like a web server installed in client side.

In native app, we download all resources together as a package, and it works offline. In web apps, we download HTML, then browser downloads resources on demand, and it doesn’t work offline since it doesn’t have all the required resources.

In PWA, we download HTML. HTML then registers a service worker. service worker installs some resources & browser installs other resources on demand. Now this works offline since service worker has installed the required resources to run app.

Service worker caches the required resources which can be used to serve even when there is no internet connection.

It is installed by the web page and doesn’t require user permission to be installed.

Registering a service worker

In the head section of the HTML file, add <script src="./sw-registerer.js"></script>

We are using a serviceworker registerer file because if we directly add the serviceworker to the HTML file then it wil be in the same thread and not a separate thread.

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("./serviceworker.js");
}

Useful resources for making PWA

Maskable Icon Maker: it helps to check if our icon is maskable or not, and also helps to make the icon maskable
PWA tutorial

Promise in Javascript

Thu, 02 Mar 2023 00:00:00 GMT

What is promise?

Promise is a special object that represents a future value of an asynchronous operation, the value could be a success or failure.

Now to handle promise, 2 most common methods are either using callbacks or async/await

Callback

We use .then() after the promise to tell javascript what needs to be done after the has resolved/rejected. It takes 2 callbacks onResolve and onReject (usually omitted)

fetch("https://dummyjson.com/carts?limit=5")
    .then(data => {
        console.log(data)
    })
    .catch(err => {
        console.log(err);
    })
console.log("hum first, hum first \n"); // this will appear first in console

Async/Await

Async

It tells javascript that this is an asynchronous function. An async function always returns a promise.

Await

It tells javascript to wait for an asynchronous action to finish before continuing the function. With this we can write asynchronous code in a synchronous manner. It is used instead of .then(). It works only inside async function.

const getCurrentTabData = async () => {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const requiredData = { title: tabs[0].title, url: tabs[0].url };

    return requiredData;
};

async function someFunction(){
    const data1 = getCurrentTabData() //❌ we won't get the expected value
    const data2 = await getCurrentTabData(); //✔ as we wait for promise to resolve, we get expected value
}

Summarizing this with an analogy.

Suppose we go to a self-service restaurant and order Cheese Kulcha [we invoked an asynchronous function].

Then the receptionist will give us a token [we got a promise in return].
Now either we do some other work until our turn arrives [callback] or wait [async/await].
When our turn comes and we go to take the order, these two possibilities may occur
- We get our order [promise is fulfilled / resolved, we get the value which we expected]
- The receptionist may say that due to some reasons order could not be prepared (gas khatm ho gaya hoga) [promise is rejected, and we got a reason of error]

Updating Node

Tue, 15 Aug 2023 00:00:00 GMT

Keeping your Node.js version up to date is essential to ensure security and take advantage of the latest features. You can check current node version using the command node --version.

There are multiple ways of updating the node version in our system. Here are some of them:

Updating via NVM (Node Version Manager)

install nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

start nvm:

source ~/.nvm/nvm.sh

specify node version:

nvm install 18

use it:

nvm use 18

Thats it! You can verify the version using node -v.

Manual Update from the Official Website:

You can also update Node.js manually by following these steps:

Visit the official Node.js website
Download the latest stable version.
Run the installer and follow the instructions.

What are SSH keys?

Mon, 01 May 2023 00:00:00 GMT

Secure Socket Shell (SSH) keys are mainly used to access systems remotely, without the need for a password.

SSH keys are generated in pairs, public & private key. The private key is kept on the local system and the public key is uploaded to the remote system.

When accessing the remote system, it will use the public key to encrypt a message that can only be decrypted by the private key. If the local system decrypts the message successfully, the remote system will grant access.

Generating SSH key

$ ssh-keygen -t ed25519 -C "your_email@example.com" -f ~/.ssh/<file_name>
- -t specifies the type of encryption
- -C is for comment, write email id so that you can identify the key
- -f specifies the file name
$ eval $(ssh-agent -s)
- to run the ssh-agent
$ ssh-add ~/.ssh/fileName
- in macOS add -k
$ clip < ~/.ssh/fileName.pub
- copy the content from the file to clipboard

Adding SSH key to github

Go to settings in github
Go to SSH and GPG keys
Click on New SSH key button
Give title to the system
Paste the content from clipboard
Done

Improve blog reading by adding 'Other Posts' section in Astro blog

Sun, 21 Apr 2024 00:00:00 GMT

In this post, I will walk you through how I added ‘Other Posts you may like’ section in astro blog. Initially I wanted to have a ‘similar posts’ section, which would display posts which have same tags.

But why to have similar posts section?

While visting several blogs, I observed that I am reading more posts if there’s a list below compared to me going to all posts page and then reading them. Hence I thought to add one to my blog as well.

Iteration 1

First I added one function which gets all posts, filters them based on tag and then removes the post which we are already viewing.

export async function similarPosts(tag: string, excludingTitle: string = '') {
  // get all posts
  const blogPostList = await getBlogList()

  // filter posts based on tag
  let similarPosts = blogPostList.filter((post) => post.data.tags?.includes(tag))

  // remove post based on title
  if (excludingTitle !== '') return similarPosts = similarPosts.filter(post => post.data.title !== excludingTitle)

  return similarPosts
}

But it was looking incomplete. Some posts would have similar posts but many didn’t had any. So I changed the plan from ‘similar posts’ to ‘other posts you may like’.

With that, if there are less or no similar posts then I could display few recent posts in the list.

Iteration 2

I added this function

export async function processedSimilarPosts(tags: string[], excludingTitle: string = '') {
  const MINIMUM_NUMBER_OF_SIMILAR_POSTS = 3
  let otherPosts: any[] = []

  // get similar posts of all tags
  for (const tag of tags) {
    const blogPostList = await similarPosts(tag, excludingTitle)
    otherPosts = [...otherPosts, ...blogPostList]
  }

  // return posts if they are more than decided count
  if (otherPosts.length >= MINIMUM_NUMBER_OF_SIMILAR_POSTS) return otherPosts

  const remainingPostsToFill = Math.abs(otherPosts.length - MINIMUM_NUMBER_OF_SIMILAR_POSTS)

  // again get all posts
  let additionalPosts = await getBlogList()
  // and then filter them if it is current post OR if it is already present in from the tag
  additionalPosts = additionalPosts.filter(post => {
    if (post.data.title === excludingTitle) return false

    const postExistsInOtherPosts = otherPosts.some(otherPost => otherPost.data.slug === post.data.slug);
    return !postExistsInOtherPosts;

  })
  // take only the required number of posts
  additionalPosts.splice(remainingPostsToFill)

  const combinedPosts = [...otherPosts, ...additionalPosts]
  return combinedPosts
}

Iteration 3

Later, I also added this function to remove duplicates because one post could have multiple tags.

function removeDuplicatePosts(posts: any[]) {
  const titleMap = new Map<string, any>()

  for (const post of posts) {
    const postTitle = post.data.title
    if (!titleMap.has(postTitle)) {
      titleMap.set(postTitle, post)
    }
  }

  const uniquePosts = Array.from(titleMap.values())
  return uniquePosts
}

Now, I could just call processedSimilarPosts function and map over the result to display posts.

^{_{Live example below 👇}}

Data structure before code

Sat, 13 Jul 2024 00:00:00 GMT

Last evening, I was reading this article from Engineer’s Codex newsletter. In it, I read this quote by Linus Torvalds.

Bad programmers worry about the code. Good programmers worry about data structures and their relationships.

Article was about focusing on how we store the data first and then writing the code, to make it more maintainable.

Initially, I didn’t understand the article much, but then I remembered a meeting I had with a senior developer that morning. After which, article was a lot clearer.

Meeting with senior developer

We were discussing about some issue, and then at one point, he was refactored some code that I had written. It was a service which would access different buckets based on the environment.

Here’s what I had originally written:

Note: Excluded some code for brevity.

class SomeClass < ApplicationRecord
  def self.get_bucket_name(environment)
    if environment == 'staging'
      ENV['STAGING_BUCKET_NAME']
    elsif environment == 'pre-production'
      ENV['PRE_PRODUCTION_BUCKET_NAME']
    elsif environment == 'production'
      ENV['PRODUCTION_BUCKET_NAME']
    end
  end

  def self.get_public_url(environment)
    if environment == 'staging'
      ENV['STAGING_PUBLIC_URL']
    elsif environment == 'pre-production'
      ENV['PRE_PRODUCTION_PUBLIC_URL']
    elsif environment == 'production'
      ENV['PRODUCTION_PUBLIC_URL']
    end
  end
end

# Usage
SomeClass.get_bucket_name(environment)
SomeClass.get_public_url(environment)

Since the values were constant, he moved them into a hash.

class SomeClass < ApplicationRecord
  CONFIGURATION = {
    'staging' => {
      bucket_name: ENV['STAGING_BUCKET_NAME'],
      public_url: ENV['STAGING_PUBLIC_URL']
    },
    'pre-production' => {
      bucket_name: ENV['PRE_PRODUCTION_BUCKET_NAME'],
      public_url: ENV['PRE_PRODUCTION_PUBLIC_URL']
    },
    'production' => {
      bucket_name: ENV['PRODUCTION_BUCKET_NAME'],
      public_url: ENV['PRODUCTION_PUBLIC_URL']
    }
  }
end

# Usage
SomeClass::CONFIGURATION.dig(environment, :bucket_name)
SomeClass::CONFIGURATION.dig(environment, :public_url)

Now instead of two functions, everything was in a single hash. This definitely made the code more readable and maintable.

Conclusion

Now onwards, I will now try to refactor to be more clear.

Git cherry-pick

Fri, 31 May 2024 00:00:00 GMT

Many times we need to move some commits from one branch to another. For example, you added commits for issue-1 in the branch of issue-2. One way to fix this is by using git cherry-pick.

This command creates a new commit with changes of specified commit(s).

Commit Hash

Git identifies each commit by a SHA-1 hash. It consists of 40 characters (61e42590b8d5e6691c311b47960be54c09b0583e). The hash can also be abbreviated to the first 7 characters (61e4259).

Commit hash can be found using git log.

Usage

Apply single commit

To apply commit from another branch to current branch, we just give the commit hash as an argument

git cherry-pick 04527c084

Now that commit will be applied to current branch

Apply multiple commits

When we have to move multiple commits, we can pass all those to the command in order oldest to latest.

git cherry-pick 04527c084 68a0ffffd 0998c7ea4

Alternately, we can give the range of the commits instead of writing all the hashes

git cherry-pick 04527c084..0998c7ea4

Edit commit before applying

Sometimes, we want to add the commit but with some additional changes before committing it. For that, we can use —no-commit flag.

git cherry-pick --no-commit 04527c084

This will get the changes but will not commit them to current branch.

Caution

Use cherry-pick with caution. Avoid using it in branches that are to be merged, as it could cause merge conflicts.

Using git rebase for altering git timeline

Sun, 25 Aug 2024 00:00:00 GMT

With time stone, Dr Strange can alter reality. With rebase, you can alter reality, though it only alters history of your git repository.

In this article, we’ll look at what rebase is, how it works and how to use it.

Syntax

git rebase <base-branch>

This command changes the starting point (base) of your current branch to the specified branch.

Why Rebase instead of Merge

The most common use case for rebase is to get the latest changes of the base branch into your feature branch.

Suppose you started working on an issue. You created feature branch from main branch. After some time, main got new commits by other developers.

Now to get those commits, you would

Go to base branch and get the updates from remote to local

 git pull origin main

Then go to feature branch and rebase:

git rebase main

This way, you less likely to get any conflicts while raising a pull request (since you would have already fixed them while rebasing). And will have a linear git history.

When we merge to get latest changes of base branch into current branch, we get extra ‘merge commits’. These could be avoided by rebase.

How rebase works

Now that we understand why rebase is useful, let’s see what git actually does while rebasing:

Puts your commits in a temporary area
It then updates current branch to match the base branch
And then one by one, adds your commits on top of updated branch
If there is any conflict while adding a commit, then we have to fix it and add the files to staging area. After that we continue rebase

git rebase --continue

Note: Although the content of the commit is same, each reapplied commit is a new commit, resulting in a different commit hash.

Avoid common pitfalls

Don’t rebase in shared branches: Rebase only in your own branch. Otherwise, it could cause problems for people who were working based on that previous history
Force push: In case you had pushed commits to remote before rebase, then you will have to force push
- At that point avoid --force as it could cause irreveraible changes
- Instead use --force-with-lease which ensures that you don’t overwrite others’ commits, by verifying that no one else has pushed changes since your last pull

Undo rebase with reflog

In case any commits are lost or you want to undo the rebase, then you can use git reflog

Reflog, short for reference log, tracks changes to HEAD in your local repository. Using these logs, we can revert our branch to its previous condition

For example, these are the reflog after feature branch was rebased with main branch.

df3a1a1 (HEAD -> feature) HEAD@{0}: rebase (finish): returning to refs/heads/feature
df3a1a1 (HEAD -> feature) HEAD@{1}: rebase (pick): feature commit 2
231d8fc HEAD@{2}: rebase (pick): feature commit 1
0f4b92f (main) HEAD@{3}: rebase (start): checkout main
a73d641 HEAD@{4}: checkout: moving from main to feature
0f4b92f (main) HEAD@{5}: commit: commit b
06cfab3 HEAD@{6}: commit: commit a
fa670ea HEAD@{7}: checkout: moving from feature to main
a73d641 HEAD@{8}: commit: feature commit 2
1961335 HEAD@{9}: commit: feature commit 1
fa670ea HEAD@{10}: checkout: moving from main to feature
fa670ea HEAD@{11}: commit: commit 3

There are rebase commits and before them, there is a ‘checkout: moving from …’. This is the commit before rebase started.

Move the HEAD to that commit, ie reset the state of branch to that state.

`git reset --hard <commit-id>`

Thats it! Now your branch will be back to the state before the rebase.

Conclusion

Rebase is a very powerful command that can make project history cleaner. But before using it in a shared repository, practice and understand it in your personal repository to avoid any data loss.

Never Assume, Always Check

Fri, 14 Jun 2024 00:00:00 GMT

Last week, I worked on a ticket where I was requesting data from frontend to backend. There was also an nginx server between them. Backend was a Rails API, and frontend was Rails application with javascript for interactivity.

After deploying the backend on server, I got CORS error when making requests.

Before deploying, I had tested it locally and the service worked. Since nginx was not involved locally, my first thought was that the problem must be with nginx server. It must not be passing the cors headers, since in the API’s cors policy the frontend was allowed.

I spent lot of time checking for that, but found nothing.

Then I moved to javascript part, which was an ajax request. In its error section, if status was ‘404’ then another function had to be called else just print the statusText.

error: function(error) {
  if (error.status === 404 ) {
    // do something
  }
  else {
    console.log(error.statusText)
  }
}

Somehow, the browser console showed a status of 404, so I continued working, assuming it was actually a 404 error. After sometime, I checked the status with console.log and found it was 0 🤯.

Later, the bug was fixed.

Learning

With this issue, I realised that to always check and validate the values that you are getting. Especially when you receive them from outside of your server.

Streamline API development with Postman Scripts

Sat, 19 Oct 2024 00:00:00 GMT

Postman is a useful tool for API development that allows us to make requests to an API. However, when building APIs, we frequently update parameters & request body, which becomes repetitive and prone to errors.

With scripts, we can automate these repetitive tasks. In this article, we will explore postman variables and scripts to streamline your workflow.

Variables

Before diving into scripts, it’s essential to understand variables.

Scopes determine where the variable will be available.

Global: Available throughout the application
Collection: Available only within that postman collection (ie, group of requests)
Environment: Changes depending on active environment (eg, development or production)

We can access these variables using following methods:

pm.globals
pm.collectionVariable
pm.environment

Now that we understand how to use variables, let’s explore how to automate tasks with scripts.

Scripts

We can write pre-request & post-response scripts.

Pre-request scripts are executed before making the request.

For example, this pre-request script gets email from collection variable and sets name.

 let email = pm.collectionVariables.get('user_email');
 let name = email.split('@')[0];
 pm.collectionVariables.set('user_name', name);

Post-response scripts are executed after the response is received.

For example, this post-response script sets auth headers and user_id from the response.

// set auth headers for upcoming requests
let headersToFind = new Set(['uid', 'access-token']);
pm.response.headers.each(header => {
    let headerName = header.key.toLowerCase();
    if (headersToFind.has(headerName)) {
        pm.collectionVariables.set(headerName, header.value);
    }
});

// set current user id to previous user id
let previous_user_id = pm.collectionVariables.get('user_id')
pm.collectionVariables.set('previous_user_id', previous_user_id);

// set new current_user id
let response = pm.response.json();
let user_id = response.data.id;
pm.collectionVariables.set('user_id', user_id);

Caution

In the variables tab, update current value not initial. Initially, didn’t know how they worked so I had kept ‘current value’ column hidden. But all the updates take effect on this column. So I was thinking that scripts are not working. Spent quite some time due to this.

Conclusion

Using Postman scripts can significantly save time and reduce errors in your API development workflow. By automating repetitive tasks, you can focus on enhancing your API’s functionality and performance.

Slack Productivity Tips I Use to Stay Focused

Sun, 15 Dec 2024 00:00:00 GMT

Slack is great for team communication, but its notifications can pile up quickly and make it hard to focus. I used to struggle with all the noise myself, but over time, I found a few simple ways to cut out distractions and stay productive.

In this post, I’ll share the tips I use to make Slack work better for me.

Notifications

Default Sound
- The default notification sound, Knock Brush, plays two tones, which I find distracting. I replaced it with ‘Ta-da’, a single tone. This made a big difference — it was an instant upgrade to my focus.
Flash Window
- Flash windows are those message previews that pop up over your screen when someone messages you.
- I keep it to ‘never’ so that they don’t interrupt the deep work (a habit that I am cultivating).
Mute Notifications
- I mute channels that don’t require my immediate attention—like team-wide discussions or channels for specific projects I’m not actively working on.
- This helps me stay focused during the day while still being able to check muted channels when needed.

Display

Compact Theme
- Preferences > Messages & media > Theme
- Compact Theme reduces visual clutter by removing profile pictures and displaying only usernames next to messages, making it easier to scan through messages quickly.
Channel Sections
- Slack allows you to organize your channels into custom sections. I’ve created three sections:
  - Active Channels: These are the channels I use daily and have notifications enabled.
  - Occasional Channels: Channels I check at specific times of the day, like for recurring tasks or event updates.
  - Muted Channels: Channels I don’t need to monitor frequently, but I keep them muted so I can check them when something important comes up.
    - Here, I have also enabled ‘Show Unreads only’ so that I only see the required channels, instead of list of all channels.

Message

One-click Reactions
- Preferences > Messages & media > Show one-click reactions
- I use certain reactions frequently. With this setting, I don’t have to open the emoji panel each time—I can just click once and keep moving.
Start at newest message
- Preferences > Mark as read > Start me at the newest message, and mark the channel read
- By default, Slack shows unread messages first when you open a channel. I prefer starting at the newest message instead. This way, I skip over older messages that don’t need my attention, and I can scroll up if I need to catch up on anything.
Markdown Formatting
- Preferences > Advanced > Input options > Format messages with markup
- This is one of my favorite settings. Slack’s default formatting toolbar feels slow to me, so I use markdown to quickly format messages.
- Proper formatting helps me organize my thoughts more clearly and makes messages easier to understand for everyone, saving time for everyone involved.
- For this, I use:
  - [some text](link) for hyperlinks
  - *bold text* for bold text
  - _italic text_ for italic text
  - - for bullet points
  - `text` for inline code highlights
Threads
- With threads, I can check recent messages across channels in same place
- This saves time of navigating to individual channels and then searching for particular chat.
Text Snippets
- If we share a loooong text in the default message window, then while scrolling the thread the full text will have to be scrolled.
  - With a text snippet, slack puts the text into an expandable window making the thread easy to navigate
- To create a snippet, click on the + button on the message box and select Text Snippet
  - Create snippet popup will appear
  - Now, the messages can be expanded when needed

Conclusion

We can’t eliminate all the noise, but with a few simple changes, we can create a more focused and productive workspace. Try these adjustments and see if they help improve your workflow.

Symlinks for efficient dotfile management

Sat, 05 Oct 2024 00:00:00 GMT

As developers, we can have lots of config files (.zshrc, .psqlrc, init.lua etc) to customize our development environments. Over time, managing these files across multiple systems becomes a hassle.

For this, I started saving them in a git repository. While this helped, it still an inefficient solution. Every time I changed a file, I had to manually update it in the repository as well. This resulted in extra work and sometimes I missed updating the repository.

Then I learned about symlinks, which eliminated the need to manually update both the file and the repository.

What is symlink?

Symlink, short for symbolic link, is a file that points to another file called target.

Instead of copying a configuration file across different systems, you can create a symlink that references the original file. Any changes made to the original file are automatically reflected in the symlink.

You can create symlink for both file & directory.

How to Create a Symlink?

Creating Symlinks in Windows

Open command prompt as an administrator
Use this command to create symlink

mklink "\path\to\symlink" "\path\to\target\file"

Make sure symlink doesn’t exist already

mklink "C:\Users\user\alias.sh"  "D:\path\to\dotfiles\alias.sh"

Creating Symlinks in Linux

Use this command to create symlink

ln -s /path/to/source/file /path/to/target/file

-s stands for “symbolic” and tells ln to create a symlink rather than a hard link

ln -s ~/dotfiles/.zshrc ~/.zshrc

To know the target file of the symlink, we could use the following command: ls -l /path/to/symlink
Linux syntax is opposite from windows, where target is given later

Conclusion

In this article, we learned how to use symlinks for managing your files more efficiently. For further readings, check out symlink management tools such as stoa (linux), chezmoi (cross-platform).

Using alias in command line to increase productivity

Sun, 14 Jan 2024 00:00:00 GMT

In our daily workflow, there are few commands that we have to run multiple times. Like npm run start, git commit -m "fixed the printer".

Typing the same command again and again is inefficient and also increases the chances of typo. I used to mistype (or still mistype 🤷‍♂️) git as gti a lot.

And yes, using up arrow we could go back to that command, but why to keep searching for that one command that you executed 10-15 commands back, when there is a better solution available.

Enter alias

Aliases are text substitutions that we could configure for common commands, so that we don’t have to type them fully.

How to add alias

To add aliases, we need to modify the configuration file of the shell. Linux: file is usually present in the root folder Windows: file is present at C:\Users\<your user name>

File name will depend on your shell. eg .bashrc for bash, .zshrc for zsh

General syntax is alias shortcut='full command'

Now whenever the shortcut is typed, shell will execute as if the full command was typed.

Useful Aliases

Here are some of the aliases that I use

alias c='clear'

# navigate directories
alias zshopen='vim ~/.zshrc && source ~/.zshrc'
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'

# git
alias g='git '
alias gcm='git commit -m '
alias gc='git checkout '
alias gcb='git checkout -b '
alias ga='git add '
alias gpo='git push origin '
alias gpu='git push origin HEAD '
alias gpl='git pull '
alias gs='git stash '
alias gsa='git stash apply '
alias gsl='git stash list '
alias gss='git stash save '

# docker
WEB_CONTAINER="web_container_name"
DB="database_container_name"

alias d='docker '
alias du='docker compose up'
alias ds='docker compose stop'
alias dr="docker compose restart $WEB_CONTAINER"
alias dcd='docker compose down'
alias dps='docker ps'
alias da="docker attach $WEB_CONTAINER"
alias de="docker exec -it $WEB_CONTAINER /bin/bash"
alias dep='docker exec -it $DB /bin/bash -c "psql -U <database-name> -d <database-password> -x"'

# npm
alias nr='npm run '
alias nd='npm run dev'

# hugo
alias hs='hugo server'

Usage

Now we could just press c instead of clear to clear the terminal.

Or type gc "hack internet" and it will be executed as git commit -m "hack internet".

Conclusion

I have been using aliases from past 6 months and finding them very useful.

PS: Add aliases which are personalized to you. With this, you won’t have to think which alias does what.

How I Debugged Unexpected Attribute Changes in Rails

Tue, 09 Sep 2025 00:00:00 GMT

I was debugging an issue where a database record’s attribute was getting updated incorrectly. There were lots of callbacks involved, so it was taking time to figure out from where the value was being updated.

I needed a way to see exactly when the attribute was being changed. That’s when I came across ActiveModel::Dirty module. With that, I found the error in no time.

What is ActiveModel::Dirty?

ActiveModel::Dirty lets you track when an object’s attributes change. It provides methods like *_changed?, *_will_change! that track when the value has been modified.

However, this module only tracks in-memory changes, resetting after the object is saved.

In most applications, we often need to know about attributes after they’re saved to the database.

ActiveRecord addresses this by building on the module through ActiveRecord::AttributeMethods::Dirty, providing methods like saved_change_to_* and saved_changes? to track changes across the database lifecycle.

Back to debugging

With this info, I went back to debugging.

The problem was that in a model, the attribute field_id was being assigned an incorrect value. So I used saved_change_to_* method inside an after_save callback. This way, whenever the record was saved, the callback would run.

Here’s the code I used:

after_save -> {
  if saved_change_to_field_id?
    puts "field_id changed from #{saved_change_to_field_id.first} to #{saved_change_to_field_id.last}"
    binding.pry
  end
}

With this in place, I could instantly see whenever field_id changed and pause execution to inspect the call stack. That helped me identify the callback responsible and fix the issue.

Conclusion

It was a delight to learn about this module. It’s super useful for catching data changes. Try it out. It might save you a lot of time the next time your model behaves unexpectedly.

⚡ How to search in sites quickly with custom site-search

Fri, 31 Jan 2025 00:00:00 GMT

When browsing the internet, we often return to the same websites—like YouTube, Tailwind Docs, or looking up the meaning of a word.

Typically, we open a new tab, go to the website, and enter our query. With site search, we can reduce these three steps into one.

It is a shortcut by which we can directly enter query from the address bar and get results inside the website.

How to set up Site Search

We can enable site search in the following way:

From the options, go to settings

In the side bar, select search engine
In the site search section, click the Add button

Give name for the shortcut
Shortcut you want to use
URL

How to get the URL

To get the search URL, first search for something on the website.

For example, if you search ‘haikyuu’ on YouTube, the URL in the address bar will become https://www.youtube.com/results?search_query=haikyuu. Now, replace ‘haikyuu’ with %s to make it dynamic https://www.youtube.com/results?search_query=%s. That’s it!

Usage

Now, you can type yt in address bar, enter query and results will directly open in youtube.

One shortcut that I frequently use is mn for searching the meaning of any word. Another one is cf for searching the confluence documentation in my workplace.

Give site search a try with your most-visited websites and see how much time it saves you. Once you get the used to it, you’ll wonder how you ever browsed without it!

Your Git Commits Are Talking: What Are They Saying?

Tue, 24 Jun 2025 00:00:00 GMT

Git commit messages are more than technical logs. They are conversations we have with our future selves, our teammates, and sometimes even strangers. And just like spoken communication, they can be clear & helpful or confusing & frustrating.

Here are some commit patterns that can feel just like unclear conversations:

Filler words (‘uhm’, ‘ahh’)
- Merge commits are like filler words
- Acceptable when merging feature branch into base branch. Avoid unnecessary merges elsewhere
Rambling
- Adding, then undoing changes
- Like explaining something, then backtracking and confusing your listener.
Speaking unclearly
- Vague commit messages like “fix stuff”, “changes”, “update”
- We leave others guessing what we meant
- Be specific: what changed? why?
Speaking too fast (information overload)
- Huge commits with many unrelated changes
- Hard to follow & harder to review
- Break into logical chunks
Over-communicating trivial details
- “Fix typo”, “run formatter”, “resolve conflicts”
- Squash these into main message to avoid forcing readers through unnecessary noise
Frequent pauses
- Commits after every tiny edit (“added one line”, “changed one variable”)
- Forces the listener to keep reconnecting context
- Group related changes together

Secure Your Users' API Keys using Rails Encryption

Mon, 17 Mar 2025 00:00:00 GMT

I have an RSS aggregator app that helps me read newsletters and blogs from multiple sources without context switching. One of its features is to summarize articles using the Gemini API. I initially used my own API key for this, but I later decided to let users (if any, other than me) add their own key. Since we can’t store these keys directly in the database, encryption is necessary.

Why encrypt API keys?

Before we look at how to encrypt, let’s first understand why directly storing keys in the database is a bad idea.

Suppose keys are stored directly in the database. If the database ever gets compromised, then all the keys would be immediately accessible to attackers. Encryption ensures that even in the worst-case scenario, the keys remain protected.

How to encrypt?

Active record provides a built-in way to encrypt any model’s attributes. We will use that.

First, generate a random key set

Run the command rails db:encryption:init to generate keys

This will generate three keys.

active_record_encryption:
  primary_key: EGY8WhulUOXixybod7ZWwMIL68R9o5kC
  deterministic_key: aPA5XyALhf75NNnMzaspW7akTfZp0lPY
  key_derivation_salt: xEY0dt6TZcAMg52K7O84wYzkjvbA62Hz

Add them to .env (or credentials storage if preferred).

Now add the generated keys to config in application.rb

config.active_record.encryption.primary_key = ENV["ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY"]
config.active_record.encryption.deterministic_key = ENV["ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY"]
config.active_record.encryption.key_derivation_salt = ENV["ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT"]

Add api_key column

If the api_key is missing in user model, add it with migration.

class AddApiKeyToUsers < ActiveRecord::Migration[8.0]
  def change
    add_column :users, :api_key, :text
  end
end

Then declare encrypted attributes in model

Use deterministic: true to ensure the key decrypts consistently. Without it, the result will differ on each decryption, making the application unable to use the correct API key for requests

class User < ApplicationRecord
  encrypts :api_key, deterministic: true
end

That’s it! Use encrypted key in your application

@api_key = Current.user.api_key

Rails will automatically encrypt the key when saving and decrypt it when accessed. This ensures the key is stored securely yet remains easily accessible.

Conclusion

Encrypting API keys is a simple yet powerful way to protect user data. With Rails’ built-in encryption, implementing this safeguard is straightforward and effective.

Move changes across repositories with git format-patch

Fri, 28 Mar 2025 00:00:00 GMT

We use cherry-pick to move changes between branches in the same repository. But what if we need to move changes to a different repository? This is where git format-patch helps — it allows us to move commits as patch files and apply them elsewhere, preserving history and reducing manual work.

One common scenario where I use this is when setting up a new project and needing to apply default configurations to it.

Let’s say I start a new Rails project and set up some common configurations:

Add debugging tools (e.g., pry-byebug)
Configure logging for better visibility
Set up authentication using Devise
Add essential gems such as dotenv for environment variables

Instead of manually reapplying these changes for every new project, I create a patch once and apply it to new repositories, avoiding repetitive work and reducing errors

Steps

Here’s how you can create and apply a patch across repositories step by step.

Create patch

git format-patch --stdout afe599d 780bc16 > starter_config.patch

Generates a patch containing all changes from commit afe599d to 780bc16
--stdout combines all the patches into a single file
- When stdout flag is omitted, a patch file is generated for each commit

Move the patch

Move the generated patch file to the root of second repository.

mv starter_config.patch path/to/new/repo

Apply the patch

git am < starter_config.patch

git am applies commits sequentially from the patch file.
It will be as if they were committed in the new repository. This method saves time and ensures consistency across projects.

My Git workflow for managing code changes

Fri, 28 Feb 2025 00:00:00 GMT

A Git workflow is a structured way to manage code changes.

Here’s my current git workflow, which makes it easier for me to navigate and understand my commits.

Create feature branch from base branch.
Commit changes regularly.
- I often use git commit --amend --no-edit, one of my favourite git commands, to refine a commit while preserving a working state.
Before a pull request, I like to squash related commits to keep things tidy.
For feature branches, I like rebase instead of merge — it keeps commit history clean without extra merge commits.

How Home Row Mods Changed the Way I Type

Tue, 22 Jul 2025 00:00:00 GMT

Six months ago, I made one small tweak to my keyboard that changed the way I type every day.

They’re called home row mods. These are changes to the keyboard’s home row, which is the row with a, s, d, f keys. The behaviour of these keys is changed. When held, the key acts like a modifier (like Ctrl). When tapped, it types the letter as usual.

For example, holding the f key works like holding the Ctrl key. Just tapping f still types the letter f.

I set this up on my NuPhy Air75 v2, which supports QMK firmware. With the usevia app, it was easy to assign the modifiers.

This setup feels gentler on the wrists and involves fewer twists and stretches, which lowers the risk of Repetitive Strain Injury (RSI).

At first, I was slow and made lots of typos. But eventually, I got used to it. Now it’s super useful, especially the Ctrl and Shift modifiers, since so many shortcuts rely on them.

I can now switch windows faster using the alt+number combo in my tiling window manager.

That said, home row mods aren’t perfect. I make more typos when typing fast, so now I type a bit slower. And sometimes the keyboard’s firmware causes repeated key presses after using mods. A common mistake is typing d9 when I mean to type (.

Apart from home row mods, I have also remapped the Caps Lock key. Now, tapping it sends Esc, and holding it acts as Ctrl. This makes it easier to exit insert mode in Vim, without having to reach for the Esc key way off in the corner.

I’m still fine-tuning the layout, and might drop one of the modifiers later. But even with its flaws, this setup has been a big win for comfort and speed.

How to Use Multiple Git Accounts on One System

Sun, 30 Nov 2025 00:00:00 GMT

We usually have to switch between multiple git accounts for personal and work projects. This can be confusing at first because git doesn’t automatically know which account to use.

In this post, we will set up separate SSH keys and connect each one to a different GitHub account.

Configure Multiple Git Accounts

Create separate SSH keys for each GitHub account and add the public keys to GitHub. You can also see my article on SSH keys for this part.

Now open ~/.ssh/config and add one profile for each account.

For example, we will use two accounts, “hokageCV” & “account_two”.

# personal github account (primary account)
Host hokageCV
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_ed25519_hokageCV

# work github account
Host account_two
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_ed25519_account_two

Each profile tells SSH which key to use when connecting.

Here, hokageCV and account_two are just aliases. They don’t need to match your GitHub username or github.com.

Using the second account

Clone using the Host defined in SSH config:

git clone git@account_two:work-username/work-project-repo.git

Inside that repo, set the username and email for this account:

git config user.email "your_work_email"
git config user.name "your_work_username"

This ensures commits from this repo show up under the correct profile.

With this setup, each GitHub account has its own SSH key and its own identity. This keeps your work and personal projects separate without changing global Git settings.

New Domain Setup Manual: From DNS to Email Routing

Sun, 05 Oct 2025 00:00:00 GMT

After getting a new domain, I usually follow a few setup steps to make everything work smoothly. Here’s a quick overview.

Before diving in, let’s understand a few key elements first.

What is Domain & DNS?

Websites are hosted on a server and servers are associated with IP addresses. You could visit a website by typing its IP address in the browser. But remembering numbers for every site would be a hassle. That’s why domains exist, they map names to IP addresses, so you can just type example.com instead of 192.0.2.1.

DNS (Domain Name System) is like the internet’s phone directory. It keeps track of which domain belongs to which IP address. Whenever you visit a website, your browser looks up that record to find the right server.

Transfer DNS Authority to cloudflare

Before transferring the domain’s DNS authority to Cloudflare, let’s clarify a few related terms:

Domain Registrar: The service from where the domain was purchased (eg, Hostinger)
DNS Authority: The service that manages your DNS records (eg, Cloudflare)
Nameservers: Determines who is responsible for managing DNS of your domain
DNS Records: Instructions that tell the internet how to route traffic for your domain

In this case, Hostinger is the domain registrar.

To make Cloudflare the DNS authority, we will replace the existing Hostinger nameservers with the nameservers provided by Cloudflare from the Hostinger settings.

After that, Cloudflare will take over DNS management. Domain Registrar will still be Hostinger.

Configure Apex domain and Subdomains

The apex domain (also called the root domain, like chaitanyavaru.com) is the main address of your site. A subdomain (like resume.chaitanyavaru.com) is a branch off that main address.

Apex Domain

Now we’ll set up the apex domain for your GitHub repository

In Github, it is recommended to verify the domain for security reasons. For verification, we add the provided TXT records in Cloudflare.

Once ownership is verified, we can configure the apex domain. Go to the ‘Pages’ section in repository settings, add the domain in Github, and then create A records in Cloudflare.

Now, wait for the DNS configurations to propagate through the network.

Subdomain

For subdomain, we will use CNAME record.

Example with Vercel:

Open project’s Settings → Domains
Add required subdomain
Vercel will provide a CNAME record
Add that CNAME record in Cloudflare
Done

Email Routing

Cloudflare also provides Email Routing, which lets you forward emails from your domain to another address. For this, we will use MX records.

To set this up:

Go to the Cloudflare dashboard
Navigate to Email → Email Routing
Add your custom email address and destination
- Suppose custom email is mail@domain.com and value is yourmail@gmail.com
Cloudflare will automatically add the required MX records if it manages your DNS

That’s it. Now emails sent to mail@domain.com are forwarded to your existing inbox at yourmail@gmail.com.

With these steps, your domain setup is complete.

My First Open Source Contribution: A Small Fix That Taught Me a Lot

Fri, 18 Apr 2025 00:00:00 GMT

One day while going through one of the many dev newsletters I subscribe to, I came across a color palette generator.

I used it to generate a palette for my ongoing project. At that moment, it had no copy or export button. To get the colors, you had to copy each one manually.

I checked the GitHub repo. The export colors feature was planned, but not implemented yet. I figured I’d try adding it myself.

Adding the copy colors feature

First PR

I forked the repository and started working on the feature.

After finishing the changes, I tested them locally, and everything worked. So I raised a PR.

During the review, Francis (the creator) pointed out that I had unintentionally replaced an existing feature. I had meant to add a new button but ended up overwriting the old one.

So instead of guessing, I asked how he had envisioned it. Based on his feedback, I updated the PR, and it was merged soon after.

Missing bundle

Later, when I checked, the copy button wasn’t working on the deployed site.

I realised that I hadn’t added bundle.js to my commit. It still worked locally because the file was already present in my working directory.

I raised another PR to fix that, and this time, everything worked as expected.

Learnings

This showed me how useful open source can be. People can contribute, collaborate, and improve things for everyone.

I also learned that just testing things locally isn’t enough. It’s better to test in a setup that’s closer to production.

Simplifying popups using the Popover API

Tue, 05 Aug 2025 00:00:00 GMT

I’ve always found adding popups to be a bit of a pain. So I decided to learn just enough of the Popover API to handle common use cases.

Here’s what I figured out.

The Popover API is a native HTML feature that lets us create lightweight, interactive popups without relying much on javascript libraries.

In this post, we will explore how to use it for some common use cases.

When we add the attribute popover to a div, it behaves like a popover element.

<div id='popup' popover='auto'>
  <p>Popup content</p>
</div>

<button id='popup-trigger' popovertarget='popup'>Button</button>

For the div, we added popover attribute with value as auto, which is also the default value. With this, we get the light dismiss property, which means that on clicking outside of the popup, it will be closed.

On the button, we add a popovertarget attribute with id of popover element. This makes the button an invoker of the popover.

For a simple popup, this is it. Clicking the button now shows the popup.

By default, popover element opens in the center of the screen. Let’s see how to position the popup relative to the element that triggered them (its invoker).

<div id='popup' popover='auto'>
  <p>Popup content</p>
</div>

<button id='popup-trigger' popovertarget='popup'>Button</button>

<style>
  #popup {
    margin: 0;
    position-area: bottom right;
  }
</style>

We clear the margin around the popup. And then anchor it relative to its invoker using position-area css property.

Now, the popup appears at bottom right of the button.

Invoke via hover

Sometimes, we want the popup to show when the user hovers, like a tooltip or preview. For that, we will have to trigger popup via javascript.

<div id='popup' popover='auto'>
  <p>Popup content</p>
</div>

<button id='popup-trigger' popovertarget='popup'>Button</button>

<style>
  #popup {
    margin: 0;
    position-area: bottom right;
  }
</style>

<script>
  let btn = document.getElementById('popup-trigger');
  let popover = document.getElementById('popup');

  btn.addEventListener('mouseenter', () => {
    popover.showPopover({ source: btn })
  });

  btn.addEventListener('mouseleave', () => {
    popover.hidePopover()
  });
</script>

When the mouse hovers over the button, we call showPopover method and pass the button as the source. On mouse leave, we hide the popup.

Dialog

The Popover API is non-modal, meaning it doesn’t block interaction with the rest of the page

To have a popup which makes the page inert (make rest of elements non-interactive), we can use dialog element.

Dialog elements don’t provide light-dismiss by default, so we will also create a close button for it.

<button id='open-dialog'>Open modal</button>

<dialog id='dialog-modal'>
  <p>Modal content</p>
  <button id='close-dialog'>Close</button>
</dialog>

<script>
  let dialog = document.getElementById('dialog-modal');
  let openBtn = document.getElementById('open-dialog')
  let closeBtn = document.getElementById('close-dialog')

  openBtn.addEventListener('click', () => {
    dialog.showModal();
  });

  closeBtn.addEventListener('click', () => {
    dialog.close();
  });
</script>

dialog.showModal makes page inert. To open the dialog while keeping rest of the elements interactive, we can use dialog.show.

Use dialog for events that must be performed by the user.

Backdrop

Popups can feel disconnected from the rest of the page if they don’t stand out. That’s where the backdrop helps.

Both popover api and dialog element renders the popup in top layer, which is a layer outside of the usual document flow. To highlight the popup, we could style using the backdrop pseudo element.

::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

This darkens the area behind the popup, making it feel more prominent.

Conclusion

Try the Popover API in your next project. It’s a great way to simplify your UI using native HTML, with no extra libraries, less code, and cleaner logic.

Building a Rails app with Supabase & Render

Tue, 11 Mar 2025 00:00:00 GMT

When building side projects or a prototype, it’s better to use managed services to build faster.

Supabase is a managed service that provides a Postgres database. With Render, we can host our applications.

In this article, we’ll walk through setting up Supabase as the database for a Rails app and deploying it on Render. I’ll also highlight two mistakes I made along the way, so you can avoid them.

Supabase

First, let’s set up Supabase as the database for our Rails app.

Create a project from Supabase dashboard
After creating the project, click on connection button to get the connection URL
Ensure pg gem is installed in the application
Add DATABASE_URL in .env file
In config/database.yml, configure the production database

production:
  adaptor: postgresql
  encoding: unicode
  url: <%= ENV["DATABASE_URL"] %>

Now, Active Record will use supabase as the postgres database.

Render

Next, let’s deploy our application on Render.

From the dashboard, create new web service
Select the repository you want to host
Add build command

bundle install; bundle exec rake assets:precompile; bundle exec rake assets:clean;

Add start command

bundle exec rails db:migrate && bundle exec rails server -b 0.0.0.0 -p ${PORT:-3000}

Deploy!

Common Mistakes

Render
- Ensure db:migrate is included in the start command; without it, the database won’t be created.
- I forgot this and spent time figuring out why the database didn’t work.
Supabase
- For the connection string, use ‘Session Pooler’.
- I had selected ‘Transaction Pooler’ initially, which caused queries to fail.

Save Hours Each Week with a Text Expander

Sun, 27 Apr 2025 00:00:00 GMT

Imagine you are filling forms where you have to enter the same values in multiple places. Or maybe you have certain words or phrases that you type all the time in your work. Or any prompt for an AI tool. Typing them every time is tedious and error-prone.

One solution is to keep these phrases somewhere and copy-paste when needed. But that’s quite slow. A better solution is to automate it altogether. That’s where text expanders come in.

What is a text expander?

A text expander automatically replaces a short string you type with a longer, predefined text. You define a trigger phrase, and whenever you type it, the text expander replaces it with the corresponding expansion.

For example, typing :greet could expand into Hello, How are, Khana kha ke jana. Or maybe you have a super secure password that you use for all sites. Typing ;pswd could expand into ABCD@12340000, saving you time and effort.

Your browser does not support the video tag.

In this post, we will explore how to use espanso as your text expander.

Install & Configure

Installing Espanso is quick and easy. Simply download the installer from the website, and follow the on-screen instructions to complete the setup.

Once installed, you’ll need to configure Espanso by adding snippets to the match/ directory. This is where you store all the custom trigger phrases and their corresponding text replacements.

The location of the match/ directory depends on your operating system:

Linux: /home/$USER/.config/espanso
Windows: C:\Users\%username%\AppData\Roaming\espanso

In this directory, you can create multiple files to organize your snippets. Each snippet consists of a trigger (a short string you type) and its replacement text. For example, to create a snippet that expands ;gc into @gmail.com, you’d add the following:

- trigger: ';gc'
  replace: '@gmail.com'

Now, whenever you type ;gc in your system, it will automatically expand to @gmail.com.

How I use espanso

Here are some example snippets from my configuration, saving me countless keystrokes.

Correcting common typos

I often mistype simple words. So, I maintain a misspelled-words.yml file that automatically corrects them. One of its trigger is as follows:

- triggers: [' tehn', ' hten']
  replace: ' then'

Inserting a debugger

As a developer, I frequently need to drop a binding.pry in my code. With this snippet, I can insert it almost instantly.

- trigger: ';bb'
  replace: 'binding.pry'

Adding current date

I often need to enter today’s date when writing documents or messages. This snippet automatically expands to the current date in the format I prefer.

- trigger: ';date'
  replace: "{{mydate}}"
  vars:
    - name: mydate
      type: date
      params:
        format: "%d %b %Y"

Alternative

Before I found Espanso, I used aText, but it lacked linux support and relied on a GUI for configuration, which meant I had to manually recreate snippets on every machine. Espanso, on the other hand, allows easy configuration across all systems and platforms

That said, aText is still a good choice if you prefer a GUI-based configuration tool.

Conclusion

Even small text expansions can collectively save a lot of time. I have been using a text expander for the past two or three years, and from the very first day, I noticed a clear improvement in my workflow. Today, a text expander has become a must-have tool for me along with a window manager (but that’s a story for another blog post).

Take just a few minutes today to set up your first snippets. You’ll quickly see how this simple tool transforms your productivity.

Create Multiple Issues Quickly with Jira API

Sun, 22 Feb 2026 00:00:00 GMT

How to use Jira API to create issues in bulk

What Switching to Linux Taught Me

Thu, 22 Jan 2026 00:00:00 GMT

A couple of months back, I switched to Linux as my full time operating system. Earlier I had only used Windows as my main OS. But with my laptop getting crashed frequently due to Window’s unexpected errors, I finally switched.

I had been using Workspacer, a tiling window manager, on Windows, so switching to Hyprland on Linux felt like the obvious next step.

After installing hyprland, it was a completely different ecosystem. My initial thought was to not continue using hyprland. I was staring at an empty screen, with no panel, and no idea how to move a window. That was the moment I realized how much dependent I was on common GUI tools.

I never thought about WiFi connectivity. It was a click away in the system tray. And with the new setup, following steps had to be configured to connect to WiFi

# get new connections
nmcli device status
nmcli device wifi list

# connect to a connection
nmcli device wifi connect "WIFI_NETWORK_NAME" password "PASSWORD"

# test
ping -c 3 google.com

# autoconnect on login
nmcli connection modify "WIFI_NETWORK_NAME" connection.autoconnect yes

After some trial and error, the workflow started to click. I configured all tools and applications that I used in previous setup, one change at a time.

One tool that helped a lot is gnu stow to manage all the configs with git. It made experimentation to the setup easy. I could easily make changes and if anything broke, all I had to do was to switch back to the last working state.

Now, after using hyprland for few months, setting up each tool as per need, this setup feels natural to me.

What is Thundering Herd Problem?

Thu, 19 Mar 2026 00:00:00 GMT

Thundering Herd problem and its solutions.

Chaitanya Varu

Add devise to rails app

Install devise

Generate initial configuration files

Generate the view files

Generate user model

Git for beginners

Github Repo to Local System

Configure Git for a project and Push files

Branches

Cloud Resume Challenge

Adding the basic structure

Hosting Static website

Configuring a Custom Domain

Working with Azure Cosmos DB

Implementing Azure Functions

Using CDN

Conclusion

Deploy in Railway

Here is a quick guide to deploy your app in Railway.

Getting Started with Cloudflare Workers

Wrangler

Installation

Generating project

Code

Deploy

Automating with Github Actions

Conclusion

How to integrate google APIs to your application

Prerequisites

Steps

1. Create Google Cloud Project

2. Create Credentials

3. Integrate API using the credentials

My journey of learning Vim Motions

Why vim motions ?

What are vim motions?

Resources

Learning journey

Two weeks into vim motions

More readings

My VS Code configurations

Theme

Extensions

Settings

PWA Basics

What is a PWA?

Why PWA?

Some examples of PWA

Main parts of a PWA

Web App

Manifest File

Service Worker

Registering a service worker

Useful resources for making PWA

Promise in Javascript

What is promise?

Callback

Async/Await

Async

Await

Summarizing this with an analogy.

Updating Node

Updating via NVM (Node Version Manager)

Manual Update from the Official Website:

What are SSH keys?

Generating SSH key

Adding SSH key to github

Improve blog reading by adding 'Other Posts' section in Astro blog

But why to have similar posts section?

Iteration 1

Iteration 2

Iteration 3

Data structure before code

Meeting with senior developer

Conclusion

Git cherry-pick

Commit Hash

Usage

Apply single commit