Hacktoberfest Week 4: Finale

It’s officially Halloween today and what better way to celebrate than to discuss the final week of the Hacktoberfest event. Last week, I did a small issue that involved HTML and CSS which ended up getting merged into master just a few days ago. Since it wasn’t anything bigger than Week 2, I vowed to try and do something bigger for week 4 and I personally think I did pretty good this time around. This week, I worked on Issue #33 from the Open Connect Art Repository.

Open Connect Art is essentially a project that teaches users how to contribute to github project and also work together to make a masterpiece. I originally found this project near the start of Hacktoberfest but didn’t want to make any contributions since it was mainly aimed at newcomers who wanted experience with contributing and making a pull request for the first time. I decided to check out how the repository is doing and ended up seeing an issue that seemed to be a bit bigger than my previous contributions. The issue was a request to display the README.md file at the bottom of the web page. It may seem simple since you can technically just copy and paste the text from the readme file with a few adjustments to display it properly in HTML but the owner wanted the display to simply update whenever the readme file has changed. I wanted to give it a shot so I asked to work on the issue and got permission.

The first thing I did once I forked the repository was observe how the files were coded and organized. I wanted to make sure I try to follow the same coding style to avoid complications and provide consistency. After making my observations, I began to google how I can simply convert markdown to HTML and ended up finding some cool libraries that handle the task. I also had the option to use the scripts directly in the browser or just download the node.js libraries. The project wasn’t initially made with node but since I only required at least one library, I decided to add node to the project in hopes that the owner wouldn’t mind. At this point, I realized that the task might be a bit harder than I thought. JavaScript can’t really read and display files from a local path as it requires the user to manually input the file for JavaScript to read and display it. I did some research and found out that javascript only acts like this as a security measure so I had to come up with a new solution. Luckily, a friend of mine provided some assistance and suggested the use of the fs node library. The code in the markdown.js file will now read the file, convert it from markdown to an HTML file, and then display it in the index.html file. It was a really smart idea and in the end, it turned out pretty well.

The result was an HTML page displaying the readme.md file inside of an HTML page. The only requirement was if the owner wishes to update that section, they’ll just have to run “node markdown.js” in the terminal and it’ll regenerate and update the README.html file. It isn’t exactly what was request but I personally think it’s close enough to the way the owner wants it. I hope they’re fine with the way I implemented this section of the site.

Image for post
Image for post

After creating the final pull request, Hacktobefest has finally come to an end. My initial goals were to expand on my JavaScript skills and be a part of a big project and luckily, I was able to at least complete one of those goals. I’ve decided to try and work on a big project sometime within the next month and I’ll be taking the open source experience from all of my Hacktoberfest issues with me. Let’s see where my open-source journey will take me next.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store