DEV Community: suhhee1011

Final Blog post for Release 0.4

suhhee1011 — Thu, 09 Dec 2021 23:09:07 +0000

This is the Final Blog post for Release 0.4 and also for this course. For this week, I was sick since last weekend. So, I could not work a lot.
For this week, I worked on reviewing the korean translation pull request and keep researching to edit the build log issue.

First the Korean translation pull request, I woke up in the morning and I received a message from the professor that a pull request for Korean translation is created. So, I went through a long reading about machine learning. Overall, I think the one who did the translation is native Korean. But there are some small mistakes in wording and the grammar was wrong. So, I made the comments on the issue to help the pull request creator fix the issue. Usually, he/she made mistakes on prepositional particles, which even native Korean people are making mistakes on it. So, the mistakes he/she made were understandable. And except that, the translation was great, very smooth.

I read some articles about machine learning and AI. Even though I was interested in it but it seemed like it needs a high-performance desktop to practice machine learning which I cannot work on because I only have a laptop that is not for high performance. But while I was reading the changes to review and make changes, I not only just create comments, but I also got some basic idea of changes in machine learning.

After that, I remember that I need to create the pull request for the commit that I made last week. But because I was sick this week, I could not work for a few days. So before I create a pull request, I tried to fetch the master branch of the telescope to my local branch to make it the newest version. However, It says that I cannot fetch because it has some conflict. Hence, I tried to find the part where it cause the problem. And I noticed that the git-stats.js, index.html, and build.html were gone which was surprised me because the three files are where I worked for the Dashboard and build log page menu unsynchronized issue.

This means what I fixed is gone and not needed anymore. Hence, I checked where it was from. And I found that while the Add handlebar engine issue was fixing, he also fixed my issue. So, I need to get rid of my commit because it is not needed anymore. And that was the reason why I couldn't fetch the upstream branch with the newest version. I did not feel good about this situation. But it was also my fault that I did not create a pull request last week. Hence from next time, I will create a pull request right away after I commit the changes.

And for the build log issue, this issue is that currently the build log is supporting now but it will be more useful if we save the previous build as cache and when there are more data added to the build, it will merge the previous build and current build and display the whole logs.

First, I need to understand the build log and how to write codes to create a log. For my fast understanding, I used sites in Korean to get information about logs. It helps me to understand the backend code of auto deployment and build.

This is what I understand from the code.

With the exec function it will run the commands in the deploy.sh. In the deploy.sh, there is a long list of commands to build and print the log. And the return value from the exec function will save in the build.proc.

build.proc = shell.exec(
    `./deploy.sh ${build.type} ${build.githubData.after}`,
    { silent: true },
    (code) => {
      build.finish(code);
      builds.previous = builds.current;
      builds.current = null;

      // See if there's another build ready to go
      run();
    }
  );

2.Merge the stdout and stderr of build proc and save it in the build.out

build.out = mergeStream(build.proc.stdout, build.proc.stderr);

3.Write the build logs stored in build.out.

const { out } = build;
onData = (data) => res.write(data);
out.on('data', onData);

4.Create router log to call the buildLogHandler function.

router.get('/log', buildLogHandler);

5.In the getBuildLog function, it will fetch the router log.

export const getBuildLog = async () => {
  try {
    const res = await fetch(autodeploymentUrl('log'));
    if (!res.ok) {
      if (res.status === 404) {
        return null;
      }
      throw new Error('unable to get build log');
    }
    return res.body.getReader();
  } catch (err) {
    console.warn(err);
    return null;
  }
};

6.In the checkForBuild function, it will call the getBuildlog function

export default async function checkForBuild() {
  // If we're already building, skip this check
  if (build) {
    return;
  }

  const status = await checkBuildStatus();
  if (status.building) {
    terminal.clear();
    reader = await getBuildLog();
    if (reader) {
      // eslint-disable-next-line require-atomic-updates
      build = { reader, title: status.title, startedAt: status.startedAt };
      reader.read().then(processLog).catch(finish);
    }
  }
}

7.Finally, in build.js, it add an event listener to run the Checkforbuild function every 5 seconds.

import checkForBuild from '../build-log/check-for-build.js';

