Arjun Sajeev

On writing more

Thu, 16 Oct 2025 00:00:00 GMT

I have always been enamoured with writing. As a kid, I just loved reading fiction books. Back in the day, I didn’t have access to a lot of books. I used to look forward to getting my next Famous Five or Hardy boys over. Over time, I explored different kinds of fiction. I think the allure for me is the scope for creative imagination that a book provides. It lets you portray the characters in your own light. This is very different from a movie, where there is little scope for imagination or interpretation.

On this blog though, my writing has been very sporadic. I have only written some succinct technical posts. I want to change that. I hope to at least write a single article every month.

Setting up fish shell

Sat, 24 May 2025 00:00:00 GMT

I have always used ZSH on Mac. There are many ways to customize ZSH. Recently, I felt that my shell was extremely slow. I had experimented with many ZSH plugins and themes. After testing a few options, I decided to switch to the Fish shell. This was not as straightforward as I expected, so I decided to write a blog post about it.

Installing Homebrew and Fish Shell

If you don’t have Homebrew, install it by following the instructions on their website. Once Homebrew is set up, you can install the Fish shell by opening your terminal and running:

brew install fish

Making Fish the Default Shell

To make Fish your default shell, you’ll need to follow a few important steps. First, verify the Fish path with which fish. The path is likely /opt/homebrew/bin/fish. Next, you need to add Fish to the list of known shells, which is a crucial step that’s often overlooked:

sudo sh -c 'echo /opt/homebrew/bin/fish >> /etc/shells'

After adding Fish to the shells list, change your default shell:

chsh -s /opt/homebrew/bin/fish

Finally, restart your terminal to activate the new shell.

Setting up Starship (Optional)

Fish does not require much additional setup, but you can optionally enhance it with Starship for a beautiful and fast prompt:

curl -sS https://starship.rs/install.sh | sh
echo 'starship init fish | source' >> ~/.config/fish/config.fish

VS Code Integration

To use Fish as your default terminal in VS Code, update your VS Code settings:

"terminal.integrated.defaultProfile.osx": "fish"

Apple touch icon

Wed, 27 Dec 2023 00:00:00 GMT

On Apple devices, you can configure an app icon for your PWA(Progressive Web Application) using apple-touch-icon. This can be configured using

<link rel="apple-touch-icon" href="apple-touch-icon.png">

My website favicon consists of an image with orange and white colors. On adding my website to the homescreen on iOS devices, iOS was somehow adding a black border. After some research, I found out that if the image had transparent pixels, iOS would replace it with a black color. I just had to replace the transparent pixels in the apple touch icon with white. I did not want to fiddle with a GUI editor for this. Thankfully this was pretty easy to accomplish with ImageMagick.

 find . -name "*.png" -exec convert "{}" -background white -alpha remove -alpha off "{}" \;

Currying in javascript

Sat, 28 Aug 2021 00:00:00 GMT

What is currying?

Currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each take a single argument.

So currying transforms fn(a, b, c…n) to fn(a)(b)(c)…n) . Let’s dive right in to an example.

const sum = (a, b) => a + b;

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)); // = 3

The curriedSum function converts the sum function into a sequence of two functions since the original sum function needs two arguments.

Naive implementation

Based on the above example, we can implement a naive version of the curry function. So curriedSum returns a function which accepts one argument b. This is passed as the second argument to the function being curried. The first argument is stored in the function closure.

function curry(fn) {
  return function (a) {
    return function (b) {
      return fn(a, b);
    };
  };
}

Currying with variadic arguments

The previous implementation has a few problems

It only works for functions which accept 2 arguments.
The context value is not being propagated accurately.

Let’s try implementing a generic currying function which supports variadic arguments.

There are a couple of key insights behind the new implementation.

Function.length returns the arity of the function. The arity of a function is the number of parameters expected by the function.

For example, consider this multiply function which returns the product of three numbers;

const multiply = (a, b, c) => a * b * c;
console.log(multiply.length); // 3

We have to keep collecting arguments until we have enough arguments, i.e. till the number of arguments are greater than or equal to the arity of the function.

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      // Execute the original function when we have enough arguments
      return fn.apply(this, args);
    } else {
      return (...nextArgs) => curried(...args, ...nextArgs); // otherwise keep on adding arguments
    }
  };
}

We can use bind for a more concise implementation.

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return curried.bind(this, ...args);
    }
  };
}

Infinite sum

This happens to be a popular interview question based on recursion. So here’s the infinite sum function that we have to implement

sum(1)() // 1
sum(3)(2)() // 5
sum(1)(2)...(n)() // (1 + 2 + 3 ...n)

We can make some observations based on the above example

The sum function returns the sum when we call it with undefined.
If the function is called with a valid number another function is returned

const sum = (a) => {
  return (b) => {
    if (b === undefined) {
      return a;
    } else {
      return sum(a + b);
    }
  };
};

Infinite sum with variadic arguments

sum(1, 2)(3)(4, 5)(); //15

This is a bit more tricky. We are not dealiing with single arguments anymore.Try implementing this on your own before checking the solution.

Solution

const sum = (...args) => {
  return (...moreArgs) => {
    if (moreArgs.length === 0) {
      return args.reduce((a, b) => a + b);
    } else {
      return sum(...args, ...moreArgs);
    }
  };
};

Currying with placeholder support

We are not done with currying yet, currying with placeholder support is something I might tackle in the future.

Custom fonts with TailwindCSS

Wed, 28 Jul 2021 00:00:00 GMT

I recently set up custom fonts in a project using Next.js and Tailwind CSS. Here’s how you can do it:

Adding Font Files

Add the font files to the public folder. For example, if you are using the Inter font family, you can create public/fonts/ and add the font files directly there.

Setting Up Font Faces

Update your global CSS file to add the new font-face declarations:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Add the font using @font-face */

