Revath S Kumar

hide your dotenv secrets from LLMs using pass

2026-02-27T18:02:00+05:30

I have been using pass for a while to avoid credentials being saved into CLI history.

AWS_SECRET=$(pass show project/dev/aws_secret) <command>

After reading about enveil project, I thought, rather than adding another tool into my arsenal, Why don’t I just use the tools I already have?

TLDR: The pass extension and setup instructions can be found in the pass-env Codeberg repository.

the bash script

The script below will reads the .env file and uses the pass command to retrieve the real secret at the time of execution. This means that even if we give the LLM access to the project folder, the real credentials will remain hidden from LLM agents.

#!/bin/bash
# exec 1> >(logger -s -t $(basename $0)) 2>&1;

ENV_FILE=".env"

# if command -v pass >/dev/null 2>&1 ; then
#     echo "Error: passwordstore/pass not found!"
#     exit 1
# fi

while [[ $# -gt 0 ]]; do
  case $1 in
    --env-file)
      ENV_FILE="$2"
      shift 2
      ;;
    --)
      shift 1
      ;;
    *)
      break
      ;;
  esac
done

if [[ ! -f "$ENV_FILE" ]]; then
  echo "Error: $ENV_FILE not found!"
  exit 1
fi

while IFS='=' read -r key value; do
  [[ -z "$key" || "$key" =~ ^# ]] && continue

  if [[ "$value" == pass://* ]]; then
    path="${value#pass://}"
    secret=$(pass show "$path" 2>/dev/null)
    if [[ -z "$secret" ]]; then
      echo "Error: Failed to retrieve secret for $key"
      continue
    fi
  else
    secret=$value
  fi

  # echo "$key=$secret"
  export "$key=$secret"
done < "$ENV_FILE"

if [[ $# -gt 0 ]]; then
    "$@" || exit
else
  echo "Usage: $0 [--env-file <env-file>] -- <command>"
  exit 1
fi

The .env file should be in the following format

AWS_SECRET=pass://<pass-name>

The script looks for values beginning with ‘pass://’ and attempts to retrieve the real secret from ‘pass’ before setting it as an environment variable and running the given command.

For example, if the .env file contains an entry such as

AWS_SECRET=pass://pass-env/dev/aws_secret

the shell script will run the following command to retrieve the secret from pass.

pass show pass-env/dev/aws_secret

Env variable values that don’t start with pass:// will be taken as they are.

Using the bash script

Copy the env.bash into any folder you have in PATH or to the pass extensions folder.

env.bash -- <command>
#or
pass env -- <command> # as pass extension

If you want to use a custom .env file you can pass it via --env-file option.

env.bash --env-file .env.prod -- <command>
#or
pass env --env-file .env.prod -- <command>

The pass extension and setup instructions can be found in the pass-env Codeberg repository.

Hope this is helpful.
Any feedback would be much appreciated.

update semantic version using bash script

2026-02-15T13:56:00+05:30

For all of my JavaScript projects, I depend on the npm version command to update the version number for generating a release. So when I wanted to release my Zig project (clipz), I was looking for something similar to update the version number in the build.zig.zon file.

Since Zig doesn’t have any command equivalent to npm version, I decided to go with a simple shell script.

The bash script

#!/bin/bash

# version.sh
# USAGE : ./version.sh <major|minor|patch>

current_version=$(grep -oP '\.version = "\K[^"]+' build.zig.zon)

IFS='.' read -r major minor patch <<< "$current_version"
case "$1" in
  major) major=$((major + 1)); minor=0; patch=0 ;;
  minor) minor=$((minor + 1)); patch=0 ;;
  patch) patch=$((patch + 1)) ;;
esac
new_version="$major.$minor.$patch"

sed -i "s/\.version = \"[^\"]*\"/.version = \"$new_version\"/" build.zig.zon
echo $new_version

The above script will read the version from build.zig.zon file and update the version number based on the argument.

./version.sh patch

Now I can use this in my GitHub actions like

name: Generate Release

on:
  workflow_dispatch:
    inputs:
      release_type:
        description: "Select release type"
        required: true
        default: "patch"
        type: choice
        options:
          - patch
          - minor
          - major

jobs:
  x86_64-linux-gnu:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      # other steps
      - name: Update version in build.zig.zon
        id: update-version
        run: |
          new_version=$(./version.sh ${{ github.event.inputs.release_type }})
          # Commit the change
          # add git tag
          # push the changes
          echo "new_version=$new_version" >> $GITHUB_ENV
          echo "new_version=$new_version" >> $GITHUB_OUTPUT

Using new version number in subsequent steps

Now in the subsequent steps, we can use $new_version in the shell scripts like

     - name: Build
       run: |
          # build command
          mv ./zig-out/bin/clipz{,"-$new_version"}

or use from the step output like

- name: Generate artifact attestation
  uses: actions/attest-build-provenance@v3
  with:
   subject-path: "./zig-out/bin/clipz-${{ steps.update-version.outputs.new_version }}"

You can see the changes in the clipz repo.

Hope this is helpful.

zig : pass version from build.zig.zon file to runtime

2026-02-14T12:53:00+05:30

In this blog post we will explore how to pass the options/values from the build to the project’s Zig code. To illustrate this, we will consider the example of reading the version from build.zig.zon at build and using it at runtime.

Zig won’t allow us to import the build.zig.zon file in our main or other source files. So we need to get the value at build and expose it to our modules.

use `addOptions` in build script

From Zig v0.14.0, we can import zon file at compile time

const pkg = @import("build.zig.zon");

Now we have the version number from build.zig.zon in pkg.version.

The addOptions from std.Build provides a way to expose build.zig values to Zig source code with @import.

// build.zig
const pkg = @import("build.zig.zon");


pub fn build(b: *std.Build) void {

    const exe = b.addExecutable(.{
      //
    });

    const options = b.addOptions();
    options.addOption([]const u8, "version", pkg.version);
    exe.root_module.addOptions("build_options", options);

}

We named the options build_options, which will be used for importing the values into other source files.

import `build_options` in main

Now we can do @import("build_options") in the main, to access the value of version.

// main.zig
const std = @import("std");
const build_options = @import("build_options");

pub fn main() anyerror!void {
	var stdout_buffer: [1024]u8 = undefined;
	var stdout_writer = std.fs.File.stdout().writer(&stdout_buffer);
	const stdout = &stdout_writer.interface;

	try stdout.print("Clipz : v{s} \n", .{build_options.version});
	try stdout.flush();
}

parsing the version number

In case you need to parse the version number at runtime, you can use the parse method from std.SemanticVersion

Hope this is helpful.

Versions of Language/packages used in this post.

Library/Language	Version
zig	0.15.2

publish npm module with provenance statement

2026-01-23T00:19:00+05:30

Provenance statements are a way to establish where a package was built and who published a package, which can increase supply-chain security and transparency for the packages.

You can read about this in more detail in the npm documentation.

Having a provenance statement doesn’t guarantee the package has no malicious code. Instead, npm provenance provides a verifiable link to the package’s source code and build instructions, which developers can then audit and determine whether to trust it or not.

In order to publish the npm package with a provenance statement, the package must be built on a supported cloud CI/CD provider.

This blog post explains how to publish the package with a provenance statement using GitHub actions.

Generate npm granular access token

First, let’s generate a new npm granular access token with write permission. If your package already has a published version, you can generate a token for that specific package that you intend to publish.

Once you have the new token, Goto

Github Repository > Settings > Secrets and variables > Actions

and add to repository secrets.

Github Action

Next, add the github action to publish the package on a new tag event.

# .github/workflows/npm_publish.yml 

name: Publish Package to npmjs
on:
  push:
    tags: "*"
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "24.x"
          registry-url: "https://registry.npmjs.org"
      - run: npm ci
      - run: npm publish --provenance --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Make sure that your command to publish include --provenance flag like

npm publish --provenance --access public

Hope that is helpful.
Thank you.

opt-out telemetry from cli tools

2026-01-22T06:32:00+05:30

As most of the CLI tools/JavaScript frameworks started collecting telemetry data by default, I started looking into how I could easily opt out from these.

Many of the tools support disabling the telemetry via environment variables.

I therefore decided to compile these env variables from the various tools and frameworks in one place.

# telemetry.fish

# https://bun.com/docs/runtime/bunfig#telemetry
set DO_NOT_TRACK 1

# https://learn.microsoft.com/en-us/dotnet/core/tools/telemetry?tabs=dotnet10#how-to-opt-out
set DOTNET_CLI_TELEMETRY_OPTOUT 1

# https://astro.build/telemetry/
set ASTRO_TELEMETRY_DISABLED 1

# https://nextjs.org/telemetry
set NEXT_TELEMETRY_DISABLED 1

# https://www.prisma.io/docs/orm/tools/prisma-cli#telemetry
set CHECKPOINT_DISABLE 1

# https://github.com/nuxt/telemetry
set NUXT_TELEMETRY_DISABLED 1

# https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/telemetry.md#how-can-i-configure-wrangler-telemetry
set WRANGLER_SEND_METRICS false

# https://github.com/google-gemini/gemini-cli/blob/main/docs/cli/telemetry.md
set GEMINI_TELEMETRY_ENABLED false

# https://docs.expo.dev/more/expo-cli/#telemetry
set EXPO_NO_TELEMETRY 1

This is the list so far, I am planning to keep updating this list on the codeberg repository cli-telemetry as I discover more.

Usage

1. Download

curl -sL https://codeberg.org/0x52534B/cli-telemetry/raw/branch/main/src/shells/telemetry.fish > ~/.config/fish/conf.d/telemetry.fish

2. Reload the shell

source ~/.config/fish/config.fish

The guide for zsh is also available.

Suggestions and inputs are always welcome.

Hope this is helpful.
Thank you.

Prisma : Extending model with custom methods

2025-06-10T09:59:00+05:30

As a person coming from a Ruby on Rails background, I prefer ActiveRecord pattern to DataMapper. Obviously the choice will be based on the project and other criteria’s, but from my experience, most projects don’t require the complexity of Data Mapper.

When I started using Prisma, one of the confusions for me was how to add a custom method to a model.

Extending Prisma Client model object

Prisma documentation on custom models provides 3 ways to achieve it. From the 3 methods, I decided to go with Extending Prisma Client model object.

The major reason for going with this approach is its flexibility. By this method, we can define type-safe custom methods in models.

import { PrismaClient } from "@prisma/client";
import { prisma } from "@/../prisma";

function User(prismaUser: PrismaClient["user"]) {
  return Object.assign(prismaUser, {
    async signup(data) {
      // implement logic
    },

    async login(data) {
      // implement logic
    },
    
    async isUserFavorite(userId: string, entityId: number) {
      // implement logic
    },
  });
}

const user = User(prisma.user);

export default user;

and we can use both custom methods alongside inbuilt methods like findBy, count and upsert from the model object.

The major downside of Wrap model in a class is we won’t be able to use the inbuilt methods from the model instance.

Hope this is helpful.

Versions of Language/packages used in this post.

Library/Language	Version
Prisma	6.4.1

css: safe alignment of flex-items

2025-06-04T00:23:00+05:30

The simple way to center a flex item is using center for justify-content or align-content.

When we use center with dynamic flex items, there is a chance of data loss when the items overflow the alignment container.

Safe alignment

To avoid the data loss when the items overflow, we can use the safe keyword along with center

justify-content: safe center 

Now this will help us center the items when there is no overflow and it will use start when the flex-items start overflowing.

This will help us prevent the data loss.

using with tailwindcss

In case if we want to safe alignment with tailwind justify-center-safe and justify-end-safe.

Hope this is helpful.

Versions of Language/packages used in this post.

Library/Language	Version
tailwind	4.1

PWA : receive file or text via native share

2025-06-03T09:29:00+05:30

In this blog post, we will explore into how a PWA can receive files or text from the navite OS share functionality. By Using the Web Share Target API, a PWA can register with the OS as a share target and receive shared data.

Updates to web manifest

To register the PWA as share target, we need to add share_target into the web manifest.

  share_target: {
	action: "/share-target",
	method: "GET",
	params: {
	  text: "text",
	  title: "title",
	  url: "url"
	}
  }

In the above config, share target is configured to receive text data only.The action key specifies the endpoint which PWA can receive shared data using the GET method.

We can customise the field names in which PWA can receive each data using the params property.

In case of receiving files, we need to configure the share_target with enctype: "multipart/form-data" and method: "POST" like below. We can also configure the field name and type of file PWA can accept using the files property.

  share_target: {
    action: "/share-target",
    method: "POST",
    enctype: "multipart/form-data",
    params: {
      text: "text",
      title: "title",
      url: "url",
      files: [
        {
          name: "images",
          accept: ["image/jpeg", "image/png", "image/webp"],
        },
      ]
    }
  }
  

Updates to web service worker

If the PWA share_target is configured with method: "POST", we need to handle the request using service worker fetch event so that PWA can handle the file even when user is offline.

// service-worker.ts

self.addEventListener("fetch", (event: FetchEvent) => {
  const url = new URL(event.request.url)
  if (event.request.method !== "POST" || url.pathname !== "/share-target") {
    return
  }

  event.respondWith(
    (async () => {
      const formData = await event.request.formData()
      const imageFiles = formData.getAll("images") as File[]
      const text = formData.get("text") as string
      const title = formData.get("title") as string
      const url = formData.get("url") as string

	  // process the received data
	  
      return Response.redirect(`/`, 303)
    })()
  )
})

We can read the received data in service worker using the event.request.formData() like in the above snippet.

In service Worker, we won’t be able to use localStorage, so we need to use either IndexedDb or query params to store the text data.

If we want to temporarily store the files, we can use Cache API.

// service-worker.ts

self.addEventListener("fetch", (event: FetchEvent) => {
  const url = new URL(event.request.url)
  if (event.request.method !== "POST" || url.pathname !== "/share-target") {
    return
  }

  event.respondWith(
    (async () => {
      const formData = await event.request.formData()
      const imageFiles = formData.getAll("images") as File[]
      const text = formData.get("text") as string
      const title = formData.get("title") as string
      const url = formData.get("url") as string

      const search = new URLSearchParams()

      if (text) {
        search.set("text", text)
      }
      if (title) {
        search.set("title", title)
      }
      if (url) {
        search.set("url", url)
      }

      if (imageFiles[0]) {
        const file = imageFiles[0] as File
        const fileName = file.name
        search.set("image", fileName)

        const ca = await caches.open("image")
        await ca.put(`/image-${fileName}`, new Response(file))
      }
      return Response.redirect(`/?${search.toString()}`, 303)
    })()
  )
})

In the above snippet, we are storing the image in cache and pass the cache key and other text data as query params to the destination endpoint/route.

Caveats

Don’t return the cached response instead of redirect from service worker fetch event. It will trigger data submission to /share-target again when user refreshes the page.
Since we are returning the redirect response, passing the text data using postMessage will possibly fail.
Browser support is limited.

Hope this is helpful.

webassembly - passing string between zig and javascript

2025-04-10T14:08:00+05:30

When working with webassembly (wasm) we only have numeric values.

This means that if we need to handle strings, we need to handle them in raw binary data format using TypedArray & ArrayBuffer.

If we want to pass complex data types between the web assembly (wasm) and the host JavaScript environment, we pass the memory pointer to shared memory and a length data.

In this blog post we will learn how to pass a string between zig & JS host environment and vice versa.

For this blog post, we are using zig to compile into webassembly. we are not using any additional library or any compiler options so, we have to write the glue code to communicate between the wasm and JS.

Passing string from wasm to JS

First we will look at passing a string from wasm to JS.

We will start by defining an external function called print, which will be provide the functionality to output the string based on the host environment.

Next, we will define a simple function that defines a string (slice), and call the print function.

// string_from_wasm.zig
extern fn print(message: [*]const u8, length: u64) void;

export fn hello() void {
    const message: []const u8 = "Hello from Zig!";
    print(message.ptr, message.len);
}

Now let’s compile this into wasm.

zig build-exe src/string_from_wasm.zig -target wasm32-freestanding -fno-entry --export=hello

Since we are using wasm32-freestanding as the target, we need to provide the print function when loading the Wasm module with Node.js.

To define a print function, we first need to decode the string using the arguments passed, the memory pointer, and the length of the string.

// string_from_wasm.mjs
import { readFile } from "node:fs/promises"

const source = await readFile("./string_from_wasm.wasm");
const typedArray = new Uint8Array(source);

const waResult = await WebAssembly.instantiate(typedArray, {
  env: {
    print: (pointer, length) => { 
      const slice = new Uint8Array(mem.buffer, pointer, Number(length))
      const message = new TextDecoder().decode(slice);
      console.log("Message from Zig : ", message); 
    }
  }
});

let mem = waResult.instance.exports.memory;
const { hello } = waResult.instance.exports;

hello();

Now, Let run this code using nodejs.

node string_from_wasm.mjs
# Message from Zig :  Hello from Zig!

Passing string from JS to wasm

Let’s look at passing a string from JS to wasm.

Since we are managing the memory manually, we need to export functions to allocate and free the memory.

For the purpose of this blog post, we will use the std.heap.wasm_allocator from zig.

# string_to_wasm.zig
const std = @import("std");
const allocator = std.heap.wasm_allocator;

extern fn print(message: [*]const u8, length: u64) void;

export fn allocUint8(length: u32) [*]const u8 {
    const slice = allocator.alloc(u8, length) catch
        @panic("failed to allocate memory");
    return slice.ptr;
}

export fn free(pointer: [*:0]u8) void {
    allocator.free(std.mem.span(pointer));
}

export fn helloName(name: [*:0]const u8) void {
    const nam = std.mem.span(name);
    
    const message: []const u8 = std.fmt.allocPrint(allocator, "Hello {s}", .{nam}) catch unreachable;
    print(message.ptr, message.len);
}

Let’s compile this to wasm

zig build-exe src/string_to_wasm.zig -target wasm32-freestanding -fno-entry --export=helloName --export=allocUint8 --export=free

Now, in JS, we can use allocUint8 to allocate memory and pass the pointer of a null-terminated string to the helloName function. Later, we can use free to free up the allocated memory.

// string_to_wasm.mjs
import { readFile } from "node:fs/promises"

const source = await readFile("./string_to_wasm.wasm");
const typedArray = new Uint8Array(source);

const waResult = await WebAssembly.instantiate(typedArray, {
  env: {
    print: (pointer, length) => { 
      const slice = new Uint8Array(mem.buffer, pointer, Number(length))
      const message = new TextDecoder().decode(slice);
      console.log("Message from Zig : ", message); 
    }
  }
});

const stringToPointer = (string) => {
  const buffer = new TextEncoder().encode(string);
  const pointer = allocUint8(buffer.length + 1); // ask Zig to allocate memory
  const slice = new Uint8Array(
    mem.buffer, // memory exported from Zig
    pointer,
    buffer.length + 1
  );
  slice.set(buffer);
  slice[buffer.length] = 0; // null byte to null-terminate the string
  return pointer;
};


let mem = waResult.instance.exports.memory;
const { helloName, allocUint8, free } = waResult.instance.exports;

const str = stringToPointer("JS-String")

helloName(str);
free(str)

Now, when we run this code using nodejs.

node string_to_wasm.mjs
# Message from Zig :  Hello JS-String

Some Helpful links

Hope this is helpful.

Versions of Language/packages used in this post.

Library/Language	Version
Zig	0.14
Node	23.10

How to detect different JavaScript runtimes

2025-03-20T17:11:00+05:30

As more and more JavaScript runtimes become popular, and each runtime has some subtle differences in how modules/functions behave,

if we want to support our JavaScript code in these runtimes, we should be able to detect the runtime.

Ideally we should check the supported feature, instead of the runtimes, but in case if we want to detect the runtimes themselves,

here are the checks we can do

if (globalThis.Bun) {
  // bun 
}

if (globalThis.Deno) {
  // deno
}

if(globalThis.Kiesel) {
  // Kiesel
}

For Node.js, we can try

globalThis.process?.release?.name // returns node

But the caveat here is Bun & Deno will return "node" for globalThis.process?.release?.name, so we should use this along with the other checks above.

Hope this is helpful.

Deno : url.domainToASCII behaves differently from nodejs

2025-03-19T19:17:00+05:30

While working with @fedify/fedify today, I came across a bug where the .well-known/webfinger route was returning 404.

After some debugging and chatting with the @fedify/fedify team, I realised that this problem only happened when used with Node.js.

Finally, after hours of debugging, I was able to identify the root cause as the behaviour of the url.domainToASCII.

import { domainToASCII } from 'node:url  
console.log(domainToASCII("localhost:8000"));  
console.log(domainToASCII("example.com:8000"));  

In deno, the hostname with port number (e.g.: example.com:8000) is considered valid input and returns the string as example.com:8000.

But in Node.js & Bun, domainToASCII will consider example.com:8000 as invalid input and return the empty string.

Below is the tabular form of return value of domainToASCII("example.com:8000") in various runtimes.

	return value
Deno	`exmaple.com:8000`
Node.js	`<empty string>`
Bun	`<empty string>`

Hope this is Helpful.

Versions of Language/packages used in this post.

Library/Language	Version
Deno	2.2.4
Node.js	v23.3.0
Bun	1.2.5

JavaScript : understanding string normalize

2025-01-13T10:16:00+05:30

Visualize different string normalization forms using string-normalize.surge.sh/?str=öé+ﬀ

Recently, When I was working on enhancing the search of Bender, I wanted to search words with characters like "ö" or "é" using normal characters like o and e. While looking into handling this case, I came across String.prototype.normalize

String.prototype.normalize supports 4 types of normalization

NFC : canonical composed
NFD : canonical decomposed
NFKC : compatible composed
NFKD : compatible decomposed

Based on our use case, we should be able to choose which normalization we should use. NFC is the default normalization form, if we omit the argument.

Before getting into each normalization form, let us see what is unicode composed and decomposed form.

Composed & decomposed forms

Some unicode characters can be represented in both composed and decomposed forms.
For example, "ö" can be represented in composed form by \u00F6 and in the decomposed form it can be represented by \u006F (o) and \u0308 (Combining Diaeresis).

const composed = "\u00F6";
const decomposed = "\u006F\u0308"

console.log(composed); // ö
console.log(composed.length); // 1

console.log(decomposed); // ö 
console.log(decomposed.length); // 2

In order to show the difference I will use "Köln ﬀ" (ﬀ = U+FB00) as sample string and perform all 4 normalization form.

NFC

default normalization form
use canonical equivalent character
uses composed form (single codepoint)
won’t change the visual appearance
won’t be able to produce or find the string based on compatible chars

const str = 'Köln ﬀ';
const normalizedStr = str.normalize('NFC');

console.log(str); // Köln ﬀ
console.log(str.length); // 6

console.log(normalizedStr); // Köln ﬀ
console.log(normalizedStr.length); // 6

console.log(normalizedStr.includes('o')) // false
console.log(normalizedStr.indexOf('o')) // -1

console.log(normalizedStr.includes('f')) // false
console.log(normalizedStr.indexOf('f')) // -1

NFD

use canonical equivalent character
uses decomposed form (multiple codepoints)
won’t change the visual appearance
won’t be able to produce or find the string based on compatible chars

const str = 'Köln ﬀ';
const normalizedStr = str.normalize('NFD');

console.log(str); // Köln ﬀ
console.log(str.length); // 6

console.log(normalizedStr); // Köln ﬀ
console.log(normalizedStr.length); // 7 (only ö get decomposed into \u006F and \u0308

console.log(normalizedStr.includes('o')) // true
console.log(normalizedStr.indexOf('o')) // 1

console.log(normalizedStr.includes('f')) // false
console.log(normalizedStr.indexOf('f')) // -1

NFKC

use compatible equivalent character
uses composed form (single codepoint)
changes the visual appearance
able to produce or find the string based on compatible chars

const str = 'Köln ﬀ';
const normalizedStr = str.normalize('NFKC');

console.log(str); // Köln ﬀ
console.log(str.length); // 6

console.log(normalizedStr); // Köln ff (ﬀ got converted into ff)
console.log(normalizedStr.length); // 7 (ö in the composed form, but ﬀ got converted into ff)

console.log(normalizedStr.includes('o')) // false
console.log(normalizedStr.indexOf('o')) // -1

console.log(normalizedStr.includes('f')) // true 
console.log(normalizedStr.indexOf('f')) // 5

NFKD

use compatible equivalent character
uses decomposed form (multiple codepoints)
changes the visual appearance
able to produce or find the string based on compatible characters

const str = 'Köln ﬀ';
const normalizedStr = str.normalize('NFKD');

console.log(str); // Köln ﬀ
console.log(str.length); // 6

console.log(normalizedStr); // Köln ff (ﬀ got converted into ff)
console.log(normalizedStr.length); // 8 (ö is decomposed and ﬀ got converted into ff)

console.log(normalizedStr.includes('o')) // true
console.log(normalizedStr.indexOf('o')) // 1

console.log(normalizedStr.includes('f')) // true 
console.log(normalizedStr.indexOf('f')) // 5

Conclusion

Since we now understood all the normalization forms, we can make an informed decision on which normalization form to use for our usecase.

If we want to compare string or compare length of strings, we can normalize both strings using NFC or NFD before comparing.

If we want to search a string using compatible characters and canonical equivalent characters, the best option is to use NFKD normalization. NFKD normalized string may not be suitable for display, as it will visually change the character.

Hope this is Helpful.
If I have made a mistake or missed something, please feel free to email me.

References:

MDN: String.prototype.normalize()

gjs : How to read from stdin in a gtk application

2025-01-10T18:45:00+05:30

In this blog post, I will show you how to read from stdin in a GTK application written with gjs.

Since I was already using greenclip(with rofi) for clipboard history, I would like to use Bender in a similar way. greenclip print | bender .

As a beginner to GJS-GTK, my first challenge was to bootstrap a GTK app and read the data from stdin.

For the first prototype, I used the InputStream.read_bytes like below

Using read_bytes

const cli = new Gio.ApplicationCommandLine();
const inputStream = cli.get_stdin();

let str = "";
const bytes = inputStream?.read_bytes(8192, null);
inputStream?.close(null);
const data = bytes?.get_data();
if (data) {
  str = new TextDecoder("utf-8").decode(data);
}

This comes with some limitations,

Its synchronous/blocking
we have to specify the no of bytes

I settled with read_bytes because, when I tried to use read_all_async or read_all I was getting errors like below in GJS 1.74.2.

Function Gio.InputStream.read_all_async() cannot be called: argument 'buffer' with type array is not introspectable because it has a type not supported for (out caller-allocates)
TypeError: method Gio.InputStream.read_all_async: At least 4 arguments required, but only 3 passed

Once I had an initial prototype, I started looking into better ways to read from stdin in GTK applications.

A quick search of the above errors led me to some discussions on the Gnome forums like this and this which lead me to a bug report #501 on GJS & a merge request #787

Based on merge request #787 I decided to give a try to MemoryOutputStream.splice_async.

Using MemoryOutputStream.splice_async

I started replacing the read_byes with splice_async & splice_finish and it worked fine.

const cli = new Gio.ApplicationCommandLine();
const inputStream = cli.get_stdin();

if (inputStream) {
  const outputStream = Gio.MemoryOutputStream.new_resizable();

  outputStream.splice_async(
	inputStream,
	Gio.OutputStreamSpliceFlags.CLOSE_TARGET,
	GLib.PRIORITY_DEFAULT,
	null,
	(outputStream, result) => {
	  let data;
	  let str = "";
	  let bytes;

	  try {
		outputStream?.splice_finish(result);
		bytes = outputStream?.steal_as_bytes();
	  } catch (err) {
		console.debug(err);
	  }

	  data = bytes?.get_data();
	  if (data) {
		str = new TextDecoder("utf-8").decode(data);
	  }
	  console.debug("body:", str);
	},
  );
}

For now, this looks better than using read_bytes and I don’t need to worry about the hard coded bytes count, and it’s non-blocking.

Hope this is helpful. Did I make any mistake or is there a better way, feel free for drop an email.

Versions of Language/packages used in this post.

Library/Language	Version
GJS	1.74.2

writing gjs gtk app in typescript

2025-01-06T14:00:00+05:30

Recently I wanted to write a small GTK utility for personal use, and I was looking into writing it in TypeScript. The Gnome Builder bootstraps in JavaScript, so I was exploring the ways which I can set up the project without Gnome builder.

In case you want to skip all the manual steps, and want to bootstrap the application (including packaging) in single command you can skip to Bootstrap using create-gtk after installing the system dependencies.

Install dependencies

I am using Debian 12 (bookworm) I installed the GTK and other system dependencies using apt-get.

sudo apt-get install libgtk-4-dev pkg-config meson gjs libadwaita-1-dev

libadwaita-1-dev is required only if you are planning to use Adwaita widgets.

Setup typescript project

As usual, I start to set up the project by

mkdir example-gtk
cd example-gtk
npm init -y

and install the NPM dependencies like

npm i -D typescript esbuild

In order to set up the types of gjs, we can use

npm i -D @girs/gtk-4.0 @girs/adw-1 @girs/gjs

If you prefer to generate the types, you can use generate command from NPM package @ts-for-gir/cli

The tsconfig.json will look like

{
  "compilerOptions": {
    "types": ["@girs/gjs", "@girs/adw-1"],
    "lib": ["ES2024", "DOM"],
    "target": "ES2024",
    "module": "NodeNext",
    "moduleResolution": "node16",
    "resolveJsonModule": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true
  },
  "include": ["src"]
}

Now we can set up an entry point for our application.

// src/index.ts

import Gio from "gi://Gio";
import Adw from "gi://Adw?version=1";
import GObject from "gi://GObject";
import Gtk from "gi://Gtk";

class _Application extends Adw.Application {
  constructor(
    constructProperties = {
      application_id: "com.<user>.<project.name>",
      flags: Gio.ApplicationFlags.FLAGS_NONE,
    }
  ) {
    super(constructProperties);

    const quit_action = new Gio.SimpleAction({ name: "quit" });
    quit_action.connect("activate", (action) => {
      this.quit();
    });
    this.add_action(quit_action);
    this.set_accels_for_action("app.quit", ["<primary>q"]);
  }

  override vfunc_activate() {
    super.vfunc_activate();
    let win = this.active_window;
    if (!win) {
      win = new Gtk.Window({
        title: "<project.name>",
        default_width: 800,
        default_height: 800,
        application: this,
      });
    }

    win.present();
  }
}

/** Main Application class */
const Application = GObject.registerClass(
  {
    GTypeName: "Application",
  },
  _Application
);

/** Run the main application */
const main = () => {
  const app = new Application();
  app.run([imports.system.programInvocationName].concat(ARGV));
};
main();

Setup build

I use esbuild to build the typescript application. The basic configuration is given below. The target can be set based on the gjs version, a reference is given along with the esbuild configuration. Support for sourcemap has recently merged with Gnome 48, but since it is not available to me, I will skip this option.

// esbuild.js

import { build } from "esbuild";

await build({
  entryPoints: ["src/index.ts"],
  outdir: "dist/",
  bundle: true,
  // target: "firefox60", // Since GJS 1.53.90
  // target: "firefox68", // Since GJS 1.63.90
  // target: "firefox78", // Since GJS 1.65.90
  // target: "firefox91", // Since GJS 1.71.1
  // target: "firefox102", // Since GJS 1.73.2
  target: "firefox115", // Since GJS 1.77.2
  format: "esm",
  external: ["gi://*"],
});

Now we can run node esbuild.js to build our application.

If the build is successful, we can use the following command to check that the application is running without errors.


gjs -m "dist/index.js"

We can enable debug logging using the ENV variable, G_MESSAGES_DEBUG.

G_MESSAGES_DEBUG=all gjs -m "dist/index.js"

Bootstrap using create-gtk

In order to avoid doing all the above steps manually, I wrote a NPM initializer create-gtk to bootstrap gjs GTK4 apps with some defaults.

You can use it by running the command

npx create-gtk <project-name>

This will initialize the gjs GTK4 project with TypeScript & esbuild.

Now we can run the following commands to build

npm i
npm run build
chmod +x bin/<project-name>

and test run the newly bootstrapped application using

./bin/<project-name>

The bootstrapped application will use Adwaitda widgets, and will have a title bar, menubar, about window & sample code for toast messages.
Packaging instructions will be available in the generated README.

The create-gtk code is available at https://github.com/revathskumar/create-gtk.

Helpful Links & Honourable Mentions

Hope this is helpful.

Versions of Language/packages used in this post.

Library/Language	Version
Debian	12 (bookworm)
Gtk	4
libgtk-4-dev	4.8.3
meson	1.0.1
gjs	1.74.2
libadwaita-1-dev	1.2.2-1
TypeScript	5.7.2

CSS: typesafe variables using @property

2024-07-29T13:56:00+05:30

CSS @property allows developers to define variables with type checking and constraining, initial value and inherit rules.

@property --custom-variable {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}

If we define a CSS variable without @propery, browser developer tools won’t give any feedback for the wrong values,

instead, if we use @property like

@property --container-border-color {
  syntax: '<color>';  
  inherits: true;  
  initial-value: #000;
}

and if we provide a wrong value dev tools can help us with proper error indicators

Hovering on the variables on devtools will give us more context as well.

Hope that was helpful.
Thank You.

Git: tips I follow for better git commits

2024-07-24T19:35:00+05:30

Git is more than just adding files and storing them. It’s about looking back in time and seeing changes or going back to old changes. In order to properly and easily revert the changes in git, we should plan it at the time of committing the changes.

In order to make the revert easier, I personally prefer to organise commits into logical chunks. Also, in case if I need to revert a change, I should be able to do it with ease, and I want the app to be able to build and run without any issues like missing dependency after the revert.

Here are some of the questions I ask myself to help me organise the git commits.

Does this change include necessary dependencies, docs & tests related to feature or bug.
Does this commit pass the CI?
Does this commit build and run the app without any issues?
If I revert this change, does the app go back to previous stable state, including passing the CI and Build?

Additionally, I follow the below guidelines

Don’t club feature changes and refactoring changes.
Refactoring changes go after the feature changes (Ideally in a different PR).
Changes due to PR review comments, CI failures are always amended.

This is more effort at the time of committing. But it pays off at the worst time when I need to revert or debug an issue.

TypeScript - return and arguments type based on enum

2024-07-17T12:07:00+05:30

Consider a simple function draw which can expect and enum for the type of the shape needs to draw as first argument and dimensions object as second argument.

const SHAPE_TYPES = {
    CIRCLE: 'CIRCLE',
    SQUARE: 'SQUARE',
    TRIANGLE: 'TRIANGLE',
} as const;

type ShapeTypesEnum =
  (typeof SHAPE_TYPES)[keyof typeof SHAPE_TYPES];

interface Circle {
    radius: number;
}

interface Square {
    sideLength: number;
}

interface Triangle {
    base: number;
    height: number;
}

type Dimensions = Circle | Square | Triangle;

function draw(shapeType: ShapeTypesEnum, dimensions: Dimensions): any {
	// some logic
    return dimensions;
}

Now, this allows us to pass wrong values to dimensions like,

const circle = draw(SHAPE_TYPES.CIRCLE, { sideLength: 5, });

So how can we make sure typescript will throw error if we pass wrong values in the above case?

Arguments Types Based on Enum

From the above example, ideally when we pass SHAPE_TYPES.CIRCLE as type, the second argument dimensions should accept only radius. For that we will use new interface instead of Union types.

// types from the above snippet

interface ShapeDimensions {
    [SHAPE_TYPES.CIRCLE]: Circle,
    [SHAPE_TYPES.SQUARE]: Square,
    [SHAPE_TYPES.TRIANGLE]: Triangle,
}

function draw<T extends ShapeTypesEnum>(shapeType: T, dimensions: ShapeDimensions[T]): any {
	// some logic
    return dimensions;
}

const circle = draw(SHAPE_TYPES.CIRCLE, { radius: 5, });

Now, TypeScript will enforce that the dimensions argument matches the expected type based on the value of the shapeType argument.

Here is the TS playgound link.

Return Types Based on Enum

Now, let’s look into the return type. so far the above example we were using any. Consider we try to return the Union type.

type Dimensions = Circle | Square | Triangle;

function draw(shapeType: ShapeTypesEnum, dimensions: Dimensions): Dimensions {
	// some logic
    return dimensions;
}

const circle = draw(SHAPE_TYPES.CIRCLE, { radius: 5, });
console.log('Return Circle :', circle.radius);

Now, typescript will give error in console.log

one way to remove this error is using guarding condition like below,

function isCircle(shape: Dimensions) : shape is Circle {
    return "radius" in shape
}

if(isCircle(circle)) {
    console.log('Return Circle :', circle.radius);
}

The better way to handle this is to return the right type based on the enum passed as first argument.

If we adopt, the approach as we used with arguments, we can avoid this guarding condition.

function draw<T extends ShapeTypesEnum>(shapeType: T, dimensions: ShapeDimensions[T]): ShapeDimensions[T] {
	// some logic
    return dimensions;
}

const circle = draw(SHAPE_TYPES.CIRCLE, { radius: 5, });
console.log('Return Circle :', circle.radius);

If we try to access circle.sideLength, typescript will give the error.

But what if the return type is not a object literal and an instance of a class? Consider the Circle & Square classes below

class Circle {
    #radius = 0;

    setRadius(radius: number) {
        this.#radius = radius;
    }

    draw() {
        // some logic
    }

}

class Square {
    #sideLength = 0;

    setSideLength(sideLength: number) {
        this.#sideLength = sideLength;
    }

    draw() {
        // some logic
    }

}

interface ShapeType {
  [SHAPE_TYPES.CIRCLE]: Circle,
  [SHAPE_TYPES.SQUARE]: Square,
}

For the ShapeFactory if we try to return new Cirlce() typescript will throw the error. Either we need to explicitly typecast using as

class ShapeFactory {
    createShape<T extends ShapeTypesEnum>(shape: T): ShapeType[T] {
		if (shape === SHAPE_TYPES.CIRCLE) {
            return new Circle() as ShapeType[T];
        }
    }
}

Another approach without typecasting will be as below,

class ShapeFactory {
    createShape<T extends ShapeTypesEnum>(shape: T): ShapeType[T] {
         return {
             [SHAPE_TYPES.CIRCLE]: new Circle(),
             [SHAPE_TYPES.SQUARE]: new Square(),
         }[shape];
    }
}

Feel free to check in TS playground

But using second approach means when ever we call the createFactory we create instance of all types which is bit annoying.

Did I miss anything, or Is there a better way? Let me know you thoughts via email.

Thank You.

Versions of Language/packages used in this post.

Library/Language	Version
TypeScript	5.5.3

jest : module mocking in es modules

2024-07-14T11:40:00+05:30

When using CommonJS module system, we can jest.mock to mock the modules or functions. with jest.mock the mock statement will be hoisted automatically so we don’t need to worry about the import orders.

But when it comes to ES Modules, we have to use the jest.unstable_mockModule This comes with 2 major differences

it doesn’t hoist the mock statements
factory method as second param is mandatory

Since jest.unstable_mockModule doesn’t hoist automatically, we have to import modules or function using dynamic import() after jest.unstable_mockModule.

Set up jest for ESM

Jest by default transform the code to CommonJS, to avoid this when we use ESM, we configure the transform option to {} (empty object).

"jest": {
  "transform": {}
}

And when we run the test, we need to use --experimental-vm-modules option with node.

{
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  }
}

we can also use NODE_OPTIONS='--experimental-vm-modules' npx jest

Mocking ES Modules

For mocking we can take a small example

// utils.js

import * as fs from "node:fs/promises";

export const readName = async () => {
  const content = await fs.readFile("package.json", "utf8");
  return JSON.parse(content).name;
};

In order to test the readName method we can try to mock fs.readFile.

// utils.test.js

jest.unstable_mockModule("node:fs/promises", async () => ({
  readFile: jest.fn(),
}));

const { readName } = await import("./utils");
const { readFile } = await import("node:fs/promises");

describe("index", () => {
  test("read name", () => {
    readFile.mockResolvedValue(JSON.stringify({'name': 'mock'}));
    return expect(readName()).resolves.toBe("mock");
  });
});

You can find the example repo on revathskumar/jest-mock-in-esm

In TypeScript

When using with TypeScript you might need to add the signature for unstable_mockModule into project’s declaration file.

// index.d.ts

declare namespace jest {
  function unstable_mockModule<T = unknown>(moduleName: string, factory?: () => T, options?: MockOptions): typeof jest;
}

Hope that was helpful.

Versions of Language/packages used in this post.

Library/Language	Version
Jest	29.7.0

zig : basic progress indicator in terminal

2024-03-19T22:46:00+05:30

Yesterday I thought of putting together my recent learning’s about ANSI escape codes and zig.

In my last blog, I used ANSI escape codes to give color to the text in terminal. In this exercise, I will use [1A to erase start of line to the cursor so that I can build a basic progress indicator for the terminal.

Disclaimer : This is for learning purposes only, if you like to use a progress indicator with zig for your app, I suggest you to look into Std.Progress

const std = @import("std");

pub fn main() !void {

    const stdout_file = std.io.getStdOut().writer();
    var bw = std.io.bufferedWriter(stdout_file);
    const stdout = bw.writer();

    var progress = [10]u8{ '.', '.', '.', '.', '.', '.', '.', '.', '.', '.' };

    for (1..101) |i| {
        if (i % 10 == 0) {
            const a: usize = i / 10;
            progress[a - 1] = ':';
        }
        try stdout.print("\u{001b}[1AProcessing : [{s}] {d}%\n", .{ progress, i });

        try bw.flush();
        std.time.sleep(60 * 1000 * 1000);
    }

    try bw.flush();
}

Here is the small preview of the output.

I hope it helped.
Thank You.

Versions of Language/packages used in this post.

Library/Language	Version
Zig	0.11.0

Gren : using ANSI escape codes

2024-03-18T17:43:00+05:30

In this blog post, we will look into using ANSI escape sequences to give colors for the terminal outputs in Gren Lang.

Standard escape codes are prefixed with \033 (Octal), ⁣\x1B (Hex) or \u001B (Unicode) followed by the command.

Gren Lang doesn’t support \0 or \x as part of the string. So the only option is to use \u (Unicode).

In order to get some basic text in red color, we will be using output string like below.

"\u{001B}[32mHello \u{001B}[0m"

Below is the sample program to write the text with ANSI escape sequence to stdout.

init :
    Environment
    -> Init.Task
        { model : Model
        , command : Cmd Msg
        }
init env =
    Init.await Terminal.initialize
        <| (\termConfig ->
			Node.startProgram
				{ model =
					{ stdout = env.stdout
					, stderr = env.stderr
					}
				, command =
					Stream.sendLine env.stdout
    <| "\u{001B}[32mHello \u{001B}[0;4;31mworld!\n\u{001B}[0m"
				}
		)

Here is output look like

You can look into the sample app on GitHub.

Versions of Language/packages used in this post.

Library/Language	Version
gren-lang	0.3.0
gren-lang/node	3.1.0

I hope it helped.
Thank You.

Github : override language definitions

2024-03-11T10:53:00+05:30

Recently, when I pushed some gren-lang code to GitHub, it was missing the syntax highlighting. Since GitHub recognises ELM and the same can be used for Gren, I was looking for ways to override the language definition on GitHub.

That led me to the github-linguist/linguist, the library GitHub uses to detect the languages. Using the override strategies, I was able to get the syntax highlighting for .gren files.

Using `.gitattributes` file

I added the .gitattributes file with the below content in the project root, and GitHub started showing Elm syntax highlighting for all the .gren files in the repository.


*.gren linguist-language=Elm

Another use case can be to syntax highlight for JSON with comments file


.vscode/*.json linguist-language=JSON-with-Comments

Below image shows the difference between before and after overriding the language definition of JSON with comments files.

npm run fuzzy auto-complete with preview using fzf

2024-03-10T14:00:00+05:30

In my previous blog post, we discussed adding fuzzy search for curl options using fzf.

In this post, we will add fuzzy completion to the npm run command by reading “scripts” from package.json in the current directory. This requires jq, to available on PATH.

Helpers for sub-command

Fzf _fzf_complete_COMMAND function will trigger on main command and not for sub commands like npm run. To support this, we need some helper functions.

_fzf_complete_get_command_pos() {
    local arguments=("${(Q)${(z)@}[@]}")
    local cmd=$(__fzf_extract_command "$@")
    echo ${arguments[(i)$cmd]}
}

_fzf_complete_trim_env() {
    local command_pos=$1
    shift 1
    local arguments=("${(Q)${(z)@}[@]}")
    echo ${(q)arguments[$command_pos, -1]}
}

_fzf_complete_get_env() {
    local command_pos=$1
    shift 1
    local arguments=("${${(z)@}[@]}")
    echo ${arguments[1, $command_pos - 1]}
}

fzf complete NPM run

Now, using the above helper functions, we can add _fzf_complete_npm and _fzf_complete_npm_run as below.

_fzf_complete_npm() {
    setopt local_options no_aliases
    local command_pos=$(_fzf_complete_get_command_pos "$@")
    local arguments=("${(Q)${(z)"$(_fzf_complete_trim_env "$command_pos" "$@")"}[@]}")
    local subcommand=${arguments[2]}

    if (( $command_pos > 1 )); then
        local -x "${(e)${(z)"$(_fzf_complete_get_env "$command_pos" "$@")"}[@]}"
    fi

    if (( $+functions[_fzf_complete_npm_${subcommand}] )) && _fzf_complete_npm_${subcommand} "$@"; then
        return
    fi

    _fzf_path_completion "$prefix" "$@"
}

_fzf_complete_npm_run() {
    local package=${npm_directory-$(dirname -- $(npm root))}/package.json
    if [[ ! -f $package ]]; then
        return
    fi

    local scriptContent=$(cat package.json | jq -r '.scripts')

    _fzf_complete  --prompt="npm run> " --preview="echo '$scriptContent' | jq -r '.\"{}\"'"  -- "$@" < <(
      echo $scriptContent | jq -r 'keys[]'
    )
}

Here is a small preview of the above script in action.

Versions of Language/packages used in this post.

| Library/Language | Version |
| ---------------- |---------|
| jq               |   1.7   |
| fzf              |  0.45.0 |
| zsh              |   5.9   |

curl: fuzzy search options using fzf

2024-02-08T00:00:00+05:30

Curl has more than 200 CLI options, and using classic autocomplete is not a great way to find those options. So, we will use the fzf, and its custom fuzzy completion API, _fzf_complete to easily find those options.

_fzf_complete_curl() {
  _fzf_complete --header-lines=1  --prompt="curl> " -- "$@" < <(
    curl -h all
  )
}

_fzf_complete_curl_post() {
  awk '{print $1}' | cut -d ',' -f -1
}

Here is the above snippet in action.

Versions of Language/packages used in this post.

| Library/Language | Version |
| ---------------- |---------|
| fzf              |  0.45.0 |

React : Testing file upload using testing library

2024-02-06T18:11:00+05:30

In this post, we will look into writing a test case for file upload using the React testing library

Select accepted file type

In order to simulate file upload in test case, we will be using upload method from @testing-library/user-event.

upload method will accept input element as the first argument and File object as the second.

import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';


test("select accepted file", async () => {
  const user = userEvent.setup();
  render(
    <>
      <label htmlFor='file'>Select file</label>
      <input type="file" name='file' id="file" accept='text/csv' />
    </>
  );

  const fileInput = screen.getByLabelText(/Select file/i);
  const content = '';

  const file = new File([str], 'upload.csv', {
    type: 'text/csv',
  });

  await user.upload(fileInput, file);
  expect(fileInput.files[0]).toBe(file)
  expect(fileInput.files[0].size).toBe(0)
});

Select unaccepted file type

In the below example, the input element will accept only text/csv file, but in the test case for validation, we should be able to select non CSV file.

In order to do this, we need to pass {applyAccept: false} to userEvent.setup method. By default, applyAccept is true.

import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';

test("select unaccepted file", async () => {
  const user = userEvent.setup({applyAccept: false});
  render(
    <>
      <label htmlFor='file'>Select file</label>
      <input type="file" name='file' id="file" accept='text/csv' />
    </>
  );

  const fileInput = screen.getByLabelText(/Select file/i);
  const content = '{}';

  const file = new File([content], 'upload.json', {
    type: 'application/json',
  });

  await user.upload(fileInput, file);
  expect(fileInput.files[0]).toBe(file)
  expect(fileInput.files[0].size).toBe(2)
});

Select multiple files

To select multiple files in the test case, we can pass an array of file object as second argument to upload method

import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';


test("select mulitple file", async () => {
  const user = userEvent.setup();
  render(
    <>
      <label htmlFor='file'>Select file</label>
      <input type="file" name='file' id="file" accept='text/csv' multiple />
    </>
  );

  const fileInput = screen.getByLabelText(/Select file/i);
  const content0 = '';

  const file0 = new File([content0], 'upload0.csv', {
    type: 'text/csv',
  });

  
  const file1 = new File(['a,b,c'], 'upload1.csv', {
    type: 'text/csv',
  });

  await user.upload(fileInput, [file0,file1]);

  expect(fileInput.files[0]).toBe(file0)
  expect(fileInput.files[0].size).toBe(0)

  expect(fileInput.files[1]).toBe(file1)
  expect(fileInput.files[1].size).toBe(5)
});

Hope that helped.
Happy coding.

Versions of Language/packages used in this post.

Library/Language	Version
@testing-library/react	14.2.1
@testing-library/user-event	14.5.2

TypeScript: add types for axios response data and error data

2023-04-17T00:00:00+05:30

When using axios with TypeScript, one major problem we face is the types for the response data and error data.

Consider the below function, which uses axios.post

async function postHello() {
  try {
    const response = await axios.post('/hello', {});
    console.log(response.data);
  } catch (error) {
    console.log(error.response.data.status);
  }
}

In the above function, the type of data will be any which can’t ensure the type safety.

To avoid this situation, we can provide the axios with our custom type for the response data and error data.

Add type for response data

First, let’s look into the Response data.

type PostHelloResponseType = {
  status: string;
  id: number;
};

async function postHello() {
  try {
    const response = await axios.post<PostHelloResponseType>('/hello', {});
    console.log(response.data.status);
  } catch (error) {
    console.log(error.response.data.status);
  }
}

We defined PostHelloResponseType for the expected response and pass it to axios.post.

Now, when we the response.data will have the type PostHelloResponseType

And TS will throw error if we try to use a non-existing key like response.data.stats.

Next, we will look into error data type.

Add type for error data

In TS, the error we receive in try...catch block will always have type unknown.
So we won’t be able to assign type in catch instead we have to define new variable.

import axios, { AxiosError, isAxiosError } from 'axios';

type PostHelloErrorType = {
  status: string;
  message: string;
  type: string;
  errors: string[];
};

async function postHello() {
  try {
    // call axios methods
  } catch (error) {
    if (isAxiosError(error)) {
      const err: AxiosError<PostHelloErrorType> = error;
      console.log(err.response.data.message);
    }
  }
}

Now we have type safety for the error data.

Happy coding.

Jest : custom matcher for exceptions

2023-04-16T16:00:00+05:30

As of now jest matcher toThrow help us to match only the Exception class or the error message.

If we want to do any matching against the custom details on the error instance, we have to use try...catch and assign the error to a variable and do expect manually like below

let err: ValidationError;

try {
    await validatorDto(/* params */);
} catch (error) {
    err = error;
}

expect(err.details).toEqual(
    expect.arrayContaining([
        expect.stringMatching(/currencycode must be a valid/i),
    ]),
);

In this blog, I will explain on how we can create a custom matcher to make this simple

First we will start with creating a setupAfterEnv.ts file and add it to setupFilesAfterEnv in jest config.

// jest.config.js or package.json
{
    // other configs

    "setupFilesAfterEnv": [
      "<rootDir>/test/setupAfterEnv.ts"
    ]
}

You can make changes to the paths based on your jest configuration of rootDir and path to your setupAfterEnv.ts file.

Now let’s use expect.extend to add our custom matcher method.

//  test/setupAfterEnv.ts

expect.extend({
  async toThrowWithErrorMessage(received, expected) {
    let err: { details: string[] };

    try {
      await received();
    } catch (error) {
      err = error;
    }

    if (this.isNot) {
      expect(err.details).not.toEqual(
        expect.arrayContaining([expect.stringMatching(expected)]),
      );
    } else {
      expect(err.details).toEqual(
        expect.arrayContaining([expect.stringMatching(expected)]),
      );
    }
    return {
      pass: !this.isNot,
      message: () => '',
    };
  },
});

In the above custom matcher, we assume that all our custom Error instances will hold the messages in the .details property.

Next, let’s add types so the typescript won’t complain about your new custom matcher.

// index.d.ts

declare namespace jest {
  interface Matchers<R> {
    toThrowWithErrorMessage: (received: any) => void;
  }
  interface Expect {
    toThrowWithErrorMessage: (received: any) => void;
  }
}

Here is how we use the new custom matcher,

it('should throw error with error message', async () => {
  return expect(async () => {
    await validatorDto(Dto, {});
  }).toThrowWithErrorMessage(/name should not be empty/i);
});

Hope that Helped.
if you have any suggestions or improvement, please drop a line to me over email

Versions of Language/packages used in this post.

| Library/Language | Version |
| ---------------- |---------|
|      Jest        |  28.1.2 |
|   TypeScript     |   4.9.5 |

Reviewdog : configure reviewdog for eslint using github actions

2022-10-22T13:30:00+05:30

To make the eslint issues more visible on pull requests, especially the warnings, we used to add comments on PR as part of our review process.

This manual process is error-prone and slows down our review process. To make it streamlined, I was looking for a tool which can report the eslint errors/warnings as PR review annotations on the exact line where eslint finds the problems. Thus I came to know about reviewdog. Luckily reviewdog has GitHub actions for eslint which is perfect for us.

Below is the sample GitHub action file we use in our projects.

# .github/workflows/reviewdog.yml

name: reviewdog
on: [pull_request]
jobs:
  eslint:
    name: runner / eslint
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    steps:
      - uses: actions/checkout@v2
      - uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          reporter: github-pr-review # Change reporter.
          eslint_flags: 'src/'

The permission block in reviewdog.yml will give the required permissions for the GITHUB_TOKEN generated for the action.

Here is the reviewdog in action,

I hope you will find it helpful and try it in one of your projects.

JavaScript : String.length is not the count of characters

2022-08-31T12:00:00+05:30

In JavaScript, String.length does not represent the count of characters. Rather they represent the count of codepoints. Since the normal characters can be represented using single codepoints, in most cases we get String.length is the same as the count of characters.

But as we start using unicode characters, which uses more than one codepoint to represent a single character, we start getting wrong character counts.

For Eg. "💊".length will provide the length as 2.

So, How do we find the correct character length when unicode characters are involved?

Using spread operator

The easiest way to find the character length is to convert the string into an array using the spread operator and then find the length of the array

[...`💊💊💊💊`].length  // 4

Hope that helped.
Thank You.

GitHub action to deploy review apps to surge

2022-07-01T01:00:00+05:30

This post explains a simple GitHub action to deploy your frontend app to surge for each pull request created.

This post assumes you already have surge installed and logged in.

Now, let’s generate a new surge token

surge token

Add the generated token to Github secrets so that GitHub actions can use it.

Next, add the following action into .github/workflows.

# .github/workflows/surge.yml
name: Deploy to surge

on:
  pull_request:
  push:
    branches:
      - 'main'

jobs:
  build:
    runs-on: ubuntu-latest
    name: Deploying to surge
    steps:
      - uses: actions/checkout@v1
      - name: Install surge and fire deployment
        uses: actions/setup-node@v1
        with:
          node-version: 18
      - run: npm i -g surge
      - run: npm ci
      - run: npm run build
      - run: surge ./dist/ my-app-${{ github.event.number || 'main' }}.surge.sh --token ${{ secrets.SURGE_TOKEN }}

This will action will get triggered when a pull request is created/updated and merged to the main.

We use the pull request id in the URL for each review app like my-app-1.surge.sh for the review apps and when we merge the pull request to main it will deploy to my-app-main.surge.sh

Hope that helped.

Alfred : workflow to simulate keyboard input

2022-06-26T18:15:00+05:30

Some web applications, especially certain banking applications won’t allow you to copay and paste the text into input forms. In such cases, you might need to enter the text manually or find some way to simulate the keyboard text input.

Using the Alfred app, you can add a custom workflow to simulate text input. This blog explains how you can create a custom workflow.

1. Create a new workflow

You can start by creating a new workflow from Alfred preferences -> Workflows and fill in the basic details about the workflow.

2. Add new universal action

Right-click and add new universal action. Please give it a name and choose which types this action should show for. In most cases, you will need only text but feel free to select as per your requirement.

3. Add action to run AppleScript

Once the universal action is saved, Again right click and add action to run NSAppleAcript.

This will prompt a new window where you add the following snippet.

on alfred_script(q)
  tell application "System Events" to keystroke q
end alfred_script

Save it and your workflow is ready. Make sure you enable the workflow before try out.
Please note that this snippet won’t handle the newlines, hence best work for single-line texts.

4. Use the text action with Alfred

Now in Alfred, pick any text from clipboard history or snippet and trigger text actions (Normally right arrow), you can see your new text action.

5. Download workflow from GitHub

Alternatively, you can download the workflow from GitHub as well.

Rails: custom param name for member resource

2020-09-08T00:59:00+05:30

By default, the param name for the member resources like :show, :update, :delete etc are id. Occasionally we come into a situation where the name id doesn’t make sense to the routes.

For example, in reservations we have :show but instead of id we will be passing confirmation_code instead of reservation id. Using params[:id] in this case will be confusing for the people who read the code.

This blog will describe how we can use a custom name like confirmation_code for the param name and use params[:confirmation_code].

For all routes of the resource

Our normal routes for reservations resource will look like

Verb   URI Pattern                                       Controller#Action
GET    /api/v1/reservations/:id(.:format)                api/v1/reservations#
GET    /api/v1/reservations(.:format)                    api/v1/reservations#index
POST   /api/v1/reservations(.:format)                    api/v1/reservations#create
PATCH  /api/v1/reservations/:id(.:format)                api/v1/reservations#update
PUT    /api/v1/reservations/:id(.:format)                api/v1/reservations#update
DELETE /api/v1/reservations/:id(.:format)                api/v1/reservations#destroy

To change the name id to confirmation_code, we can configure the route like below

resources :reservations, param: :confirmation_code

Now for all the reservation member routes, id will be replaced with confirmation_code.

Verb   URI Pattern                                       Controller#Action
GET    /api/v1/reservations/:confirmation_code(.:format) api/v1/reservations#show
GET    /api/v1/reservations(.:format)                    api/v1/reservations#index
POST   /api/v1/reservations(.:format)                    api/v1/reservations#create
PATCH  /api/v1/reservations/:confirmation_code(.:format) api/v1/reservations#update
PUT    /api/v1/reservations/:confirmation_code(.:format) api/v1/reservations#update
DELETE /api/v1/reservations/:confirmation_code(.:format) api/v1/reservations#destroy

Only for single route

If we want the custom name only for a single route like for :show, we can configure this using only & except

resources :reservations, only: :show, param: :confirmation_code
resources :reservations, except: :show,

The result will be

Verb   URI Pattern                                       Controller#Action
GET    /api/v1/reservations/:confirmation_code(.:format) api/v1/reservations#show
GET    /api/v1/reservations(.:format)                    api/v1/reservations#index
POST   /api/v1/reservations(.:format)                    api/v1/reservations#create
PATCH  /api/v1/reservations/:id(.:format)                api/v1/reservations#update
PUT    /api/v1/reservations/:id(.:format)                api/v1/reservations#update
DELETE /api/v1/reservations/:id(.:format)                api/v1/reservations#destroy

Now we can use the confirmation code for :show & id for all other routes.

Hope this helped.

Using SSL in local development

2020-07-29T00:59:00+05:30

The first step to using SSL on local development is to generate a self-signed certificate on our development machine. If you are familiar with openssl, you can use it to generate the certificate. But it’s kinda tricky to get valid certificates. The easiest way is to use mkcert to generate self-signed certificates

Install & setup `mkcert`

On the mac, we can use Homebrew to install it.

brew install mkcert
brew install nss # for firefox

nss is only required if you are using Firefox

If you are on Ubuntu, first install the certutil

sudo apt install libnss3-tools

Then using Linuxbrew, install mkcert

brew install mkcert

Once the installation is successful, we need to install the rootCA by running

mkcert -install

Next, we can generate certificates for our projects

mkdir ssl/
mkcert -key-file ssl/key.pem -cert-file ssl/cert.pem "myapp.local"

Now we have the certificate and the key generated in the ssl/ folder. Also make sure to add the domain into /etc/hosts, in our case myapp.local

# /etc/hosts

127.0.0.1  myapp.local

In the following sections, we will look into how we can use the generate certificate with our different applications.

Create React App (CRA)

For CRA, we can specify the certificate and key in the .env file. Add following into .env.local or .env.development

SSL_CRT_FILE=ssl/cert.pem  
SSL_KEY_FILE=ssl/key.pem  
HTTPS=true

and restart your server.

Jekyll

For Jekyll, we can specify the certificates using --ssl-key & --ssl-cert options

jekyll serve -D --future --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem

Rails

For rails, we have to do some config changes

In webpacker.yml, toggle https to true under development -> dev_server.

# config/webpacker.yml

development:
  <<: *default
  # ...
  # ...
  

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: true

If you are using a custom local domain like, myapp.local make sure to add that into config.hosts in config/environments/development.rb

# config/enviroments/development.rb

Rails.application.configure do
  #...
  #...

  config.hosts << "myapp.local"
end

The local domain might be different for teammates, it’s better to accept the custom domain using ENV. Add HOST to .env.local

# .env.local

HOST=myapp.local

and use the HOST env in the config like below

# config/environments/development.rb

Rails.application.configure do
  #...
  #...

  config.hosts << ENV.fetch("HOST")
end

Next, we can start the rails server using the -b option.

rails s -b "ssl://127.0.0.1:3000?key=ssl/key.pem&cert=ssl/cert.pem"

Hope that helped.

Migrating database from one to another

2020-07-24T00:05:00+05:30

Recently I came into a situation where I want to migrate one database to another. Once from sqlite to PostgreSQL & another from MariaDB (MySQL) to PostgreSQL. Both were not production level apps.

Taking a database dump and importing it into others won’t work because of data type issues & various syntax errors.

The only way it worked for me is by using the sequel gem. It will work in just 2 commands if the data is simple.

gem install sequel pg sqlite3
sequel -CE sqlite:~/code/data.db postgres://<db_username>:<db_password>@<db_host>/<db_name>

Unfortunately, my second migration was not that simple. It had some blob and hit with encoding issue. I tried to fix this by changing the Postgres configuration postgresql.conf.

bytea_output = 'escape'                 # hex, escape

It didn’t work for me. So I have to write a small script to remove the escape sequence & update it back in MySQL.

require "sequel"

DB = Sequel.connect "mysql2://root:root@localhost/<db_name>"

co = DB[:table_name]

co.each do | ob |
    if (ob[:field_name])
        co.where(id: ob[:id]).update(field_name: ob[:field_name].gsub("\\,", ""))
    end
end

With this updated data, sequel import worked fine.

gem install sequel pg mysql2
sequel -CE mysql2://root:root@localhost/<db_name> postgres://<db_username>:<db_password>@<db_host>/<db_name>

I used sequel because I had a ruby development environment already set up on my machine. If you are a python dev, you can take a look into pgloader for the same.

If you have found any other way or found any issue on migrating, please let me know via comments.

Auto deploy to heroku using Gitlab CI

2020-06-30T23:59:00+05:30

As of now, Heroku doesn’t support auto-deploy from GitLab. So we have to use Gitlab CI to deploy to Heroku. This post will help you to set up auto deploy to Heroku.

For this blog post, we will take a rails app with a Postgres database. We need Gitlab to run the unit tests and deploy to staging and then later to production.

For staging and production, we will keep different branches to make things simpler. It will also make it easier for us to push a hotfix.

Setting up Gitlab CI

First, we have to set up our project to run the tests using Gitlab CI. You can add new .gitlab-ci.yml file using the templates available in Gitlab web UI. If you prefer to add it manually you can add the following section to set up.

# .gitlab-ci.yml
image: 'ruby:2.7.1'

Then add the services section to support postgres db for the rails app.

services:
  - postgres:11.7

variables:
  RAILS_ENV: test
  POSTGRES_DB: app_test
  POSTGRES_USER: postgres
  POSTGRES_PASSWORD: postgres
  POSTGRES_HOST_AUTH_METHOD: trust
  DATABASE_URL: 'postgres://postgres:postgres@postgres:5432/app_test'

Next, let’s add cache to make the build faster. We can cache the ruby gems, node modules etc

# Cache gems in between builds
cache:
  paths:
    - node_modules
    - .yarn
    - vendor/ruby

Once the basic config is done, let us configure the gitlab ci to run the test cases.

Tests

To run the test cases, we have to first install the missing dependencies like nodejs, postgresql-client (to run migrations), yarn etc. All these installations can be done as part of the before_script.

You can give a name for the stage using stage config in the test block.

test:
  stage: tests
  before_script:
    - ruby -v # Print out ruby version for debugging
    - apt-get update -q && apt-get install nodejs postgresql-client -yqq
    # Install yarn as outlined in (https://yarnpkg.com/lang/en/docs/install/#alternatives-stable)
    - curl -o- -L https://yarnpkg.com/install.sh | bash
    # Make available in the current terminal
    - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
    - yarn install
    - gem install bundler
    - bundle config set path 'vendor'
    - bundle install -j $(nproc)
    - bundle exec rake db:migrate --quiet
    - bundle exec rake db:test:prepare --quiet
  script:
    - bundle exec rails test

Add Environment variables

Before we configure the deployment, we need to add the ENV variables to Gitlab’s project configuration. To add these navigate to Variables section in CI / CD Settings of the project.

We require the following ENV variables.

$HEROKU_PRODUCTION_KEY
$HEROKU_APP_NAME
$HEROKU_STAGING_APP_NAME

We can mark the variables Protected & Masked depending on our setup. The protected variables will be exported only in protected branches.

We can configure different environments for the project in Operations -> Environments.

Deploy

Once the tests are passing, we can configure the deployments in the next stage. The deployments to run only from particular branches, ie.,

from develop branch, deploy to staging
from master branch, deploy to production

The deployments will be processed with the help of dpl gem. Since we are deploying to Heroku that requires us to run migration manually after each deployment, we should install Heroku CLI before the deploy stage.

.before_script_deploy:
  before_script:
    - curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
    - gem install dpl

# This deploy job uses a simple deploy flow to Heroku, other providers, e.g. AWS Elastic Beanstalk
# are supported too: https://github.com/travis-ci/dpl
production:
  type: deploy
  extends: .before_script_deploy
  environment: production
  variables:
    HEROKU_API_KEY: $HEROKU_PRODUCTION_KEY
  script:
    - dpl --provider=heroku --app=$HEROKU_APP_NAME --api-key=$HEROKU_PRODUCTION_KEY
    - heroku run rails db:migrate --exit-code --app $HEROKU_APP_NAME
  only:
    - master

staging:
  type: deploy
  extends: .before_script_deploy
  environment: staging
  variables:
    HEROKU_API_KEY: $HEROKU_PRODUCTION_KEY
  script:
    - dpl --provider=heroku --app=$HEROKU_STAGING_APP_NAME --api-key=$HEROKU_PRODUCTION_KEY
    - heroku run rails db:migrate --exit-code --app $HEROKU_STAGING_APP_NAME
  only:
    - develop

The .before_script_deploy template will help us to share the before_script between the production & staging.

While writing this blog post the version of stable dpl gem was 1.10.15 & the master branch was pointing to new work in progress 2.0 version. When you are reading the documentation of dpl please pay attention to the version.

ReactJS : designing better component api (Functional)

2020-05-08T00:05:00+05:30

Part 1 of this post is available at designing better component api - UI

Part 2 : For Functional / Large UI components

In part 1 we discussed the API for primitive UI components. In this we will discuss about Functional (not stateless) components or some large UI components composed using primitive UI components.

Derive value from existing data

Refrain yourself from passing unwanted props, where its values can be derived from the other props which we are already passing to the component. Consider the example below. We are passing an array of players and total count of them as props

// bad
const PlayerList = ({ players, totalPlayerCount }) => {
   if (totalPlayerCount === 0) {
       // render empty message
   }
   // render player list
}

In this we can derive the totalPlayerCount from the array of players itself using the .length property. Thus we can reduce the number of props we are passing into.

// better
const PlayerList = ({ players }) => {
   if (players.length === 0) {
       // render empty message
   }
   // render player list
}

Pass minimal data required for the component to render

I have seen many beginners passing the whole object to the component and use only one or two properties inside the component. This will make the component difficult to optimize and test.

// bad
const Player = ({ player }) => {
 return (
   <div>
     <div>{player.name}</div>
     <div>{player.score}</div>
   </div>
 )
}

In the above example player can have 20 or 30 properties which are not used in the Player component. So instead of passing the player object, if pass the only properties needed for this component like name & score will make this component simpler and easy to optimize.

const Player = ({ name, score }) => {
 return (
   <div>
     <div>{name}</div>
     <div>{score}</div>
   </div>
 )
}

function.bind instead of calling from inside.

Sometimes passing minimum data into components won’t work because we might need to pass the whole data into an action. Considering the code below, we can’t avoid passing the player object because it is required as the parameter for onSelect method.

// bad
const Player = ({ player, onSelect }) => {
 return (
   <div>
     <div>{player.name}</div>
     <div>{player.score}</div>
     <div><button onClick={() => onSelect(player)}>Select</button></div>
   </div>
 )
}

In such a case, bind the onSelect method with the player object and pass it to the component.

// better
const Player = ({ name, score, onSelect }) => {
 return (
   <div>
     <div>{name}</div>
     <div>{score}</div>
     <div><button onSelect={onSelect}>Select</button></div>
   </div>
 )
}
 
// usage
 
<Player
 name={player.name}
 score={player.score}
 onSelect={handleSelect.bind(this, player)}
/>

Now the <Player /> component is no more depended on whole player object and we can pass only the name & score to it.

remove unwanted arrow functions wrapping

This is a common pattern I have seen in many codebase that instead of just passing the function to event listeners, they will be wrapped inside unnecessary arrow functions.

// bad
const Player = ({ player, onSelect }) => {
 return (
   <div>
     <div>{player.name}</div>
     <div>{player.score}</div>
     <div><button onClick={(evt) => onSelect(evt)}>Select</button></div>
   </div>
 )
}

This mistake is mostly done by newbies who got confused between these two usages, onClick={onSelect} and onClick={onSelect()}. The later will cause function invocation on each re-render and to fix this they wrap in an arrow function.

// better
const Player = ({ name, score, onSelect }) => {
 return (
   <div>
     <div>{name}</div>
     <div>{score}</div>
     <div><button onclick={onSelect}>Select</button></div>
   </div>
 )
}

Adding an arrow function does not necessarily add any performance overhead, but it can cause logical errors in case we decide to add a new param or remove a param later. In such cases we have to make changes in all the instances of this unnecessary wrapping along the way from top most to the child component.

In case of onClick={onSelect} the changes required are only in 2 places, in function definition and at where it invokes.

ReactJS : designing better component api (UI)

2020-03-29T00:05:00+05:30

A good api has a huge impact on the productivity of the team and stability of the product.

The secret to designing a good component api is the mix of

splitting the components to smaller components
passing minimal data to the components
deduce the data from existing data instead of having a separate state.
have similar api for similar components
Keep it futuristic and extendable

For this post, we will group the components mainly into two categories.

UI Primitive components
Functional / Large UI components (Part 2)

UI Primitive components

These are the components usually we put into a component library. To make the best out of the primitive UI components, the api for these components should focus on being generic and extendable. These components are going to be used throughout the whole project in different use cases and to compose larger components.

To illustrate the good and bad, we take an example of Button component which is a wrapper to the HTML element button but with some of our product specific customisations.

Accept `children`

Consider the Button component which has only text prop which can accept a string. And suddenly an new scenario came up to show the text in bold or a new icon for the text. Now this requires changes to our Button api. we need to accept new parameters to make this possible. First thought process for a newbie will add a new prop which can say whether to render the text in bold or add a new prop to accept icon url.

// bad
const Button = ({ text, bold, iconUrl }) => {
 const t = bold ? <strong>{text}</strong> : text;
 const icon = iconUrl ? <image src={iconUrl} /> : null; 
 return <button>{icon} {t}</button>;
}

But if we use this approach we keep on adding new props for any new formatting changes in future and end up with lots of props. This will get worse when more customisations like icon placement or other props for the icon.

The better solution will be accepting children. By this Button component doesn’t need to make any more changes to add icons or any style changes to the text.

// better
const Button = ({ children }) => {
 return <button>{children}</button>;
}

In this case the developer who uses the button has more control on what and how to render the content/text. if he needs icon

<Button>
   <image src={iconUrl} />
   <strong>Hello World</strong>
</Button>

In case we have too much usage of Button with Icon we can use Button to compose and create new component ButtomWithIcon for the specific usage.

use the same api as the base component

To make it easy to use our custom component, we can reuse the same api of the base component for our custom component as well. This will help our team to get used to the custom component easily since they don’t want to learn about new props. The custom component will look more familiar to them.

// bad
const Button = ({ children, handleSubmit, enabled }) => {
 return <button disabled={!enabled} onClick={handleSubmit}>{children}</button>;
}

In the above case, the team has to go and check the documentation or the component to figure out which prop to be used. The above api can make the team more confused and difficult to use the component.

The better approach will be

// better
const Button = ({children, disabled, onClick}) => {
 return (
   <button disabled={disabled} onClick={onClick}>
     {children}
   </button>
 );
}

Once we start following the above approach we can extend that into next tip.

Accept valid base component props

Accepting the props which are required only for basic scenarios won’t be enough. We can avoid frequent addition of props when the new requirement arises. using the Rest/Spread.

// bad
const Button = ({ children }) => {
 return <button>{children}</button>;
}

The new api using rest will look like

// good
const Button = ({ children, ...rest }) => {
 return <button {...rest}>{children}</button>;
}

Avoid unnecessary computation

The primitive UI components should not contain any kind of business logic. Including business logic makes it difficult to use them as generic components.

// bad
const Button = ({ children, name }) => {
 const disabled = name === "";
 return <button disabled={disabled}>{children}</button>;
}

The above one has a condition to disable the button when the name is empty. But this won’t be the requirement always. Button component doesn’t need to know on what basis it should render disabled. The condition can be different for each requirement.

// better
const Button = ({ children, disabled, onClick }) => {
 return <button disabled={disabled} onClick={onClick}>{children}</button>;
}
 
<Button disabled={name === ""} />

We will cover the Functional / Large UI components in the next post.

ReactJS : beginner mistakes and how to avoid them

2020-03-28T00:05:00+05:30

1. Not splitting into components

Most people start writing the component and forget to split. So team will endup with very huge render method. Some try to abstract it into instance methods.

My rule of thump here is, If you are adding instance method for partial render, mostly it can be splitted into smaller components.

2. component name starts with small letter.

React has a rule that component name should be capitalized. Since we can write component as functions

const abc = () => { return <div>Hello</div> }

since react can’t render this as component people will call abc() from render if the component name started with lowercase, react will consider it as webcomponents.

3. Get input value using ref

Instead of updating the state people tend to use the ref and get the .value from the inputs. just like how we do in jQuery world.

4. Monolith component does eveything

Instead of passing the component/children people design the component such a way they can pass different props for all the customization. The component will accept a large obejct with all the details and try to render everything.

This makes difficult to maintain the component + adding more surface area for breakage. Things will be worse if you don’t have test cases.

I have seen this is preferred even by experienced devs thinking the making the change is easier.

5. Passing too much details in props

Passing unnecessary and irrelevant info into the component will make it difficult to optimize. If the component need only 3 simple props pass only those 3 instead of object with 3 attrs.

if the props are simple string/number, it can optimized easily with PureComponent/ React.memo.

6. Passing duplicate info into props

When people start passing complex objects as props, there is high chance that duplicate info is getting passed as different props.

This will confuse the dev and cause bugs

7. Redux : storing data according to UI.

Usually when I mentor, I ask the devs to consider the redux store as database. Store the raw data not the processed according to the UI.

if we have a first_name and last_name, but UI need full name, Don’t store only full_name in redux

This will make difficult to reuse the redux store. If you want to combine either do it on component or add a selector.

8. Redux : Store the duplicate & derived values

similar to previous one, If you can derive the value for the UI from the exising data in redux. always derive. Not need to store those again in redux.

If you have uses array and need to show the users count, use users.length in render or in selector. No need to store in another key in redux.

9. Designing the redux store according to the UI

As already told consider redux store as a DB. each reducer should be each entity (like tables). Don’t combine 2 entities into same reducer just because you have to show both in same UI

10. impure reducers.

people tend update the existing object ( mutate) and return or they miss ...state while they return.

Some tend to access window/localStorage in reducer to save some duplicate but end up with duplicate the whole store.

11. Too much DRY

People for maximum code reuse and end up with complex and difficult to maintain component.

12. Copying redux state to local state.

To avoid extra dispatch and state changes, people tend to copy the state to local and update there which eventually lead to complex component. Will be adding more code to lifecycle methods to handle syncing the redux and local state

13. premature optimization

using too much PureComponent or custom shouldComponentUpdate for the components which accept complex props like object or array.

Most issues can be solved/optmized with properly splitting the components.

Trying to optimize the component only with shouldComponentUpdate without splitting & reducing the props will lead to complex component and lots and lots of issues with not rerendering and endup forceUpdate.

14. Too much dependency on globals

Component directly depend on globals like window and localStorage will be difficult to test and maintain.

15. Not using the defaultProps

People tend to miss the usage of defaultProps and tend to add more conditional rendering which make the component complex to difficult to maintain.

16. Using the react wrong way.

React has a Philosophy of doing things functional and declarative way. But beginners coming from imperative apis like DOM apis tend to use the react the only way they know and not ready to learn new paradigm

ReactJS : simple HTML5 Validation

2020-01-15T00:05:00+05:30

Please note this blog post drafted long back and might be outdated. please notify me if you see any issues.

When I get question like which validation package you use in ReactJS, I usually answer saying I don’t use any. I go with HTML5 validation which native to browsers for simple validation and rest of them do it on server side.

In my case it served well enough for all my projects.May be your usecase may vary.

Why HTML5 validation

Here are the couple of reason why I choose to go with HTML5 validations

Simple and Easy to implement
No extra dependency
Easy to maintain
No need to learn another package and its api.

Basic implementation

For the basic version, we can use form element and bind action to onSubmit event. This is will show validation error in browsers native way.

import React, { Component } from "react";

export default class Signup extends Component {
  handleSubmit = evt => {
    evt.preventDefault();
    // implement the submit via xhr
  };

  render() {
    return (
      <section>
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            // other fields to validate
            <div class="field is-grouped">
              <div class="control">
                <button class="button is-link">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </section>
    );
  }
}

Since we are using submit event, the handleSubmit will get called only when there is no validation error.

Form submit programatically

Lets consider another situation where we have 2 submit buttons, where one will submit the form like before another one will submit only after some state change. So for second button we have to bind onClick event and do submit programatically.

There is a catch in this scenario, when we do the submit programatically the native HTML5 validation won’t get triggered. So we have to check the validation and report it ourselves. We can use checkValidity and reportValidity methods for this.

import React, { Component } from "react";

export default class Signup extends Component {
  handleSubmit = evt => {
    evt.preventDefault();
    console.log("submit");
    // implement the submit via xhr
  }

  handleSignup = evt => {
    if (this.form.checkValidity()) {
      this.form.submit();
    } else {
      this.form.reportValidity();
    }
  };

  render() {
    return (
      <section>
        <div className="container">
          <form ref={form => (this.form = form)} onSubmit={this.handleSubmit}>
            <div class="field">
              <label class="label">Username</label>
              <div class="control has-icons-left has-icons-right">
                <input
                  class="input"
                  type="text"
                  placeholder="Name"
                  required
                  name="username"
                />
                <span class="icon is-small is-left">
                  <i class="fas fa-user" />
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">Email</label>
              <div class="control has-icons-left has-icons-right">
                <input
                  class="input"
                  type="email"
                  placeholder="Email input"
                  required
                  name="email"
                />
                <span class="icon is-small is-left">
                  <i class="fas fa-envelope" />
                </span>
              </div>
            </div>

            <div class="field is-grouped">
              <div class="control">
                <button class="button is-link">Submit</button>
              </div>
              <div class="control">
                <button
                  type="button"
                  onClick={this.handleSignup}
                  class="button is-warning"
                >
                  Signup
                </button>
              </div>
            </div>
          </form>
        </div>
      </section>
    );
  }
}

The checkValidity will return true if there is no validation error and reportValidity will trigger the invalid event on each invalid child inputs which result in showing errors to user.

Custom design for Error messages

In the above implementations the issue is error messages will be shown in the native way as per the browser implementation and no as per our custom design.

If we want the custom design to implement, we have to keep get the error messages for each field and keep those in state. We can bind callback to invalid event, to collect error message from all the child inputs. We will use validationMessage property on the input element to get the localised message for the validation failure.

import React, { Component } from "react";

export default class Signup extends Component {
  state = {
    fields: {},
    fieldErrors: {}
  };

  handleSubmit = evt => {
    evt.preventDefault();
    // implement the submit via xhr
  };

  handleChange = evt => {
    console.log("change :: ", evt.target.name);
    const fieldErrors = {
      ...this.state.fieldErrors,
      [evt.target.name]: ""
    };

    this.setState({ fieldErrors });
  };

  handleInvalid = evt => {
    evt.preventDefault();
    console.log(evt.target.name);
    const fieldErrors = {
      ...this.state.fieldErrors,
      [evt.target.name]: evt.target.validationMessage
    };

    this.setState({ fieldErrors });
  };

  render() {
    const { fieldErrors } = this.state;
    return (
      <section>
        <div className="container">
          <form
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
            onInvalid={this.handleInvalid}
          >
            <div class="field">
              <label class="label">Username</label>
              <div class="control has-icons-left has-icons-right">
                <input
                  class={`input ${fieldErrors.username ? "is-danger" : ""}`}
                  type="text"
                  placeholder="Name"
                  required
                  name="username"
                />
                <span class="icon is-small is-left">
                  <i class="fas fa-user" />
                </span>
                {fieldErrors.username && (
                  <span class="icon is-small is-right">
                    <i class="fas fa-exclamation-triangle" />
                  </span>
                )}
              </div>
              {fieldErrors.username && (
                <p class="help is-danger">{fieldErrors.username}</p>
              )}
            </div>

            <div class="field">
              <label class="label">Email</label>
              <div class="control has-icons-left has-icons-right">
                <input
                  class={`input ${fieldErrors.email ? "is-danger" : ""}`}
                  type="email"
                  placeholder="Email input"
                  required
                  name="email"
                />
                <span class="icon is-small is-left">
                  <i class="fas fa-envelope" />
                </span>
                {fieldErrors.email && (
                  <span class="icon is-small is-right">
                    <i class="fas fa-exclamation-triangle" />
                  </span>
                )}
              </div>
              {fieldErrors.email && (
                <p class="help is-danger">{fieldErrors.email}</p>
              )}
            </div>

            <div class="field">
              <label class="label">Message</label>
              <div class="control">
                <textarea
                  class={`textarea ${fieldErrors.message ? "is-danger" : ""}`}
                  placeholder="Textarea"
                  required
                  name="message"
                />
              </div>
              {fieldErrors.message && (
                <p class="help is-danger">{fieldErrors.message}</p>
              )}
            </div>

            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" required name="toc" />
                  I agree to the <a href="#">terms and conditions</a>
                </label>
                {fieldErrors.toc && (
                  <p class="help is-danger">{fieldErrors.toc}</p>
                )}
              </div>
            </div>

            <div class="field is-grouped">
              <div class="control">
                <button class="button is-link">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </section>
    );
  }
}

Even though we are using onInvalid on form, it will trigger handleInvalid for each invalid field, and the handleChange is using to clear the state once some update is done on the field. If you want to set csutom validation message you can read from my other post, HTML5 : custom validation message

ReactJS : lazy loading large libraries

2019-11-07T00:05:00+05:30

We tend to use different external libraries for various purposes. The size of those libraries varies from small/medium/large. What happens when you want to use a large library only for a particular route?

It doesn’t make any sense to load that library along with the initial bundle or with the vendor. Such large libraries are needed only when a user navigates to that particular route.

This blog post will discuss how we can achieve this in a ReactJS application

Image by Stijn Swinnen

For this blog post, let’s take the highcharts as the heavy library.

Without Lazy load

If you add basic highcharts it will be ~150KB (gzipped). So without lazyload, you will be shipping this 150KB in the main bundle itself. You can see this in action on now.sh and code is on github.

In this, we wrote Chart component which will be used for any highcharts usage in the project. This component is already set with default options needed for the Charts for the whole project.

// Chart.jsx
import React from 'react';

import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import noDataToDisplay from 'highcharts/modules/no-data-to-display';

noDataToDisplay(Highcharts);

class Chart extends React.Component {
  getDefaultOptions() {
    return {
      credits: {
        enabled: false
      },
      noData: {
        position: {
          x: 0,
          y: 0,
          align: 'center',
          verticalAlign: 'middle'
        }
      }
    };
  }
  render() {
    const options = {
      ...this.getDefaultOptions(),
      ...this.props.options
    };
    return <HighchartsReact highcharts={Highcharts} options={options} />;
  }
}

export default Chart;

Now when we need a PieChart we will use this Chart component and override the options.

// PieChart.jsx
import React from 'react';

import Chart from './Chart';

class PieChart extends React.Component {
  getOptions = () => {
    return {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Browser market shares in January, 2018'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [
        // data
      ]
    };
  };

  render() {
    return <Chart options={this.getOptions()} />;
  }
}