window.addEventListener('load', () => {
  checkForBuild();
  setInterval(checkForBuild, 5000);
});

This is How I understand the writing build log function. But I think it needs deeper research about the backend code.

And for saving the previous build log, I saw the previous variable on the builds object.

const builds = {
  // Whatever built most recently
  previous: null,
  // Whatever we're building now
  current: null,
  // Whatever we're building next
  pending: null,
};

I am trying to write code to save the previous build to the variable build.previous. So, it displays not only the current build but also the previous build.

To sum up, release 0.4 was a great experience to learn the concept of family issues. When I first time read release 0.4, my brain was blackout because it asked me to find the more difficult issues and one of the parts that I am struggling with was to search for the sufficient issue. for releases 0.2 and 0.3 I took more time to find an issue than editing the code. However, I saw the family issues are also acceptable which is consists of 2-3 small issues. And for this release 0.4, I worked on the reviewing pull request and worked on a total of 4 issues which are 3 small and 1 challenged issue. It was nice to experience learning more deeply about git and open-source projects.

This is the end of the 14 weeks of a long journey of my first open-source course. It was quite a long journey and takes lots of time compared to other courses. But it was a course I can work on without the pressure of exams and quizzes. That made me interested in this course.

Before I start this one, even someone asked me to work on the open-source project together to build a stronger resume. I rejected it because for me the open-source was something for professional developers. But after I learned git and the basics of open source, my thought on open source projects is changed that it is something everyone can contribute there are lots of issues created from beginner to difficult levels which need a high understanding of programming languages and servers. So, anyone with any level of programming language can contribute the open-source projects. I also enrolled in OSD700 to keep working on the open-source project. Because I am curious about what will be changed in my mind if I learn more about the open-source project.

If I can go back to the first day of the open-source course, I will tell myself that focus more on how to utilize the git. I think an open-source project is not possible to be done without knowledge about git and GitHub. Throughout this course, git was the hardest part for me because I was worried if I break the branch. So, I was very careful when I am practicing the git bash commands. However, now, I feel a bit more confident because I practiced more through the labs and assignments of this course. but still, I need to practice some more to be fully confident.

Progress Report for week 2

suhhee1011 — Thu, 09 Dec 2021 23:06:00 +0000

This is a progress report of release 0.4 for the week2.
For this week, I worked on two issues, create one pull request, assigned one issue, and asked for a pull request review.

First, As I mentioned in last week's blog post, the two issues that I worked on were Weekly Commit Display issue and Dashboard and Build log unsynchronized issue.

For the Weekly Commit issue, it asked to remove the weekly commit DOM object if the weekly commit is 0 because it is already written below that "No commits this week".

It was like this before I solve this issue.

And this is after I solved this issue

While I was solving this issue I made some changes to the git-hub.js file and index.html file.

bind the label and value of the weekly and yearly commit of telescope and satellite. Below is an example of the telescope.

<div id="yearly-commits-satellite">
    <p class="text-sm mb-0 text capitalize">Yearly Commits</p>
    <h4 class="mb-0" id="num-yearly-commits-satellite">&nbsp;</h4>
</div>
<div id="weekly-commits-satellite">
    <p class="text-sm mb-0 text-capitalize">Weekly Commits</p>
    <h4 class="mb-0" id="num-weekly-commits-satellite">&nbsp;</h4>
</div>

Edit an inserted number of commits function. I added a condition that if the weekly commit is less than 0 then make the visibility to hidden and if it is larger than 0 make it visible.

if (weeklyCommits > 0) {
        document.getElementById(`weekly-commits-${repo}`).style.visibility = 'visible';
      } else {
        document.getElementById(`weekly-commits-${repo}`).style.visibility = 'hidden';
      }
      document.getElementById(`num-weekly-commits-${repo}`).innerHTML = weeklyCommits;
      document.getElementById(`num-yearly-commits-${repo}`).innerHTML = data.all.reduce(
        (a, b) => a + b
      );
      return data;

I had some problems while pushing the code to my local branch. Hence, I googled it and try to type the commands that I googled it to push it. But I got some problems. So, I just made changes on my master branch and created the pull request. And I got a comment from a professor that I should not work on the master branch. And he provided the commands which can clean my master branch history. While I was working on the commands from the professor, I got some errors that I need to fix. So, it took me a bit longer than I expected but it was solved.

