Forem: Muhammad Sifat Hossain

How a Keyboard Mod Led Me to Vim (And Why I Never Went Back)

Muhammad Sifat Hossain — Tue, 11 Feb 2025 18:52:14 +0000

About four years ago, when I was just starting out with programming and web development, I quickly realized that moving my fingers off the home row to press the arrow keys was super inefficient and annoying.

I thought, “If only I could press the arrow keys with my thumbs, that would be way better.” Around that time, I had also started tinkering with electronics, so I decided to hack my keyboard to bring the arrow keys closer to my thumbs.

Hacking My Keyboard

When I opened up my keyboard, I was greeted with a maze of circuit traces on a membrane sheet.

I thought, “Man, this is too complicated, and I really don’t want to break my keyboard.” I was about to give up when an idea hit me—I took a photo of the membrane sheet and traced the lines connected to the arrow keys in a photo editor. Once I figured out which pins triggered the arrow keys, I tested them with an alligator clip to make sure they worked.

Connecting Wires to the Pins

As you can see in the image, there’s a metal bar screwed over the pins to keep the membrane circuit connected to the controller board, so soldering wasn’t an option. Luckily, I had some aluminum foil lying around, so I made a few flexible ribbons, attached wires to them, and after some trial and error, I managed to put them on the right pins. I then screwed the metal cover tightly over the membrane sheet and secured everything with hot glue.

Adding the Arrow Keys

I took four push switches and super-glued them to the side of my keyboard where my thumbs could reach. Then, I grabbed four keycaps from my broken laptop keyboard and super-glued them on top of the switches.

The final mapping looked like this:

[Home] [PgUp] [PgDn] [End]
[ ←  ] [ ↑  ] [ ↓  ] [ → ]

It took about four and a half hours, but everything worked perfectly. Life was good for a few months 😋.

Replacing My Keyboard and Discovering Vim

A few months later, I had to replace my keyboard because the stiff keys on my old keyboard (which one of my teachers bought in 2010, I believe) were making my fingers ache. Sadly, modding the new one wasn’t an option, and I really missed my thumb arrow keys.

So, I searched (with my then-broken English, which is still the case TBH 🙄):

typing arrow keys while coding is becoming really tiresome

That’s when I stumbled upon a Reddit comment that said something like:

That’s why I install the Vim plugin whenever I install VSCode.

Quick Side Note: The word "Vim" sounded familiar. Two weeks earlier, I had switched from Windows to Ubuntu, and while installing some applications in the terminal (following a guide), it opened a text file with "VIM" written in the terminal title bar. I couldn’t figure out how to close it, so I just closed the whole terminal 😂.

I went straight to YouTube to learn more about Vim, and after watching some videos, I thought, “This is a game-changer! How did I not know about this?” I picked up the basics in 2–3 days, and after that, there was no going back.

Switching to Vim from VSCode

I had convinced myself that I needed Vim to code. If someone had forced me to use anything else, I would have quit programming and become a farmer. I tried the Vim plugin in VSCode, but it just wasn’t as sleek and responsive as Vim. Plus, with Vim, I never had to leave my terminal!