export default PieChart;

And when you look into the network tab the whole bundle is downloaded even though it is not required.

With Lazy load

Next we will be converting this to lazyload the chart component. To do this we don’t have to change anything in Chart.jsx.

The only change will be in PieChart.jsx

// PieChart.jsx
import React from "react";

-import Chart from "./Chart";
+const Chart = React.lazy(() =>
+  import(/* webpackChunkName: 'chart' */ "./Chart")
+);

+const Loader = () => {
+  return <div>Loading...</div>;
+};

class PieChart extends React.Component {
  getOptions = () => {
    return {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: "pie"
      },
      title: {
        text: "Browser market shares in January, 2018"
      },
      tooltip: {
        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: "pointer",
          dataLabels: {
            enabled: true,
            format: "<b>{point.name}</b>: {point.percentage:.1f} %"
          }
        }
      },
      series: [
        // data 
      ]
    };
  };

  render() {
-   return <Chart options={this.getOptions()} />;
+   return (
+        <React.Suspense fallback={<Loader />}>
+            <Chart options={this.getOptions()} />;
+        </React.Suspense>
+    );
  }
}

export default PieChart;

The two main changes in the above code is

React.lazy to load the dynamic import of Chart.jsx
React.Suspense to load and render the component. while it loads library it will show the <loader/> given in fallback option.