And another issue that I worked on was the Unsynchronized dashboard and Build log issue. The menu items and the color focused on the current page were not the same.

This is before I solved this issue

This is after I solved this issue.

For this issue, I changed two-part in build.html.

I made the menu item of the build.html and index.html the same.
I changed the focus to the build log tab and change the color to the main color of the telescope.

As it is already the end of the second week, I will create a pull request next week.

As I already did three-issue, so, as the family issue is consist of 2-3 issues it should be enough. But it is only the end of the second week. So, I found another issue to work on next week. The issue is also about the dashboard page. I need to make changes to the build log. As this is my first time handling some build logs, I think it will be challenging for me but I want to give it a shot to work on this issue. I think I need a lot of research to solve this issue.

And also from the professor, asked me and minsu, if we can review the pull request about Korean translation issue. Currently, I am waiting for the pull request to create. I am exiting that I can review Korean :D

Overall, this week I had problems with git bash and braches. I thought I am quite a confidence with my skill of git management cuz I worked on lots of labs and previous releases. However, after I got stuck this week. I think there are lots of commands that I need to be practiced. And for next week, I will research and try to solve the build log issue.

Planning for Release 0.4

suhhee1011 — Sun, 28 Nov 2021 02:31:48 +0000

This blog post is about how I planned what I am going to work on Release 0.4.

In the requirements, there were a few options that I can choose from. First, I chose to fix a bug or new feature that challenge me on the big open source project and I started to find the issue for it. However, even though I spend 5 days finding appropriate issues for me. However, the issues that I found seemed too easy which cannot challenge myself, or too difficult which I cannot finish within the deadline.

So, instead of spending time on finding "good" issues, I decided to keep working on the internal issues of telescope dashboard bugs or new features. As the issues that I currently found are not difficult issues, I decided to work on a number of related small issues.

There 3 issues that I am currently working on.
The first Issue is about the Sidebar Menu item being duplicated.

This issue was found when I worked on my internal issue on Release 0.3. When I working on release 0.3, I got a chat from a professor that the sidebar menu items were duplicated. However, on my local side, the menu was not duplicated.

So, when I working on this issue last Friday, I fetched the master branch of the telescope of my local branch and pull it again. And I found that the code was duplicated. So, I just get rid of it and pushed and created a pull request.

However, I got a comment that I removed some needed code from the last commit. That was because while I was working on the issue there was a person who worked on the same file with me. And my commit overwrites his fixes. Hence, I tried to fetch again and push it again. However, the git bash asked me to pull my branch again and it makes my code back to the wrong state. I was googling and kept trying to fetch, pull and rebase the commits. And... it crashed my git branch. Hence, I deleted the current branch and create a new one with the latest code and fixed the sidebar bug, push and create new pull request. And it is merged!
This is after I fixed.

For next week, I am going to work on two issues that I am currently assigned. Second issue that I am going to work on is about Weekly Commit displaying bug and the another issue is about Dashboard and Build log has different sidebar menu.

For this release 0.4, I am planning to work on at least 4 bugs for the dashboard page of the telescope. And I will keep trying to search for the challenging bug or new feature of the dashboard page. As I am working on the status dashboard page of the telescope, I am expecting myself to be knowledgeable about how to put git status on the website. This is because I am planning to create my portfolio page this winter break, and I hope that this experience will help to put my Github status on my portfolio page. And in the last release, it was a very nice experience to get lots of comments from different perspectives and fix my code based on the code review. However, I worked release 0.3 a bit late, I was in hurry to write and edit the code. So, I started on the first week of release 0.4 and I am expecting that it will allow me to have enough time to work on the comments of my new pull requests.

Create NPM Package - feat. last lab

suhhee1011 — Sat, 27 Nov 2021 04:09:42 +0000

This is the last blog post for this static page generator program. For this lab, I need to release my program online. I used NPM to publish my program as a package.

These are the detailed steps:

Create an account in NPM(Verify email before publishing the package)
Remove "Private: true" in package.json.
Type the command "npm publish" and done!

