Getting Involved In Open Source - Thimble


How I got into Open Source Development

For a long time now I've wanted to get involved in the Open Source community on Github, but I never got around to doing that. The idea was to pick a project I like, add cool new features to it, and everything would be great. As the months went by the school assignments started pilling up and it always seemed like their was another test I had to prepare for. Eventually the idea of contributing to an open source project started to seem unrealistic. The more I learned about writing software, the more I thought it would be very difficult to make changes in a code base that has thousands of lines of code across several different directories. I felt lost and unqualified to take on such a responsibility. That was the WRONG way to approach Open Source Software. The problem was not the number of lines of code or even the complexity of the project, it was the approach that I was trying to take. As a person new to Open Source, instead of viewing it as a means of building something new it is better to look at it from the perspective of a detective. You need to find out if their are any bugs within the project and see if the community is looking for contributors to fix those bugs. On top of that you have to look at whether the community working on the project is friendly, open to new comers regardless of experience, and has multiple people actively working on the project. I was introduced to this approach in my Topics in Open Source Development course at Seneca College by my professor David Humphrey. It was such a straight forward but eye opening proposition that I had no idea this was the practical way of getting your feet wet in Open Source Software. It can be very daunting at the beginning, and that was true for me, but the only way you truly learn is by jumping in and getting your hands dirty. How I got involved in the Open Source project Thimble will be explained in the next section.

Why I choose to contribute to Thimble

Thimble is an online code editor that is open sourced and is created by the Mozilla Foundation in partnership with CDOT at Seneca College. The Open Source community working on Thimble is very welcoming of new comers as it can be seen on their website where they state
Contributions of all skills and backgrounds are welcome. You don't need to be an expert programmer, in fact, over half of our contributors identify themselves as students.
They have several main contributors who actively maintain and improve the software so you can expect to receive a response from them in a relatively short period of time. When I began looking for a bug to fix on Thimble I commented on one asking to take on the responsibility of solving the issue and within an hour I got a response! It was Luke Pacholski, one of the maintainers of Thimble, who gave me the green light to work on the bug. I was thrilled to be acknowledged by one of the main people working on Thimble and I felt a sense of pride in being able to make my original dreams a reality.

How I solved my bug

The bug that I decided to fix was a UI related issue where both the inline editor and the console had different icons for the close button. My job was to update the close button in the inline editor so that it matches with the one in the console. The issue can be found on the Thimble github repo at this link https://github.com/mozilla/thimble.mozilla.org/issues/2177. It sounded like an easy bug to fix so I began diving into the problem and followed the instructions on the Thimble Github repository for setting up the development environment. Next step was finding the location of the bug in the source code...boy was I in for a surprise. For those who've never worked with the Thimble project before it can be quiet daunting to navigate through the code base. For me it was tricky to locate where to make changes because the issue was also related to a separate repository that Thimble depends on. That second repository is a modified version of Brackets called Bramble and it is the text editor embedded within Thimble. This version of Brackets was updated so it could run within browsers, an amazing feat that allows Thimble to be cross platform independent. The result of this fusion can be seen in the image below:



Once I opened the folder containing the source code for Brackets the next step was to locate the line/s of code that was causing the bug. Luckily for me, someone had already attempted to solve the issue and the person commented where she found the location of the JavaScript file that creates the "X" icon. The code was located in "src/editor/InlineWidget.js" and all I had to do was remove ×. Before making any changes I had to leave this code alone untill I could find the CSS styling for the "X" button, otherwise Thimble would not display the button if the icon was removed. The next step was to locate the file containing the CSS styling.

In order to locate the CSS file I had to run the Thimble application and use the Chrome Web inspector to locate the element on the web page that calls the file. Once I found the close button in the inline editor I looked up the style tag that would link to the file housing the styling for it. What I found left me confused because I never saw a style tag without an href attribute. This is what I found in the Chrome Web inspector:

<style type="text/css" id="less:src-styles-bramble">...</style>

After doing a bit of digging in the projects folder I realized that less:src-styles-bramble referred to the location of the file containing the CSS styling. When I found the file it was named "brackets.less" and that explained the lack of an href. After doing some quick research I learned that the "less" extension refers to a CSS pre-processor known as Less.js, which runs in Node. Once I made the changes to the CSS styling I finally had the result Luke Pacholski was looking for.

Old


New


Final Thoughts

Although I finished making the changes based on the issue requirements I still did not get my pull request merged. I was asked to make minor changes to the placement of the "X" icon and so I did what was asked and now I am waiting for a response from the Thimble community regarding whether my new pull request will get merged. Overall the experience has been enjoyable and I am looking forward to making more contributions to the Thimble project. For any new comers to Open Source if you feel overwhelmed by the scope of the projects on Github don't let that discourage you. Remember to look at the community involved to see if they are welcoming of newcomers and always try to connect with them on their IRC channels. Most importantly, learn how to get your hands dirty by picking a bug that you think is simple enough for your first try and see it through until you solve the issue.

Popular posts from this blog

Building and Modifying Firefox from Source Code

A Frame - Bringing VR to the Web