DEV Community: Minsu Kim

Progress Release 0.4

Minsu Kim — Thu, 30 Dec 2021 12:51:46 +0000

Introduction

The previous my blog post indicates the plan of the Release 0.4. This blog post would talk about the challenge that I have faced with.

First Issue

The challenge that I have faced with this issue is how to approach the issue. I have considered the solution that every time user clicks the different maps, refresh the page. But this solution is very inefficient and dirty method. I should consider different method.

Second Issue
The challenge that I have faced with this issue is syntax. Since I do not have experienced with Vue.js. The highlighting the table row when mouse hover the table row cab be done with CSS. However, this method cannot be used because the input table row is also highlighted when the hovering mouse over which is the repository owner does not want to have this behavior. Therefore I have to approach different method using Vue.js

Third Issue

The chllange that I have faced with this issue is communication with repository owner. The issue indicates that replace the back-ticks and UTF-8 apostrophes with regular apostrophes. The issue itself is very simple. However, I did not sure where this implementation should belongs, either for displaying or parser. I interpenetrated the issue as replacement for displaying but repository owner wants to implementation on the parser.

Planning Release 0.4

Minsu Kim — Thu, 30 Dec 2021 12:51:02 +0000

Introduction

The plan for release 0.4 is that I should do something outside of comfort zone which means the issue should have more difficulty level than previous releases.

Issues

Issue 1
Issue 2
Issue 3

Description

The issue number 1 is the video game guild website called tarkov tools. The issue is that there is a bug, the zoom level persists when other maps being clicked.

The issue 2 is made from Vue framework to build music tracking list. The project owner wants to add the feature that the table row should be highlighted when user hover mouse over.

The issue 3 is from same repository as issue 2. This issue is enhancement that the cleanup back-ticks and UTF-8 apostrophes to regular apostrophes.

Final Release 0.4

Minsu Kim — Thu, 30 Dec 2021 12:50:34 +0000

Introduction

The previous blog post talked about planning and progress. Now I would like to talk about the final release 0.4

First Issue

Issue & PR

As I talked about previous blog post. My first approach is failed to implement this feature because it is very inefficient that refresh the page every time user clicks the map. I have looked the project very carefully and I found that the repostirory owner used react-zoom-pan-finch library to fetch the map images. I have read the document for approach. The answer is much simpler than I think. The method called resetTransform() can be accessed by useRef. Create useEffect to detect for changing state of currentMap from useParams. Every time user clicks the map, the zoom of image is reset by ref?.current?.resetTransform()

Second Issue

Issue & PR

I have added highlight feature with Vue.js instead of CSS only. The issue itself is very simple but I have challenged with Vue.js syntax. First, I have created the variables that receive the TrackID

selectedRow: null,
deselectedRow: null

Second, I have to emit the table row ID when user hover the mouse over the table row.
@mouseenter="highlightTableRow(track.id)" @mouseleave="removeHighlightTableRow(track.id)"

Then created functions to assign the trackId with variables

highlightTableRow(trackId){
           this.selectedRow = trackId
},
removeHighlightTableRow(trackId){
           this.deselectedRow = trackId
}

trigger CSS with :class in <tr>

.highlight {
          background-color:powderblue;
}

.removeHighlight{
         background-color: white;
}

:class="{'highlight': (track.id == selectedRow), 'removeHighlight': (track.id == deselectedRow)}">

Third Issue

Issue & PR

The parse.js file contains the implementation for translating some random input into the track information. Create the replace method for replace back-ticks and UTF-8 apostrophes with regular apostrophes