Lets see the different in the bundle sizes and how they gets loaded.

In the network tab when we are in Home route it loads only initial bundle.

And then we me navigates to Chart route it loads the highcharts the heavy library.

See this in action on now.sh and code is on github.

Android : Different application id for debug and production

2019-10-01T02:00:00+05:30

Last couple of months in my free time I was working on a small Android app by learning react native. This is my first experience of developing apps for mobiles.

When I started one thing I wanted to set up in the initial stage itself was the different application id for debug and production apks. This will help me have both builds installed at the same time. Also, it will make sure the even while development or testing, I can still use the production version on my phone.

Along with application id, I want different titles for apps to differentiate those apps on Home. The debug version will have title Reminder β and production will have Reminder (without β).

Setting application id

First, we can look into setting application id. The application id for debug will include <app name>-debug.

In the android/app/build.gradle there will be release config inside the buildTypes

/** android/app/build.gradle **/
android {
  /** other configs **/

  buildTypes {
    release {
      externalNativeBuild {
        cmake {
          arguments "-DANDROID_PACKAGE_NAME=${android.defaultConfig.applicationId}"
        }
      }
      minifyEnabled enableProguardInReleaseBuilds
      proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
  }
}

We need to add debug config along with release with custom applicationIdSuffix & versionNameSuffix. Then append the versionNameSuffix to the package name argument.

The sample updated config is given below.

/** android/app/build.gradle **/
android {
  /** other configs **/

  buildTypes {
    release {
      externalNativeBuild {
        cmake {
          arguments "-DANDROID_PACKAGE_NAME=${android.defaultConfig.applicationId}"
        }
      }
      minifyEnabled enableProguardInReleaseBuilds
      proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
+   debug {
+     applicationIdSuffix '.debug'
+     versionNameSuffix "-debug"
+     externalNativeBuild {
+       cmake {
+         arguments "-DANDROID_PACKAGE_NAME=${android.defaultConfig.applicationId}${applicationIdSuffix}"
+       }
+     }
+   }
  }
}

Setting title

To set the different titles for debug and production, we need to update the values in string.xml. For production, the title will be picked from main/res/values/string.xml

<resources>
    <string name="app_name">Reminder</string>
</resources>

and for debug the title will be picked from debug/res/values/string.xml

<resources>
    <string name="app_name">Reminder β</string>
</resources>

Install wireguard on FireTV

2019-09-27T00:00:00+05:30

WireGuard is a moden next gen VPN which utilizes cryptography. Since Wireguard is not available on FireTV’s app store, we have to sideload the app using adb.

Enable ADB on FireTV.

First step to side load the app to FireTv is to enable ADB debugging and Apps from unknown sources.

To do this Goto Settings -> My FireTV -> Developer Options

Choose Option My FireTV from Settings

Choose Developer Options

Turn on ADB debugging and Apps from unknown sources

Download Wireguard apk from F-Droid

Next we can download the wireguard apk from F-droid to your system. Once the download is finished let’s connect the system to our FireTV.

adb connect <firetv ip>:5555

Once the connection is success, we can install the apk.

adb install </path/to/wireguard.apk>

Done. once the installtion is success you can see wireguard among the other app on fireTV. Open the wireguard app on fireTV to configure the VPN.

Owning the content

2019-09-23T00:00:00+05:30

Photo by Kelli McClintock on Unsplash.

I started this blog 10 years back on Blogspot. Now there are even more platforms available to host your blogs. The negative effect of using those platforms for the easiness and engagement is, we as a user is losing control over our content.

Internet is made up of hyperlinks. The hyperlinks going dead is not a good sign for a healthy internet. The platforms which you use for your blog can be acquired, shut down in the future. One of the best examples in the past is posterous which got shutdown after acquired by twitter. The users of Posterous are forced to move to another platform. They were able to export content but they have to start from scratch. Those who all used examplespace.posterous.com have lost the domain, SEO and indexes in various search engines which took years to build.

Have a personal domain

The incident like shutting down Posterous, made me realize how important is to have a personal domain. So when people ask me advice on starting personal webpages pr a blog, I always recommend them to buy a domain. The users who had personal domains and used Posterous only as a CMS are not much impacted with Posterous shutdown. They imported their content to new CMS and everything is fine. They never lost the SEO, backlinks or search engine indexes.

Avoid the walled gardens

Many of my friends write stories/essays on social platforms like facebook/medium/LinkedIn. The major reason for those is engagement. But when they send me the link to their content those platforms will either put a giant sign in/signup popup. Sometimes these popups can’t be even removed. The best part is, the author of content can’t decide on these popups. If you are using social platforms, you are at mercy of these platforms. They can always decide on

whether content should be available to the public or not
what ads to show nearby it
should annoy the reader with the sign-in option?
should this content be blocked?

As an author, I prefer to have control over those items than the platform. I prefer to keep the content open to all, No ads, No popups.

Because of this I always ask my friends to have a backup/copy of the article they write in social medium on their blog with a personal domain.

Conclusion

If you are planning to start a blog or personal webpage, always have it on your domain. Have a backup of the content on your domain if you write on social media platforms.

Take back the control over your content.

Being a responsible product dev

2019-09-22T00:00:00+05:30

There are a lot of ways you can be a responsible developer. By responsibility, most devs will think of shipping on time with minimum bugs and compliant with business needs etc.

when devs get blinded with responsibility towards business needs, they forget/forced to forget their responsibility towards users.

Let me try to list down some major issues I have seen when I use different products.

To protect the privacy of users

Make sure not to break the app because third party analytics/chat box is not loaded.
If possible respect the DNT flag and not to load any tracker for those users.
Provide informed consent if any third party is recording the user session.
Don’t deny service to the user because they block some third-party trackers.
Don’t send user identifier info like email/phone etc to the third party services.
If its a blog, providing a text-only version for users who seek privacy

To give the better user experience

Use proper HTML semantics, at minimum use link instead of a button so the user can open in new tab.
Don’t deny the whole service because one of the optional permission is denied by the user.
Try to keep the filter states/page no. on URL, so when the user refreshes the page or navigates and come back, the user won’t lose the context.
Don’t change URL paths without setting a redirect from the old URL to the new one.

I understand many of them are not in control of devs. But I believe they can convince their product managers/business analysts to implement those one at a time without hurting business.

The danger of personalised feed

2019-08-11T00:00:00+05:30

Most of the social apps now come with features called personalised feed or personalised experience. They claim that they will provide personalised experience to each user differently as per their interest and people always buy it.

William White

Why the apps are giving you personalised feeds?

Because That’s where they are taking control of the things what you see or what you read. Nobody is gonna question them since what you see in your feed is seen by you only.

I prefer to have control over things what I see instead of giving control to the app. The moment you give away the control to the app, they can inject anything into your feed with a justification, it is personalised.

They will take this as an opportunity to learn and understand about you by asking more and more questions on your preferences and likes.

They provide options like Not Interested, to create a fake sense, you still have control over what you see. But in reality, the app decides what you see and what you should read. Whenever you mark each and everything Not Interested they are learning more about your preferences.

These learning can help them to categorize and feed in things accordingly.

How this help to unleash propaganda

Consider this app is helping people to unleash political propaganda,

They will inject items into your personalised feed to make sure you will see as per the propaganda people want you to see. They will do this to you until you start to see and think as they want.

To make this worse, it’s really difficult to investigate, the items you saw in personalised feed because they won’t leave any trace. Most time you see the updated items and there is no way to time travel to a particular date and time to see how the feed looked like in a given time.

Adding ads into this make things even worse, but more profitable for app business.

Recent Cambridge Analytica scandal is the same. Facebook played along with political powers to make sure their users will see and think what the candidates want to see and change their minds.

They were successful in unleash propaganda all over the world, even in India. They were partially successful in even changing your opinion political inclination, without even knowing you.

As long as you enjoy the so-called personalised feed, they will keep you enslaved.

Digital Slavery…

In search of a height adjustable standing desk

2019-08-02T00:00:00+05:30

I was searching for a height adjustable standing desk for my personal use. I searched online and went to some store and local vendors to see the demo.

What are the features I was looking for?

Electric/motor based
Table Top 5 feet x 2.5 feet
Preset memory (Good to have, not mandatory)
Flipper box with cable management (not mandatory)

What were the options available?

Feather lite

Feather lite is the first one I went to see the demo. They had both manual and electic. Personally, I felt it bit expensive and take 1 month to ship. Also they don’t offer any free home delivery. Different showrooms had different prices, so I recommend to take quotation from multiple showrooms.

  Features       | ❌ / ✅
---------------- |-----
 Price (Total)   | 51K-55K (Including GST)
---------------- |-----
 Electric        |  ✅
 Table Top       |  ✅
 Preset Memory   |  ❌
 Flipper box     |  ✅
 5 x 2.5 feet    |  ✅

They have only 2 options available in table top, either white or maple. On motor, Featherlite provide 1 year warrenty.

Feather lite Manual

Feather lite Electric

Rife

Rife sells the table without table top and you have to assemble youself with their guide. Since the vendor is from delhi, I couldn’t get any demo as they don’t have any showroom in Bangalore.

  Features       | ❌ / ✅
---------------- |-------
 Price (Total)   | 40K-46K (Including GST)
---------------- |-----
 Electric        |  ✅
 Table Top       |  ❌
 Preset Memory   |  ✅
 Flipper box     |  ❌
 5 x 2.5 feet    |  ✅

The interaction with customer care of Rife was not that pleasent. They will try to sell the programmable preset memory panel with extra charge even though there is simple control panel comes default with the frame. Rife also provide 1 year warrenty on motor.

Kufallo

Kuffallo is based in Bangalore & one of the low cost option available. I went and saw a demo in their office in JP Nagar. The major issues I saw with Kuffallo was the stability. When we adjust the height the table was trembling heavily. Also the demo I saw was 4 x 2 feet. Even we customize and put 5 x 2.5 feet table top there is high chance that it might go wrong.

  Features       | ❌ / ✅
---------------- |-----
 Electric        |  ✅
 Table Top       |  ✅
 Preset Memory   |  ❌
 Flipper box     |  ❌
 5 x 2.5 feet    |  ❌

Pepperfry

The last one I enquired was Pepperfry. Since this was sold by third party seller pepperfry didn’t had any item for demo in their showroom. Also they don’t do any customization of table top to the desired (5 x 2.5).

  Features       | ❌ / ✅
---------------- |----
 Electric        |  ✅
 Table Top       |  ✅
 Preset Memory   |  ❌
 Flipper box     |  ❌
 5 x 2.5 feet    |  ❌

Summary

For the quick comparison of feature and price this summary will help

  Features       | Featherlite |    Rife     |     Kuffullo  |    Pepperfry
---------------- |------------ | ----------- | ------------  | ----------------
 Frame           |     -       |   34K-36K   |       ~27K    |        -
 Table Top       |     -       |   2K-3K     |   2500 (5x2.5)|        -
 Extra           |     -       |   2400      |     NA        |        -
 Shipping        |     -       |   2000      |      -        |        -
 Total (inc. GST)|   ~51K-55K  |   ~43K-46K  |     ~24K      |      ~45K
 ----------------|------------ |------------ |---------------|-----------------
 Delivery        |   1 month   |   15days    |    15days     |    15days
 Assembly        |   Seller    |     DIY     |    Seller     |    Seller
 ----------------|------------ |------------ |---------------|-----------------
 Electric        |  ✅          |     ✅      |       ✅       |       ✅
 Table Top       |  ✅          |     ❌      |       ✅       |       ✅
 Preset Memory   |  ❌          |     ✅      |       ❌       |       ❌
 Flipper box     |  ✅          |     ❌      |       ❌       |       ❌
 5 x 2.5 feet    |  ✅          |     ✅      |       ❌       |       ❌

Conclusion

After a lot of confusion and searching I went with Rife. I choose the frame model ConSet 501-33 costed us ~43K (including GST). I got the table top from the local furniture shop in the range of ~2K-3K.

It’s almost a year I am using it and it works fine. The height adjustment is quite and smooth.

Rife in office

Rife in office (full view)

IMHO, Memory panel is not mandatory. Rife sales team will try to sell it even though the frame comes with simple panel. The memory panel is helpful if multiple people are using the standing desk and switch sit-stand position very frequently. It can save 3 different heights for 3 different people. It helps you to easily adjust the desk height always at the same number.

Memory panel

Simple control panel

Git: send patch using send-email & Gmail

2019-08-01T00:05:00+05:30

Github revolutionized how we contribute to Open Source. All my past contribution was through Github pull requests. As a break from that recently I got a opportunity to contribute a minor patch to wireguard-android which is outside of github ecosystem.

Since wireguard follows linux way of accepting patches via email I have to setup the git send-email command to send my patch. This post is about my learning on setting up git and use my Gmail to send the patch.

This post is based on Ubuntu and expect you already have git installed setup on your machine

Installation

We will get started with installing the required package from apt-get. git-email is the package we required to send the patch via email. We can install this by running the command below.

sudo apt-get install git-email

Once the installation is success we can configure the sendmail smtp configuration.

Configuration

Add the following to your global/local git config as per your need. Since I am planning to use this only for wireguard repo I added these into local config.

#.git/config
[sendemail]
    smtpserver = smtp.googlemail.com
    smtpencryption = tls
    smtpserverport = 587
    smtpuser = youremail@gmail.com

Please remember to replace youremail@gmail.com with your original email which you indent to use. That email should have post access to the email group to which we are sending the patch to.

Also remember not to use alias email if you are using gmail co-orporate account.

Create a application password on gmail

In Gmail instead of using your main password, you can generate different passwords for different application. Goto app passwords in your google account and generate the new password for git-email and keep it handy. I recommend using a password managers since you need this password everytime you need to send the patch.

Create the patch

Next let’s generate the patch files for all the commits which we need to send.

git format-patch --to=to@list.email.com HEAD~..HEAD

The above command will generate patch only for the latest commit. if you have to send patches of last 2 commits instead of HEAD~..HEAD use HEAD~2..HEAD.

This will create .patch file in the current directory. Please remember to update the --to with actual email address.

Send patch as email

Once we have the .patch files we can initiate send.

git send-email *.patch

This command will initial the send and will ask for the to email and cc emails before the gmail password prompt.

Please make sure to provide only the app password we generated a while ago.

Once the correct password is entered we will get the success message.

ELM : Fetching data with XHR

2019-05-07T00:05:00+05:30

This post will explain how to use elm/http package to fetch data using XHR requests in ELM applications. Since the reponse is from the outer world of ELM we need to decode JSON response before ELM can consume it. For the purpose of demo we will fetch posts from jsonplaceholder and render the list of titles from its /posts resource.

Setup Model

Lets start with defining model for the application. Our Post model will have id,title & body fields and main Model will contain the list of Posts the uiState to show the state of request and error to store the error message.

type UiState
    = Init
    | Loading
    | Success
    | Failure

type alias Post =
    { id : Int, title : String, body : String }


type alias Model =
    { posts : List Post, uiState : UiState, error : Maybe String }


initialModel : Model
initialModel =
    { posts = [], uiState = Init, error = Nothing }


init : ( Model, Cmd Msg )
init =
    ( initialModel, Cmd.none )

Once we have Modal and Post we can setup the decoders for these

List Decoder

postDecoder : Json.Decode.Decoder Post
postDecoder =
    Json.Decode.map3 Post
        (Json.Decode.field "id" Json.Decode.int)
        (Json.Decode.field "title" Json.Decode.string)
        (Json.Decode.field "body" Json.Decode.string)


postCollectionDecoder : Json.Decode.Decoder (List Post)
postCollectionDecoder =
    Json.Decode.map identity
        (Json.Decode.list postDecoder)

if your api is namespaced the collection with keys like data then the postCollectionDecoder will become

postCollectionDecoder : Json.Decode.Decoder (List Post)
postCollectionDecoder =
    Json.Decode.map identity
        (Json.Decode.field "data" (Json.Decode.list repoDecoder))

fetch & update

Next we need to setup the Msg and update function.

We will make use of two Msgs. InitFetchPosts will update the uiState to loading and initiate the fetch. Once the fetch result is available we will handle it with FetchPosts Msg.

type Msg
    = InitFetchPosts
    | FetchPosts (Result Http.Error (List Post))

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        InitFetchPosts ->
            ( { model | uiState = Loading }, fetchPosts )

        FetchPosts result ->
            case result of
                Ok posts ->
                    ( { model | uiState = Success, posts = posts }, Cmd.none )

                Err _ ->
                    ( { model | uiState = Failure, error = Just "Error" }, Cmd.none )

then use Http.get to fetch the data

fetchPosts : Cmd Msg
fetchPosts =
    Http.get
        { url = "https://jsonplaceholder.typicode.com/posts"
        , expect = Http.expectJson FetchPosts postCollectionDecoder
        }

we can initiate fetchPosts either on init using task or on a normal button click. For the purpose of this post let use a button to load the data we will be able to notice the Loading state switch to Success when data is received.

Rendering the view

In view we will have a button which will initiate the xhr request and the render the data as per the xhr status. Once the xhr is initiated we will show the text Loading... as the loading indicator and later change it to either error message or the list of titles as per the status of xhr request.

renderItem : Post -> Html Msg
renderItem post =
    li [] [ text post.title ]


renderData : Model -> Html Msg
renderData model =
    case model.uiState of
        Init ->
            span [] []

        Loading ->
            span [] [ text "Loading..." ]

        Success ->
            ul [] (List.map (\post -> renderItem post) model.posts)

        Failure ->
            case model.error of
                Just error ->
                    span [] [ text error ]

                Nothing ->
                    span [] []


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick InitFetchPosts ] [ text "Fetch Posts" ]
        , renderData model
        ]