There was just one problem—setting up autocompletion and LSP as a complete beginner was a nightmare. I barely knew JavaScript, let alone Vimscript. Following tutorials left me with a somewhat working setup, but it had a bunch of annoying bugs. I don’t remember all of them, but one was that if I scrolled the mouse wheel in insert mode, it would randomly insert a bunch of [[As or something weird like that.

Trying to fix these bugs by Googling and watching random tutorials became so overwhelming that I almost started crying out to Allah (not kidding!) because I really didn’t want to go back to VSCode.

Finally, I found Ben Awad’s How to Configure Vim like VSCode video, switched to Neovim, and followed the tutorial. That solved a lot of my issues.

Current State

Since then, I’ve tweaked my config a lot, switched from Vimscript to Lua, and made my setup truly mine. I use Vim for work (obviously), taking notes, doing assignments with Markdown and KaTeX, and any quick and dirty text editing.

I’m still using the old CoC plugin in 2025 and haven’t switched to Lua-based LSPs yet because some plugins I rely on (like coc-spell-check, coc-explorer, and coc-snippets) don’t have perfect alternatives. In early 2023, I spent over a week trying to switch to modern plugins, but I ran into a bunch of issues that weren’t there with CoC:

File Explorer Issues

Doesn’t allow me to go outside the root directory.
Whenever I open a file outside the project root, it doesn’t react to the new path.
I’m heavily accustomed to my previous plugin’s keybindings.

Spell Checker Issues

Everyone online recommended using Neovim’s built-in spell checker, but it highlights words like fetchUsers and MAX_COUNT as incorrect.
It doesn’t offer quick fixes for misspelled words in variable or function names with different naming conventions.

Snippets Issues

I'm very used to using UltiSnips with coc-snippets.
Most people now use LuaSnip, which requires defining snippets in Lua. To me, it felt unnecessarily complex for what I needed at the time.
UltiSnips feels much simpler, as snippets are defined in an easy-to-read syntax and stored in a plain text file.

I know these issues can be fixed, but I just haven’t had the time to switch yet.

Looking back, discovering Vim so early in my programming journey was one of the best things that ever happened. I’m super grateful to the creators of Vi, Vim, and the contributors of Neovim for their amazing work.

Thanks for reading this far—I hope you found it interesting! I'd love to hear your thoughts, so feel free to drop a comment or ask any questions.

How I learned about JavaScript Proxy and why it's so cool!

Muhammad Sifat Hossain — Wed, 10 May 2023 18:12:45 +0000

About two years ago, when I completed my first full-stack development course, I wanted to create my own web app. It was supposed to be a simple movie searching app.

I managed to gather some movie data from one of the MongoDB sample databases called mflix. I prepared my SQL database with those sample movies and was working on the POST endpoint responsible for creating new movies.

The obvious next task was validation, and the movie schema was fairly complex including multiple nested objects and arrays. I learned a little bit about Joi, a validation library, from that course, but I didn't know enough to write a validation schema for the movie object on my own.

So, I went to the Joi documentation site and started reading it from top to bottom. As a beginner who wasn't used to reading documentation back then, I found it super boring and confusing. I told myself: dammit, I'll create my own validation library!

If you've never worked with a validation library before then let me give you a brief introduction. Suppose, you have an object with the following schema:

interface User {
  name: string;
  email: string;
  birth_year: number;
}

Then with Joi, you'll write a validation schema like the following:

const Joi = require("joi");

const schema = Joi.object({
  name: Joi.string().alphanum().min(3).max(30).required(),

  email: Joi.string().email({
    minDomainSegments: 2,
    tlds: { allow: ["com", "net"] },
  }),

  birth_year: Joi.number().integer().min(1900).max(2013),
});

schema.validate({ username: "abc", birth_year: 1994 });
// -> { value: { username: 'abc', birth_year: 1994 } }

schema.validate({});
// -> { value: {}, error: '"username" is required' }

It's much more clean and scalable then using raw if/else statements. With that out of the way, let's go back to building my validation library from scratch.

Let's look closely at the name property from the User object schema.

const nameSchema = Joi.string().alphanum().min(3).max(30).required();

I was a bit worried at first, because I didn't know how to implement this method chaining. But it turned out to be very simple; we just need to return this from every method.

class StringSchemaRegister {
  min(val) {
    return this;
  }

  max(val) {
    return this;
  }
}

function string() {
  return new StringSchemaRegister();
}

const schema = string().min(2).max(3);

Now we've got to store these min and max values in an array with proper order. Let's modify the StringSchemaRegister class.

const getter_key = Symbol();

class StringSchemaRegister {
  #register = [];

  min(value) {
    const schema = { name: "min", value };
    this.#assertInteger(schema);
    this.#register.push(schema);
    return this;
  }

  max(value) {
    const schema = { name: "max", value };
    this.#assertInteger(schema);
    this.#register.push(schema);
    return this;
  }

  /*
    I'm using this secret symbol key to access the register array because I want
    to keep it hidden from the end user.
  */
  [getter_key]() {
    // cloning the #register array. @TODO use lodash deepClone utility
    return this.#register.map((obj) => ({ ...obj }));
  }

  #assertInteger({ value, name }) {
    if (!Number.isInteger(value))
      throw new Error(`The ${name} value must be an integer.`);
  }
}

function string() {
  return new StringSchemaRegister();
}

const schema = string().min(2).max(3);

console.log(schema[getter_key]());
// [
//   { name: "min", value: 2 },
//   { name: "max", value: 3 },
// ]

Do you see a problem here? I've got to manually create every method and validate their arguments. Oh man! This args validation became so tiresome that I ended up creating another small validation library called handy-types (what's wrong with me 🤦‍♂️?!).

