This week I have contributed my first pull request for Hacktoberfest. This pull request was for a website for CivicDataLab group and the feature was to make an email id in the footer clickable. Although the change was small, this was the first step into actually contributing to the open source community. As I browsed around for bugs and issues to fix on Github for Hacktoberfest, this website stood out. I choose this repository because I thought it would be a great way to expose myself to different web development concepts and libraries.
CivicDataLab’s website uses RubyGems as its host, but what I found the most interesting are the libraries that they used including Particles.js and Stylish Portfolio. These two libraries add a nice graphical/clean design to the website and definitely grabs the attention of those that land on this website.
The above picture is a screenshot of what the footer looks like and the task was to make the email below the “Contact Us :” clickable. The solution was fairly simple, but before adding a simple hyperlink tag I had to analyse the existing code to look at their coding styles. As I was browsing the existing code, I found the code that they used in their previous email hyperlinks.
<a class=” text-blue” href=”mailto:firstname.lastname@example.org” target=”_blank”>email@example.com</a>
This code uses their text class which changes the text to blue and left target as _blank which opens up another window when you click on the link instead of redirecting. After the changes, the website looks like the picture shown below.
Creating a Pull Request
Just like my previous post, the procedure was almost identical.
1.Fork the repo and clone it on my desktop
2.Create a branch — Git Checkout -b Issue-31
3.Change the code
4.Check the difference and add the file — Git Diff, Git Add _individual/footer.html
5.Commit the code — Git Commit -m “”
6.Git push origin issue-31
Hardships along the way
The hardest part of creating the pull request was definitely the downloading of the application. As I said above the website uses RubyGems as the host, this means that to start the website you must use the following command.
bundle exec jekyll serve — port 4000
When I first downloaded the website, I was wondering why the application would not run with the above command. To run this command, I realized that I had to download Ruby Developer Kit and then everything worked according to how it was suppose to.
I now realize that some developers may not post step to step instructions on how to run their application and I also figures out that you may encounter errors because of many factors (operating system, software versions). For the next pull request, I will leave a lot of time to solve and investigate the errors that I may encounter on the set up process. Just like this time, I feel that it was good to review the code before making the change so when you do change the code you will have a good grasp of their coding styles.
Interacting with the community
Although I did not have much interaction with the project maintainer, I made sure to leave a comment on the issue to say that I am going to do this issue and left instructions on the steps that I took too give the project maintainer a good understanding of what I changed.
On October 5th 2019, I had my first interaction with the maintainers about some changes that they wanted.
To fix this issue, i created another commit with the following changes