The Running version is available on ellie-app.

Versions of Language/packages used in this post.

| Library/Language | Version |
| ---------------- |---------|
|      ELM         |  0.19.0 |
|   elm/http       |  2.0.0  |

Setting up dangerjs

2019-05-03T00:05:00+05:30

Ever felt like you are repeating the same comment over and over in many PR’s during the code review? Then this post is for you.

Even though this can’t be avoided 100%, you can automate some of these by offloading to dangerjs.

Introduction

If you never heard about dangerjs before, it’s a small tool which can run tasks against the changed files in a PR and add comment the problems. Comments can be of type warning, failure or message.

You can use this to automate the common code issues like

new package added to package.json but changes for package-lock.json or yarn.lock is missing
missing @flow in the new files
console.log which forgot to remove.

dangerjs can look for these kind of issues and alert the author of PR by a comment.

Installing

You can get started by installing dangerjs from npm.

npm install -D danger

setup

Once we have dangerjs installed we can setup by adding dangerfile.js to the root directory of the project.

// dangerfile.js
import {danger, warn} from "danger"


const changes = danger.git.modified_files.reduce((prev, filePath) => {
  if(!prev.package) {
    prev.package = filePath.includes("package.json");
  }
  if(!prev.lock) {
    prev.lock = filePath.includes("package-lock.json")
  }
  return prev;
}, {});