Whatever, moving on, I realized that if I can come up with a schema like the following and somehow can programmatically create the StringSchemaRegister class, it would be great.

// pardon my terrible variable naming
const SchemaOfStringRegisterSchema = {
  min: { args: ["integer"] },
  max: { args: ["integer"] },
  label: {args: ["non_empty_string"]}
  alphanum: {}, // no args means it's a boolean flag
};

Ok, with this strategy, I faced another problem.

const schema = string().min(5);
//                       ^-----> How would I know that `min` is being accessed
//                               here?

Though now I know how to solve this problem programmatically (without Proxy), at the time I didn’t have a clue. I tried to search for "how to hook JS object property access". After a lot of searching, I landed on an unanswered StackOverflow question.

So I kind of gave up on this project because I’m too lazy to write all the validation methods manually. Until one day, I was watching a LiveOverflow video and saw that guy using something called JavaScript Proxy to spy on an object and log what properties were being accessed. I silently screamed Eureka! and quickly searched on MDN to learn about the topic. It was the exact solution to my problem that I had been searching for weeks.

Allow me to introduce the JavaScript Proxy. A proxy is an object that controls access to another object, called the subject.

To create a Proxy we need two parameters:

target: the original object which you want to proxy
handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.

Example:

const target = { value: "abc" };

