Gatsby and Regex - My First Pull Request

regex.guide - An Easy Regex Building Tool

For my first pull request, I decided that I would look for a User Interface problem that was simple to solve so I could get used to the pull request process, I was looking for something familiar and comfortable, and what I found was different than what I expected. I had it very easy in Release 0.1 as I was working with friends and classmates. The internet is a very different place. In the end, I worked on an open source project called regex,guide.

Regex.guide, created by pacdiv is a tool for creating regex, by translating the requirements of you regex from an English sentence to a regex expression. It is a web-based front-end app programmed using GatsbyJS. GatsbyJS is an open source website framework that is based on React and creates static files to ease hosting.

But I'm getting ahead of myself, let's get to the real issue. The Issue.

Choosing the Issue

I searched for about 5 hours before I found something to work on, over the course of about 3 days. Every project that I found was either dead or completely out of my league. It wasn't until October 1st that I found something, due to the influx of issues aimed at hacktoberfest. Interestingly enough, the issue I found was not labeled Hacktoberfest. It was labelled "good first issue", and the label was correct. The issue was called "Add a reset button".

The issuer was pacdiv, who needed a reset button added to his regex guide app, created using the Gatsby framework, and written in Javascript and CSS. The reset button needed to be a transparent button, labelled "Reset Conditions" and must delete all current regex conditions selected, as the current method was to delete one at a time. I have included images of this process below. All that was left was to ask pacdiv if I could work on this issue. He allowed me to work on it and I got started.

regex.guide with 1 condition

regex.guide with 2 conditions, menu open to delete the second condition

regex.guide after deleting the second condition, menu open to delete the first

Preparation to Add the Reset Button

First, I needed to learn what Gatsby was. I know how to write Javascript and CSS files, but I had never heard of Gatsby. I learned that it was based on React, which I have used before. I am not the biggest fan of React, but I decided to move forward. It would be good to learn a new framework. What I learned is that Gatsby is simple and fast, but doesn't hold your hand as much as React and Angular do. I learned how to create components, routing, and how to use CSS with Gatsby. Finally, I learned how to set up my environment.

So after I forked and cloned the repository, I had to run npm install to get all the dependencies required to run the site. However, I couldn't get the site to run. This is when I discovered that Gatsby, like Angular and React ,has it's own development environment. I installed Gatsby globally, and was able to run the website with no issues. I started to familiarize myself with the contents of the app. After some searching I found the main component for the app, playground.js. Most of my work was to be done in this file. However I also needed access to core.js, which contained functions I needed and DefaultButton.js to get the CSS code I needed for my button.

The Solution and Pull Request

Version 1

I made a pull request once I was satisfied with the functionality. My first solution was to add a button, which on click ran a function called onResetConditionsButtonClick(). This function would called this.core's deleteConditions() function to delete each condition one at a time, until there was nothing left to delete. However, this code was a bit sloppy, and pacdiv needed a better version.

onResetConditionsButtonClick() function - first version

Version 2

The problem was that this function reset the entire app back to its original state, which didn't follow his original plans. Aside from that, the actual deleting should be contained in the core.js file itself, as it was already handling add, update, and delete operations. I followed his instructions and my second version removed most of this function, as well as removed the while loop altogether. I simply emptied the array of conditions instead, and that simplified my solution greatly. I have included the updated functions below, and the final look of the button itself:

onResetConditionsButtonClick v2

New Function in core.js: deleteAllConditions()

Button Design, pulled from DefaultButton.js

Version 3

Pacdiv wanted me to change the method of deletion back to array = []. I figure this method must fit his code better, so I've changed it to his specs. I also deleted another array that I didn't know needed to be deleted.

deleteAllConditions() v2

Interaction with pacdiv

I had a great experience interacting with pacdiv. I have no idea who this person is, but I like them. They were extremely professional and helpful. I asked them multiple questions and we discussed what made sense for the app in both my issue and pull request. We talked a lot about this "simple" reset button. Aside from a couple of other issues, things generally went well with my additions, and he seemed to like all of them. Our conversations exist across the issue and pull request links listed above. I would highly recommend working with this person, and I think I will continue to contribute to this project, as I really like pacdiv's idea.

As of now, my pull request is pending approval, so I will update this page if need be...

Problems that I had in this process

I had a great time working on this project but there were definitely problems that I faced:

• I had difficulty finding an issue to work on
• I had trouble getting the Gatsby app running on my machine, as I've already described.
• pacdiv included prettier in his package.json file, which updated 53 files to different formatting. For some reason this only activated when I tried to push my version to Github, so for my pull request instead of changing 3 files, I changed 53 files. I didn't understand why until I asked pacdiv and he pointed me in the right direction
• Gatsby was a lot like React, which I am not strong in. Instead I treated it more like HTML and didn't bother making a separate component for the reset button. I adapted to the situation using a familiar method.

Although I had some difficulties along the way, I look forward to the next pull request with confidence.