Adding Features - Branches and Merges
Tags: opensource
Published: 2021-10-01 21:21:46

## Intro

I've been working on a static site generator called [Jellybean](https://github.com/lyu4321/jellybean) over the past few weeks and this week, I wanted to add a few more features:

1. Support for specifying a language from the command line
2. Markdown support for inline code blocks
3. Markdown support for horizontal rule

## Support for Language

The first issue I created was to [add support for the --lang/-l flag](https://github.com/lyu4321/jellybean/issues/12). This flag allows users to specify a custom language in the command line arguments. This language would be added to the lang attribute of the `<html>` tag in the generated HTML files. If no language is specified, the default is 'en-CA'. I added this feature by using [yargs](http://yargs.js.org/), which I have used to handle all command line arguments. When generating the HTML from a template HTML file, I added the following line:

`html.replace('en-CA', argv.lang || 'en-CA');`

which allows the language to be replaced by user input or 'en-CA' if there is no user input for language. 

The commits I made for this issue were:
1. [Merge commit](https://github.com/lyu4321/jellybean/commit/d1826009df7e3b1d314f7074fe6d7f64027d0d37)

## Markdown Support for Inline Code Blocks

Next, I created an issue to [add markdown support for inline code blocks](https://github.com/lyu4321/jellybean/issues/13). This would allow users to display code on the generated webpage by wrapping the text in backticks in a markdown file. 

To do this, I added regex in the code to replace backticks with the `<code></code>` tag:

```.replace(/\`{1,}(.*?)\`{1,}/g, '<code>$1</code>')```

The commits I made for this issue were:
1. [Add support for inline code blocks](https://github.com/lyu4321/jellybean/commit/cf3c65d17787ff6c5545b94e485ac3cc2b5c641d)
2. [Update the README](https://github.com/lyu4321/jellybean/commit/37f645a4bcddff711b188ea945356fd7e6f36809)

## Markdown Support for Horizontal Rule

The last issue I created was to [add markdown support for horizontal rule](https://github.com/lyu4321/jellybean/issues/14). This would allow for three or more dashes to be converted to a `<hr />` tag in the generated HTML. 

Similar to the second issue, I used regex in the code:

`.replace(/-{3,}/g, '<hr />')`

The commits I made for this issue were:
1. [Add support for horizontal rule](https://github.com/lyu4321/jellybean/commit/de86ee8eda66b547f4ab4d31d07929a7124e9d6b)
2. [Update the README](https://github.com/lyu4321/jellybean/commit/aef94cabc7071e45eb3850b3d467a88c351197d6)

## Conclusion

While working on these features, I worked on them in parallel. I thought that I would encounter some conflicts when I tried to merge them into the main branch, but this only happened once, when I updated the same line in the README file in two different branches. This was easily resolved by keeping both changes ([here](https://github.com/lyu4321/jellybean/commit/ae3718e2453ba6273e9eb09bb461f579530af408) and [here](https://github.com/lyu4321/jellybean/commit/0c9f7c1a697ab18a8138aca7dbe8971ba695b72b)). I think that the process of branching and merging was quite straightforward as I was the only one working on all three features and could easily decide how to resolve any conflicts. Based on my experience working with others in the past, it is definitely more complicated to resolve conflicts when working with a team where many people may be changing the same code simultaneously. 

In doing this exercise, I think I also became much more organized. In the past, I would create many branches without issues and sometimes accidentally commit changes for one branch in another branch. By creating issues with tasks, completing tasks one by one, and frequently checking which branch I'm on, it helped me keep track of what I was working on and I will continue following this method of working in the future.