const handler = {
  get(target, property, receiver) {
    console.log(target, property, receiver);
    return "default value";
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.name);
// Logs:
// { value: 'abc' } name { value: 'abc' }
// default value

console.log(proxy.value);
// Logs:
// { value: 'abc' } value { value: 'abc' }
// default value

Here, the get method in the handler is called a trap method, which intercepts all property access operations and returns whatever value we want. I invite you to read the JS Proxy documentation.

Armed with this powerful knowledge, I went back to my validation project and replaced the StringSchemaRegister class with the following string function:

const getter_key = Symbol();

const SchemaOfStringRegisterSchema = {
  alphanum: { args: [] },
  max: { args: ["integer"] },
  min: { args: ["integer"] },
  label: { args: ["non_empty_string"] },
};

function string() {
  const proxy = new Proxy({}, { get });
  const register = [];

  function get(_, property) {
    if (property === getter_key) return register.map((obj) => ({ ...obj }));
    else if (!(property in SchemaOfStringRegisterSchema)) return;

    const propSchema = SchemaOfStringRegisterSchema[property];

    return (...args) => {
      // @TODO validate args before pushing to the register

      register.push({
        name: property,
        args: args.slice(0, propSchema.args.length),
      });

      return proxy;
    };
  }

  return proxy;
}

const schema = string().min(2).max(5).alphanum().label("Name");

console.log(schema[getter_key]);
// [
//   { name: 'min', args: [ 2 ] },
//   { name: 'max', args: [ 5 ] },
//   { name: 'alphanum', args: [] },
//   { name: 'label', args: [ 'Name' ] }
// ]

After this, everything was straightforward. I did complete the project and build a crappier version of Joi. Ironically, while building it, I had to read the documentation of multiple validation libraries (Joi, Yup, Zod, etc.) to take inspiration and learn about common validator features—the very thing I was trying to avoid in the first place!

I'm currently working on the second version of my validation library. It'll be similar to Zod, with static type inference but with some very cool and unique features.

Thank you for reading this far. I hope you found this post helpful and informative.

The cover image is taken from Unsplash.

I created an app to visualize word unscrambling algorithm

Muhammad Sifat Hossain — Fri, 24 Feb 2023 16:39:41 +0000

Recently, I've built a word unscrambler app and thought it would be cool to visualize what the algorithm is doing underneath.

So, I've created an app to do just that.

The algorithm uses the Trie data structure to look up possible words from the given letters.

Visit the app from here.

I would love to know your thoughts about it.

Please support the author of core-js

Muhammad Sifat Hossain — Tue, 14 Feb 2023 18:16:58 +0000

If you are a frontend developer then there is a high chance that you're using the core-js library without even knowing about it. It provides pollyfills for modern JavaScript features so that you can use it with being concerned about vendor supports. Fifty two percent of world's top 1000 websites are dependent on it.

Unfortunately, this opensource tool that we take for granted came at real cost. But, it is really heart breaking how the open source community treated Denis Pushkarev for his contribution to the world. I believe we as developers should know about this kind of people and stand by their sides. Because they are literally carrying the digital world on their shoulders.

Please read Denis' post on official core-js Github repository.

Techland - an e-commerce app

Muhammad Sifat Hossain — Thu, 08 Dec 2022 23:18:52 +0000

What I built

Techland is an online e-commerce store where users can list, search and buy computer components.

Category Submission: Search No More

App Link

Techland

Preview

Homepage

The homepage consists of featured categories and products.

Products Page

Clicking on a category or the Products link on the navigation bar takes you to the products page. It shows all the products or specific products from a selected category and its sub-categories.

Individual Product Page

Clicking on a product takes you to the single product page to show details and related products

Search Bar

Clicking the search bar opens a search modal. It can provide real-time auto completions.

Here we can select a suggestion or press Enter to see the full results.

Link to Source Code

Backend

Frontend

Permissive License: MIT

Background

Honestly, this is my first full-stack application and it doesn't do anything extra-ordinary. I've always wanted to build one (for my portfolio) and have been taking few courses on Mongodb University. Finally this hacakthon gave me a the right opportunity to challenge myself and here I'm writing this post at 4:40am in the morning.

How I built it

This whole app is centered around searching, filtering and fetching product data from the database in the most convenient form. So before we start we need to know about the shape of our products and its category.

Product Category Interface

interface CategoryInterface {
  _id: string;
  hash: string;
  name: string;
  createdAt: number;
  isDeleted: boolean;
  imageId: string | null;
  parentId: string | null;
  description: string | null;
}

Product Interface

interface ProductImage {
  id: string;
  isMain: boolean;
}

interface ProductBrand {
  id: string;
  name: string;
}

interface CommonProductFields {
  _id: string;
  name: string;
  price: number;
  createdAt: number;
  priceUnit: string;
  categoryId: string;
  brand: ProductBrand;
  description: string;
  images: ProductImage[];
  lastModifiedAt: number;
  shortDescriptions: string[];
  specifications: Record<string, Record<string, string>>;
}

Full-text search

For full text search I'm using the name, brand.name, shortDescriptins and description fields. At first, I was a bit worried about the description field, because it contains HTML. But, luckily after reading a lot of documentation I found that I can create a custom text analyzer to strip out all the html before indexing.

Auto-completion

For auto-completion I'm only using only the name field.

Similar Products

I actually didn't know that MongodBD can do this. But I found a search stage called moreLikeThis that can compare text based on search index. So, guess what? I've implemented finding similar products without using fancy AI. For this query I've used the categoryId and specifications field to find similar items.

Here is my atlas search index:

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "brand.name": { "type": "string", "analyzer": "lucene.keyword" },
      "categoryId": { "type": "string", "analyzer": "lucene.keyword" },
      "name": [
        {
          "type": "autocomplete",
          "foldDiacritics": false,
          "tokenization": "edgeGram",
          "analyzer": "lucene.standard"
        },
        { "type": "string", "analyzer": "lucene.standard" }
      ],
      "description": {
        "type": "string",
        "analyzer": "productDescriptionAnalyzer"
      },
      "shortDescriptions": { "type": "string", "analyzer": "lucene.standard" },
      "specifications": { "dynamic": true, "type": "document" }
    }
  },
  "analyzers": [
    {
      "name": "productDescriptionAnalyzer",
      "charFilters": [{ "type": "htmlStrip" }],
      "tokenizer": { "type": "standard" },
      "tokenFilters": [
        { "type": "lowercase" },
        { "type": "snowballStemming", "stemmerName": "english" },
        {
          "type": "stopword",
          "tokens": [
            "a",
            "i",
            "am",
            "an",
            "as",
            "at",
            "be",
            "by",
            "do",
            "he",
            "if",
            "in",
            "is",
            "it",
            "me",
            "no",
            "of",
            "on",
            "or",
            "so",
            "to",
            "up",
            "we",
            "all",
            "and",
            "are",
            "for",
            "has",
            "her",
            "his",
            "off",
            "our",
            "out",
            "the",
            "you",
            "over",
            "that",
            "this",
            "with",
            "your",
            "other"
          ]
        }
      ]
    }
  ]
}

