DEV Community: irenejoeunpark

Release 0.4 - Unfinished, but to be continued.

irenejoeunpark — Thu, 16 Dec 2021 21:19:36 +0000

My Release 0.4 is still not finished but will be continued after.
I was not able to get the PR reviewed since I opened very late. Since I started late, everything was delayed. And installing pnpm on macbook(M1) did not work either.
After a few tries, I had to borrow a windows machine from my friend so that I can work with pnpm.
It still has error when I try to run the whole program using pnpm start, however I was able to run the front-end of the application using "pnpm dev" command.
The fix I have pushed is yet a single small one, however I will try to fix the environment error and resume working on the other issues that has been assigned to me.

It is still remaining unfinished, but throughout the course, it was a great opportunity to learn about opensources, and contributing to other projects.
Development, sure, need a coding knowledge background, but that is not everything. Outside of the coding skills, I was able to gain knowledges that would be a huge gain.

Development is a continuous progression, not an one-time event. Open source development is something that allows developers to find their potential to DO.
It was a great pleasure working with the open sources.

Working on Telescope issues

irenejoeunpark — Thu, 16 Dec 2021 21:03:55 +0000

Different from what I have planned first, I contributed on two different projects, Telescope, and instant-apps

For the first issue I picked, I found the bug in a previous release, which I worked on a mobile UI. The title container is overflowing when scrolling. Screen record of the issue is also in the issue page. I was stuck because of that issue and was trying to find out the cause, but failed in Release 0.3.

However, I noticed that the issue was not only existing in my branch, it was also existing in the main branch. So I decided to file an issue as a bug so that I can work on this as a follow up.

After several tries with changing margin, padding and overflow settings in different properties, I finally got to make it work after adding overflowY as hidden in titleContainer.

The fixes are in this PR.

An issue for enhancement, which is a new feature, I decided to work on adding the metronome player to the instant-apps.
Instant app is a search engine that would bring the small apps when searching a certain keywords.

As my first contribution, I worked on adding a metronome app to the project.
Since I have an experience adding an external API for react application, I decided to work on this new feature that could be shown when searching for "metronome", "play bpm", "bpm", and etc.
For the project, I aggregated an external API.
The changes are in this PR.

More issues are still in progress, which I will continue to work on.

Planning on contribution in Telescope

irenejoeunpark — Wed, 08 Dec 2021 18:25:26 +0000

I decided to choose Telescope to work for my release 0.4.
In Release 0.4 we are expected to add features in the existing open source project.
Since I have contributed on telescope in Release 0.4, and it would be great to work on a different area of the project, I decided to pick some issues, and create a new issue in telescope.
Most of the issues were taken by other students, however there was a new issue that I would like to work on, since I have never got to work on the security and policy side in any of the project.

Also, I did not know that clicking the date or author would open the original post in a new tab, I filed a new issue so that clicking the title would open the original post in a new tab. I had to close the issue since now I got to know that the feature is not needed.

I will keep searching for new issues in other projects as well that I could contribute.

External PR for Release 0.3

irenejoeunpark — Thu, 25 Nov 2021 21:10:38 +0000

For the external issue, I chose badge-generator which I was able to find in one of the colleague's blog post. It was created with Vue, and I had zero insight on the framework. I first had to research on the framework and understand the syntax, and how it is applied in the code. You can find the issue here.
There were a few components that are needed to be modified in the project. The owner of the project wanted to have all of the tabs to have the html and markdown selection persisted for one single toggle.

I first had to debug to find out what it does when toggled the switch. It took me the longest time in the whole work. After I find out which action is called when the switch is toggled, I was able to persist the selection by adding an Object in store class. The progress and the changes are in this
PR.
I still have to work on this more to improve the feature.

Open source development to me, is more than just a coding or testing. This is a mixture of cooperation and individual work and on top of that, it is the most relevant on how to communicate properly when collaborating .
Through my six terms of school works, I learned how to code in different languages, In my co-op experiences, I learned how to collaborate. And in this course, open source development, now I am learning how to communicate and work on a same project with different perspectives properly.

[Release0.3]Code Reviews

irenejoeunpark — Tue, 23 Nov 2021 23:45:13 +0000

As a part of Release0.3, I reviewed two internal PRs opened by other students.

First code review was a documentation update for IPC144. It was made by Antonio Bennett.I looked for other documentations in the repo, and the documentation guide that was created as an issue. It was first time reviewing the documentation and following documentation convention of the whole project is very important for the readers and contributors. I reviewed and comment in the PR, and it seems like the updates were looking good. While I was reviewing the code, I had one curiosity in the styling and commented those and got answered.