Actually, I thought the process to create an npm package is more complicated and only allowed for some highly skilled developers. However, I was surprised with the npm package upload process cuz it's really simple which consists of a few steps.

After I published I need to update a few times to make it work.
v.1.0.0 - This was the first version that I published
v.1.0.1 - added testing scripts.
v.1.1.0 - I accidentally commented import statement. I uncommented the line.

// import arg from "arg";

v.1.1.1 - fix a bug in the program.

fs.unlink(`./dist/${filelist[num]}`,(err=> {
                     console.log(err);
                  }));

v.1.1.2 - Readme.md edited based on the partner's feedback and added a description of how to download the npm package.

I asked my friend to test the npm package. And download and running simple commands like version and help were going well. However, when she put the file in the main folder and tried to create the HTML file from the txt file. there was some problem that the program could not find the txt file. So, I tried to figure out what is the problem.
And I got the reason why the program could not find the file. This is because I set a path for finding files in the folder called "docs" and she uploaded the file to the root folder. So, I added a step on the instruction of NPM on the README.md to create a folder named "docs" and upload files in it. I also think about removing the path and letting them upload on the root. But reason, why I created a separate folder to upload the files and folders, is to make it clean. So, instead of removing the path I just add one more simple step to set instructions.
This is the edited instruction on how to download and use the project.

How to install

Download npm package -> npm i -g create-ssg
Create folder named "docs"
Put all the files and folders that you want to convert to HTML
Run the commands(Detailed instructions are in the NPM package instruction or in my GitHub Project page)

Summing up the project

suhhee1011 — Fri, 19 Nov 2021 23:07:07 +0000

This is the last blog post for release 0.3. In this release, I did 2 pull requests and 3 code reviews. It was hard to complete all the pull requests and code reviews, but I think the process that I went through when I working on this release 0.3 was very useful.

1. Internal Pull Request - Internal Issue - Telescope

Blog Post for Internal Pull Request

This issue was customized to the dashboard page to make it belong to the telescope page. It was the first time I worked on an internal issue and it was the most interactive pull request with lots of code reviews and comments. I main part of what I edited was the menu bar, I needed to add and remove the menu items and make it seems like a telescope menu. After my pull request is successfully merged, I learned that it is very important to read the PR and the previous comments carefully.

2. External Pull Request - External Issue - Match-three-game

Blog Post for External Pull Request

This issue was a fixing bug in the game. I worked on this project in release 0.3. And I continued working on this release 0.3. In the last release, it was just adding some buttons to start, restart and stop buttons. However, for this time, I fixed the bug of the game which is that the candies are not able to move when they should be moved and it becomes severe on the side of the board. So, I fix the bug to make it movable. It was hard because I need to fully understand how each of the functions is working and how they interact with each other. But, after I finish fixing this bug, I was so satisfied that I fixed others' code.

3. Code review 1 - Telescope

Blog Post for Code review 1

This code review was about the same page as what I was working on at that time. So, it was interesting to me. In this code review, I commented to edit the format of the contributor's name. And suggested how to fix. It was a very good experience because I got the comments in the last releases from other people. But I haven't given the code review to others. so it was very careful and interesting that I give suggestions based on other's codes.

4. Code Review 2 and Code Review 3- IPC144

Blog Post for Code review 2 and 3

The code review was from the IPC144 webpage. Since when I was in the first semester, I felt that this site should be changed. So, when I see that this page is kept maintained by people, I felt that it was not only me who thought this webpage should be changed. So, I clicked a first pull request to review it. And I saw that the last deployment was failed. so I commented about why the deployment was failed. And for the third code review, I focused on code snippets which are very important to the IPC course students. And I found some parts and suggested them on the pull request. It was a great chance that I can work on the page where I used to learn in the first year.

To sum up, the 5 works that I did were hard and takes much more time than the last release. But, I also learned a lot about open source environments. So now, I am looking forward to work on release 0.4 next week.

My Second and Third code review

suhhee1011 — Fri, 19 Nov 2021 23:06:41 +0000

This blog post is for my Second Code review and Third Code Review. Because the second code review is very simple and short, I decided also to put the third code review.

