This is my first post in dev.to. It is about my contributions to Hacktoberfest 2020.
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. ✨
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. 🔥
According to issue #31
I improved several parts of the document.
- Document structure: I noticed all packages of
@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
formatNumber because it can not find the object
Intl. I will open a new issue later.
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.jsto fetch only 5 posts.
Besides, I also made minor changes:
- Let the state
resultsstore an array instead. I found it's easier to handle displaying posts.
- Ruduced calling
setSearchTermto solve performance issues.
shrinkHeaderto check if
elis null before adding a listener and return a removing listener function used in the first useEffect().
After I finished doing a lot of works. I fixed an issue that I said I would do in the Reddit image viewer.
I develop the feature as follow:
- Implement a function to store search terms. Use
- 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:
envin eslint.js to prevent show errors (for example: "window is not defined")
In conclusion, I sent 4 PRs and 1 extra PR.
... and I'll get a beautiful T-shirt! 😇
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". 💖