if (changes.package && !changes.lock) {
  const message = 'Changes were made to package.json, but not to package-lock.json';
  const idea = 'Perhaps you need to run `npm install`?';
  warn(`${message} - <i>${idea}</i>`);
}

The above dangerfile will look for the lock file changes when package.json is changed. if it find the lock changes are missing. it will add the warning.

locally testing the setup

To verify our danger setup is working you can run

npx danger local

danger local command have limitations when working with danger.github DSL. danger.github will be null when running danger local hence you should add necessary condition.

Setup CI

All these won’t benefit your team unless you add this into your CI. For that, first Goto Github Settings and generate new Github Access Token. Make sure you gave repo scope to while creating.

if your organization already have a bot account you can generate token for that account and use it.

once the token is generated copy and add it to your CI you as environment variable named DANGER_GITHUB_API_TOKEN.

then add npx danger ci to the steps to execute. You can optionally add danger ci to the npm scripts as well.

Now when is PR is open and your CI is triggered danger js will verify the changes first and if there is any issue it will leave a comment there.

Plugins

To make it easier to configure, dangerjs support plugins and there are already some plugins available for some common tasks. You can search for plugins on NPM using the keyword: danger-plugin

Jest : why we stopped snapshot tests

2019-04-22T00:05:00+05:30

