My 1st. contribution to Open Source

My 1st. contribution to Open Source

ยท

4 min read

Hi! I would like to share some advice before you do some contributions and how I lived and felt my first experience contributing was (a lot of feelings). It was on the Vue.js website ๐Ÿ˜„.

Vue's Logo Logo obtained from the Vue.js official website - vuejs.org.

Why did I do it โ“

My problem

Well, those days, I was learning how I could validate the props with Vue.js, and I had a problem with it, and I tried to figure out the solution or understood why the problem was happening. I researched in Google, Stack Overflow, and read multiples posts at this moment, but I didn't find any answer that helped me.

I didn't have success with my research ๐Ÿ˜ข. Then, I decided to report an issue ๐Ÿ˜„ in your repository, because I didn't know where I could find some help.

Considerations before reporting an issue.

Before, asking for help, write some questions in any forum, or in this case, report an issue, you should remember to do ๐Ÿ‘‰๐Ÿ‘‰ important things ๐Ÿ‘€.

If it didn't work, you can consider communicating directly with creators or developers who are working with this library or framework. One good way to do it, it's reporting an issue on Github.

๐Ÿ‘‰ If you are going to open an issue, you have to consider some aspects:

  • ๐Ÿ”ธ Read the Contribution guide (CONTRIBUTING.md)
  • ๐Ÿ”ธ Prepare your code
  • ๐Ÿ”ธ Your time

Note.- Some repositories don't have one.

What is a CONTRIBUTING.md?

It's a document where you can find some guides, best practices, or conventions you have to follow if you want to open an issue and receive some analysis or help (and this is not rejected ๐Ÿ˜ƒ.).

This document usually is inside the same repository.

Some common conventions are:

  • ๐Ÿ‘‰ Problem description
  • ๐Ÿ‘‰ Results expected
  • ๐Ÿ‘‰ What is your operating system version (Windows, Linux, or Mac)?
  • ๐Ÿ‘‰ Put some screenshots about the error (What you expected to see, versus what you actually saw)
  • ๐Ÿ‘‰ Links to online code editors or platforms where they can review and execute your code easily(Codepen, Codesandbox, etc),
  • ๐Ÿ‘‰ Error logs
  • ๐Ÿ‘‰ List steps that they can help to reproduce the problem, so on.

Prepare your code

As I mentioned previously, you need that your code can be shared and executed easily. You can use Codepen or Codesandbox and share the public link.

Your time

๐Ÿ‘€ Figure out some solution to a problem, It's not easy. It requires time and many times requires interaction and communication between contributors and yourself.

Why? because even though you have provided all information needed, it isn't usually enough. People who are reviewing your problem will have some doubts or require clarifications.

Therefore, you have to give them a hand so that they can help you ๐Ÿ˜‚.

What was the problem?

Well, as I wanted to report my problem, I created a project in Codepen, organized my code there, configured Vue with a panel of configuration in Codepen (it is an important detail to remember for later ๐Ÿ‘€.).

Codepen configuration

and surprise!

Surprise

My code was working! ( and my reaction was what? hahaha ๐Ÿ˜‚)

What?

Don't worry, it has an explanation. ๐Ÿ˜‚

Why is my project working now?

After some time that I was reviewing code, comparing between my local version and my Codepen's version. I remembered that I wasn't using the same CDNs to get the file for Vue.js ๐Ÿ˜‚.

  • Locally (on my computer): CDN suggested by vuejs.org.
  • Same code but this time replicated in an online editor: CDN provided by Codepen.

CDN means Content Delivery Network. It stores a lot of files even Javascript files distributed in multiples place with the purpose improves time loading in the websites.

Then, I thought maybe the problem was the vue.js file then I created another Codepen's project but with the CDN suggestion by Vue. Again, I had the same problem.

Crying

Next, compare two files: CDN (vuejs.org) vs Vue.js file by Codepen. They were from different versions.

FileVersion
CDN (vuejs.org)v2.5.13
Vue.js file by Codepenv2.5.15

Mistery resolved!

What was my contribution? ๐Ÿ˜Š

After all, I forked the repository, created my own branch, updated the CDN links, did a pull request, reported the issue, interact with developers, considered my suggestions, and closed the issue.

Conclusion

Contribute to open source or some project is very beneficial for you, also you are helping to other people or project to growing. Because you can interact with other developers, improve your communication skills, practice your English skills (it was my case ๐Ÿ˜Š), and learn a lot about problem-solving.

Well, that's all. I hope had fun with my little story ๐Ÿ˜‚. If you have some questions, advice, or comments related to this topic, you can leave them in the comments section.

Until the next article! See you soon!

ย