Forem: ShUbHaM13M

Opensource Contribution

ShUbHaM13M — Tue, 14 Nov 2023 14:11:52 +0000

This is a guide to get started with Opensource contribution on Git. In order to contribute to a repository on Git we first have to create a fork of the repository in our personal Git space.

The project that I will work on is a Chat application. I will work on adding the functionality to support rendering links and opening the URL in another tab, currently it just renders it as a text.

Forking the repo

Naming the repo

The name of the repo doesn't have to be the same as the original repo

After creating a fork we can clone the repo. I am cloning the repo using SSH.

Cloning the repo

Next we have to add another remote to the cloned repo. This remote is the repo URL of the original author of the repo. Using this remote we can sync the cloned repo to the latest changes. I have used the HTTPs URL in this case as I only have read access to this repo.

Adding remote to the original repo

Usually I will just name it same as the author's name

We can check if adding the remote was successful using

git remote -v

Next up we can just pull from the original repo, just to get the latest changes if any before continuing. It is a good idea to stay up to date with the original repo to prevent possibility of merge conflicts.

In order to work on a new feature create a new branch and add the changes and updates in this branch, commit and then push the changes.

Creating a new branch

These changes are only going to be pushed on the forked repo in our workspace as we don't have the write access to the original repo anyways.

After working on the feature and pushing to the forked repo we can send a pull request to the original repo, adding a descriptive message to the changes made.

Creating a pull request to the original repo

Leaving a descriptive change log for the author

The author can then review the changes, and merge the pull request.
That's the basic of contributing to a repository on Github, Gitlab or any other VCs.
Make sure to also go through the licensing of the repositories.

Elevate Your Development Workflow with TypeScript

ShUbHaM13M — Mon, 18 Sep 2023 08:30:08 +0000

Recently I have been working on a short project trying out Next.js
And I have setup the project with TypeScript.
Here's a gist of what the project is -
Users can create, share forms, and get responses on the form.

I have a page for creating forms which is wrapped in a React Context that stores the state of the form.

This is the interface of the state of a form.
The form consists of a unique id, title, description and an array of questions.

interface CreateFormState {
  id: string;
  title: string;
  description: string;
  questions: Question[];
}

Question is defined as a type consisting of fields - id, title and answerType.

type Question = {
  id: string;
  title?: string;
  answerType: AnswerType;
};

The type of Question is a bit more complex than this as I also have to keep track of the state of answers

for example the options of the checkbox/radio the user inputs

AnswerType is type that defines what type of response the question can accept. Depending on the selected answerType a different input component is rendered.

A normal input for short-answer, a list of checkboxes for checkbox-answer, and so on.

type AnswerType =
  | "short-answer"
  | "long-answer"
  | "radio-answer"
  | "checkbox-answer";

Question with short answer

Question with check boxes

The data is stored using the useReducer hook from React.

const [formData, dispatchFormData] = useReducer(
  formDataReducer,
  initialFormState
);

Here is the reducer function which specifies how the state gets updated.

function formDataReducer(
  state: CreateFormState,
  action: CreateFormAction
): CreateFormState {
  const { type, payload } = action;
  switch (type) {
    case CreateFormActionKind.UPDATE_TITLE:
      return {
        ...state,
        title: payload,
      };
    case CreateFormActionKind.UPDATE_DESCRIPTION:
      return {
        ...state,
        description: payload,
      };
    default:
      return state;
  }
}

[Note]: Not all actions are present in this code snippet.

This is where the TypeScript's type-checking is really helpful. As I can define the type of actions the reducer function can accept and the type of payload that needs be sent when calling the function.

Here are the type of actions that can be performed on the create form state. This is defined as a TypeScript Enum.

These actions define updating the title and description of the form respectively.

enum CreateFormActionKind {
  UPDATE_TITLE = "UPDATE_TITLE",
  UPDATE_DESCRIPTION = "UPDATE_DESCRIPTION",
}

Here is the action defining the type of the payload as string when we are updating the title or the description of the question.

type CreateFormAction = {
  type: CreateFormActionKind;
  payload: string;
};

Let's add another action for adding a new question to the questions array of the create form state. For that we need to add a new entry in the CreateFormActionKind enum.

enum CreateFormActionKind {
  UPDATE_TITLE = "UPDATE_TITLE",
  UPDATE_DESCRIPTION = "UPDATE_DESCRIPTION",
  ADD_QUESTION = "ADD_QUESTION",
}