When jest introduced snapshot tests we were very eager to try out. we were using snapshot for most of the components and soon enough we have to make a decision that we no longer do snapshot tests.

The main reason for such a decision was

1. Test failure due to external dependencies.

Our tests started failing due to changes in external dependencies. The external ui component updated the css class naming convention and all our component snapshot started failing, then we have to update all failing snapshots and in another release the same library rollback the changes/made some new changes (don ‘t remember exactly what was the it) and again the snapshots started failing.

This made it very difficult to maintain the snapshot tests.

2. Devs update the snapshot without verify

Since jest gave very easy option to update the snapshot using -u option, devs started using it regularly and keep updating the snapshort without verifing whether the changes are relevent or by mistake.

This become increasingly difficult to do the code review.

3. Extra effort to mock current date/time

We required to put extra effort & time to mock the methods which generate current date and time. The best part is this test will pass while we develop and test and start failing from next day only. by that time we might have already moved into new task.

Photo credit: John Matychuk

Vue v/s React

2019-04-18T00:05:00+05:30

Disclaimer

This post not a comparision between Vue & React features.

This doesn’t recommend which one to use in your next project.

This was expected to publish in November 2018, but couldn’t. Publishing this now just for records.

October 2018 when I started my new consulting work, the initial days itself I was pulled into the debate of Vue v/s React. 2 years before we have done some react for the same company. But this time when I went to this company most of the projects where using Vue. I took up this work thinking I will be working with Vue, but I didn’t know that there where some discussion happening on switching back to React. Soon I became part of this heated debate.

