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
Check out the post that start it all:
Welcome Sourcerers!
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)!
The Issue
There is an issue named "UI Issue" by @konark_13:
UI Issue
#22902
Describe the bug
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.
To Reproduce
- Go to https://dev.to/devteam/welcome-thread-v367-33cn
- Navigate to the comment.
- Hover over the likes over the comment likes.
- Notice that two layout components overlap and merge into an inconsistent layout
Expected behavior
The layout should render correctly without overlapping elements. Each component should maintain its intended structure and spacing.
Screenshots
https://github.com/user-attachments/assets/dcb6f2bb-8579-49d2-babb-c3c2f53ed464
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:
Z-Index Increase for the Emoji UI
#22905
- [ ] Refactor
- [ ] Feature
- [x] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
Fixed the UI issue on the Emoji where you can see the "Like" button over the list of emojis as shown below:
This also happen in the GIF. It is fixed now:
- Related Issue #22902
- Closes #22902
1. Go on any post on Dev.to.
2. Inspect the element page and look for the class name "crayons-article-actions print-hidden".
3. Change the CSS.
Instead of:
z-index: var(z--sticky)
It should be:
z-index: 9999
4. Comment out the z-index for this class below:
5. Then scroll and it should be the highest z-index of the page.
All it does is increase the "z-index" to 9999. It is worth noting that this is not a "great" solution, but it does solve the issue for now.
Later on, @ben refine this solution:
// Ensure this is above comments but below dropdowns/modals/popovers (like billboards)
z-index: calc(var(--z-dropdown) - 1);
Ultimately, the issue was fixed as shown below:
What I learned
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!
Forem 🌱
For Empowering Community
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…
I suggest to setup your environment and making sure everything is working. Ultimately, you are trying to get the localhost to run!
You made it to the end!
You have made it to the end Traveler! Thank you for reading this chapter and stay tuned for the next chapter!
Top comments (0)