Hacktoberfest -2

 Hacktoberfest is still ongoing, this week I have made my second contribution to real open source projects, I have decided to go with the same method I used last time to look for issues, which was applying the "hacktoberfest" label and sorting by the issue post date. After a bit of browsing, I decided to pick up an issue from a small project. It is a weekly calendar app developed using a JavaScript front-end frame work called Svelte, the issue indicates that the project could use a clipboard icon on their web app and an click event handler to allow users to copy contents to the clipboard.

This project was easy to set up and configure for testing, since I already have most of the tools required to work with it, all I had to do was to install the dependencies and get it running locally by using the "npm run dev" command. Thanks to the project owner who posted the issue, he specified the exact file to add the feature to, which was very helpful, without the instructions the .svelte files would be the last one I would check because I didn't know those were the html templates.

Overall, this wasn't a hard issue to resolve, however since I was not familiar with the Svelte syntax and that this is my first time working with clipboard, it had me stuck for a while. Luckily,  I was able to find useful information on the Svelte official page which helped me to work with the template. I have also looked around stack overflow and other programming websites and found out that copying to clipboard could be done by working with the DOM. 

Repo: https://github.com/OwenGranot/svelte-calender

Link to Issue: https://github.com/OwenGranot/svelte-calender/issues/12

Pull Request: https://github.com/OwenGranot/svelte-calender/pull/15

Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Using Code Formatter and Linter

This week I was introduced to automated code formatting and linter to check for mistakes in code, I have heard of those tools before but never used them until this week. Those tools assisted me to maintain the code structure and readability, using those tools resulted in huge differences between the original project and "fixed project". To install Prettier, I followed their official installation instructions, which can be found here , and I did the same to install ESLint . There was a small problem that I ran into when I ran "eslint file.js" command, the system warmed that "eslint" is not a valid command, this was eventually solved by installing the eslint-cli, which was not mentioned in the official instructions. After I finished the set ups and configurated the tools, I ran the "script npx prettier --write ." to automate the formatting, this changed hundreds of lines in my .js files, I wasn't really surprised by this because I have always t...
Read more