Refactor and Rebase

Intro

I have been working on my static site generator, Jellybean, over the past few weeks and others have also added new features to my code. The code has gotten a bit messy and difficult work with and this week was a good point to refactor the code so that I can continue building on it in the future. In this post, I want to discuss the changes I made and how I utilized Git during this process.

Commits I Made

1

First of all, I decided to move all my source code into a src directory to improve the organization of my repository.

2

All of my JS code was in a single file, index.js. I decided that it would be better to split the file up into three files: index.js, processInput.js, and createHtml.js. Index.js contains the main function, as the entry point into the program. ProcessInput.js contains functions for validating user input and and createHtml.js contains functions for converting the input file(s) into HTML files.

While refactoring the files, I did a lot of testing and noticed some bugs that I hadn't noticed before. For example, the program should be able to accept either a --config or --input flag with a valid argument. However, my program printed an error message if no config argument was specified, regardless of whether or not there was an input argument. Therefore, I found this refactoring process to be very useful in also debugging my program.

3

I renamed all the JS files so that they followed kebab case rather than camel case. For example, processInput.js and createHtml.js became process-input.js and create-html.js.

4

I had a function in process-input.js called readFile which read a single file and created the corresponding HTML file in the output directory. It also created a style.css file in the output directory every time an HTML file was created, which shouldn't be happening. I didn't like that this function for creating HTML was in the process-input.js file. I decided to remove readFile and move all the functionalities related to generating output to two new functions in create-html.js called setupOutput for setting up the output directory and calling other functions to generate all required files (such as index.html, style.css, etc.) and createHtmlFile for creating HTML files.

5

I decided to do some general cleanup, including renaming variables and functions and reducing the number of parameters for some functions. For example, a function that checks if the user input is valid or not was named getUserInput so I renamed it to checkUserInput. Another example would be the getUpdatedHtmlLayout function. Originally, this function accepted five parameters. It became hard to maintain as new features were added and I had to continuously increase the number of parameters and change all function calls. Instead, I decided to pass an object containing everything needed by the function so now the function only needs to accept one parameter.

6

I forgot to commit a few files I had deleted previously, which is what this commit was for.

7

At the very end, I did some testing and realized I had made a mistake in one line and used a variable that hadn't been initialized yet, which broke the program. I created a commit to correct this mistake.

Rebasing

I've been a bit weary of using git rebase after I messed up a rebase during my first week at a CO-OP and gave my supervisor a hard time in correcting my mistake. At the time, I hadn't used Git before and had no idea what a rebase was, and I never used rebases since, but thankfully, rebasing my commits went much better this time around.

It was my first time learning about interactive rebases and I found this process to be so useful as it gives you so much freedom in customizing your commits. I used the interactive rebase command (git rebase main -i) to squash all my commits into a single commit. In addition, I used the git commit --amend command to modify my commit message and add more details. After this exercise, I feel so much more confident in using rebases to modify my commits and project history.

Overall, I think my repository looks much cleaner now and will be easier to work with going forward.