Second code review was a similar change with the first one, but it seems like it had more tables and I commented about the styling of the documentation. Because it had a lot of tables and list in the document, it supposed to have unified design for all of the content, while it has little more work left to do on those. First part of the documentation was having all of its content aligned left, while other contents are centred. And I looked for other documentation that has tables, and the styling seemed it does not match with other documentation.

Since it was my first time doing the code reviews for the project that was not written by me, it was very interesting and got study the code and other conventions of the project by reading some documentation of the project. To do a proper code review, I should know what is the issue correctly, and what should be a good change.

Internal PR for Release 0.3

irenejoeunpark — Sat, 20 Nov 2021 19:51:33 +0000

Using React style methods and css properties, I was working on (and still in progress) for the telescope project to have the GitHub information for the mobile view. The reason I picked this issue was because I wanted to work on something that I would like to work on in the future. Since I am interested in the front end development, and I have barely no experience and knowledge on that, I wanted to gain more experience by working on this issue.

I first had to understand the structure and how it is getting the GitHub info from the parsed links.
You will be able to see all the progress in this PR.

I used some cool library of React, Material-UI and its features that could be used in UI side of the development.
Using a component called Accordion, I was able to make the title container area click and expandable, and made those expanded area contain all of the Github information.

There are some future improvements that I could, or someone else could make is to create some cool animation when toggle a github icon or other button to make the Github information to be shown in action.

Github CI Integration

irenejoeunpark — Fri, 19 Nov 2021 23:06:51 +0000

As a coursework of OSD600, we were integrating CI on our projects. Since my project was being created with Java, and added Maven for dependency and artifacts, I added maven run in my GitHub action CI.

I have experienced those automated tests and checks through GitHub actions when I was contributing on huge projects before. It is a very cool feature that could allow multiple contributors to check if they broke any core functionality when contributing.

I had to modify the yml file multiple times because it was not functioning properly at first. I had to add some plugin and scope in pom.xml for maven automated tests.

<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.2</version>

And after adding surefire, below commands was finally picking up Junit classes for testing

      - name: Build maven package
        run: mvn package -DskipTests
      - name: Test
        run: mvn test

I wanted to add formatter and linter inside the CI, but since the formatter and linter I have used in my project had no functionality to check and format the code with "mvn" command, I had to postpone it to later development.

For the future improvement, I would like to add a script to run formatter and linter that could automatically reformat and check all of the file, and add the script into the CI. This would require more research and knowledge on CI.

A successful action that ran for the pull request could be found here. I created a unit test to test if the html header & footer writer method is working properly.

Second part of the lab was to partner up with another student and create a unit test for their project and see if the CI is working properly.

I contributed on Le Minh Pham's project which was written in Python.
Unit testing in python was a lot simpler than using Java.
I created two unit testings, which have test cases for horizontal rules and a combined markdown feature.
First I failed on horizontal rules testing, and had to discuss with Le Minh Pham, he was able to fix the part where it breaks the

tag inside the html body.

After his fixes and commits, my PR was able to pass the automated checks and was able to get merged.

Unit testing using JUNIT

irenejoeunpark — Fri, 12 Nov 2021 21:41:59 +0000

As a weekly course work, I added JUNIT testing framework into my ssg application.

Adding framework

Junit is a most popular testing framework that is being used for Java developers.
I was able to add Junit API and frameworks using maven dependencies and it was very quick and easy.
After add the dependencies, I was able to create test class from the class that I want to test.

About Unit testing

It was my first time creating testing methods for unit tests.
Unit tests are created based on assert methods that are comparing the expected value and actual value.

Wrote first unit test for the simplest method

Below is my first unit testing method, which was to test the function for converting the filename from array of strings to a string.

void testFileNameReader() {
        String[] fileName1 = {"example", "file", "name.txt"};
        assertEquals("example file name.txt",HTMLBuilder.fileNameReader(fileName1));

        String[] fileName2 = {"sample.md"};
        assertEquals("sample.md",HTMLBuilder.fileNameReader(fileName2));
    }

Core unit testing

As one of the core unit testing, I chose a method in "HTMLBuilder.java" which is created to parse text or md file and write a html file, which was created at the beginning of the project.
To create a unit testing, I had to create a mock sample file to compare which contain the content that is expected to be created.
I used a text file for the comparison and used a method "assertTrue".
Since the compared object is a file, it was easier with using FileUtils library and compare the two files.

CONTRIBUTING.md

For contributors, I updated the documentation for the testings, explaining how it works and how to use it.
In that case, it would be easier to review and merge codes for me, and easier for the contributors to find out any bugs or improvements from the code.

You can click here to see the changes I made through multiple commits.

Useful tools for contribution

irenejoeunpark — Fri, 05 Nov 2021 16:53:43 +0000

As seventh lab of OSD600, I added some useful tools for the future contribution.
Here are some revisions I made

