Refactoring Code in Octo!

Update

Hello Everyone! Welcome to my weekly blog post about my journey in Open Source. This week I will be focusing on my experience with refactoring my code for Octo and working with the rebasing feature with Git. I also wanted to share that while writing these blog posts, I will also be posting about Hacktoberfest every week until the end of October so be sure to read those blog posts as well.

Refactoring Code

When I first started reviewing my code I was looking for common problems that could be modified to make the code more readable or less redundant. I found enough of those problems to start making a list and track what I wanted to change about my code. Here are the problems I wanted to refactor!

Function names aren’t clear enough.

While reviewing the code I found that some functions names don’t clearly explain what the functions do. An example of this is the getPathInfo function. When I first named the function I was naming it based on one of the parts of the function. Now seeing how this function acts more like a main function rather than just handling one part, I found a more fitting name for it. Now seeing this problem I renamed the function from getPathInfo to main.

Redundant code that can be turned into a function

When I was looking at the textToHTML and textToHTMLWithMarkdown functions I found some redundant code for processing each line from the file. I saw this and wanted to write a function so we can get rid of the redundant code. It was difficult at first on how to transform the code into a separate function because of variables tied to the functionality. Once I was able to figure out how I wanted the function to work with the code, I was able to replace the redundant code with the lineChecker function.

// New lineChecker function
const lineChecker = (line, isFirstLine) => {

let document = ``;

if (line !== "" && isFirstLine) {

document += `<h1>${line}</h1>`;

} else if (line !== "" && !isFirstLine) {

document += `<p>${line}</p>`;

} else if (line === "") {

document += "<br />";

}

return document;

};

Redundant variable declarations & variable names need better names

Some of the code that was written had variables that would be defined at the start of a function and then declared later in the function. For this situation, that was not needed as the variables can be defined and declared at the start of the code. Not a lot of variables were changed as most of them were named best to explain their purpose. The main one I did change was doc to document. I changed this variable name because I find that it is important to use full words so everyone understands what the variable is. I know this is a bit extreme but it is always good to be very clear with your variable names.

Removed unused code

Removing unused code was the easiest fix as visual studio code shows you want isn’t being called or used. It was also easy because this is a very small project and there was not as much unused code as a major project might have. This part I just removed my original textToHTML function and replaced it with the textToHTMLFixed function.

Rebasing and changing Git history

Rebasing my code was a lot easier than I thought it would be. I used the

git rebase -i main

and went into interactive mode to squash everything into a single commit. After I was finished I used

git commit —amend

to edit my commit message to something more clear.

Conclusion

In Conclusion, no code is perfect code and refactoring code can teach you a lot (even if it is your own code). During the refactoring process I went very slow with each change to make sure nothing would break and made sure there were no bugs while I was running the code. Don’t forget to go find a Open Source project and contribute! This week I found a Open Source discord being created called Fosscord and thought it would be very interesting to share. I am still finding a style with how I want to do blog posts so if you have any feedback or recommendations please write them in the comments! Thank you for reading!

Comments

[Lars Grammel]

Great post!

I think your lineChecker function would be a great, small refactoring kata. Here's how it looked after I refactored it:

const lineChecker = (line, isFirstLine) => {
  if (line === "") {
    return "<br />";
  }

  return isFirstLine ? `<h1>${line}</h1>` : `<p>${line}</p>`;
};

Would you mind if I use it as an example and trial ground for a refactoring tool I'm developing? ( marketplace.visualstudio.com/items... )

[Luigi Zaccagnini]

Thank you for asking, I do not mind at all! I also think your tool is very cool! Thank you for sharing it with me!

[Lars Grammel]

Thanks 😊

[Lars Grammel]

I was curious how other people would refactor it, so I posted it here: dev.to/p42/how-would-you-refactor-...