track.title = track.title
            .replace(/`/g, "'")
            .replace(/[\u2018\u2019]/g, "'");

More over, replace double smart quotes with regular apostrophes.

track.title = track.title.replace(/[\u201C\u201D]/g, "\"");

Add unit tests for those replacement

{
        str: '\`Leave The Door Open\`',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '‘Leave The Door Open’',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '“Leave The Door Open”',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "\"Leave The Door Open\"", time: ''},
        ],
    },

Concolusion

Throughout final release 0.4, I have learned that there is many different approaches to resolve the issue. It is very important to find proper way to resolve the issue. The one of the issue that I have used different JavaScript framework. I have learned from the last issue is that make sure I have proper communication with other person.

SSG Release

Minsu Kim — Thu, 25 Nov 2021 09:07:02 +0000

Introduction

The last piece of puzzle of Static Site Generator(ssg) development of previous 12 weeks task is releasing application. The most functionalities of SSG has been done successfully. Now it is time to release my application via package manager.

NuGet Package Manager

NuGet is a free open source package manager program released by Microsoft as a visual studio development extension. The releasing application is very simple. Generate .nupkg file and upload this file on NuGet website! Here is following steps for releasing my application:

Configure <propertyGroup> project file (.csproj)

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net5.0</TargetFramework>
    <RootNamespace>kimchi_ssg</RootNamespace>
    <PackAsTool>true</PackAsTool>
    <PackageId>Kimchi-ssg</PackageId>
    <Version>1.0.1</Version>
        <Authors>Minsu Kim</Authors>
    <IsPackable>true</IsPackable>
    <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
    <Description>Simple .NET application to generate static HTML file(s) from text and MarkDown</Description>
    <PackageLicenseExpression>MIT</PackageLicenseExpression>
    <PackageProjectUrl>https://github.com/mkim219/kimchi-ssg</PackageProjectUrl>
  </PropertyGroup>

If Visual Studio does not generate .nupkg file, <IsPackable>true</IsPackable> is required to generate .nupkg file

There is two ways to generate .nupkg file
- Build > Pack {Your application} on Visual Studio
- Enter dotnet pack {C# project file} in CLI. More detail please refer this page https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-pack
On the CLI, the successful message indicates the path where the .nupkg file is created
Go to Nuget and create account
Go to Nuget Upload after login
Upload .nupkg!

GitHub Action

Next step is creating GitHub Action for automating release. First, go to NuGet website for generating API key. Once I have API key, I create secret environment key in setting > secrets > add new repository secret that I can use in CI.

I found very useful publish template for C#. https://github.com/marketplace/actions/publish-nuget. This template provides a action to build, pack and publish packages automatically when a project version is released. The following code is added on existing .yml file

    - name: publish on version change
      id: publish_nuget
      uses: rohith/publish-nuget@v2
      with:
        PROJECT_FILE_PATH: ./kimchi-ssg/kimchi-ssg.csproj
        PACKAGE_NAME: Kimchi-ssg
        VERSION_REGEX: '^\s*<Version>(.*)<\/Version>\s*$'
        NUGET_KEY: ${{secrets.KIMCHI_SSG_NUGET_KEY}}

When GitHub action detects version updating on C# project file. The NuGet Package version is automatically updated.

Feedback

After I have released my package via NuGet, I have changed to review with my friend who is working on IT company as developer. I found some error that the path environment is different than Window because he uses Linux. Also, he gave me a advise that my README.md is unclear and vague. I have fixed the issue that happen in the Linux environment and README.md to make more understandable to reader.

Release

My first release is here. Go to NuGet Console and enter dotnet tool install --global Kimchi-ssg --version 1.0.3.

CI & Test Automation

Minsu Kim — Fri, 19 Nov 2021 14:27:43 +0000

Introduction

The previous weekly assignment created unit test for Static Site Generator(ssg). In this week, we extend previous weekly task to implement test automation on Github action with Continuous Integration(CI).

Implementation

The setting of Github Action CI Workflow is very straight forward. I have used suggested Workflows template for .NET from Github. Therefore, I just needed to configure the steps for test automation and lint.

The first step is setting up .NET action. The .NET action finds a specific version of .NET from my SSG. My version of .NET is 5.0.x. Here is the code:

- name: Setup .NET
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 5.0.x

The second step is installing dependencies.

- name: Install dependencies
      run: dotnet build ./kimchi-ssg/kimchi-ssg.csproj

dotnet build compiles the SSG, reads through its dependencies specified in the project file, and publishes the resulting on virtual machine.

The third step is setting up Run Formatter & Linter.

- name: Run Formatter & Linter
      run: |
        dotnet tool install --global dotnet-format --version 5.1.250

I have installed dotnet-format for detecting lint from my code.

dotnet-format --check --folder ./kimchi-ssg

This code check the lint all the file from ./kimchi-ssg

The last step is unit testing

- name: Test
  run: dotnet test ./UnitTest/UnitTest.csproj

The UnitTest.csproj includes test code for Kimchi-ssg. The implementation code is same as I did on the cmd and terminal.

The final code is

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

Testing Lint

Since all the unit test that I created and the additional unit test that my partner created pass the automation test, it is time to test lint! I made lint intentionally like this

and the error message is

I created a pull request for testing Lint. The CI throws error like this

The error message specify that there are two 29 whitespace characters on helpers.cs which is the result that I expected.

Add Tests to Another Project

I have choose to work on JavaScript SSG application that created by Eugene Chung. The testing setup and environment is completely different. He has configured the Node environment whereas I have configured .NET environment on CI. Also the testing environment is different. I have used XUnit for unit testing whereas he has used the Jest for unit testing. However, I have change to work Jest for unit test on WEB422 and previous contribution on Telescope. Also he has excellent CONTRIBUTING.md for providing how to test in his application. Therefore, the testing on my partner's repo is straightforward.

Conclusion

The CI is very excellent automate tool to prevent the code that includes lint and unit test the code. Sometimes I forgot to run Linter command before I commit my code to repo. Since this application is open source project, other people can have unformatted code. Now I do not have to worry because CI automatically block my PR if I have lint on my code!

Code Review

Minsu Kim — Thu, 18 Nov 2021 13:29:45 +0000

Introduction

In the previous weeks, I had change to contribute internal Seneca opensource projects: fix the bug on Telescope and IPC144 course note renewal. The last piece of task is code reviewing on other student's PR. The code reviews that I have done are PR1 and PR2

PR1 Code Review [Link]

The first code review is "ASCII Collating Sequence image converted into Table" which is very similar with my IPC144 course note renewal. The reason why I had code review on this PR is that I want to know and compare how he resolved the issue.

This is Markdown code what he has done. He has smart idea to add one more column to improve readability on Docusarus. However, not only improving readability but also it helps developers to edit code for maintenance. He used prettier to align all the content in right position. I had fixed my code after I have reviewed his code.

PR2 Code Review [Link]

The second code review is "Audit and Fix arrays.md". The comment that I left for the code review is that there is a picture for explaining the concept of array. However, the picture did not have proper alt tag in <img> tag.

The alt tag provides context of image that display and inform for search engine crawler which is important for SEO. Also alt tag is important for accessibility perceptive

PR3 Code Review [Link]

The third code review is "Fix escape character". This PR is about resolving the issue that highlight.js showed bizarre behavior that the code && converted into &&. The most parts are well organized and fixed. The one thing I concerned is that he deleted the code that prevent the error when no language detection. Therefore, I left a comment about this concern. He is well explained my concern. So the PR successfully merged.

Conclusion

The code review is not only helpful for the author of the code but also it is helpful to remind me the right knowledge and provide me better idea to solve the issue.

Fix the Bug on Telescope

Minsu Kim — Thu, 18 Nov 2021 10:14:58 +0000

Introduction

The Telescope is the open source project that maintains by Seneca College. The Telescope is an open source web servce and client application gathers all blog posts from variety of platforms such as WordPress, Medium, Dev Community, and many others and presenting as timeline.

Issue

The issue is one of blog post contain many lines of   at the end of blog post. This numerous of line break tag that wrap with paragraph tag interrupt view other blog posts.

Fix

The issue is very simple to fix. In the

remove-empty-paragraphs.js
const cleanWhiteSpace = require('clean-whitespace');

module.exports = function (dom) {
  if (!(dom && dom.window && dom.window.document)) {
    return;
  }

  dom.window.document.querySelectorAll('p').forEach((p) => {
    p.innerHTML = cleanWhiteSpace(p.innerHTML);
    const paragraphInnerHTML = p.innerHTML;
    if(!paragraphInnerHTML.replace(/&nbsp;/gm,'').trim()) {
      p.remove();
    }
  });
};

The logic already has been made for the &nbsp non-breaking space. Therefore simply add one more condition || paragraphInnerHTML.trim() === ' ' that catch if the  contains only   tag for remove the

tag.

challenge

The issue supposed to be easily resolved. However there is two things that I have faced the challenge.

The remove-empty-paragraph.js is never called
Since (1) challenge exists, I do not know my logic is correct.

The reason that remove-empty-paragraph.js is not called is actually function never get called. I think the empty &nbsp treats as edge case so I think the code was missing. Therefore I have create the code for invoking the function
The second challenge has been resolved with the advice from David who is instructor of this course. His advice is create unit test case for testing my logic is whether pass or fail. Therefore I have created

test('should remove <p><br></p> (line break)', () => {
    const htmlData = toDom('<div><p><br></p></div>');
    removeEmptyParagraphs(htmlData);
    const expectedHtml = '<div></div>';
    expect(htmlData.window.document.body.innerHTML).toEqual(expectedHtml);

The output is pass! My logic is correct but I do not see the any change on the Telescope running in local. I have no idea why my change does not reflect to the Telescope. So I have asked this issue to our Telescope Slack channel. Thankfully Josue and Duc Bui Manh helped to resolve this issue. They suggested me to delete old redis-data and re-run the application that also update database to fetch the blog posts. It takes while the elasticSearch crawls the all the blog posts but finally I have the expected result.

Conclusion

During the time in Hacktoberfest, I have contributed 4 small projects. It is such a good experience to contribute to large open source project Telescope.

Link

IPC144 Course Curriculum Renewal

Minsu Kim — Thu, 18 Nov 2021 09:18:55 +0000

Our weekly tasks in this week contribute external and internal project. The one of the internal project in Seneca is IPC144 course curriculum renewal. The project is renewal original course note into new course note by using Docusaurus. The design of current original course note is not user friendly and outdated. Therefore, the this open source project replaces old course note to new course note.

As I talked about Docusarus on previous week, the Docusaurus is a project for easily deploying, building, and maintaining the websites. The most part of content is implemented but the website needs contribution for reviewing and improving correctness. The issue indicates that the page uses EBCDIC Collating Sequence table as an image which is not accessible. The task should convert into text and Markdown table.

The conversion itself is very simple. However, I should have to convert with extra carefulness because the task has to be manually converted which there is change that I mess up the table. The table is accessible than the image table after I converted into table.
I have created PR and received reviews from other student. I will talk about more peer review next post.

Unit test for SSG

Minsu Kim — Thu, 11 Nov 2021 08:17:53 +0000

Link: PR, Repo
For the task for open source development in this week is adding unit test for Static Site Generator(ssg). There are 3 testing framework options: xUnit, NUnit, and MSTest. I have choose xUnit testing framework for unit testing because xUnit provides good documentation for creating unit test project and unit testing instruction.

Next step is setting up the environment. The first step of setting up environment creates unit testing project and include ssg project. The next step is most hardest part of the task because I have made ssg with static methods which is most testing frameworks do not support. The logic of Static method is assigned to the class itself not a instance of object. Therefore I have to find alternative way to test static methods. I found interesting blog post that I can have unit test with static method! The author, Joydip Kanjilal recommends method called "application – by using wrapper classes and dependency injection" what it is wrap static methods call in instance methods and use dependency injection to inject instance to wrapper class to be tested. Now I can have unit test with static methods with mock framework called moq.

While I was writing the unit testing code, I found some interesting bug. When user choose empty text or markdown file for generating HTML, the application crushes. Therefore I have to handle the error if user input empty text or markdown file. Previous 2 months I have focused on ssg application. The application runs fine and I thought my application is bug free. However, I have found multiple bug during the unit testing. I definitely do unit testing for making better application.

Formatter & Linter for C#

Minsu Kim — Thu, 04 Nov 2021 08:29:39 +0000

This week, I have added Static Analysis Tool on my Static Site Generator(ssg) & commit. Using static analysis tool is critical in collaboration with other developers in same project because static analysis tool helps to maintain the quality of source code. The static analysis tools that I used for my ssg are:

dotnet-format

dotnet-format is a code formatter for applying style to solution to dotnet.

Installation

The installation of dotnet-format can be done multiple ways.

Nuget packages for solution
Nuget package manager console
cmd

Installation via Nuget packages for solution in Visual Studio 2019 has versioning issue that requires .NET6.0 which is latest version and I am using .NET5.0. Therefore I have installed dotnet-format via Nuget package manager console in Visual Studio 2019 with Install-Package StyleCop.Analyzers -Version 1.1.118. Installation for cmd can be done with dotnet tool install --global dotnet-format --version 5.1.250801.

Implementation

The implementation is very straightforward. The user can create .editorconfig where should places same directory of sln file which helps users to visualize the formatting and code style in visual studio 2019.

After I have verified the configuration on .editorconfig. I have to create simple "one-step" solution for running formmater on the entire project form the command line.

public static void FixFormat()
        {
            var directory = TryGetSolutionDirectoryInfo();
            var process = new Process();
            var startInfo = new ProcessStartInfo
            {
                FileName = "dotnet-format",
                Arguments = $"{directory}/kimchi-ssg.sln",
            };
            try
            {
                process.StartInfo = startInfo;
                process.Start();
                process.WaitForExit();
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
        }

The command for diagnose and fix the format is dotnet-format <workspace>. The workspace is the directory where the sln places in. Therfore TryGetSolutionDirectoryInfo() is iterative method for searching sln file in parent directory. The FixFormat() function places inside of main for invoking corresponding formatting command.

StyleCopAnalyzers

StyleCop is a C# source code analyzer that allows to diagnose lint. The styleCop analyzer itself does not have auto-linting with command line. However, the dotnet-format supports to diagnose and fix the error with 3rd party analyzer.

Installation

The installation of StyleCopAnalyzers can be done via

Nuget packages for solution
Nuget package manager console

On the Visual studio 2019, you can search the StyleCopAnalyzers in the Nuget packages for solution and enter the command Install-Package StyleCop.Analyzers -Version 1.1.118 on Nuget package manager console

Implementation

The command in dontet-format that support 3rd party analyzer to diagnose the lint and fix is dotnet-format -a <severity> <workspace> where <workspace> is the directory that has sln file and --severity can be refer this page for explanation. Since the error detects from IDE, I have used

``severity warn.



public static void FixLint()
        {
            var directory = TryGetSolutionDirectoryInfo();
            var process = new Process();
            var startInfo = new ProcessStartInfo
            {
                FileName = "dotnet-format",
                Arguments = $"-a warn {directory}/kimchi-ssg.sln",
            };
            try
            {
                process.StartInfo = startInfo;
                process.Start();
                process.WaitForExit();
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
        }

The FixLint() function has similar logic with FixFormat().

Editor/IDE Development Environment

For the sharing development environment with all contributors that work with the project, the Visual Studio 2019 provides the vssettings file. On the Visual Studio 2019, user can export their environment setting to share with other contributors. The contributors just import vssettings file to work same development enviroment.

Reflection

Throughout this weekly assignment, as I mentioned many time previous blog post, it is very important to read document that involves project and package. I thougt C# does not have the tool and package that supports to auto-linting with command line. However I carefully read the document of `donet-format and there is a feature to support for auto-linting with 3rd part analyzer. Again, it is best practice to read the document when I lost.

After auto-linting and auto-formatting, I realized I have a lot of formatting and linting issue in my source code. I think it is very important to write the code with formatter and linter for clean code.

Mimicking Features From Docusaurus

Minsu Kim — Thu, 28 Oct 2021 07:01:49 +0000

In this week of assignment, I have done adding new features from Docusaurus to my Static Site Generator(ssg). The Docusaurus is the template that can easily publish the document websites.

The deployment of Docusaurus on the Github pages was very straightforward. There is a need for reading a document which provides information about deploying Docusaurus to Github pages. After setting in docusaurus.config.js and following instruction on README.md, the deployment on Github pages successfully done.

The features from Docusaurus that I added to my SSG are:

Search Engine Optimization (SEO), including meta tags in the HTML head (commit, issue)
Themes (commit, issue)
Configurable Slidebar (i.e., table of contents) (commit, issue)

Search Engine Optimization (SEO)

The SEO is the process of optimizing the website to be better visible to the search results from Google crawler "Spider". Simply if you have good SEO on your websites, you would like to have more visitors on your websites. This is crucial for earning money if your websites have advertisements and get paid by per-click.

I have considered to add 3 meta name: keyword, description and author. When the user generates HTML files from the text and md file. The SSG asks user to enter the keyword, description and author for each file. Therefore, all the files have own meta data on their HTML head.

Theme

I have checked that the Docusaurus has feature of dark and light mode. I have got motivated to implement this feature to my SSG. When user generate their HTML files by specifying the files or folder direcotory, the SSG use default theme setting. If the user generate HTML files by using config.json then SSG provides two options darkMode and 'lightMode'.

Configurable Slidebar

All the websites and Docusaurus have table of contents on the left side navigation. The table of contents provides convenient to check what contents exist on the website and easily access to content. I think the index.html, the homepage is required for this feature. Therefore, every time user generate the HTML file(s), the index.html automatically generate as default. All the pages include the left side navigation with table of contents and has own its document(s).

Reflect

The implementing the 3 features on my SSG has been done successfully as the functionality perspective. However, the design perspective, the implementation is not perfectly done. This is because I have lack of contents on the home page and I am using C# without ASP.NET which has limitation to apply design on my SSG. The next step for the feature, I will more focus on the design on my SSG.

Hacktoberfest #4

Minsu Kim — Sat, 23 Oct 2021 07:25:01 +0000

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

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.

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.