Finding Products by `categoryId`.

This on was a bit difficult, because categories are hierarchical. Example:

Components
1. MOBO
2. CPU
3. RAM
Accessories
1. Keyboard
2. Mouse
3. Headphone

So, if I'm listing products form the Components category then I should also list all products from its sub-categories. Glad, the $graphLookup stage solved the problem.

There is so much that I want to describe but sadly, I don't have much time left. I wanted to make a video explanation but can't do it right now.

I'll try to add some documentation in the docs folder of my backend app.

Tech-stack

Backend

Node.js
Express
MongoDb

Frontend

React

Conclusion

Lastly, I want to say thanks to the MongodDb team for organizing this beautiful event. I'm especially grateful for the free courses provided by the MongoDb University. I've learned almost everything I know about Mongodb from those courses. Thank you for reading the post 💝.

I made an Express-like framework for IPC communication

Muhammad Sifat Hossain — Tue, 08 Nov 2022 06:57:47 +0000

For the past two months, I've been developing a CLI (Command Line Interface)
Pomodoro timer and Todo application with Node.js. It will also have a TUI (Text
User Interface) to show statistics with various graphs and charts.

The main idea is: It should be able to create countdown timers and when a timer
finishes it'll give an alarm to remind me to take a break from work. Beside
that, it'll keep logs of my work sessions to show various stats.

It has the following architecture:

+-----------+  +--------+  +---------+
|DB (Sqlite)|  | Timer  |  | Speaker |
+-----------+  +--------+  +---------+
             \     |      /
              \    |     /
             +-----------+
             |   Server  |
             +-----------+
              |^      |^
              ||      ||
              v|      v|
           +-----+  +-----+
           | CLI |  | TUI |
           +-----+  +-----+

The Server runs in the background as a service. The CLI and the TUI
communicates with the server over the IPC (TCP over Unix domain
socket or Windows Named Pipe) protocol. The server also needs to able to
broadcast data to it's client.

Though, I can just use a raw socket server with net.createServer to do this
communication but it gets a little complicated after a while. Just as you
wouldn't use http.createServer instead of a framework like Express, I
couldn't go further with this approach.

So, I decided to create my own IPC server framework (as a fun challenge) with
two goals in mind:

Request handling feature like Express
Data broadcasting to multiple clients

Alhamdulillah (praise be to God) after two weeks of work today I have published
the framework on npm. I named it Express-IPC.

See it on GitHub and NPM.

Example usages:

server.js

const { Server } = require("express-ipc");

const socketPath = "./pipe";
const server = new Server();

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Alexa" },
];

server.get("/users/:id", ({ req, res }) => {
  const id = Number(req.params.id);
  const user = users.find((user) => user.id === id);

  if (user) res.send(user);
  else res.send({ message: `No user found with id: ${id}` }, { isError: true });
});

server.listen({
  path: socketPath,
  deleteSocketBeforeListening: true,
  callback() {
    console.log(`Server running on socket: ${server.socketPath}`);
  },
});

client.js

const { Client } = require("express-ipc");
const socketPath = "./pipe";

main();

async function main() {
  const client = new Client({ path: socketPath });

  try {
    const response = await client.get("/users/1");
    console.log(response);
  } catch (ex) {
    console.log(ex);
  }

  client.close();
}

The toughest part was the request routing algorithm.

Sorry, it's too big to fit here and Dev.to doesn't support SVG files. I
tried to embed the flowchart here but it seems like, Dev.to neither supports
Mermaid nor can load my GitHub gist
about the flowchart. See the full chart
here.

Alhamdulillah, I was able to solve it after making a flowchart of the algorithm.
Honestly, It was super boring and took almost a day for me to solve.

As the server framework is completed, now it times for me to go back and
integrate it into my Pomodoro application.

I would love to hear your thoughts about this framework. If you have any
suggestion or feedback please let me know in the comment section 💝.

Credits: The background image is taken from Unsplash