And now let's handle this action in the reducer function.

function formDataReducer(
  state: CreateFormState,
  action: CreateFormAction
): CreateFormState {
  const { type, payload } = action;
  switch (type) {
    ...
    case CreateFormActionKind.ADD_QUESTION:
      return {
        ...state,
        questions: [...state.questions, payload],
      };
    ...
  }
}

But adding this action in the function causes error. Since the type of payload is defined as string in the CreateFormAction and we are trying to push that to the questions array which is of type Question.

TypeScript error because payload is defined as a string

To fix this we will have to modify the CreateFormAction a bit.

type CreateFormAction =
  | {
      type:
        | CreateFormActionKind.UPDATE_TITLE
        | CreateFormActionKind.UPDATE_DESCRIPTION;
      payload: string;
    }
  | {
      type: CreateFormActionKind.ADD_QUESTION;
      payload: Question;
    };

We defined CreateFormAction as Union of types so if -

ActionKind is UPDATE_TITLE or UPDATE_DESCRIPTION then the type of payload should be string.
ActionKind is ADD_QUESTION then the type of payload should be Question and we will have to pass a Question object to the function.

And now we should be able to use this action for adding new questions. If we try to call this dispatch function in another component we will know the actions that can be performed on the state, the associated type of payload that the action accepts and we also get the Intellisense and auto-completion if we use an IDE with LSP.

Trying to pass string as payload ADD_QUESTION

Intellisense and auto-completion with TypeScript

Using this we can add more actions for:

Updating the title of the question
Deleting a question from array
Sorting the questions
Changing the type of the answer for a question.
and more...

This may feel like typing extra for defining types, but it helps in narrowing the weird things that may happen during the runtime. Because JavaScript is just a weird language.

So yeah that's how TypeScript makes development easier and accelerates developer productivity.

Vim 'navigation' basics

ShUbHaM13M — Sun, 10 Sep 2023 08:36:03 +0000

Learning Vim navigation can be a valuable skill for programmers, writers, and anyone who frequently works with text. It offers a unique approach to editing and navigating text that can significantly improve your productivity and efficiency.

After learning just the basics of Vim navigation it will allow you to navigate, edit, and perform commands with unparalleled speed, effortlessly moving through code or text.

You will be able to navigate and edit without constantly moving your hands away from the keyboard just to select a word or a whole paragraph.

I started to explore ways to easily navigate using a keyboard only when my dad brought a laptop that had a broken touchpad.
So I looked for ways to -

Open/close windows,

Navigate by holding the Ctrl, Home, End,. etc keys

Learning commands to start apps or shutdown.

Alright to get started you can either install Vim in your operating system or you can just use an extension in Vs code which could be a good starting point Also you won't have to worry about how to exit Vim since you can just close Vs code directly.

Installation of the Vim plugin

Opening a new file now you will notice the cursor is changed
And if you look at the status bar at the bottom you will notice -- Normal -- indicating that you are currently in the normal mode
It is the default mode of Vim.
It allows you to navigate the text, copy/cut/paste characters, words, and lines, but also roll-back actions, and so on.

Normal mode cursor

The status bar in Vs code indicating the current mode

Basic Navigation

You can use the keys:

h to move left.
j to move up.
k to move down.
l to move right.

These key presses can be combined with numbers so

5j will move the cursor 5 lines down.
13l will move the cursor 13 characters to the left.

Navigating around the file using these keys might feel weird at first, but once you get a hang of it you will be able to navigate much quicker.

Navigating in Vscode using the Vim key-bindings

Some other key bindings that make navigating easier.

w - Jump by the start of words
W - Jump by the start of words ignoring punctuations . ;.., etc
e - Jump to the end of words
E - Jump to the end of words ignoring punctuations . ;.., etc
b - Jump backward by words
B - Jump backward by words ignoring punctuations . ;.., etc

Again these keystrokes can be preceded by a number so
2w would jump two words ahead.

A Bit Advanced

0 - Jump to the start of the line
$ - Jump to the end of the line
G - Go to the bottom of the file.
gg - Go to the top of the file.
Ctrl + d - move down half a page.
Ctrl + u - move up half a page.
: {num} Enter - Go to that line number in the document.

If you accidentally go into Insert mode while having fun navigating the file using these newly learned powers, then just press Esc to go back to Normal

That covers the basics of navigation using Vim. It may take a few days to get used to this new way of going through your files without using a mouse but it will make your workflow more productive and efficient.