DEV Community: Rohan Kaicker

OSD600 Lab 6

Rohan Kaicker — Wed, 02 Nov 2022 23:50:16 +0000

For our 6th lab we were asked to take a look at Docusaurus, and try to implement one of its features.

Docusaurus is essentially a tool that developers can use to create aesthetically pleasing documentation, without worrying too much about building a website from scratch.

In their own words, one of their goals was "To put the focus on writing good documentation instead of worrying about the infrastructure of a website".

Honestly, it was relatively easy to get a Docusaurus site built up from scratch. Mine can be found here.

I decided to implement the "Sidebar"/ table of contents feature. Admittedly, I got a little busy in my personal life and wasn't able to dedicate too much time to this, so it's more of a proof of concept right now. But I did manage to get it working, in that my tool is able to generate a complete working table of contents based on the input folder that is selected.

The commit for this feature can be found here.

I definitely haven't been able to make this tool as good I want to, but I think I'll be able to improve it in the upcoming weeks.

Hacktoberfest Conclusion

Rohan Kaicker — Mon, 31 Oct 2022 23:18:03 +0000

To recap, for the month of October, our class participated in Hacktoberfest. This was my absolute first time contributing in open-source projects.

Admittedly, I was extremely nervous and stressed going into this month. I had no idea what to expect in terms of project difficulty, how responsive repo maintainers are, and what the open-source community is like.

To be honest, it also took me quite a long time to find issues/ projects that I found interesting. I was scouring the recommended sites such as Awesome for Beginners, and Up for Grabs, and also just going through Repos/ Issues marked with the "Hacktoberfest" label.

Eventually, for my first Issue, I came across the Video Hub App repo. Where I was able to work with technologies such as TypeScript and Electron, which I knew very little about. It took a little while, but I was able to successfully complete a feature that allowed users to filter out specific folders. This was a great experience because I was able to see how professional projects are organized, and the maintainer was very responsive.

After this I really hit the ball rolling and was able to find more issues to work on. One thing that I enjoyed was that all of my PRs were drastically different from each other. I worked on correcting documentation for AdonisJS, fixed a HTTP Content-Type Header bug in tiny-http, and then finally even created a short script for users to load up their own local version of the Electron documentation site.

I think I can confidently say I learned more about open source and Git/ Github in the last month, than I have in the past 16 months that I have spent in this program. Creating branches for issues, submitting pull requests, merging, and rebasing branches were all very new to me, and I am so happy that I enrolled in this course before I graduated!

Final Hacktoberfest PR

Rohan Kaicker — Mon, 31 Oct 2022 22:57:19 +0000

For my last Hacktoberfest PR, I was actually reached out to by a repo maintainer on my previous blog post.

Basically, this project aims to essentially allow people to create local documentation sites for various popular frameworks/ libraries. Essentially the project acts as a repository of scripts that users can copy and paste to create a fully functioning static site of their documentation (sort of related to our course project where we are developing a static site generator).

Naveen (the project maintainer), saw that I had gained some experience using Electron from working on the Video Hub App, and asked if I'd like to contribute a script to get a local version of the Electron documentation.

I thought this would be a nice way for me to get familiar with how documentation sites are built. I immediately learned that Electron's documentation site was built using Docusaurus (which we'd later end up learning about in our course).

I was able to learn how to built up a local copy of the site with just a small script, and was succesfully able to contribute to the repo!

Issue: https://github.com/naveennamani/offline-docs/issues/2

PR: https://github.com/naveennamani/offline-docs/pull/14

Hacktoberfest Week 2 (Pt. 2)

Rohan Kaicker — Sun, 16 Oct 2022 20:37:57 +0000

Following the theme of this week, another repo I stumbled upon this week was tinyhttp, which is another web framework.

However, unlike AdonisJS (a "full featured" framework), tinyhttp aims for speed and simplicity by trying to minimize all of its dependencies.

I worked on Issue 360. Essentially, when a user would set the "Content-Type" header before returning the file, the framework would overwrite the "previous" header, with the type that it determined from the files type.

To solve this issue, I first spent time reading the "Response" and looking at the code for res.sendFile().

I saw that on line 73, there was no check in place to see if the "Content-Type" header had previously been written.

After this, I got curious on how Express handles this situation. What I found is that in Express, res.sendFile() will not actually set the "Content-Type" header, but instead it gets deferred to a separate function, and use the Node function "res.setHeader()", to handle it. This will actually result in the header being over written (just like tinyhttp).

