Introducing a New Series "The Open Sourcerer of Forem"!
I have been wanting to get into contributing to Open Source for some time now. However, it was difficult for me because it is quite intimidating.
Not only you have to contribute to a Repository with Hundreds of people, but you also have to set up your environment which I believe is the hardest part into getting started on contributing in general. This process requires the user to read documentation, fix errors along the way, etc.
Fortunately, after posting the article on how I used Google Gemini in my Winning Google Gemini: Writing Challenge, I was able to start actual contribution and I was grateful that one of my Pull Requests got merge for the first time! I hope you guys enjoy this series :D
Welcome to the series where I tell a tale of an Open Sourcerer of Forem (which is me!) made contribution to the Official Forem Repository! I will be sharing the issue, the Pull Request, and what I have learned (which you may find it useful if you want to contribute)!
While browsing Dev.to, I noticed a UI issue where two layouts appear to overlap, resulting in a combined and messy layout. This causes visual misalignment on the page and affects readability.
Desktop (please complete the following information):
OS, version: Mac
Browser, version: Brave
Smartphone (please complete the following information):
Not tested on mobile.
Additional context
I regularly use Dev.to and noticed this while browsing. It may be a minor UI issue, but I thought it would be helpful to report it so it can be reviewed if necessary.
This issue states that the UI z-index is out of place, specifically on the multiple reactions. For example, you notice that this UI z-index is incorrect:
This is my first issue I tackle as an Open Source Contributor. I decide to tackle this since it allows me to get a sense of the Code-Base in general.
The first steps I did was to find the ClassName or ID of the element responsible for the issue. That way, I can search up the name in Visual Studio Code and look for that name in a CSS file.
When I began investigating, I found the ClassName responsible, which is crayons-article-actions.
On my Visual Studio Code, I search the name and it seems to be in the SCSS file article.SCSS. I change the Z-index to the highest number and began making my Pull Request from there.
The Pull Request
Here is the Pull Request I made to solve this issue:
Here is what I learned after working on this issue!
1) Humble Beginning
Before this PR, I made my first Pull Request, which did not get merged. I realized that I was creating a Pull Request that I believe that is needed and not what Forem needs. There is no shame into that and sometimes you fumble before you can succeed. Not every Pull Request will get merged and that's ok!
When contributing to any open source, understand their needs and accomplish it. To start off, look at their issues and find an issue that seems doable to tackle. It can be as simple as fixing the UI, or changing documentation. Whatever it may be, make sure it aligns to their needs!
2) Slow Down
Even after the Pull request got merge, I had a conversation in that issue with @konark_13 about it. I feel like it went too quickly since I was so eager into completing that issue.
According to the Forem's documentation, you have at least 2 weeks to work on the issue. That should give you a lot of time. It is also important to document your work as well and keeping it updated, so that the Repository maintainer will know that you are still working on the issue.
Overall, communication is important to any collaboration! Apologies @konark_13 if I was tackling this issue too quickly and not giving you a chance!
I want to become an Open Sourcerer of Forem! Where do I start?
Everything you need is on the Official Forem GitHub Repository!
Welcome to the Forem codebase, the platform that powers
dev.to. We are so excited to have you. With your help, we can
build out Forem’s usability, scalability, and stability to better serve our
communities.
What is Forem?
Forem is open source software for building communities. Communities for your
peers, customers, fanbases, families, friends, and any other time and space
where people need to come together to be part of a collective
See our announcement post
for a high-level overview of what Forem is.
dev.to (or just DEV) is hosted by Forem. It is a community of
software developers who write articles, take part in discussions, and build
their professional profiles. We value supportive and constructive dialogue in
the pursuit of great code and career growth for all members. The ecosystem spans
from beginner to advanced developers, and all are welcome to find their place…