I made a library to print object as a tree structure like the unix tree command

Muhammad Sifat Hossain — Sat, 15 Oct 2022 15:55:11 +0000

I'm currently working on a project where I have some hierarchical data that need's to be printed in the console as a tree structure.

At first, I thought let me see if it's available on npm. But before going to npm I told myself: "Why don't I try it myself first?". So I started working on it and by the time I finished it I realized that it's 2 am in the morning 😅. Today I've published the library on npm. It's called flexible-tree-printer.

Example:

import { printTree } from "flexible-tree-printer";

const categories = {
  study: {
    academic: { Math: null, English: null },
    programming: {
      DSA: null,
      "Number Theory": {},
      Backend: {
        "Node.Js": {},
        Sqlite: {},
      },
    },
  },
  work: {
    personal_projects: null,
    job: {},
  },
};

printTree({
  parentNode: categories,
  printRootNode: () => console.log("categories"),
});

Running the above snippet produces the following result:

categories
├── study
│   ├── academic
│   │   ├── Math
│   │   └── English
│   └── programming
│       ├── DSA
│       ├── Number Theory
│       └── Backend
│           ├── Node.Js
│           └── Sqlite
└── work
    ├── personal_projects
    └── job

Almost every behavior of printing is customizable and the library has a very flexible API.

I would love to hear your feedback and kindly give it a ⭐ GitHub if you find it interesting.

How to use the bitwise XOR (^) operator in JavaScript

Muhammad Sifat Hossain — Tue, 13 Sep 2022 06:46:51 +0000

Currently, I'm working on a Pomodoro timer application where I have an entity
called project-category. It has the following interface:

interface ProjectCategory {
  name: string;
  createdOn: number;
  modifiedOn: number;

  // ... some other fields
}

I've written a function that validates and instantiates a project category
object. In regards to the timestamp validation, I have implemented these rules:

If both the creation and modification timestamps are absent, assign them the
current timestamp.
If both the creation and modification timestamps are present, then make sure:
that the modification timestamp is greater than or equal to the creation
timestamp.
Otherwise, throw an error.

And the code looks something like this:

function makeProjectCategory( arg: Partial<ProjectCategory>): Readonly<ProjectCategory> {
  const projectCategory: Partial<ProjectCategory> = {};
  // ... timestamps validation

  {
    const isCreatedOnPresent = "createdOn" in arg;
    const isModifiedOnPresent = "modifiedOn" in arg;

    const isOneTimestampMissing = +isCreatedOnPresent ^ +isModifiedOnPresent;
    // (isCreatedOnPresent && !isModifiedOnPresent) ||
    // (!isCreatedOnPresent && isModifiedOnPresent);

    if (isOneTimestampMissing)
      throw new Error(
        `Creation and Modification timestamps must be provided together.`
      );

    if (isCreatedOnPresent) {
      // so both timestamps are present
      assertValidTimestamps({
        createdOn: arg.createdOn,
        modifiedOn: arg.modifiedOn,
      });
      // ...
    } else projectCategory.createdOn = projectCategory.modifiedOn = Date.now();
  }

  // ... other fields validation

  return Object.freeze(projectCategory) as Readonly<ProjectCategory>;
}

After writing this code, I realized that the validation logic is similar to an
XOR logic gate.

isCreatedOnPresent	isModifiedOnPresent	isOneTimestampMissing (should throw ?)
true	true	false
false	true	true
true	false	true
false	false	false

So changed the following snippet

const isOneTimestampMissing =
  (isCreatedOnPresent && !isModifiedOnPresent) ||
  (!isCreatedOnPresent && isModifiedOnPresent);

to:

const isOneTimestampMissing = +isCreatedOnPresent ^ +isModifiedOnPresent;

Let me explain how it works.

Truth table of XOR logic gate

Input Bit A	Input Bit B	Resulting Bit
1	1	0
1	0	1
0	1	1
0	0	0

If the XOR operator (^ in JS) is applied on two bits, it returns:

1 (true) if they are alternating.
0 (false) if they are the same.

So if you run the following snippet, you'll see:

console.log(1 ^ 1); // 0
console.log(1 ^ 0); // 1
console.log(0 ^ 1); // 1
console.log(0 ^ 0); // 0