I checked AdonisJS, and the header will also get overwritten useing that framework too. This makes me think that this is a very niche use-case, but because the maintainer was looking for a PR, I added a check to only change the "Content-Type" header if it has not been previously set. I am curious to hear the maintainer's comments.

My PR can be found here: https://github.com/tinyhttp/tinyhttp/pull/363

Hacktoberfest Week 2 (Pt. 1)

Rohan Kaicker — Sun, 16 Oct 2022 19:24:35 +0000

To start this week off, I came across the AdonisJS Framework. Up until now, the only framework that I was really familiar with was Express.js, but I alway sknew that others existed but never really looked into them.

There are certain benefits to AdonisJS in that it is considered to be "fully featured", whereas Express.js may be seen as more barebones.

With Express, you often have to use various npm packages to get the same level of functionality that Adonis offers straight out of the box.

This includes:

Authentication
ORM
Templating

I saw a few issues in their documentation repo, and I figured I'd fix two simple issues and count them towards 1 for my Release 0.2 (in my OSD600 class).

The issues I fixed were:

Admittedly, these were very simple issues to fix (just fixing up some erroneous references to some functions), but I still felt as though they were important to fix to prevent confusion for new users of the framwork.

The PRs I filed were:

Understanding "git rebase" and "git commit amend"

Rohan Kaicker — Sat, 15 Oct 2022 23:15:41 +0000

This week in OSD600, we learned about how to clean up our git history.

We were first tasked with making a few improvement to our code base.

I chose to improve my program by:

Separate text file handling
Separte markdown file handling
Utilizing fs.rmSync() for deleting the /dist folder instead of my previous method (using readderSync to find contents of /dist folder, and then calling unlinkSync).

Using git rebase to "squash" all my commits into a single commit was definitely interesting. I didn't know this was a possibility, and in one of my Hacktoberfest PRs I actually have 10 commits for one feature upgrade - I plan on using git rebase to "squash" this down to 1 commit for cleanliness.

Then using git commit ammend to modify the commit message was also a neat feature, and the ability to quickly add something to the previous commit (as I have multiple times found things I've missed right when I've commited something).

These two are definitely features that I'll be using more often in the feature!

First Time Contributing to a Public Repo (Hacktoberfest Week 1)

Rohan Kaicker — Sun, 09 Oct 2022 23:30:18 +0000

Finding an "issue" to work on

Following the spirit of Hacktober, we are required to attempt 4 Pull Requests for our OSD600 Release 0.2.

Admittedly, I was a little stressed at the beginning (and sort of still am), because I didn't realize how many people would be participating in Hacktoberfest. Every interesting/ manageable "issue" I would find, would already have multiple people working on it/ already submitted PRs.

I decided to expand my search to repositories/ issues that weren't tagged with the "hacktoberfest" tag, as my main goal was to just find an issue that I could work on.

In doing so, I discovered the "Video Hub App", which is essentially a cross-platform video library manager that is built on Angular and Electron.

I worked on Issue #726 - filter "folder does not have". Essentially, as "Video Hub App" is used as a way to search for videos, it gives the user the ability to specify filters (folders that include a key word, files that include a key word, resolution based filters, size based filters, etc.). However, the user requested the ability to filter out folders that have some key word in the search.

Learning New Things

I noticed that the maintainer had made a comment on the issue saying that a similar filter exists for files (to exclude files that have a specific key term), so I figured I could base my changes off of something that already exists.

However, once I started looking at the codebase I started to get a little overwhelmed, because my Angular skills were super basic and I had never used/ learned about the Electron platform before (although I knew it existed). So, the first thing I decided to do was to run through the Electron Tutorial, where I was able to get a basic understanding of how Electron works.

Implementing Fix

Once I had a basic understanding of Electron, I decided to run through the workflow of how the app works. Once I had the repo forked, cloned, and branched, I simply ran npm install and then npm start to start up the app. I then played around with it, and read the user guide until I got a basic understanding of what the application does. Then, using the Developer Tools, I tried to figure out how the filters are working.

I ended up realizing that the maintainer had created the project in such a modular way, that I really did not have to do much coding at all to implement this feature. First, they had many "language" JSON files where essentially all the app text is stored (for buttons, settings, information, etc.), and is how the application is able to dynamically change the language presented in it's ui. So I first modified this file to include the extra placeholder, settings, information, etc. text that would be required by this new feature.

I then had to specify a new filter for "folderExclusion" in the filters.ts file, and I followed the way the other filters had been done. I had to reorganize the layout here, since I wanted this new folder filter to be grouped with the other folder filter. The problem I ran into is that these filters are defined in an array, and I didn't realize that this array was being referenced in the home.component of the app. So essentially, because I changed the order of this array, in the app when a user was entering information for the various filters, the wrong filter would be applied. This then meant I had to manually update the index references of all the filters that were affected in home.component.html.

Overall, I think I was able to get the feature working (PR here), and it was definitely a great learning experience. I was honestly a little inspired by how the maintainer had developed the codebase to make it so modular and easily upgradeably, and this really makes me want to fix up the Static Site Generator that I had been working on this class.

Functionality Demo

To test the newly developed feature, I downloaded some stock videos from the internet (found here).

And then created the following folder structure:

main folder/
- buckbunny video/
  - test/
    - BigBuckBunny.mp4 (short movie about a rabbit)
- even more videos/
  - ForBiggerFun.mp4 (chromecast commercial)
  - Sintel.mp4 (short fantasy movie)
- other demo videos/
  - ElephantsDream.mp4 (creepy short movie)
  - ForBiggerBlazes.mp4 (another chromecast commercial)

As shown in the screenshots below, when I filter for a keyword in the folder that contains the video, the videos won't search up.

No Filter

Filtering "test" - (BigBuckBunny.mp4 should be excluded)

Filtering "demo" - (ElephantsDream.mp4 and ForBiggerBlazes.mp4 should be excluded)

Filtering "more" - (ForBiggerFun.mp4 and Sintel.mp4 should be excluded)

OSD600 Blog #6 - Lab 4

Rohan Kaicker — Sat, 08 Oct 2022 00:47:57 +0000

For our 4th lab, we were tasked with partnering up again, and modifying our partner's Static Site Generator project to be able to take "options" from a "configuration" JSON file, instead of having to type them up in the command line.

This way, the user only has to specify the location of the configuration file, where they can store multiple options, instead of having to manually type the various options in the command line, which can be more prone to errors.

Coding the logic for the configuration file wasn't too difficult, as it was similar to the logic I already had for file handling.

But what I found interesting in this week's lab was the use of remotes and Git fetch. We used remotes this week to monitor our partner's progress on modifying our own project, and used fetch to update the remotes. This way we were able to test our partner's progress, without actually modifying our local repo at all.

Overall, I feel as though I still need to review the concept of remotes/ git fetch as I work towards completing my hacktoberfest release.

Relevant Links:

OSD600 Blog #5 - Lab 3

Rohan Kaicker — Fri, 30 Sep 2022 17:36:15 +0000

For this weeks lab, we were tasked with creating two parallel branches on our program's repo, to create two new features.

The idea behind this weeks activity was to get familiar with git merge, and the idea of fast-forward merges and three-way recursive merges.

Originally, I forgot to create both issue branches at the same time (so that they would have the same "starting point"), and created a branch just for my first issue and then merged that when it was solved. But then I realized this defeated the purpose of this weeks activity, so I decided to add 2 additional features to that I could get some practice with git merge.

My links are given below (note - Issues 25 and 26 were the ones that were incorrectly initiated):

Project Repo

1 - Issue #25 - Ability to specify HTML language.
Merge Commit

2 - Issue #26 - Parse inline code blocks.
Merge Commit

3 - Issue #27 - Parse markdown horizontal rules.
Merge Commit

4 - Issue #28 - Parse single line blockquotes.
Merge Commit

For Issues 25 and 26, the "merges" were conflict free because of the wrong way I did them. But for Issues 27 and 28, I did encounter a "conflict" (shown below).

I thought it was interesting that Git will first prevent the merge from occuring (because of the presence of a conflict), and then actually modify your file to show you exactly where the conflict is occuring. I was able to quickly fix this issue, as all I had to do was separate the if-else statements.

As I had mentioned in a previous blog post, I really wanted to take this course because I knew I'd get a chance to improve my git skills, and doing these weekly labs have really given me the chance to do just that.

As for my project, I definitely have alot of improvements to make (I beleive I have about 10 "issues" pending in my repo), and I look forward to seeing what improved versions of my project will look like!

OSD600 Blog #4 - Lab 2

Rohan Kaicker — Fri, 23 Sep 2022 00:34:29 +0000

For lab 2, we were tasked with upgrading another student's Static Site Generator, while having other students work on upgrading our own Static Site Generator.

I actually had the benefit of having two fellow students working on my project, and in total they were able to add 3 additional features to my project!

Thanks to @neilan99 and @genne23v, my project now has the capability to parse Markdown files (as well as plain text files), and perform the proper markdown-to-html conversion on H1 headings, H2 headings, and embedded links.

