My First HacktoberFest

xelaflash — Mon, 25 Oct 2021 18:26:18 +0000

This year I've decided to enroll and commit myself to do HacktoBerfest 2021.
I do not considerer myself as a code newbie (i've learned to code 2018) but I also do not have an extended experience

In the past, I did not contribute to open source because I thought it was hard to find a project with open issues corresponding to my coding skills and stack.
To be honest, I was not much into scanning codebase to find typos to do PRs, or the codebase was too complex for me. Therefore, I went on my journey without thinking too much about it.

This year, I really wanted to contribute and stop this laziness once and for all.

Hacktoberfest is the perfect time for it, you see posts about it all over the place (DEV.to, CodeNewbie, Twitter...) so you i felt very motivated to be part of it.

Long story short this is my journey for HacktoberFest 2021.

The journey

The first difficulty was to find a repo with an open issue not already assigned.
A lot of people want the swag and are also doing HacktoberFest.
Browsing the Good First Issue, Beginner-friendly tagged Issues everything was already taken 😢.
But I finally encountered a repo where I could contribute.

PR1: JSON

The repo is opendrinks , a cocktails recipe website built in Vue.
I do not code in Vue but I could contribute by adding a new recipe.
Ok, let's go read the docs, the contribution guide, clone the repo, create a new JSON file, testing locally... Well, that's it, the first PR is sent.
PR accepted 🎉 Horray.
Nice, but I was feeling a bit like I was cheating, this is not really coding right?

Add recipe: Bajan rum punch #1106

Xelaflash posted on Oct 04, 2021

View on GitHub

PR2: I18N

OK, then let's look if I can find something to improve on this repo.
Well, I see some I18n blocks on the components, why not translate in my native language (French). So I browsed all components and add my translation.
Doing this I also found an issue with some text not being translated because they were coming from a JSON file and not from a component with an I18N block.
OK let's highlight that issue on my PR and send it.

French translation components and views files #1117

Xelaflash posted on Oct 05, 2021

Hi,

Please find a PR with i18n translation in French for components and views files (where i found a i18n component block).

Note: in /src/components/FeaturedRecipes.vue
<h2>{{ feature.title }}</h2> <p>{{ feature.description }}</p>

are not translated because the values are coming from JSON file /src/featured.json. This needs to be modified in order to have featured category title and description translated.

Sorry but i do not have the time to fill an issue and to fix that point now.

View on GitHub

PR3: CSS

Let's try another repo but this time built with a stack I know (Rails, JAMSTACK...)
Found it! gamou repo is built with Rails and uses Tailwind CSS.
Perfect I wanted to try Tailwind.
I've checked the Tailwind Docs and went for this issue.
Tailwind was easy to manipulate and CSS issues were not so difficult to fix (spacing).
PR3 is sent!

add spacing in home page to solve issue #5 #78

Xelaflash posted on Oct 05, 2021

What this Pull Request do ?

Add spacing using tailwindCss as per issue #5

Close an issue ? please insert the hash

Close #5

Required migrations ?

[] yes [x] no

Add a new gem ?

[] yes [x] no

Add a new package ?

[] yes [x] no

View on GitHub

PR4: Rails

On the same repo, there was another issue.
More advanced this time.
gamou
The issue was related to Devise gem.
I used Devise in the past and I identified the bug root cause pretty quickly.
Some changes in Rails controller, some Erb (HTML) in the User/edit form, and bonus I've corrected few typos in I18N files I've found along the way.
PR sent 🎉. After few comments a explanation about my solution, maintainer Merged it.

I begin to feel useful and that my PRs are "real code" now.

PR
Putting as link due to non ascii character in the PR

PR5: HTML/CSS/JS

This time I wanted to build something UI related.
I found this repo: Embellish.
This is a repo that centralizes some UI and components for people to use or get inspiration for their designs.
OK, let's build a Disney+ card grid with a video playing on Hover (I got the idea from a Dev article).
Few lines of HTML CSS and JS and Voila another PR in the bag.

Add new UI component => Disney card grid (video background on hover) #142

Xelaflash posted on Oct 07, 2021

What is the change?

Add a new component in Cards folder

Related issue?

Issue #135

How was it tested?

Manually on browser (chrome firefox safari)

Checklist:

Before you create this PR, confirm all the requirements listed below by checking the checkboxes [x]:

[x] Have you followed the Contribution Guidelineswhile contributing.
[x] Have you checked there aren't other open Pull Requests for the same update/change?
[x] Have you made corresponding changes to the documentation?
[x] Have you tested the code before submission?
[x] Have you formatted your code ? (You can use any html,css beautifier)
[x] My changes generates no new warnings.
[x] I'm Hacktoberfest'21 contributor.
[x] I have commented my code, particularly in hard-to-understand areas => N/A

GIF/video of the working of component you created:

View on GitHub

Lessons Learned

Well, that was it for this year, I had 5 PRs in total.
I'm pretty sure i can do more advanced stuff, but I've started with super easy ones, and went to more technical ones, as I was feeling more comfortable with open source contribution.

I've learned to overcome a bit of imposter syndrome, by seeing that I was able to take some code made by others and being able to see some issues with this code and being able to correct it.
Moreover, I've practiced the way of making PRs, describing what I've done, resolving conflicts and respecting the Contribution Guidelines.
This intro to open source is very modest but was a nice start.
I'll definitely do Hacktoberfest again next year and will try to contribute outside of Hacktoberfest all year long when I have time.

Long Hail Open Source. It serves other people and makes you grow as a Dev.

DEV Community: xelaflash

My First HacktoberFest

The journey

PR1: JSON

Add recipe: Bajan rum punch #1106

PR2: I18N

French translation components and views files #1117

PR3: CSS

add spacing in home page to solve issue #5 #78

What this Pull Request do ?

Close an issue ? please insert the hash

Required migrations ?

Add a new gem ?

Add a new package ?

PR4: Rails

PR5: HTML/CSS/JS

Add new UI component => Disney card grid (video background on hover) #142

What is the change?

Related issue?

How was it tested?

Checklist:

GIF/video of the working of component you created:

Lessons Learned