Open Source Profile Contribution -Challenge 10
Guide to completing a pull request
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.
Now you have an idea of what an open-source looks like 😉
Prerequisite
- Your computer with an internet connection
- This article 🙅♂️
What you will learn by participating in this Challenge
- Teamwork
- Use of Git Version Control (Github)
- Connecting your Git to your Github Account
- Contributing to someone's project on Github (Open Source)
- 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
Members Page
There is a membership section on the website that is meant to display our profile card, but yours is not there yet 😥.
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.
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
Open the local copy of your forked repository on your code editor
Add your image to the assets/img folder and re-name the image with your name
Then find the public folder and open the members.html
Inside the members.html you will find a portion of code like this 👇
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
- Run
git status- this will show all the changes you've made so far - Run
git add .with the dot - this will add and prepare them for commit - 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 👇
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.
Popular Bug and Error Message
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 🙋♂️
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.