@font-face {
  font-family: "Inter";
  src: url(/fonts/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Configuring Tailwind

Update the Tailwind configuration file (tailwind.config.js) to generate a class for the new font:

module.exports = {
  content: [
    // your content paths
  ],
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
}

Using the Custom Font

Use the generated class name to apply the custom font. In this case, you can use the generated font-inter class in your components:

<h1 className="font-inter text-2xl font-bold">
  This text uses the Inter font
</h1>

Combining images using ImageMagick

Sun, 21 Mar 2021 00:00:00 GMT

Recently, I had to combine two images of an ID card into a single image with both of them stacked vertically. You can do this using any image editing program like Adobe Photoshop. This can be accomplished significantly faster with a single command using ImageMagick.

You can install ImageMagick using Homebrew, if you are on a Mac.

brew install imagemagick

After installing ImageMagick, you can combine all the images in a particular folder into a single image with the following command. Although this command uses a glob pattern to target multiple files, you can specify file names as well. ImageMagick is a very flexible tool and can be used to perform a variety of image manipulation operations. It also supports popular image formats.

convert -append *.jpg combined.jpg

To stack images horizontally, you can use the following command

convert +append *.jpg combined.jpg

Happy image editing!

Redirecting domains using Netlify

Tue, 06 Oct 2020 00:00:00 GMT

I recently decided to move one of my projects to a new domain. Since the old domain was on Namecheap, I thought about using the BasicDNS service provided by Namecheap. I had faced issues with Namecheap DNS in the past and the basic version did not seem to offer any uptime guarantees. Since the project was hosted on Netlify, using Netlify DNS was a no brainer. I just needed to configure Netlify DNS to redirect requests from the old domain to the new domain.

This took some more digging than I thought!. I am writing this down so it will help me in the future or you. First, I added the domain to Netlify using the UI and updated the DNS settings on Namecheap to point to Netlify’s DNS servers. Then I needed to setup a wildcard redirect on Netlify. This was not exactly straightforward.

Netlify lets you configure redirects using a _redirects file or using netlify.toml. I decided to use an _redirects file. I created a new git repository with an empty _redirects file and pushed that to Github. Then I linked my old domain to this repo using the UI.

https://old.com https://new.com 301!
https://old.com/* https://new.com/:splat 301!

Adding the lines above to the _redirects file and redeploying did the trick. All the links to the old domain were being redirected successfully to the new domain and the universe became a better place, atleast in terms of DNS resolution.

Custom Iterm2 layouts with itermocil

Tue, 21 Apr 2020 00:00:00 GMT

If you frequently work with web development projects, you tend to run a lot of scripts during development. For example, if you are working on a full stack node project you might run npm start, npm run watch and maybe npm run server. It is usually convenient to run them in different panes in a single tab in Iterm2, so that you can see everything in one place.

Iterm2 lets you save and restore layouts from Preferences but itermocil lets you write YAML files for custom layout arrangements and relaunch them quickly.

Here is a sample YAML for a simple 2-pane layout.

windows:
  - name: website
    root: ~/Dev/website
    layout: even-horizontal
    panes:
      - npm run dev
      - npm run server

You need to save your custom layouts in ~/.itermocil and then you can launch the layout using the following command.

itermocil <layout-name>
#<layout-name> is the filename of the layout file in ~/.itermocil

I aliased itermocil to t so that I can launch any of my custom layouts with t <layout-name>. Now I can start working on my website by just using t www. A nice side effect is that I no longer have to remember what scripts to run per project, I can start hacking on any project with a single command.

SMS Receiver API

Thu, 02 Jan 2020 00:00:00 GMT

Many applications use an OTP(One Time Password) based login flow these days. Native apps can automatically retrieve OTP values from text messages. This translates to a better user experience since manually entering or copy pasting the OTP is a big hassle. Sadly web browsers don’t have access to text messages, until now. The experimental SMS Receiver API which is under Origin trial provides a way for Chrome browsers on Android (version 78 onwards) to automatically retrieve OTP values from text messages with a few limitations. The feature needs to be explicitly enabled by setting the relevant flags or used under Origin Trial. The API is still experimental and hence is subject to change. But that does not mean you can’t play around with it.

Lets look at how we can use the SMS Receiver API.

if ("sms" in navigator) {
  const sms = await navigator.sms.receive();
  // sms.content gives us the body of the text message
  const otp = sms.content.match(/^[\s\S]*otp=([0-9]{6})[\s\S]*$/m)[1];
}

When the browser detects the message(currently it imposes a few restrictions on the message format), it displays a bottom sheet with the OTP and verify button as shown in the video below.

This is based on the demo which the Chrome team has published on Glitch

This feature is currently under Origin Trial but you can test it locally by enabling the relevant flags in Chrome Beta.

Limitations

Since navigator.sms.receive() returns a promise there is no way to abort/cancel the request. If the user navigates away from the login page, then he might see the bottomsheet. There is no way to set a message timeout either. There is an open github issue for this and I think they are planning to resolve this soon.

The text message format is kind of restrictive at the moment, but they are working on it. Here is an example message

Your OTP is: 123456. This is only valid for 10 minutes. Do not share it with anybody else

For: https://sms-receiver-demo.glitch.me/?otp=123456&xFJnfg75+8v

The message should include a line just like the last line in the example message. It should contain

The origin of URL of the website which invoked the API, preceded by For :. There is no localization support at this point.
URL must contain the hash of the user’s chrome instance as a query parameter. This is a static string, xFJnfg75+8v for Chrome Beta and EvsSSj4C6vl for Chrome Beta. The web.dev article mentions that this is just for the time being.
The URL must contain otp query parameter with its value being the OTP value.

Final thoughts

It was lot of fun experimenting with this API. The inability to abort is a major limitation, but this seems to be in the pipeline. I think this API certainly improves user experience for OTP based login flows. I am excited to see how this evolves. Kudos to the Chrome team for coming up with this.