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 (17)
Nice, that’s awesome 😄 If you’re looking for tickets, I can report a few — some things got a bit messed up after the recent dark mode layout changes 😂
Yes please! I would love to see it! I am already fixing an issue on where on Dark Mode, you don't see the text in the article stats. Already working on it:
github.com/forem/forem/pull/23141
Thanks Sylwia!
This is awesome!! 😄 Yeah, I noticed that too. I’d totally be tempted to tinker with it myself, but nope… not right now 😅 I need to rest after my project marathon, I literally took a 2-hour nap this afternoon 😂
Oh boy. Hope that project looks nice! Did you share it already or planning to?
Oh hey! That's the issue I raised. Thank you for taking it up ✨
I'm glad you came forward and solved it instantly. In open source, we need guys like you who can pull of miracles in one night. It was really awesome to see your PR getting merged.
Keep up the good work and keep on being open sourcerer.
Me regretting in the corner for not acting fast like you:
To be fair, it was a simple styling issue, so it was quick by default if you knew where to look. Sorry if I didn't get you a chance since I had a feeling that someone else, other than us, would tackle the issue even though it is already claimed. Will make sure to leave room for you if we decide to tag team on an issue in the future! Thanks Konark!
It's really amazing to see you are fast as flash. Keep it up these issues need to be assigned and completed asap. The gives you the edge over other people thinking whether they should take it or not.
Sure, thanks for the offer. I don't think I can ever compete with you. Maybe, need to be reverse flash to keep it up with you. Would love to work and learn from you, Sensei Francis.
Hey I am no Sensei lol. If anything, @ben is much faster because you know...he owns it so he knows everything!
Speaking of fast, he did fix an issue I pointed out the moment I commented on the win I had this week (weeks ago): dev.to/francistrdev/comment/364o4
The solution was much more deeper than I thought, but at least the knowledge I gained from it allowed me to fix a different issue :)
Amazing sensei. @ben is Master Oogway, and you are his dragon warrior.
I knew you were amazing but this much amazing, finding bugs and killing them asap. That's super fun. Keep it up and keep finding and fixing bugs in forem to make it even better.
The 'beyond the UI' framing is spot on. Most people only see the frontend of open-source platforms like Forem, but the real complexity lives in the background jobs, caching layers, and data pipelines. Contributing to open source at the infrastructure level is also where you learn the most transferable skills - understanding how production systems actually work under load is way more valuable than adding another component to a design system.
Well said!! Open-Source tends to be difficult because it's not your ordinary "Full-Stack" application where it is built in React or Angular. It is way more complicated than that and I believe that's why people tend to move away slowly because of it's difficulty.
If you were to contribute, you will learn "real complexity lives in the background jobs, caching layers, and data pipelines" as you mentioned along with understanding how systems work! I believe I am scratching the surface of how Forem work and hope that I continue to understand it more later on!
Thanks Archit :D
Congrats on getting your PR merged, great job! 🎉
Thanks Marina!
This is so cool Francis! Your growth is really inspiring, keep it up!
Interesting read
"Open Sourcerer", haha I like that!