DEV Community: Ritik Bheda

Code review

Ritik Bheda — Fri, 17 Dec 2021 10:43:47 +0000

My code review activities for Seneca College's internal open source projects will be detailed in this blog.

This is my first experience reviewing code on GitHub, and it's both exciting and informative. Code review is the act of actively and methodically meeting with one's fellow programmers to examine each other's code for errors, and it has been proved to speed up and simplify the software development process in ways that few other methods can.

Reviewing

Reviewing two PRs from a classmate is one of the duties for this project. The PRs, as well as my reviews, are available here and here. Both of the PRs I reviewed were really well-written and detailed, with very few mistakes. It was interesting to observe how different people approached certain changes, such as adding a svg file.

Learnings

I have learned that code review helps in many ways. some of which are Minimizing your mistakes and their impact, Improving code performance, Sharing new techniques and learning for other coder/contributor. This becomes much more critical as the project grows in size and complexity. As I previously indicated that this is my first time reviewing code, the PRs were not particularly complicated, thus the reviews were a touch simple, but it was a good first step into doing the first code review.

final release 0.4

Ritik Bheda — Fri, 17 Dec 2021 09:49:00 +0000

In the final blog, I am now writing about bringing the code together, testing and PR.

I brought the whole code together, which look like this

/**
@example
``
import {isEqualType} from 'ts-extras';
const isEqual = isEqualType<ExpectedType, ActualType>();
``
*/
export type IsEqual<ExpectedType, ActualType> =
    (<T>() => T extends ExpectedType ? 1 : 2) extends
    (<T>() => T extends ActualType ? 1 : 2)
        ? true
        : false;

function assertType<T extends boolean>() {
}

export function isEqualType<T, G>(): boolean;
export function isEqualType<T, G>(value : G): boolean;
export function isEqualType<T, G>(a: T, b: G){
    return assertType<IsEqual<IsEqual<T, G>, true>>();
}

now one of the main task was to be done to test and check if our code is working or no.
The project is already using testing framework xo and ava so now I only had to take a look at the testing style in xo and ava and write my test cases.
Finding how to do the test cases was also a bit difficult as I did not have clear idea to what kind of cases to write and compare since there are many types that can be wrote. I then went back to the internet where I can find the way people how other projects were done testing. I tried to get a summary understanding of it started implementing it and after a few additions and subtraction, I came up with my test cases and was ready to test. Well of the cases do pass and covers a broad spectrum of possible cases, but I doubt I might have missed special cases. The good thing is it covers over 99% cases but I am looking forward to search for that 1% of case I have missed.

The test cases look like this:

import test from 'ava';
import {isEqualType} from '../source/index.js';

test('isEqual()', t => {

    t.true(isEqualType<1, 1>());
    t.true(isEqualType<any, any>());
    t.true(isEqualType<unknown, unknown>());

    t.false(isEqualType<{}, {x:1}>());
    t.false(isEqualType<1, 2>());
    t.false(isEqualType<1, any>());
    t.false(isEqualType<1, unknown>());
    t.false(isEqualType<any, unknown>());

});

I then updated the readme page and push my commits and created a PR

Planning for release 0.4

Ritik Bheda — Fri, 17 Dec 2021 09:35:59 +0000

For release 0.4, I had to work on something bigger and something difficult. This blog is divided into 2 other blogs; Preparing for release 0.4, working on release 0.4 and final release.

Looking for a Project and issue

I always wanted to contribute to a project which is turning big. I tried to looking around alot finding such project, later I recalled about a project that got my attention during Hacktober but I did not do it because it was way to big for me to understand. The project is ts-extras. I think it is a big project since its developer sindresorhus is a professional open source contributor and has given many npm packages to the community. I want to be in one of his projects. Although he is currently working on many projects and packages, I choose this because this package is not large in size but very useful for everyone that gives Essential utilities for TypeScript projects. It helps in things like finding is-empty, is-finite, assert-error and other functionalities of a typescript project. Now, there was one more such functionality to be added to the project of is-equal. I thought to work on it.

Understanding the Issue

It might sound easy in the first and thats one of the reason I was attracted to during Hacktober fest(my early days of opensource development) but I later found out that it needs much more typescript and programming knowledge than the few lines of code. This is because comparing to varibales, types and a variable and type is not easy when you dont have a function or module to help you. And yes thats correct, this issue aims in building that function so that it would be easier to comparing those things in the future.

Planning

Although I do not have expert knowledge of typescript, my aim was to contribute to this issue. I started by finding online help and blogs that can help in better understanding and some idea of the solution but there no great content that can I found that can help me with this issue as those discussion on the internet were making use of helper module to solve it and those helper modules were very complex and had 1000s of line of code which was not allowed in the project(the project is made to make work simple and easily modifyable). But, reading those discussions did help me understand how people are using such functions and gave me an idea of how the end result should look

Preparing for release 0.4

Ritik Bheda — Fri, 17 Dec 2021 08:52:10 +0000

in the last post, we talked about the project, issue and about the online discussion. In this post, we will discuss about the difficulties ongoing and the progress after 1 week.

Points to be least Covered

A type-level equivalence operator there.
TypeScript type system is highly functional.
Type level testing is required.
However, we can not easily check type equivalence.

Difficulties

how to compare to things where == operator is not there
it is not simply comparing the values but comparing the type.

now since there is not == operator, for me the first question
was how do I compare it? I found on one of the reference mentioned by the issue Author (reference) that comparing at this level and comparing of types can be done by proper use extends. a code snippet for it is here:

(<G>() => G extends T ? 1 : 2)

where G and T are type, we are comparing the type of T with G.

now, implementing that understanding of extends to a code that compares two types did take a lot of my time and the
implemented code look like this:

