My First Serious Hacktoberfest

Icegotcha Fantasoxy — Thu, 12 Nov 2020 19:26:21 +0000

Hello! 👋

This is my first post in dev.to. It is about my contributions to Hacktoberfest 2020.

Introduction

My name is Kotchakorn Wongwisutigul. You can call me by the alias name "Icegotcha" or shortly, "Ice". I'm a backend developer from Thailand. Mostly, I develop REST APIs and services with Node.js and Spring, but sometimes I develop frontend applications too, with React.

I love to learn new things every day. I read articles from many websites until 2019. I found dev.to has a lot of interesting articles enough to read every day. I decided to join this community since then.

Reading articles is not enough to learn new things. I often find a chance to write code and work on projects. Contribution in Hacktoberfest is one of the activities that I'll do to improve my programming skills. ✨

Background

I have been working as a developer for 2 years, but I'm new to the open-source world because of mostly working on private projects. Actually, I attended Hacktoberfest the last year, but I made only 1 PR due to many inconveniences. This year I want to try making new own projects and "open-source" is the knowledge I need to have. I think I can't miss an opportunity to attend Hacktoberfest again. 🔥

Contributions

I sent the first 2 PRs to a project named eo-locale by ibitcy, a Javascript lightweight i18n library.

Validate and improve documentation #34

icegotcha posted on Oct 11, 2020

According to issue #31

I improved several parts of the document.

Document structure: I noticed all packages of eo-locale (@eo-locale/react,@eo-locale/ preact, and @ eo-locale/react-native) have the same components. I think it's better to separate document sections by components and APIs instead of packages. It makes documentation flow and read easier.

Merge package installation guides into a single page.
Make the page "Installation" to be first page when clicking button "Get Started" on the landing page or "Docs" on the navbar.
Add more information and clearer examples of each component and API.
Update model definition: Locale (Not update in codes yet)

PS. I also noticed the @eo-locale/react-native can not use formatDate and formatNumber because it can not find the object Intl. I will open a new issue later.

View on GitHub

Add information about setting up a React Native project #39

icegotcha posted on Oct 16, 2020

According to the issue #35

View on GitHub

Next, I used knowledge about React and React Hook to make and send a PR to Reddit image viewer by Greg Rickaby.

Better Infinite Scroll #75

icegotcha posted on Oct 15, 2020

Description

According to #60, I updated the viewer to fully support infinite scroll as follow:

Update function "fetchData" to fetch only 5 posts in one time & support fetching after a post ID (and remove posts which have no image).
Add a loading spinner that will display at the bottom when user scroll to bottom of the webpage. I used react-spinners to implement it.
Add useEffect() to 3 function
- first useEffect() will work if a user loads the webpage and search with a new term.
- second useEffect() will work after first useEffect() (when content is fully loaded). This will create an observer (called Intersection Observer API) that handles loading more content.
- third useEffect() will work if the user scrolls to loading more areas (handled by the observer).
Update preload link in siteHead.js to fetch only 5 posts.

Besides, I also made minor changes:

Let the state results store an array instead. I found it's easier to handle displaying posts.
Ruduced calling setSearchTerm to solve performance issues.
Update shrinkHeader to check if el is null before adding a listener and return a removing listener function used in the first useEffect().

Screenshot

https://imgur.com/a/8rTfmKs

View on GitHub

Then In the middle of the month, I sent the last PR to javascript-mini-projects by Thinkswell. I made a simple application as below:

Random Quote Generator #60

icegotcha posted on Oct 17, 2020

According to issue #13 This is random quote generator that builds with Vue and gets quotes from API.

View on GitHub

After I finished doing a lot of works. I fixed an issue that I said I would do in the Reddit image viewer.

Feature/show history #84

icegotcha posted on Oct 25, 2020

Closes #2

Description

I develop the feature as follow:

Implement a function to store search terms. Use sessionStorage.
Add the history section to the site header.
Add a responsive modal to show a list of all used search terms to prevent show too many search terms on the site header. (I use react-modal)

Besides, I also made a minor change:

Add browser: true to env in eslint.js to prevent show errors (for example: "window is not defined")

Screenshot

https://imgur.com/a/205VQT9

View on GitHub

In conclusion, I sent 4 PRs and 1 extra PR.

... and I'll get a beautiful T-shirt! 😇

Reflections

I'm very glad to be one of the contributors to the open-source world. I'll try to contribute projects again in and out of the event "Hacktoberfest". 💖

DEV Community: Icegotcha Fantasoxy

My First Serious Hacktoberfest

Introduction

Background

Contributions

Validate and improve documentation #34

Add information about setting up a React Native project #39

Better Infinite Scroll #75

Description

Screenshot

Random Quote Generator #60

Feature/show history #84

Description

Screenshot

Reflections