Since I am coming from the React I am slightly biased to React but tried to keep open to ideas and thoughts around Vue. Most of the discussions went like both parties try to list the features out of React/Vue and this didn’t yield any result.

By this time I got a chance to take a look into some vue projects in the company and got some overview how they are using it.

Almost in first week of Nov 2018 when we had another discussion and same feature listing started, I intervened and made them stop and asked 2 questions.

Why we moved to Vue from React?
Why are we again considering moving to React?

for both these I didn’t got any satisfactory explanation other than Vue is beginner friendly and other normal arguments.

Long story short, we decided to go with React. means all the upcoming projects will be done in React but will maintain the Vue without rewriting. In the rest of the blog post I will try to explain why we made this decision.

1. Used by large corporates

Many famous and daily used web application where using React for Eg.

Facebook (of course the creator)
Slack
Reddit
Twitter
Microsoft
Flipkart
Paypal

Where on the side of Vue

Gitlab
Ola
Zoomcar

can be more but didn’t see much major players. Also one of my friend’s team started moving to React from Vue to various reasons similar to this.

2. Better tooling and support for modules

Since React is used by large corporations and they contribute back in the form of some useful modules Modules like

downshift, react-testing-library by Kent C Dodds from Paypal
React router, reach router by React Training

Support for the CSS-in-JS libraries like glamour, emotion etc.

