Unclebigbay's 🚀 Blog

Open Source Profile Contribution -Challenge 10

Guide to completing a pull request

Ayodele Samuel Adebayo's photo
Ayodele Samuel Adebayo
Jul 2, 2021·

7 min read

Open Source Profile Contribution -Challenge 10
Play this article

Hello my beautiful friends on the internet, today we are doing something entirely different from what we have been doing before because it's open-source time 💃.

For the past few weeks, we have been engaging in individual tasks, and now it's time to learn and start working as a team, as you might not end up working as a solo developer.

Let's take a look at the beautiful definition from Edidiong Asikpo about open source.

edidiong asikpo definition of open source on linkedin

Now you have an idea of what an open-source looks like 😉

Prerequisite

  1. Your computer with an internet connection
  2. This article 🙅‍♂️

What you will learn by participating in this Challenge

  1. Teamwork
  2. Use of Git Version Control (Github)
  3. Connecting your Git to your Github Account
  4. Contributing to someone's project on Github (Open Source)
  5. How to make pull requests that will get merged on Github

Without any further ado, below are the instructions to contribute your profile card.

There is a website for unclebigbay and friends (you and me).

Landing Page

frame_generic_light (24).png

Members Page

There is a membership section on the website that is meant to display our profile card, but yours is not there yet 😥.

frame_generic_light (25).png

Task

In other to have your profile card displayed on the member's page you have to make a pull request through Github.

GUIDELINES

1. Fork the unclebigbay and friends repository.

By forking a repository, you're making your own copy of the project, so you can edit and submit your own updated copy to be included in the original copy of the project through a pull request.

frame_generic_light (26).png

2. Having it on your machine

After forking the repository on your own online Github account, we need to get it to your computer, so you can edit the project with your favorite code editor.

If you have Git installed on your computer already, open it and run the code below

git clone https://github.com/<YourUserName>/unclebigbay-and-friends-official

The code above will download the forked repository (your own copy) from your Github account to your computer so that you can edit it 😉.

Check out how to connect your Github to Git in 5 steps if you do not have a Git setup already How to Connect GitHub to your GitBash in 5 simple steps

At this point, you can choose to open the index.html file on your browser by double-clicking on it.

3. Creating your own branch

Now that you have your own local copy of the project on your computer, the next thing to do is to create your own branch in the project version control.

Branch in this context means your own experiment lab, where you carry out activities that might fail or be successful, this branch will help you not to mistakenly mess up the main branch of the project.

Navigate to the project folder using the code below 👇

cd project-folder-name

Then run the code below to create your own branch 👇

git checkout -b your-new-branch-name

Your branch name must tell what you're doing, for instance, unclebigbay-profilecard-branch, something like that will do.

4. Adding your own card

  1. Open the local copy of your forked repository on your code editor

  2. Add your image to the assets/img folder and re-name the image with your name

  3. Then find the public folder and open the members.html

  4. Inside the members.html you will find a portion of code like this 👇

image.png

5. Creating your own Template

You can copy my own template and edit it, ensure to begin your template with <!-- Your name --> and end the template with <!-- / Your name -->.

This will make the code easier to read when next you want to edit your profile and will help other contributors to know where the last template is.

Now, go ahead and edit the information with yours 💃.

To add extra style to your own card replace the <article class="unclebigbay"> with your own name if you have any style for your own card and declare your styles in the members.css file.

6. Preparing your updated branch for pull requests

Now that you have added your own changes and checked on your browser, now it's time to send your pull requests to the original main branch so that your profile can be online 💃💃💃.

To get this done, following the instruction below

  1. Run git status - this will show all the changes you've made so far
  2. Run git add . with the dot - this will add and prepare them for commit
  3. Run git commit -m "Add: your-name profile - this will take a screenshot of the current state of your branch, so we can revert back in the future.

Future can be in 2 minutes 😂

7. Pushing Changes to Github

Now that our branch is ready to be shipped to the main Github repository, run the code below to update your online branch 👇

git push origin <your-branch-name>

your-branch-name is your branch name, remember this unclebigbay-profilecard-branch?

If you have any error messages at this point, kindly let the community know, bugs are normal and vary when working with Git just ask in the comment section or on our WhatsApp group, we are waiting to help 🤗.

8. Submitting your branch for review

Now that you have pushed to your online copy of the repository, refresh your repository page and you will see a compare and pull request button.

Something like this 👇

image.png

Click on the button and follow the instructions that come next until you get a message that your pull request has been made.

I will be glad to merge your pull requests as soon as possible, also, you can get a message to review your code again and make a new pull request, maybe because something broke (maybe).

What next?

Now that you've forked the repository, clone the repository locally, created your own branch, made a pull request, and probably merged.

Congratulations, your profile will be added to the member's page 💃💃💃, keep an eye on your Github notifications and our (you and I) website at www.unclebigbayandfriends.netlify.app

What could go wrong 😖

Don't freak out 🤚 if you keep encountering issues, reading these guidelines might not be as smooth as doing the practicals, which is normal, all members are updating the main branch at the same time, and also bugs vary when working on a team and comes differently for every computer, kindly reach out to the unclebigbay and friends community if you need assistance.

Merge Conflict

This comes in different styles, especially when someone else has updated the main branch before you and probably posted their own profile where you placed yours (funny but real) laugh it off 😂.

Quick fix: you need to update your own branch (making your own branch even with the original branch) - this solution varies, so kindly reach out to unclebigbay and friends community to help you with the best option

Feel free to try things out and don't be afraid to make mistakes, as new bugs will create a task for someone else in the group, which at the end will be an experience for everyone, that's how we learn sometimes.

You can also check out the developer typing game an open-source project.

Looking forward to seeing your pull requests

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you.

Let's connect on

My friend and I are holding a meetup every Saturday to discuss JavaScript and other programming tips and to support ourselves.

You can be a part 👇 of the community by joining our WhatsApp group

See you in the next article. Bye Bye 🙋‍♂️

image.png

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee.