#1 | React/NextJS: mithi/epic-react-exercises (Mar 6, 2021)

Project #1

March 6, 2021: mithi/epic-react-exercises

For our first stop, we visit the Philippines! ✈🛫🛬

---

I'd first found Mithi's project on the /r/reactjs subreddit. It'd gotten featured (puts your post into a carousel at the very top of the subreddit) and had received hundreds of upvotes (773 as of this morning). She'd even made a short preview video of her React app in action. These days, in an ocean of user-generated content pouring in from all over, it really impressively stood apart from all the rest. Furthermore, when I clicked into her repo I saw it'd gotten 78 stars and even nearly a dozen forks.

But not a single PR from an outside contributor! ☹

Having been on the hunt, looking for a good project to first contribute to, this was a project that immediately, intuitively felt worthy. Additionally, there were other small details that felt like hints from the Universe too: For example, clicking around in her examples, I also saw references to Pokémon (a staple of my own childhood!) as well as Rick & Morty (a newfound staple of my adulthood, recently discovered only in 2020!) Clearly, Mithi was doing God's work but no one else was contributing. I thought to myself: "This. This will be the first PR I ever make. It's going to be to this project."

Mithi's project, in retrospect I now realize, was probably the kindest, best possible "newbie-first-PR-ever" experience that I could've humanly asked for. She'd organized all of the outstanding issues and each was even properly labeled! Complete with gitmoji! 😮 On Reddit, another user had suggested some feedback and Mithi had replied with an issue tracker link-- it was a known bug: a bug in her app related to the right pane not properly scrolling back to the top when the user switched between exercises:

"This is the issue," I thought. "This is gonna be my first PR. Fixing a scrolling issue. Surely, for the love of God, if I couldn't fix a simple scrollbar issue, what was that four-year Computer Science degree and crushing student loan debts for? Let's do this."

So I forked the repo and cloned it to my local machine. It was time. I was going to contribute! 🎉

---

Btw: In addition to cloning the code to my local machine, I also first left a note in the GitHub issue tracker itself, specifically:

The specific thinking here is to just give the maintainer (Mithi, in this case) as well as any other aspiring contributors a heads-up that you're on the case! In this particular example, I was able to fix this bug and turn it around in an hour, so it was less necessary here. But more generally: Sometimes issues are tricky, thorny problems/tasks and take multiple days to implement or fix. So it's a good idea (IMHO, anyway) just to communicate upfront that you're desiring to take ownership of a specific issue. It'd be very tragic to pour hundreds of hours into some fix only to find out later the project maintainer was going to deprecate that feature entirely or have another well-intentioned contributor somewhere on the other side of the world commit their change first! In decentralized development, good communication is key! 👍

---

Anyway, after cloning Mithi's code to my local machine, I saw a package.json file indicating it's an npm project so I dutifully performed the obligatory npm install. Per usual, npm spun up, connected with the mothership, and then saw fit to bring down 200 megabytes of lord-knows-what.

(I remember last summer when I was first learning node.js-- this entire system of "just download ALL dependencies fresh, every time" is still new and shocking to me. But I guess storage and bandwidth is cheap nowadays! So I suppose it was inevitable? 🤷‍♂️)

There weren't instructions anywhere on how to build, install or run, but you can easily just figure all of that out by looking at package.json under the scripts section:

At the time I had no idea what next was. Zero notion whatsoever. But whatever. "Let's do this!"

I ran: npm run dev and it worked!

As an aside, if you'll indulge an ancient, crusty, curmudgeon for just one bit: Back in my dinosaur days of yore, being able to pull down a repo and just have it work was actually not so trivial. I know the young blood kids out there won't understand this, but where I'd worked, it was always a crapshoot and while the details are all hazy to me now (nearly a decade ago!), I remember at the office we were using something called Maven and there was some .m2 folder I kept on my local machine with a trillion jars inside of it. Yet, somehow, when you built on another machine --a coworker's or remoted in on some faraway unix box-- it was always a dice gamble whether the whole enterprise would actually start or just explode on the launchpad Challenger-style. On more than one occasion, we tried releasing to PROD starting on a Friday evening --that was the only time we were allowed to do releases, after 8p ET-- and everything deployed fine on all but one PROD box which was stubbornly throwing incomprehensible stack traces that no one on our team understood. We were there until 2am on Saturday morning before we finally were forced to roll everything back, having gone past the approved change window on our release ticket. Those were the days.

---

Anyway, back to 2021: Once I get Mithi's React app running locally on my computer, the rest of it is pretty straightforward. From some earlier Googling and SO'ing I'd done, I know that document.getElementById('youridhere').scrollIntoView() are the magic words I need to copy/paste somewhere in order to get the desired result. And on the issue tracker itself, Mithi had already super-helpfully pointed me to literally the exact, relevant line of code that needed attention:

And from my previous React exercise experience, I knew that anytime we wanted to trigger side effects, you use the useEffect(…) hook which runs after all everything on the page has been rendered. So all I had to do was add an id (currentArticlePlus? Idk. 🤷‍♂️ Naming stuff is hard!) to the div we wished to scroll back to the top of, and then useEffect(…) my way to victory, triggering the scrolling to happen every time the div2 object changed (div2 was the container that held the right pane). My whole change in its entirety:

After making these changes in VSCode, the mysterious next hot-reloaded my changes and to my complete delight, it worked! And I clicked around on my local build for a while just making sure everything worked. Everything did! Final result of my PR:

So finally, I submitted my PR and then something I'd never seen before happened: This thing called "vercel bot" sprung to life and deployed my PR! Complete with a helpful preview link!

Amazing! At this point, high on the euphoria of total and absolute victory, I went back to Reddit and replied to that one guy's comment:

And that was it! The next day, Mithi promptly accepted and merged my PR

and just like that, my first PR ever was in the bag! 😄🎉🌟⭐✨

---

Epilogue:

Thanks to working on Mithi's project, that actually introduced me to Vercel and the entire world of NextJS which I'd actually never seen before. But in case you've been living in bomb shelter and hibernating like I had been for the last near-decade, NextJS --as far as I can tell-- is basically the Ruby-on-Rails framework but in JavaScript. Like in RoR, with NextJS, you basically structure your project in a very specific, opinionated way and then "it just works." And "Vercel bot" is a GitHub installed tool that can detect commits and PRs that auto-deploys preview channels. (Previously, with Heroku and Firebase, I'd always configured GitHub Actions to do this. But I guess sometimes you want to preview your code but not introduce any actual .github/ config files into your repo? Or at least I think that's the motivation?)

Anyway, on their site, Vercel does offer a cool tutorial that walks you through on how to create a simple blog with their NextJS app. It takes maybe an hour to walk through everything and at the end of it, you'll end up with this! 😀

After that initial scrolling fix, I did contribute another fix to Mithi's project. Was a ton of fun too! Though that one took a bit longer. If you are just learning React, I cannot recommend enough looking at Mithi's project, forking/cloning her code, and then submitting a PR for one of the issues she's organized. She is super-knowledgeable and friendly! And replies to questions and comments super-fast! I honestly couldn't have asked for a better first-PR experience. Thank you, Mithi! 🙏

---

Alrighty, and that's all for this week! Tune in next week for open-source project #2! Next week, we'll depart from webdev world for a brief interlude to sojourn to the land of Python. Teaser: If you like Tetris, video processing, and/or data analytics this will be the show for you! Same time, same channel next week! Hopefully see you then! Until then, Open-Source Avenger out! 😄🚀