But wait, in the above code snippet 1 and 0 doesn't represent a single bit!
Strictly speaking it's a 32 bit number. When the XOR operator is applied on two
numbers, first it converts the numbers to a binary form and then operates on
each bit at a time. Let me illustrate.

#1:  1 ^ 1 = 0

1: 00000000000000000000000000000001
1: 00000000000000000000000000000001
-----------------------------------
0: 00000000000000000000000000000000

#2:  12 ^ 15 = 3

12: 00000000000000000000000000001100
15: 00000000000000000000000000001111
------------------------------------
 3: 00000000000000000000000000000011

Again, how does this (+isCreatedOnPresent ^ +isModifiedOnPresent) code
work? The + in front of two variables is called the Unary Plus Operator.
It coerces a value to number. So, +isCreatedOnPresent is exactly similar to
Number(isCreatedOnPresent). And as these two variables are of type boolean;
they are coerced to either 1 or 0. Because in JavaScript:

Number(true); // 1
Number(false); // 0

Now, for example let's say, modifiedOn is present in the arg but
modifiedOn is not. This is how the code will be evaluated:

// isCreatedOnPresent = true, and isModifiedOnPresent = false
const isOneTimestampMissing = +isCreatedOnPresent ^ +isModifiedOnPresent;
                         // = +true ^ +false;
                         // = 1 ^ 0;
                         // = 1;

if (isOneTimestampMissing)
  // if (1)
  throw Error()

// as 1 is a truthy value the error will be thrown

Conclusion

Honestly, I think it's not a good idea use the XOR (^) operator in my code
just to reduce one line. Because for the sake of brevity it sacrifices
readability and can confuse someone who does not know about the XOR
operator. But, I found a real life use case of it and just wanted to share it
with you guys 😀.

Credits

The cover image (XOR Gate in Minecraft) is taken from Imgur .

Adding custom keyboard shortcuts to any website

Muhammad Sifat Hossain — Sun, 04 Sep 2022 00:37:14 +0000

Whenever I'm studying English, I always use the google translate website to lookup unknown words.

But there is a problem! You see the two buttons marked red? As a hardcore VIM user, I hate to touch my mouse to click those 😩. But luckily Allah gave me the ability to program things.

There is a cool extension out there called User JavaScript and CSS that allows us to inject our own JavaScript and CSS code into any website.

At first, we've to select those button elements to click them programmatically. But they all have random classes and ids assigned to them, which are unreliable as selectors. After some searching, I've found that all the buttons have an attribute called aria-label.

For the two pronunciation buttons, the value of aria-label is "Listen to source text" and for the clear button it's "Clear source text".

We can write the following code snippet to select these buttons:

const clearBtn = document.querySelector('[aria-label="Clear source text"]');

const firstSpeakBtn = document.querySelectorAll(
  '[aria-label="Listen to source text"]'
)[1];

Now, we can invoke the clearBtn.click() and firstSpeakBtn.click() methods to clear and pronounce the input text respectively.

Secondly, we need to setup an event listener for the keydown events so that we know when to execute clicks on those buttons.

const shortcuts = {};

window.addEventListener("keydown", (e) => {
  // If Control is not pressed or if the Control is pressed alone
  // then return and do nothing.
  if (!e.ctrlKey || e.key === "Control") return;

  const key = e.key;
  if (key in shortcuts) {
    // override browser keyboard shortcuts
    e.preventDefault();
    e.stopPropagation();

    // take some action here
  }
});

I want the Ctrl-p to pronounce and Ctrl-l to clear the input text.

Update:

Added Ctrl-k and Ctrl-j for scrolling up and down respectively.

Here is the full code:

// Ctrl-l = clear the input in the first box
// Ctrl-p = pronounce the text in the first box
// Ctrl-j = scroll down
// Ctrl-k = scroll up
const shortcuts = Object.freeze({
  p: () => getSpeakButton().click(),
  l: () => getClearButton().click(),
  j: () => scrollBy({ top: 100, left: 0, behavior: "smooth" }),
  k: () => scrollBy({ top: -100, left: 0, behavior: "smooth" }),
});

