DEV Community

Cover image for The Open Sourcerer of Forem: Beyond the UI

The Open Sourcerer of Forem: Beyond the UI

FrancisTRᴅᴇᴠ (っ◔◡◔)っ on April 13, 2026

Introducing a New Series "The Open Sourcerer of Forem"! I have been wanting to get into contributing to Open Source for some time now. H...
Collapse
 
sylwia-lask profile image
Sylwia Laskowska

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 😂

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ • Edited

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!

Collapse
 
sylwia-lask profile image
Sylwia Laskowska

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 😂

Thread Thread
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Oh boy. Hope that project looks nice! Did you share it already or planning to?

Collapse
 
math-krish profile image
math

Oh hey! That's the issue I raised. Thank you for taking it up ✨

Thread Thread
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

No problem! Saw you made a comment on the PR. I will respond to that sometime today! Thanks for pointing out the issue!

Collapse
 
itsugo profile image
Aryan Choudhary

This is so cool Francis! Your growth is really inspiring, keep it up!

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Aryan :D

Image

Collapse
 
konark_13 profile image
Konark Sharma

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:

img

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

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!

Image

Collapse
 
konark_13 profile image
Konark Sharma

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.

dev

Thread Thread
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

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 :)

Thread Thread
 
konark_13 profile image
Konark Sharma

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.

Thread Thread
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks! I appreciate it! Still waiting on that email. Let me know!

Image

Collapse
 
henryaza profile image
Henry A

The z-index debugging process is a great example of why open source contribution is underrated for learning. You went from "something looks wrong" to inspecting the DOM, finding the class name, grepping the SCSS source, and tracing the styling chain — that's the exact diagnostic workflow you'd use debugging production CSS issues at a job. And Ben's refinement from 9999 to calc(var(--z-dropdown) - 1) is a nice lesson in design token thinking — hardcoded values solve the immediate bug but create future conflicts when another element also needs to be "on top."

Looking forward to the next chapter.

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Henry! Do look forward for the next chapter of this series :D

Collapse
 
automate-archit profile image
Archit Mittal

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.

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

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

Collapse
 
johnnylemonny profile image
𝗝𝗼𝗵𝗻

Fantastic write-up, Francis — clear, practical, and inspiring. I loved the step‑by‑step debugging: inspecting the DOM, locating the crayons-article-actions styling, and shipping a pragmatic fix that evolved from a quick z‑index patch to a tokenized solution. Your honesty about the first PR not merging and the value of slowing down makes this especially relatable for new contributors. Looking forward to the next Open Sourcerer post and any tips on tooling or tests you used.

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks John! I appreciate the support! Stay tuned for the next one and let me know if there is any feedback you will like to see :D

Collapse
 
daniel_codes profile image
Daniel

Love seeing this kind of open-source collaboration in action. One person spots an issue, another jumps in with a fix, and others join the thread—this is exactly how things should work. Also, dark mode bugs are always sneakier than they look

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Daniel!

Collapse
 
marina_eremina profile image
Marina Eremina

Congrats on getting your PR merged, great job! 🎉

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Marina!

Collapse
 
fajab_aggba_b03d8c8699c66 profile image
Fajab Aggba

THANKS

Collapse
 
aibughunter profile image
AI Bug Slayer 🐞

The z-index debugging walkthrough is a perfect example of how open source contributions deepen your understanding far beyond just reading docs. Great first PR story!

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks :D

Collapse
 
frickingruvin profile image
Doug Wilson

Intimidating, for real. Thanks for sharing your experience!

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Doug! Appreciate it :D

Collapse
 
aibughunter profile image
AI Bug Slayer 🐞

Great walkthrough of contributing beyond just UI fixes! The debugging journey from z-index to grepping SCSS shows how much you learn from diving into an unfamiliar codebase.

Collapse
 
leob profile image
leob

"Open Sourcerer", haha I like that!

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Thanks Leob!

Collapse
 
konstellate profile image
Konstellate

Thanks

Collapse
 
itskondrat profile image
Mykola Kondratiuk

environment setup is always the hidden tax. projects that nail their docker-compose onboarding get 10x more first-time contributors.

Collapse
 
alexsan147 profile image
alex

it so hot

Collapse
 
david_hyland_08f49962a50f profile image
David Hyland

Interesting read

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ (っ◔◡◔)っ

For sure! Thanks for reading David :D