DEV Community 👩‍💻👨‍💻

Minsu Kim
Minsu Kim

Posted on

Hacktoberfest #4

The last PR that I have contribute is ChatSociety & PR. The ChatSociety is simple chat application that user can join and have communication like Discord channel and Slack room. The issue is the scroll-view on holds very top of message even there are new message on the bottom when user joins the chat room after log-in
issue

This issue is very familiar to me because I have chance to use React and Hook on the Hacktoberfest#1. As soon as I reviewed the code, there is no useEffect for controlling scroll-view side-effects in functional components like componentDidMount and componentDidUpdate in React class. But the project maintainer has created useRef called dummy for updating the scroll-view when user enter the new message. Therefore instead of having duplicate code for same functionality. I have create a function called scrollToBottom which scroll to bottom with smooth animation. I have placed scrollToBottom function inside of useEffect and replace ScrollToBottom to SendMessage function where the update scroll-view when user enters the new message.

Issue-After

Sample Site

All the processes of fixing the issue are very straightforward. The only part that I have little stuck is how to implement auto scroll to bottom of the page. It is always good practice that research on the Mozilla MDN website first if I have concern with JavaScript.

After I have done 4 pull requests during the Hacktoberfest, it is kind of sad that I only used React, JavaScript, HTML, and CSS. There are many open-source project written with Python and other programming language. I intended to join the open-source project that involves web development because I want to focus on web. Next year I would like to learn different languages and challenge myself to join open-source project.

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.