For my updates, I updated @neilan99's project to also be able to parse Markdown files, as well as being able to convert Markdown bolded text (double asterisks enclosing a block of text) into HTML bolded tax (block of text surrounded by <strong>...</strong> tags).

The respective links are given below:

My Project Repo

My Filed Issue

My Pull Request

Neil's Pull Request For My Repo

Wonkeun's Pull Request For My Repo

In updating Neil's project for adding support for parsing bolded markdown text, I actually ran into a few issues.

At first, I wasn't sure how to determine if there was a valid line in the markdown file that had bolded text. I knew I had to utilize RegEx, however my RegEx skills are a little weak. Thankfully, I was able to find a StackOverflow post (here), which aided me in formulating my RegEx pattern. This I think is another benefit of the open source community, in that you can find how someone solved a similar issue to yours, and implement that solution to your specific problem.

I also learned how to find the string index values of where the match was found and ended, to be able to replace the asterisks with the <strong> HTML tags. However, what I didn't realize at first is that I would have to take into consideration that as I make replacements, I would have to compensate for the added string length with the index values. I was able to quickly rectify this by adding 13 (the additional characters added to the string by adding the <strong><\strong> tags, and removing the '**' characters), to each of the index positions as I made the replacements.

On my first PR, Neil brought up a good point that my documentation was a little lacking in explaining what the RegEx portion of my code was doing, so I was able to quickly add in my explanation, and have my first PR succeed!

As for the pull requests that I received for my project, I first reviewed Neil's pull request. I thought he did a really good job in adding Markdown support, and the ability to parse H1 headings. My only suggestion was a small one, in which he could shorten the code by removing duplicated sections. He quickly updated the PR to reflect this, and I was able to merge his changes into my main branch.

For Wonkeun's PR, I felt bad because I made him do a little work. As I merged Neil's changes into my repo, it caused conflicts with Wonkeun's changes, so I required him to update his code to be able to workaround the newly added changes (as he was originally working on my base code - before markdown support was added). He was also quickly able to make the changes, and I was able to successfully test his code and merge his changes into my main branch.

Testing and merging other people's code into my main branch really gave me the opportunity to learn more about how git branches work, as I was a little nervous about pulling changes onto my local machine. Thankfully, GitHub makes this easy, and provides you with the exact lines of commands that you need to be able to 1) Create a new branch to test the changes and 2) Merge the changes to the main branch once it has been confirmed to work.

Overall, I thought this lab was a great experience in learning how collaboration works with git. One question that I do have remaining is that as I saw in my case (when Wonkeun's code encountered conflicts due to Neil's changes), I wonder if there is a proper procedure for multiple people making changes to the same codebase at the same time, or if conflicts like these are inevitable.

OSD600 Blog #3 - Lab 1

Rohan Kaicker — Thu, 15 Sep 2022 23:15:56 +0000

Hi Everyone!

In Week #2, in our OSD600 class we partnered up and worked together to improve our base Release 0.1 code (which was our static site generator).

Slack proved to be an amazing collaboration tool, as I was able to find someone (Neil An) to work with within an hour! Both of us were also using the same technologies to devleop our individual static site generators (node.js + commander module).

It was definitely interesting to see how someone else tackled the same problem, even if it was with the same tools. For example, I was completely using synchronous JavaScript, but my Neil was using asynchronous JavaScript.

Neil also brought the perspective of a Windows user, as I had mainly developed my program for Unix environments, and I did not realize that just because it worked in Unix environments it may not work in Windows.

Specifically, the issues that Neil found were:

Installation does not work out of box - Basically, I thought running npm install -g would automatically install the npm dependencies as well as install my tool globally on the system. However, it turned out it was required to run npm install to install the node dependencies and then run npm install -g to globally install my command line tool.
The -v and --version options are missing information - Here I had completely missed the other requirement of the "version" command that it should also output the tool name (I definitely should have read the requirements more carefully).
Spaces are missing in the HTML file - This was one of the formatting issues where if a sentance carried on to the next line of the text file, there would be a missing space between words.
Title and header are incorrectly created in some cases - There was a bit of a bug happening where my program would be missing text if the title (indicated by two blank lines after the title line) was not in the first line.
Cannot run the rohan-ssg command directly on a windows terminal - This bug I wasn't entirely able to fix. I definitely have to do more research on this, but if anyone knows the answer please let me know below! I am able to run the program in windows using a bash shell, however using Powershell or Command Prompt does not work, so as a work around I specified the use of a bash shell in my tools README file.
Better formatting for HTML Files - Here Neil brought up a good point that all my <p>...</p> tags were generated inside of a single line (and there could be hundreds of them). I fixed the formatting, and made it a lot easier to read by having all <p>...</p> tags generated on a new line.