type isEqual<T, U> =
    (<G>() => G extends T ? 1 : 2) extends
    (<G>() => G extends U ? 1 : 2)
        ? true
        : false;

now this returns us a boolean but we need to have a function as our end user need a function to use. adding a assert function. adding a assert function did help me and find if the comparing gave out a positive response or no meaning are they equal or no. now, we know it is returning proper response when called, but now the question was how to call the assert function. this is also a very tricky part where I tried million trial and error functions to let my type isEqual to be able to call from tis to get the result. but unfortunately, I did not get any result. but what I did find is that using this assert function can help my task easier if I introduce one more function that I can finally export. So, the calling the assert function look like this

assertType<IsEqual<IsEqual<T, G>, true>>()

where I had to call the isEqual twice.

writing the final function to export This part was easier than the other parts above but it also gave me a good knowledge of typescript. I had to write functions with the same name of isEqualType and export them. writing functions this way was my first time experience and hence valuable for me. the find function looked something like this:

export function isEqualType<T, G>(): boolean;
export function isEqualType<T, G>(value : G): boolean;
export function isEqualType<T, G>(a: T, b: G){
    return assertType<IsEqual<IsEqual<T, G>, true>>();
}

I am now very close to completing the issue.

FarmFood1758: farm food app

Ritik Bheda — Thu, 09 Dec 2021 06:20:44 +0000

Coming soon...

adding testing

Ritik Bheda — Sat, 13 Nov 2021 04:55:01 +0000

This lab, i added testing to the ssg tool. I used Jest to test my tool. I choose Jest for testing as it is simple, and widely accepted. Also, documentation for it is very easy for beginners to understand and there is a huge community on the internet that shares knowledge on this framework if needed. The link to the official Jest website can be found here, link to its open source on GitHub can be found here.

Setting up Jest

to install Jest, you first need to install its npm package. most of the time it is preferred to install it as a dev-dependency as it is not the main part of developing. you can install it with this command.

npm i -D jest

then you need to update your package.json file to add a command to test all the test cases with one command. Adding this will work

"scripts": {
    "test": "jest"
  },

I did have "aha!" moments while writing the test cases. one of them was, none of my function return a value. They all call another function on completion of a the work.

In the process, I gained much testing knowledge and coding as well as I had to edit my code in some places for better testing of the ssg. I have done testing before on my coop where we use mocha and chai for testing. they are similar to Jest framework but with some changes. I think I will be using Jest testing in my future projects I am thinking of developing a web-extension.

adding formatter, linter and vsCode settings

Ritik Bheda — Mon, 08 Nov 2021 18:06:48 +0000

using npm package icons instead of local

Ritik Bheda — Mon, 01 Nov 2021 03:56:20 +0000

showing versions of the dependencies

Ritik Bheda — Mon, 01 Nov 2021 03:55:37 +0000

fixing CSS/HTML for match the format on the page

Ritik Bheda — Mon, 01 Nov 2021 03:54:38 +0000

removing the white node

Ritik Bheda — Mon, 01 Nov 2021 03:50:46 +0000

This is my first open source and hacktoberfest contribution. I was very nervous before finding any issue that I can start with. After exploring a lot of repos and issues, I decided to work on this one.

Project

The project name is refined-github. refined-github is a web-extension which enhances the look and feel of your GitHub in browser. It simplifies the GitHub interface and adds useful features like add one click merge conflict fixers, button to revert all the PR changes and many more.

Issue

The project is actively developed and maintained with over 130 open issues and 10 PRs. I choose to work on issue(#4871) which shows an unwanted underline over white-node on hover which is happens when there is anything after the copy button(see picture for more clarification)

this is how it is right now, notice the unwanted underline on hover.

This is how it should actually be.

Starting to work

I forked the repo, and then cloned it. I followed the instructions in the contributing.md file which mainly told how to start and test the web-extension locally. I then created a branch for it and started to work for the solution.

finding the solution

Although the total code added/remove was not much, solving this issue took pretty decent discussion of me and the project maintainers. It was difficult to remove the whiteNode generated unintentionally, so the fix had to be such that do not allow it to generate. After some research online and discussion with project maintainers, I figured out that fixing CSS properties can help.

/* Remove the underline on PR filename copy button hover #4871 */
.file-header .file-info clipboard-copy {
    display: inline-block;
}

The main solution is this which do not allow it to generate a new whiteNode. Later, I fixed other code affected by adding this CSS property and the issue was solved.

Pull Request

I then made my pull request ready for review and it was reviewed and merged to the main branch of the project. The edited code is now live!!

adding Docusaurus site!!

Ritik Bheda — Sat, 30 Oct 2021 03:50:14 +0000

Docusaurus can assist you in quickly delivering an attractive documentation site. Docusaurus is a static site generator that creates static pages. It creates a single-page application with quick client-side navigation, taking advantage of React's full capabilities to make your site interactive. Setting up a Dosusaurus site is a super easy task. You only need to change one file by putting your url and other details regarding your repo in the docusaurus.config.js file!

I decided to expand my SSG's capability to convert .md files with more accuracy. Elaborating, until now, my tool was converting only to h, p, and bold tags but now it also converts to link, i and code. I choose this as I think the converting to h and b tags was very basic and wanted to convert as many things possible. So, I started by creating an issue, followed by I created a new branch for the same and started to on it. I then prepared notes and sample code in my notebook as I think the regex can be a bit tricky in solving such problems.
Well I think most of the regex did work well but I regex failed for a few, I then had to rethink and re-implement those parts or leave them for future. So now the SSG tool can convert to h, b, i, a, del and code tags. The things left for the future are converting an image, table and listing tags. I then did testing on it and finally created a PR and merged it.

I think in the future, for this tool, I will add complete support for markdown files, write tests(probably with jest, might change if I better) and also expand it from SSG to website.