window.addEventListener("keydown", (e) => {
  // If Control is not pressed or if the Control is pressed alone
  // then return and do nothing.
  if (!e.ctrlKey || e.key === "Control") return;

  const key = e.key;
  if (key in shortcuts) {
    // override browser keyboard shortcuts
    e.preventDefault();
    e.stopPropagation();

    shortcuts[key]();
  }
});

function getClearButton() {
  const clearBtn = document.querySelector('[aria-label="Clear source text"]');
  return makeBtnSafeToClick(clearBtn);
}

function getSpeakButton() {
  const firstSpeakBtn = document.querySelectorAll(
    '[aria-label="Listen to source text"]'
  )[1];
  return makeBtnSafeToClick(firstSpeakBtn);
}

/*
 * If the button is `nullish`, make sure that invoking the `.click()` method
 * doesn't throw an error.
 * */
function makeBtnSafeToClick(btn) {
  return btn ? btn : { click: () => {} };
}

Now, go to the google translate website and click on the User JavaScript and CSS extension and you should see a modal like this:

then click on the Add new button and it'll take you to a page like this:

Finally, copy the full code snippet from above and paste it into the JS tab and click Save then reload the page.

At last, we can stay away from that nasty mouse! Life is gud 😋.

Credits

The cover image is taken from Unsplash

Please give me some feedback about my npm package

Muhammad Sifat Hossain — Tue, 23 Aug 2022 04:59:24 +0000

Hi everyone, this is my first post on Dev.to and I'm very excited to hear from you guys.

For the last couple of weeks I've been working on a validation library and yesterday I've published the second major version of it on npm. This package was my first npm package.

See it on npm: handy-types

GitHub Repository: handy-types

It's a lite weight validation library that I've developed as a side project to reduce validation boilerplate in my other validation library that I've been working on for the past few months 😅. But I've decided to publish on npm in case others find it useful.

Example Usages (TypeScript):

import { is, assert } from "handy-types";

let value: unknown;

is("integer", value); // false
is("positive_number", value); // false
is("8bit_unsigned_integer", value); // false
is("non_null_object | plain_object", value); // false

if (is<string | string[]>("non_empty_string | non_empty_string[]", value)) {
  value; // here the type of value is: string | string[]
}

// we can use caching for improved performance
if ( is.cache<string | string[]>("non_empty_string | non_empty_string[]", value)) {
  value; // here the type of value is: string | string[]
}

assert("integer", value);
// throws error: `Value must be of type Integer`

assert("integer", value, {
  name: "Age",
  code: "INVALID_AGE",
});
// throws error: `Age must be of type Integer`, with code: "INVALID_AGE"

assert("non_empty_string", value, {
  message: "Invalid path",
  otherInfo: {
    path: value,
    errorId: -3,
  },
});
// throws error: `Invalid path` , with properties path: undefined, errorId: -3

// use caching for improved performance
assert.cache<string | string[]>(
  "non_empty_string | non_empty_string[]",
  value,
  { name: "hobbies" }
); // throws error: "hobbies must of type: Non-Empty String or Non-Empty String Array"

Please refer to the github README for detailed documentation.

Kindly let me know if you think I can improve something. Thanks in advance 💝.

Forem: Muhammad Sifat Hossain

How a Keyboard Mod Led Me to Vim (And Why I Never Went Back)

Hacking My Keyboard

Connecting Wires to the Pins

Adding the Arrow Keys

Replacing My Keyboard and Discovering Vim

Switching to Vim from VSCode

Current State

How I learned about JavaScript Proxy and why it's so cool!

I created an app to visualize word unscrambling algorithm

Please support the author of core-js

Techland - an e-commerce app

What I built

Category Submission: Search No More

App Link

Preview

Homepage

Products Page

Individual Product Page

Search Bar

Link to Source Code

Permissive License: MIT

Background

How I built it

Product Category Interface

Product Interface

Full-text search

Auto-completion

Similar Products

Finding Products by categoryId.

Tech-stack

Backend

Frontend

Conclusion

I made an Express-like framework for IPC communication

I made a library to print object as a tree structure like the unix tree command

How to use the bitwise XOR (^) operator in JavaScript

Truth table of XOR logic gate

Conclusion

Credits

Adding custom keyboard shortcuts to any website

Update:

Credits

Please give me some feedback about my npm package

Example Usages (TypeScript):

Finding Products by `categoryId`.