When it comes to tooling, babel officially supports it.

When we look into vue, I couldn’t see much modules which are community supported and continued maintenance other than official Vue components. So we concluded the availability and community support of modules is much better in react ecosystem than Vue.

3. Better community in town

Since we are in Bangalore the local React community is just awesome. Each meetup is with ~150 attendees (this is not the RSVP count) with great talks. Even there is multiple React community and meetups happening, where as for vue very few.

Even a general Js meetup will have at least one talk on react.

4. Future is promising

When this discussion was happening, hooks were not released and Suspense, Async rendering, React.lazy etc where just released. All these new features were towards the productivity of the consumers. Also react already had RFC process. On Vue, on future mostly it was like rewrite into Typescript which was not adding any advantage for consumers. No new special features where not in queue and some rumours where like Vue will adopt hooks in future. Now Vue started with RFC process.

Conclusion

It’s not an easy task to evaluate 2 similar frameworks/libraries especially for a corporate. This decision is going to change a lot of things there. Right or wrong they have to live with this decision for a long time. So this should be made after stepping out of the fan zone and tech. We have to even think of hiring, expanding the team, long time support from corporate and community.

This post is not against Vue, just a document on how we took this very hard decision to go ahead with React for all future projects. By this post I am trying to convey you to use React for next project rather it might help you in your decision making when it comes to coorporate environment.

Photo credit: Jyotirmoy Gupta

Revath S Kumar

hide your dotenv secrets from LLMs using pass

the bash script

Using the bash script

update semantic version using bash script

The bash script

Using new version number in subsequent steps

zig : pass version from build.zig.zon file to runtime

use addOptions in build script

import build_options in main

parsing the version number

publish npm module with provenance statement

Generate npm granular access token

Github Action

opt-out telemetry from cli tools

Usage

1. Download

2. Reload the shell

Prisma : Extending model with custom methods

Extending Prisma Client model object

css: safe alignment of flex-items

Safe alignment

using with tailwindcss

PWA : receive file or text via native share

Updates to web manifest

Updates to web service worker

Caveats

webassembly - passing string between zig and javascript

Passing string from wasm to JS

Passing string from JS to wasm

How to detect different JavaScript runtimes

Deno : url.domainToASCII behaves differently from nodejs

JavaScript : understanding string normalize

Composed & decomposed forms

NFC

NFD

NFKC

NFKD

Conclusion

gjs : How to read from stdin in a gtk application

Using read_bytes

Using MemoryOutputStream.splice_async

writing gjs gtk app in typescript

Install dependencies

Setup typescript project

Setup build

Bootstrap using create-gtk

CSS: typesafe variables using @property

Git: tips I follow for better git commits

TypeScript - return and arguments type based on enum

Arguments Types Based on Enum

Return Types Based on Enum

jest : module mocking in es modules

Set up jest for ESM

Mocking ES Modules

In TypeScript

zig : basic progress indicator in terminal

Gren : using ANSI escape codes

Github : override language definitions

Using .gitattributes file

npm run fuzzy auto-complete with preview using fzf

Helpers for sub-command

fzf complete NPM run

curl: fuzzy search options using fzf

React : Testing file upload using testing library

Select accepted file type

Select unaccepted file type

Select multiple files

TypeScript: add types for axios response data and error data

Add type for response data

Add type for error data

Jest : custom matcher for exceptions

Reviewdog : configure reviewdog for eslint using github actions

JavaScript : String.length is not the count of characters

Using spread operator

GitHub action to deploy review apps to surge

Alfred : workflow to simulate keyboard input

1. Create a new workflow

2. Add new universal action

3. Add action to run AppleScript

use `addOptions` in build script

import `build_options` in main

Using `.gitattributes` file

Install & setup `mkcert`

Accept `children`