After I finished working on the first code review on the telescope project. I decided to work on the IPC project for the next code review. I just went in a pull request list of the IPC project and just choose one issue which come into my sight first. and it was audit&fix information.md. And I started to read a code. and I saw that the deployment of the most current issue was failed. So, I decided to find the reason why it failed. because it was all passed in previous commits.

And I think the one who worked on this pull request had a conflict when he/she pushed the last commits. because I found a tag that git automatically generates if the conflict exists.

    "execa": "^5.1.1",
    "mr-pdf": "^1.0.7",
    "wait-on": "^6.0.0"
=======
    "docusaurus": "^1.14.7"
>>>>>>> issue-44
  }

So, I just added a comment to erase these tags.

And the third pull request was also about the IPC web page. That was about audit and fix string-library.md file.
In this pull request, I found some issues in code snippets. I left two comments about the array size of the cstring.
The first one is about strcpy of char array.

int main(void)
{
    char str[31], copy[21] = "?";
int i, len;
    printf("Source : ");
    scanf("%30[^\n]%*c", str);
    len = strlen(str);
    if (len < 21)
    {
        strcpy(copy, str);
        printf("Copy : %s\n", copy);
    }

As this code is going to copy str to copy. I think the size of the array str and size of array copy should be the same or the copy should be larger than str, even though the if statement blocks the code to copy less than 21.
I can understand that why did the writer write like that. But, it can make the student in confusion. Because I was a student who was confused because of an unclear code snippet and I need to go to the professor and ask why is it like this.

And next one was also about concatenating char array. I left a code review on this because I think it will be better if the given name is there instead of the full name.

int main(void)
{
    int i, len;
    char surname[31], fullName[62];
    printf("Given name  : ");
    scanf("%30[^\n]%*c", fullName);
    printf("Surname     : ");
    scanf("%30[^\n]%*c", surname);
    strcat(fullName, " ");
    strcat(fullName, surname);
    printf("Full name is %s\n", fullName);
    return 0;
}

But it was my mistake that I understand that the code want to add surname and full name array to make it surname + full name. But after I left a comment on this code review, I got a reply on it and I noticed that I was wrong.

The reply was

I don't think so. This is the example for
 strcat() which concatenates surname and 
givenname to fullname so the fullname 
arr's size should always be greater than 
the surname arr's size.

For the second code review, I learned that git conflict tags can cause a fail in deployment. And for the third code review, I learned that I really need to understand well before I leave a comment on an issue. or else, I might make the PR creator confused.

My First code review

suhhee1011 — Fri, 19 Nov 2021 23:02:00 +0000

This is my first code review for release 0.3. I was looking for a pull request on the telescope. Because, I am working on the issue of the project which means, I can understand the code easily compare to another project. And I found an pull request from the page which was an issue from the same page that I am working on. So, I went into the pull request and I was surprised because I was assigned to review the pull request. And I found that the professor assigned me to this issue to review it.
This is the screenshot of the page.

After I looked into the code changes, I saw two parts it will be great to fix.
The first issue was not wrong at all, but, it will be better if it is fixed. the part was the person's name in the last contributor was not synchronized. Some are in small letters and some are capitalized. If it is just a GitHub id it is okay to keep it like what the user decided to have. But it is a name of a GitHub account owner, so, I left a comment that it will be better if the name is synchronized to the same format. And as there is a styled class which is "text-capitalize", I added to comment to just simply add that class can fix this error.

And the second one was the length of the GitHub status cards is not the same. All the heights were different. So, I think to left this comment on the pull request. However, just before I leave a new comment. I decided to read the previous comment and it really helped because there was a person who already left this comment on the pull request. So, I just ended up leaving the first on this pull request.

It was interested because I am reviewing another person's pull request which is a page that I am currently working on. It means that there are some more people who are currently working on the same page as me. That makes me motivated to work hard on this pull request and the issue that I am currently working on.

Fix bug on the game

suhhee1011 — Fri, 19 Nov 2021 22:58:46 +0000

This is my second blog for release 0.3. For this time, I tried to find an issue in the other project to challenge myself. However, even though I tried to find an issue for a week I couldn't find it. and I was a bit tired of finding a good issue for release 0.3. So luckily, an issue I saw while I was doing the release 0.2 comes into my brain. The issue was fixing a bug in the project which I worked on release 0.2. After I finished release 0.2, I asked them that if I can work on it. But, it was difficult for me to fix the bug. So, I gave up and forgot it. so, I tried to search that issue if it is not yet closed and it was still open and no one was assigned to the issue. So, I started to work on the issue.

The issue was about the candies in the game is not movable when they should move. and the issue generator asked to make it movable and give some disadvantages if the move doesn't match the three candies.

So, I edited 3 points. First, make the candies movable if it is a valid move. Second, if the moved candy does not match at least three of the same candies, it will deduct 10 points every move. and finally, if the score goes below 0 it will keep 0.

When I read a code, the problem was the code blocked the move if the move does not make the score. So, I removed one condition to check if the move is matched or not. if it works well, I thought that I can keep that condition and make the change in other parts of the code. However, the condition makes the candies stick to one place and it more severely stick if it is on the side of the board.

After that to deduct the points, in the dragDrop function. I added a condition to get the value from the scoreboard in Html deduct the points and return to the scoreboard and make it not go below 0. This is the full code of dragDrop function after I fixed it.

const dragDrop = (element) => {
    @@ -625,14 +629,23 @@ document.addEventListener('DOMContentLoaded', () => {
    squareIdbeingReplaced = parseInt(element.target.id) //2

    const validMove = isValidMove()
    if (!validMove) {
      squares[squareIdbeingReplaced].style.backgroundImage = colorBeingReplaced
      squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged
      return
    }else{
      if(!isFoundMatching()){
        let tempscore = parseFloat(scoreDisplay.innerText)
        tempscore -=10;
        if(tempscore<0){
          tempscore =0;
        }
        scoreDisplay.innerHTML = tempscore;
      }
      squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced
      squares[squareIdbeingReplaced].style.backgroundImage = colorBeingDragged
    }

After I fixed everything, I created a pull request to the main branch.
And these are the screenshot after I edited-

First, match the blocks to get points

Second, make a wrong move to deduct 10 points

and keep making the wrong move to make the score to 0.

This Pull Request was satisfied personally because I gave up once. The javascript code for this single game was too long... However, once I looked back on this issue after a few weeks from the first time that I saw this issue, it seems like I can work on it. Hence, I copied the code to a new js file and started to break down the codes and categorize it. After I finish categorizing it seems very easy to read and understand. So, when I start to edit the bug, it was very smooth because I fully understand the whole game logic.

It was a very nice experience because it gave me a chance to read and fully understand others' codes. As this is my last pull request for release 0.3, I hope in release 0.4 I can also learn a lot like in release 0.3.

Participate on internal project

suhhee1011 — Fri, 19 Nov 2021 22:46:46 +0000

This is my first blog for release 0.1. The project that I worked on was the telescope Project which is Seneca college open source Project. I found one issue for the project and started to work on it. The issue was about customizing the dashboard so it looks like it belongs to Telescope. And in the issue, I need to change:

use the Telescope logo
use the Telescope favicon
Change "Material Dashboard 2" to "Telescope Dashboard"
Get rid of the "Upgrade to Pro" button
Get rid of copyright and other links in the footer
Change the primary color from reddish/purple to use the primary Telescope color

This is the previous version that I changed.

I fixed those criteria and Created a pull request.
And this is the screenshot of when the pull request was created.

After that, I got lots of comments and I keep doing the cycle of check comments, editing code based on the comments, and pushing it to the github until there are no comments left.
And this is the final result after it merged.

This Pull request was the most active PR ever I had in this course. After I the Pull request was merged. the number of comments in this PR was 58. It was hard for me. because I usually, if I create a pull request, there were some comments are there and in next 2~3 new commits make the pr merged to the program. However, this one takes more time than usual. Even though it was a long process. it was very helpful to me to experience active code review on my code.

While I am working on this issue, there was a person who created the same change requests which are already discussed in previous comments. There was one person who commented on the same thing which was already discussed above. Before, when I write comments on the other's pr I usually read the previous comments but not always. Maybe for him, it was a few comments that he put on a random pull request, but for me, it was a pr that I working on. And it takes my extra time to explain to him to look at the discussion above. For next time, I think I will carefully read the previous comments every time on the other's pr when I want to add new comments to prevent double work which is unnecessary.

But most of the comments were very useful and most of the comments were about the side menu bar. There were comments that ask me to add and remove the item, remove the scroll bar, change the icon and color of the active tab. To be honest, while I am working on it I felt like its too much work for a single issue. But, after I finished everything and look at the result. It was very satisfying to me.

Github action and create test case on other's repo

suhhee1011 — Fri, 19 Nov 2021 21:24:39 +0000

For this lab, I needed to create a GitHub action for my SSG project and add a new test case for the other classmate's project.
First, I worked on my SSG project first so that other classmates can add their test cases if needed. And I followed a lecture on how to create the GitHub action. Creating GitHub action was very straightforward and simple work. And while I am working on this, I noticed that I saw this when I was working on the external open-source projects and it was a bit annoying to me haha. However, now I know that how it works and it will prevent the crashing of my project.
This is the github action that I created

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: run ci
    - run: npm ci
    - name: run test
    - run: npm run test

After that, I go to Minsu's GitHub repository and work on his SSG project. I chose it because I thought it is familiar to me. But I noticed that the project changed a lot. So I needed some time to read and understand his markdown instruction files. Once it runs, I start to look for the test cases that were missed. I found one part missed testing and it was validating metadata. So I added a test case to validate the Metadata function. And I pushed to my forked repository and create a pull request on his main repository. However, it caused an error on formatter and eslint. So, I run the two commands to format it and pushed it again. And finally, GitHub action passed my pull request and Minsu merged it on his GitHub.

//In IWrapper.cs
string WrapGenerateInterporatedstring(string title, string style, string body, string meta)
        {
            return Helpers.GenerateInterporatedstring(title, style, body, meta);
        }

//In UnitTest.cs
        [Fact]
        public void GenerateMetaTest()
        {
            var mock = new Mock<IWrapper>();
            string title = "test";
            string style = "none";
            string body = "<div></div>";
            string meta = "ssg";

            // expected
            mock.Setup(x => x.WrapGenerateInterporatedstring(title, style, body, meta)).Returns(It.IsAny<string>());

            IWrapper obj = mock.Object;
            string result = obj.WrapGenerateInterporatedstring(title, style, body, meta);

            Assert.Equal(It.IsAny<string>(), result);
        }

And I saw his GitHub action page to check if my code runs well, even though he used a different language from me. The format of his Github action and my GitHub action seems similar. This is his Github action.

name: .NET

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 5.0.x
    - name: Install dependencies
      run: dotnet build ./kimchi-ssg/kimchi-ssg.csproj
    - name: Run Formatter & Linter
      run: |
        dotnet tool install --global dotnet-format --version 5.1.250
        dotnet-format --check --folder ./kimchi-ssg
    - name: Test
      run: dotnet test ./UnitTest/UnitTest.csproj

This lab doesn't take a long time but it gives enough experience to prevent me or others to crash on the project I can apply to my next real project.

Creating test plan

suhhee1011 — Sun, 14 Nov 2021 23:34:24 +0000

This lab was about how to create a test plan for the static website generator. First I need to choose which testing framework that I am going to use. I chose jest framework because it seems easy in the professor's lectures. This is a testing framework for node.js. It helps us to test from units to end-to-end testing.
And below is the steps to implement a testing script to the program.
First, I download the jest framework using npm.

npm i jest

Second, I added, "test": "jest" to the script in package.json file.

 "scripts": {
      "test": "jest"
   },

After that, I created a test.js file for each of the javascript files that needed to test in the same folder of the javascript file. For example,

cli.js => cli.test.js

Finally, I created a testing plan for the test plan.
First of all, I created a testing plan for all the possible user inputs. I was quite impressed while I am creating the test cases. This is because, previously, I tested manually all the features that I added to the program and all the edge cases. And I need to test again most of the features if I add a feature, just in case if the added feature can affect other existing functions.

After that, I created unit test cases for converting from the text and markdown file to HTML files. It was also impressive because to test the single function I need to debug with the IDE that I am using or I put the console.log to make sure it runs properly. But as these unit test cases that I create will test all the needed functions, I think it will save lots of my time.

As creating testing plan, save lots of my manual testing time. From now on, I think I am going to use this framework to test the features of the program that I will create.

Add prettier and eslint

suhhee1011 — Tue, 09 Nov 2021 05:13:31 +0000

Prettier is an opinionated automatic code formatter with lots of programming languages and IDE. The reason why I chose this one is first, I saw in the different projects. It means that it is widely used in javascript projects. And it seems easy to install and use it.

These are the steps to how I added prettier to my project.

Enter npm install --save-dev --save-exact prettier to download the prettier.
Enter echo {}> .prettierrc.json to create empty JSON file.
Create ".prettierignore" and add the build and coverage to ignore it. # Ignore artifacts: build coverage
Run "npx prettier --write ." to run prettier formatter
Run "npx prettier --check ." to check if the files are already formatted.

These are the steps to implement prettier in the project.
However, I added one more step to make it the developers easier to format the code.

Add "prettier": "npx prettier --write ./src/*.js" in the scripts in package.json file. So, the developer can just run prettier with "npm run prettier"

When I run this prettier formatter it changed the different tab sizes to the same size by 3spaces, changed the single quotes to double quotes, and add semi-colons where I didn't add.

And for the eslint, it is a code analysis tool that optimizes the code and coding styles of javaScript. The reason why I chose this one is first, as same as prettier, I saw this plugin in the other open-source project and it made me research a lot to fix the error when I worked on the error in the previous assignment.

These are the steps that I followed to implement it on my project

Enter npm install eslint --save-dev to install
Enter npx eslint --init to do the basic setting of the eslint. These are what I chose while initializing the eslint.

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No 
√ Where does your code run? · node
√ What format do you want your config file to be in? · JavaScript

Enter npx eslint [filename] to run the eslint on the codes.
Edit eslintrc.js file I chose two options.
1. Double quotes for String
2. Semicolon is required

 "rules": {
        "semi": ["error", "always"], 
        "quotes": ["error", "double"]
    }

As same as prettier, I added one more step to make the developer easily use the eslint.

Add "eslint" : "npx eslint ./src/*.js" in the scipts in package.json file. So, they can run eslint with npm run eslint and it is applied to all the necessary files.

When I run this eslint formatter it caused lots of defects.

   79:13  error  'patternExt' is assigned a value but never used  no-unused-vars
   86:16  error  'str' is assigned a value but never used         no-unused-vars
  112:57  error  'err' is defined but never used                  no-unused-vars

C:\Users\suhhe\Documents\git\new\create-ssg\create-ssg\src\htmlCreator.js
    1:7   error  'path' is assigned a value but never used  no-unused-vars
   13:18  error  Unnecessary escape character: \>           no-useless-escape
   14:18  error  Unnecessary escape character: \>           no-useless-escape
   16:17  error  Unnecessary escape character: \_           no-useless-escape
   16:19  error  Unnecessary escape character: \_           no-useless-escape
   16:25  error  Unnecessary escape character: \_           no-useless-escape
   16:27  error  Unnecessary escape character: \_           no-useless-escape
   17:17  error  Unnecessary escape character: \`           no-useless-escape
  125:14  error  'metadata' is defined but never used       no-unused-vars

✖ 13 problems (13 errors, 0 warnings)

Hence, I need to go to the location with the error and fix the code. most of them are defined but not used or useless escape characters. So, I need to fix those issues to optimize my code and run the program.

Finally, I edited the settings.json file to help new contributors to my project automate the two prettier and eslint on the vscode.

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

After I finished all the implementation of two tools, I squashed all the previous commits I did in this lab. And I merged it to the main branch.

For lab 7, I added prettier and eslint to my static site generator. I saw these two while I was working on the last assignment. To be honest, when I am working on a project with prettier and eslint, it was annoying to me. Because first I can estimate what prettier and eslint were doing, but the errors that the two asked me to fix were not even affected in running codes. But, I fixed it because or else it does not run in the code. After I listen to this week's lecture, I thought the errors were understandable. Because now I know that how it works and why they needed in projects. As these two tools synchronize the codes from different contributors to one, I will use this tool, if I create a project in which I need to work together with other people.