IDEA setup

I used IntelliJ for my SSG application. The ide setting were already pushed in the GitHub, I did not have much things to do for the default project setting for the contributors.

Added maven to the project

For smoother dependencies/plugin managements for other developers, I decided to add Maven to my project. We do not have to have physical .jar files to use dependencies when we use maven. Maven is a great build tools especially when the project is not only being revised locally.

Source code formatter

I used google-java-formatter in my project, and added instruction on how to use it.
It is very simple to use in IntelliJ. It is easily addable in IntelliJ Marketplace, and once its been enabled, user can use the regular reformat shortcut, which is "CTRL+ALT+L".

Linter

SpotBug is a tool for spotting some silly mistakes that might cause bug in the future. Through maven, I was able to add spotbug plugin easily, and it is in "pom.xml" of the project.
It is very simple to run spotbug.

mvn spotbugs:gui

This command above will inspect the code and show you some possible bugs with some UI.

CONTRIBUTING.md

I created an instruction for the contributors.
It has step-by-step instructions on what requirements you need, how to install and run the project, what you need to do after fixing issues.
Through Release0.2, I got a chance to contribute in other projects, but it was way easier to contribute in a project that has detailed instructions, and their own standards.

You can find all of those changes here.

[Hacktoberfest 2021] Fourth and the last pull request

irenejoeunpark — Wed, 03 Nov 2021 15:16:41 +0000

As my last and the fourth contribution in hacktoberfest 2021, I contributed in another issue from meiliesearch-java, which was the first project I contributed in hacktoberfest.

I was planning to work on another issue, but I faced some environment issues with the project, I had to choose another issue from other project.

The reason I picked this issue was that I know the sub-setting methods already from previous experience which I worked on creating unit tests for sub-setting methods. I understood the project structure and the standards.

Click here to see the issue
The issue was to add and update code samples of the sub-setting methods.

It was my first contribution on documentation. It was also my first experience using .yaml type file.
You can check my pull request here.

I added some "reset" samples of the sub-setting methods, and updated "update" code samples of the same sub-settings.

As of this, I completed four pull requests for hacktoberfest 2021.
This was a great experience actually "contributing" in some huge projects by working on small issues.

[Hacktoberfest 2021] Responsive design with css

irenejoeunpark — Mon, 01 Nov 2021 20:35:22 +0000

My third contribution to the hacktoberfest 2021 was fixing the responsive design.
When I saw the word "responsive", it seemed very interested for me because I have not worked on css for a while after second semester of school.
I chose the issue that I could bring up my old memories from few years ago.
https://github.com/mohitbalwani/Citi-site/issues/1

It is an one-page website that is created with html and css only now, and had some bug with the last section when reducing the window size.

The update was made with css. I first updated the division of the section as two-column design.
Inside "row 4" division, I added two more divisions for the column designs. And added width as percentages to make those columns align horizontally.

.column {
    float:left;
}
#col1 {
    width: 55%;
}

#col2 {
    margin:0%;
    width: 45%;
}

After, I wanted to add some specific rules for smaller windows, by using "@media" struct.


@media(max-width:700px){
    .row4 {
        height: 70vh;
    }
    .column h1{
        font-size: 2rem;
    }
    .form{
        font-size: 1.2rem;
    }
    .column button{
        width: 22vw;
        text-align: center;
    }
    .column {
        align-items: center;
    }
}

After the fixes, with the smaller windows, width under 700px it looked like the image below.

Also, I added another media struct for even smaller windows such as phones.

This issue had very little description and no Readme.md in the project, and that made me understanding the code little longer. However the owner of the project was very responsive and communicated with me well so that I could move on to solve the issues.

You can find my pull request on this issue below.
https://github.com/mohitbalwani/Citi-site/pull/4

[Hacktoberfest 2021] Fixes UI of the application

irenejoeunpark — Mon, 01 Nov 2021 20:19:53 +0000

My second contribution was for a website called "GDSC JGEC Website".
The issue was with some UI of the webpage, which had some bug, and also design that was not enough.
https://github.com/gdscjgec/gdscjgec.github.io/issues/38#issuecomment-953101856

The original page looked like this. There was a bug with the banner "Upcoming Events" which was not showing properly.
I updated the margin-top from 2% to 5% to show off the whole banner properly.

For the design of the website, I wanted to make it looks like matching with the website theme.
So I re-used the background image from another page of the application. Also the color, light green did not quite suit with the website theme. I looked at other pages to find some colors that goes with the main theme of the webpage, and re-used those colors to the event card.
Also, font and the box designs was modified to match with other pages.
After the fixes, it looks like below.
https://github.com/gdscjgec/gdscjgec.github.io/pull/40