The issues I found in Neil's project were:

node_modules shouldn't be commited in git - In another class I took with Prof. Humphrey (CCP555), we learned about the importance of .gitignore files, and that the node_modules is a folder we should avoid committing to git.
inability to specify direct path to a separate folder - In Neil's original code, the text files we needed to convert needed to be in the same folder as the program itself.
need to add "node" to the beginning of the command - As a command line tool, I think we need to be able to simply just type tool name, without prepending "node" to it.
possibly change stylesheet colors for less eye strain - In the original CSS design, there was a blue blackground behind blue text, which made it a little difficult to read.
duplicate variables - Here, I thought we could shorten the code a little bit because the same piece of data was being used by two variables (when it could be just used by 1).

Overall, it was a great experience having a second pair of eyes to look over my code, as Neil was able to find deficiencies in my code that I had not even noticed. I think this is one of the fundamental concepts of Open Source, that many eyes are constantly analyzing the same code base, to constantly improve the software.

OSD600 Blog #2 - Release 0.1

Rohan Kaicker — Sun, 11 Sep 2022 20:05:08 +0000

For our first release in OSD600 (developing a CLI static site generator) I decided to implement the program using Node.js, by leveraging the "commander" npm module.

The source code for the program can be found here.

The optional features I've implemented into the program are:

Ability to parse title from input to both populate the <title>...</title> tag and to generate an <h1>...</h1> at the top of the web page.
Allowing the user to specify a stylesheet URL to be applied to all generated HTML files.
Allow for a recursive search of the input folder, to also generate HTML files from text files in subfolders.

Examples of generated HTML files from text files can be found here.

I would greatly appreciate any and all feedback!

Overview

This tool enables the user to:

Specify a ".txt" file to have it converted into an HTML webpage
Specify a folder containing multiple ".txt" files to convert all of them into HTML web pages. The program will recursively search subfolders for ".txt" files as well.

Installation

To install this program, first git clone the repository.

Then open a terminal inside of the newly created folder, and run npm install -g.

This command will install the programming globally on your system.

Options

There are four options available to the user to use with this CLI program.

Short Form	Long Form	Description
-v	--version	Outputs the current version of the program.
-h	--help	Outputs a help message explaining the program's usage.
-i	--input	Allows the user to specify either a single .txt file, or a folder containing .txt files.
-s	--stylesheet	Allows the user to specify a URL containing a CSS stylesheet to apply to the generated HTML files.

Usage

Current Version

To check the current version of the program, the user can run:

rohan-ssg -v or rohan-ssg --version

Which will output:

The current version is: x.x.x

Help

To see a message explaining the program, the user can run:

rohan-ssg -h or rohan-ssg --help

Which will output:

This program is used to generate a static HTML web page from a given .txt file OR a folder containing .txt files.
The following options are available: 
    -v, --version: current program version
    -h, --help: program instructions
    -i, --input: path input folder or file to be converted to HTML. Note that folders are recursively searched for .txt files.
    -s, --stylesheet: stylesheet url to be used in the HTML file

    The files will be saved in a '/dist' folder in the same directory as the input file/folder.

    For example, to generate a single HTML file from a .txt file with a specific stylesheet URL, use the following command:
    rohan-ssg -i .PATH/TO/FILE/input.txt -s https://example.com/stylesheet.css

Input (with and without stylesheet)

For a specific file, the user can run:

rohan-ssg -i PATH/TO/FILE/example.txt or rohan-ssg --input PATH/TO/FILE/example.txt

This will then generate a /dist directory, containing the HTML file that had been generated.

For a folder:

rohan-ssg -i PATH/TO/FOLDER or rohan-ssg --input PATH/TO/FOLDER

Similar to above, this will also generate a /dist directory, which will contain all of the HTML files that had been generated from all of the .txt files inside of the specified folder (including subfolders).

To specify a stylesheet to be applied to all HTML files, the user can choose to use the -s or --stylesheet option as follows:

rohan-ssg -i PATH/TO/FOLDER -s https://example.com/stylesheet.css or rohan-ssg -i PATH/TO/FILE/example.txt -s https://example.com/stylesheet.css

This will link the specified stylesheet (which must be a url) to all HTML files that have been generated.