Hacktoberfest is an annual event that has been hosted by DigitalOcean for almost a decade. The purpose of Hacktoberfest is to encourage people to contribute to open-source projects throughout the month of October. Much of the technology and applications used in the world rely heavily on the hard work done throughout open-source projects. Hacktoberfest is a way to give back to the open-source community that has given so much to us.
My inaugural Hacktoberfest was in 2021, and it was a lot of fun to participate in the event. I liked the idea of jumping into a random codebase and seeing how quickly I could get up to speed and contribute a successful pull request (PR). I've found that participating is a great way to practice and sharpen your development skills. Since this is my second year participating, I figured I would document the process for the past two events and share some of the lessons I learned and cool projects I worked on along the way.
Hacktoberfest 2022
With a little more experience under my belt from my first Hacktoberfest, I entered this year's event excited to contribute to some new projects. Here is a depiction of October's events.
Awesome Uses 🕶
Wes Bos hosts a popular site, uses.tech, that contains a massive list of developers' "uses" pages. A "uses" page is a place to share information showcasing developer setups, equipment, software, and configurations. I have a dedicated article that covers the items contained on my "uses" page. My contribution was straightforward as I added a reference to my page on the uses.tech site and README.
It's cool to have a fun repo like this that provides a site where developers can share their developer setup with others. I highly recommend adding it to this list if you have a "uses" page of your own.
Card generated on the uses.tech site
- 🛠️ Technologies Used: JavaScript
- 📦 GitHub Repo: https://github.com/wesbos/awesome-uses
- ⬇️ Pull Request: https://github.com/wesbos/awesome-uses/pull/1448
JSON Hero 🦸♂️
JSON Hero is a JSON explorer for the web that makes reading and understanding JSON files easier. It achieves this by providing a clean interface packed with extra features like automatically inferring the contents of strings to provide previews and the ability to view JSON in multiple views (Column View, Tree View, and more).
While perusing the repo, I came across this issue asking to add a skeleton loader to the preview section to prevent content jumping. Skeleton loaders are a popular loading strategy used across a lot of sites and, having implemented them on my own website I felt confident in my ability to resolve this issue. After getting some clarification about the placement of the loader, I was off to the races. Conveniently the JSON Hero codebase felt very familiar since it was built with Remix and used Tailwind CSS, the same technologies I used in my roadtrip-fm project.
Tailwind conveniently has an animate-pulse class that simulates the look and feel of a skeleton loader, so I leveraged that and, without too much effort, I was able to add a successful loader and got my second PR merged in!
| Light Mode | Dark Mode |
 |  |
Skeleton loader screenshots in light and dark mode
- 🛠️ Technologies used: 💿 Remix, React, Tailwind CSS
- 📦 GitHub Repo: https://github.com/apihero-run/jsonhero-web
- ⬇️ Pull Request: https://github.com/apihero-run/jsonhero-web/pull/119
Fig 🍐
Fig is an awesome tool that provides autocomplete for the terminal. I've written about Fig before and it's easily one of my favorite tools in my 🧰 developer toolbox.
One of the interesting parts about Fig's architecture is that they've set things up so that the autocompletion commands or "specs" can be added from the open-source community. There is extensive documentation on this process, and I figured it would be a good opportunity to give back by contributing two new specs since I use this tool all the time.
The first spec I created was for the seq command. The second spec was for the mdls command. These tasks got me more familiar with using the man pages to identify specific information about a CLI command. It was also interesting to see how the declarative syntax of Figs completion spec worked.
It took me a little while to get familiar with the completion spec syntax; however, by the second pull request, I was able to debug issues more quickly. Thanks to this work, I have a better understanding of the syntax which will help me with future contributions.
- 🛠️ Technologies Used: JavaScript
- 📦 GitHub Repo: https://github.com/withfig/autocomplete
Pull Request #1:
Pull Request #2:
Hacktoberfest 2021
Since I didn't write about my experience in my inaugural Hacktoberfest, I wanted to include some blurbs about last year's contributions since I'm hoping to make this an annual tradition.
Appsmith 🔒
Appsmith is an open-source, low-code platform to build, ship, and maintain internal tools. On a side note, I've interacted with a few members of the team, and they were all super nice and friendly, so that's a nice plus 🙂
For last year's Hacktoberfest, I contributed two different PRs. The first PR was a simple one around adding a tooltip to display when hovering over the "Scroll Content" label. The second PR addressed a shifting layout display issue that would occur when clicking through the sorting options within the Table header. It also addressed adding a low-contrast icon color for better accessibility.
Pull Request #1:
Pull Request #2:
Datenanfragen 🇩🇪
Datenanfragen is a non-profit association from Germany whose mission is to help you exercise your right to privacy. I also contributed two separate PRs to this project. The first PR I addressed was around alphabetically sorting the countries and categories on the "Suggest" page. This work involved using my knowledge of the basics of sorting in JavaScript.
The second PR involved modifying the footnotes on the Hugo site (example here) to make them more accessible and user-friendly. Honestly, out of all the Hacktoberfest issues I have worked on so far, this has been my favorite because it involved using my knowledge of accessibility and provided a fun challenge for my brain. The final solution for this problem took some digging and research into Hugo and Preact. Overall it was fun to solve the problem and come up with a viable solution! There was also constructive communication within the PR, and it was a nice end to my last PR for Hacktoberfest 2021.
- 🛠️ Technologies Used: Hugo and Preact
- 📦 GitHub Repo: https://github.com/datenanfragen/website
Pull Request #1:
Pull Request #2:
El Fin 👋🏽
I hope this blog post encourages you to consider giving Hacktoberfest a try. The satisfaction you get from pouring back into the open-source community that has given developers so much is gratifying. If you have been a part of Hacktoberfest in the past, feel free to leave a comment and share some of your experiences 🙂
If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.
As always, thank you for reading, and happy coding!
