Landed Two PR's, And Made A New Friend - Part 2

As an addition from my last post, which you can read here, we can dive in to the PR that I spent more time working on.  Again, although it was easy, I learned a lot about the entire debugger.html project and did some research about React in the process, which I'm really interested in learning more about. Just so we're on the same page, you can see the link below:

https://github.com/devtools-html/debugger.html/pull/4230

In this bug, I was asked to move all of the workers to their own directory.  It sounds really simple but it does require a lot of testing in order to get it landed.  Thankfully, I had help learning how testing works from Senior Software Engineer for the Mozilla DevTools team, Jason Laster.

Before I discuss what I fixed, I have to give kudos to this guy.  When I joined the Slack channel, Jason was the first person to greet me to the group and also assigned me my issue, which you can find below:

https://github.com/devtools-html/debugger.html/issues/3725

In all honesty, I ask a lot of questions, simply because I want to know how everything works.  Not ONCE did Jason seem impatient in answering them for me, giving me more motivation to keep working and trying to add value to the team.  One late night, I was getting closer and closer to figuring out how to get everything working and having the tests pass, but due to my Windows build (smh) my line endings didn't match the snapshots that were created by other contributors (damn you CRLF). 

Jason gladly jumped into a call with me at approximately 1:00AM to help me try and figure it out and by the end of it, him and I were chatting about the industry, his career, and my aspirations.  It was late so I didn't finish that night, but I was closer because of our call.  He gave me many pointers on how to get through issues faster and how to create test cases that give insight on how changes will affect the overall build.

This guy is super welcoming and I would gladly recommend anyone who wants to work on debugger.html to give it a try.  You'd be working with really bright minds and I would be more than happy to keep working with Jason and the team for many years to come.  So, if you're reading this and are Jason's manager, give this guy a pat on the back because he's the reason why I want to keep working on this project instead of jumping elsewhere.

Now, back to the bug.  In order to get started, I had to get the environment setup.  I had to install Yarn, which is a package manager that is used for this project.  You can find the link to learn more about Yarn below:

https://yarnpkg.com/en/

Basically, it caches every package that is downloaded so it doesn't need to download it again and updates are super fast.  I also had to download a newer version of Node in order to get up and running.  Once I forked the project and cloned it to my machine, I then needed to input

yarn install

to get all of the packages installed and updated to the current needs of the project.  Now is where the fun starts.  In total, I had to change 82 files and I didn't do it the way you would expect.  Because I was so eager to work on it and get it finished, I just went on a changing spree and that's where my problems started.  When I ran

yarn test

after making changes, I fell into problems where many of the tests were failing.  Super overwhelming and I would never recommend doing any project this way.  Jason also reaffirmed it wasn't the best way to go.  However, with my persistence I was able to keep at it and eventually only had a few tests failing which is where Jason came in to help.  

What I really learned about this project is what it takes to get a product to ship.  With such a huge project, testing is automated but plenty and that's what makes these projects great.  You really see how it all fits together and its amazing how so many people can work collaboratively in order to accomplish a task.  Since the project was mostly changing paths and directory structure, it wasn't very "mind intensive" but challenging enough because I've never done it before.  After tinkering with it for a while, I finally saw this beauty in my command line:

I made my first PR on GitHub to a major project and it didn't pass CI or Travis CI testing.  I realized after seeing how the tests failed that I also needed to run

yarn run lint

and

yarn run flow

to check for other discrepancies that I missed.  After fixing those and pushing back to GitHub, another snapshot failed...stupid line endings.  Jason helped push me along the finish line and landed me my first merge to a major project.  To add to his welcoming nature, he also called out my contribution in Slack:

Overall, my experience with this process was really pleasant and I'm happy to have joined in on this project.  Moving forward, I'm ready to continue taking on bugs/features for the DevTools team.  I asked Jason what advice he would give to new contributors, and his answer was simple.  

"Get the project installed and have fun breaking it."

Thanks Jason, and let's grab that cold one soon.

Next up, I'll take some time working on some performance issues for the DevTools team, starting with converting SVG's.  You can check it out here:

https://github.com/devtools-html/debugger.html/issues/4350