DEV Community: Seog-Jun Hong

Release - Open Source Project(w. Movex )

Seog-Jun Hong — Fri, 08 Dec 2023 19:10:12 +0000

Intro

I got to know Movex project during Hacktoberfest and kept contributing to the project. I planned to create the PR for Codu as I already posted my planning and progress, however, there was no luck and I wasn't able to create the PR. Thus, I found a smaller issue that I can deal with quickly before the semester is done.

Issue

When I was working for Movex, I found there were a couple of linting issues and I wanted to fix the issue, and I think this is a good time to get back to that. First, I created the issue as nobody wrote it up, and I saw the linting issues on 4 different files when I run the command npx nx lint movex --quiet.

Solution

gameReducer.ts

Before

type ReconciledStateReturn<S extends any> = false | true | [true, S];

After

type ReconciledStateReturn<S> = false | true | [true, S];

The error was Containing the generic type 'S' to 'any' does nothing is unnecessary and I simply removed extends any and the issue is gone.

MockConnectionEmitter.ts


export class MockConnectionEmitter<
  // TState extends any = any,
  TState = any,
  TAction extends AnyAction = AnyAction,
  TResourceType extends string = string
> implements EventEmitter<IOEvents<TState, TAction, TResourceType>>```



The same issue happened and the commented line had `extends any` caused the issue and I removed it.

##### orchestrator.ts


```ts
  let unsubscribe = async () => {};

Also, there was the issue about Unexpected empty async arrow function and this function was reused in the component. When I removed the line it affected the remaining code and I didn't want to destroy the project and I simply put @typescript-eslint/no-empty-function above the code.

Summary

During OSD600 course, I learned a lot of practical things, which will be helpful when working with a team. It was a good recap of Git and I could contribute to a few open-source projects based on what I learned. I'm 100% satisfied with this journey, and I will keep an eye on open-source projects if there's anything that I can contribute to.

Progress - Open Source Project(w. Codu)

Seog-Jun Hong — Wed, 06 Dec 2023 18:03:53 +0000

Intro

I dived into the issue to find a workaround, unfortunately, I couldn't find it and I was stuck on the issue for over a week. And I reached out to the author to get some help, but he also didn't have any good ideas for the issue. However, he has a best friend working for Vercel and we decided to wait for his help.

Issue

The issue happens because Next js router.events was deprecated after version 13, and our project is working on Next js v14. Now, it's time to refactor the existing code, but the latest version 14 doesn't come with router.events method and many people are struggling with this issue and complaining. You can refer to this.

Challenge

The latest Next js is updated, and now users can listen for page changes by composing other Client Component hooks like usePathname and useSearchParams instead of using router.events.

'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])

  return null
}

Also, some people suggested their workaround(https://www.npmjs.com/package/nextjs13-router-events), but there was no luck, and couldn't fix the issue.

End

As I dig into the issue and time goes by, I feel frustrated a bit and stressed out. It makes me feel like this is my limit, so I try to stop looking into this issue for a while, I'll be waiting for good ideas from the author and will get back to the issue later on.

Planning - Open Source Project(w. Codu)

Seog-Jun Hong — Fri, 01 Dec 2023 19:36:05 +0000

Intro

As a contributor of Codu, I often keep an eye on issues and try to resolve them. However, recently, issues are getting slower and I found out one issue is still not resolved even though it was raised 2 months ago.

Issue

Issue is that the web application tries to catch unsaved changes on an article while a user is writing, but our website was designed in Nextjs 12 and it was deprecated and the router wasn't available anymore as we moved on nextjs 14. The expected output should be like this:

However, when the user clicks another link or page, it directly moves out.

Why did you choose this?

The personal reason is that I love this project and people are using this website in the Beta version, and the author is pretty nice and guides beginners well like me. The other reason is I saw this project is written in Typescript and Nextjs that I'm interested in for these days, and some of the codes were implemented in Nextjs 12 and several issues came up for the same reason. Also, I already fixed the issue and want to learn more about Nextjs 14 by finding a workaround.

Challenge

It seems like a few people tried to fix the issue but they gave it up, so I'm not sure I'm able to find a workaround to fix the issue. However, I already fixed a similar issue last month during Hactoberfest and I believe that might be a good experience to fix the issue this time.

Open Source Contribution(w. Movex)

Seog-Jun Hong — Sun, 26 Nov 2023 15:28:38 +0000

Intro

Through Hacktoberfest, I got to know the open-source project Movex, and I'm one of the contributors of Movex and I keep working on the project. This project is serverless real-time data-sharing infrastructure for frontend developers, and written in Typescript.

Issue

For this release0.3, I spent almost 3 weeks on the Codu's issue and picked the minor bug for this time. I fixed two issues(issue1,issue2), and both were linting issues on the project. When I ran npx nx lint movex --quiet the command for linting, there were errors as below:

issue1

issue2

How to fix

issue1

There was an issue require statement not part of import statement, and I tried to use "@typescript-eslint/no-var-requires": 0 on .eslintrc.json file to solve the linting issue. However, the author wanted to use import statement for consistency, and I simply update the code by using import statement, and this is my [PR].(https://github.com/movesthatmatter/movex/pull/191)

import * as consoleGroup from 'console-group';
consoleGroup.install();

issue2

There was an issue constraining the generic type tstate to any does nothing and is unnecessary. on the code.

export interface IOConnection<
  TState extends any,
  TAction extends AnyAction,
  TResourceType extends string
> {
  clientId: MovexClient['id'];
  emitter: EventEmitter<IOEvents<TState, TAction, TResourceType>>;
}

And I simply removed extends any after TState, and the issue is gone. I checked all tests were passed and created PR. Also, I found out there were a bunch of linting issues other than these 2 issues, so I asked the author to assign the remaining linting issues to me. That might be a good chance to deal with lint in Typescript.

Open Source Contribution(w. Codu)

Seog-Jun Hong — Thu, 23 Nov 2023 01:17:07 +0000

Intro

Through Hacktoberfest, I got to know the open-source project Codu, and I'm one of the contributors of Codu and I keep working on the project. This project is written in Typescript and Nextjs, so there are lots of things to learn through the contribution.

Issue

I started working on the issue 3weeks ago, but I recently could wrap it up and it took some time than I expected.

The issue was to fix the open menu on the Article Sidebar when clicked.

If you clicked Report Article, then the modal would pop up, but the menu still remained.

Investigate

First, I looked into the code, and found out they used Headless UI to use Popover component. Basically, the Popover doesn't close the menu because it is their one of attributes, so Menu Component should have used instead of Popover.

How to fix

After investigation, I found two ways of refactoring code, one is to use Menu component and the other is to close Popover manually. However, the first way needs lots of time and effort and I didn't want to modify the existing codes.

import { Popover } from '@headlessui/react'
import MyLink from './MyLink'

function MyPopover() {
  return (
    <Popover>
      <Popover.Button>Solutions</Popover.Button>
      <Popover.Panel>
        <Popover.Button as={MyLink} href="/insights">
          Insights
        </Popover.Button>
        {/* ... */}
      </Popover.Panel>
    </Popover>
  )
}

Thus, I easily used Popover.Button between Popover.Panel, and when I clicked the Report Article, the menu was gone as I expected, but unfortunately, Report Modal also disappeared in a second.

 const [isPopoverPanelOpen, setIsPopoverPanelOpen] = useState(true);

  const [isPopoverPanelOpen, setIsPopoverPanelOpen] = useState(true);

  const closePopoverPanel = (e: React.FormEvent) => {
    e.preventDefault();
    setIsPopoverPanelOpen(false);
  };

  const openPopoverPanel = () => {
    setIsPopoverPanelOpen(true);
  };
            <Popover className="ml-4 relative">
            <Popover.Button
              onClick={openPopoverPanel}
              className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800"
            >
              <span className="sr-only">Open user menu</span>
              <DotsHorizontalIcon className="h-6 w-6" />
            </Popover.Button>
            <Transition
              as={Fragment}
              enter="transition ease-out duration-100"
              enterFrom="transform opacity-0 scale-95"
              enterTo="transform opacity-100 scale-100"
              leave="transition ease-in duration-75"
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
              <Popover.Panel
                className={`origin-top-right absolute bottom-14 right-0 lg:left-16 lg:bottom-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-white ring-1 px-1 ring-black ring-opacity-5 focus:outline-none 
                ${isPopoverPanelOpen ? "" : "hidden"}`}
              >
                <div>
                  <ul>
                    <li className="block rounded px-4 py-2 text-neutral-900 hover:bg-neutral-200 dark:text-neutral-700">
                      <a
                        href={`https://twitter.com/intent/tweet?text="${postTitle}", by ${postUsername}&hashtags=coducommunity,codu&url=${postUrl}`}
                      >
                        Share to X
                      </a>
                    </li>
                    <li>
                      <a
                        className="block rounded px-4 py-2 text-neutral-900 hover:bg-neutral-200 dark:text-neutral-700"
                        href={`https://www.linkedin.com/sharing/share-offsite/?url=${postUrl}`}
                      >
                        Share to LinkedIn
                      </a>
                    </li>
                    <li>
                      <button
                        className="block w-full rounded px-4 py-2 text-left text-neutral-900 hover:bg-neutral-200 dark:text-neutral-700"
                        onClick={handleCopyToClipboard}
                      >
                        {label}
                      </button>
                    </li>
                    <li className="block px-4 py-2 text-neutral-900 dark:text-neutral-700 hover:bg-neutral-200 rounded">
                      <button onClick={closePopoverPanel}>
                        <ReportModal
                          type="post"
                          title={postTitle}
                          id={postId}
                        />
                      </button>
                    </li>
                  </ul>
                </div>
              </Popover.Panel>
            </Transition>
          </Popover>

Eventually, I could use another workaround to close the menu while the report modal is open. I created a button with closePopoverPanel function and this updates isPopoverPanelOpen value as false and it closes the menu. And when Popover.Button is clicked it updates isPopoverPanelOpen value as true vice versa. Now, the component can show and hide the menu when Report Article is clicked. This is my PR.

How to release a project(w. npm)

Seog-Jun Hong — Wed, 22 Nov 2023 02:16:29 +0000

Finally, I could release til-tool project to npm. I'll walk through how to release the project to npm.

How to release

Step 1. Create a npm account

Step 2. Login to your npm account through `cmd`

npm login

This command will redirect to npm webpage to login.

Step 3. Check your project is ready to release

First, you should have a project and create a package.json file through npm init because package.json file contains the bare necessities that you need to publish your project. Also, check out the version of the project as well.

Step 4. Publish your project

npm publish

This command helps you to publish your project to npm. You might have an error if there's already the same name of the package on npm. Then, you need to update the name of your project on package.json before publishing your project.

CI Workflow(with. GitHub Actions)

Seog-Jun Hong — Fri, 17 Nov 2023 20:33:03 +0000

Last week, I added unit and integration tests. However, I need to run the test whenever I push the commits to the repo. But, there is a good way to solve this, I did add CI workflow to GitHub Actions.

Step 1: Go to GitHub Actions

Step 2: New workflow

Step 3: Choose a workflow

Step 4: Create a `.yml` file based on your prefrence.

I chose Node and this is my .yml file for Linting and Unit Tests.


name: Node.js CI

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

jobs:
    lint:
        name: ESLint
        runs-on: ubuntu-latest
        steps:
            - name: Check out code
              uses: actions/checkout@v3

            - name: Setup node
              uses: actions/setup-node@v3
              with:
                  node-version: '18'
                  cache: 'npm'

            - name: Install node dependencies
              run: npm ci

            - name: Run ESLint
              run: npm run lint

    unit-tests:
        name: Unit Tests
        runs-on: ubuntu-latest
        steps:
            - name: Check out code
              uses: actions/checkout@v3

            - name: Setup node
              uses: actions/setup-node@v3
              with:
                  node-version: '18'
                  cache: 'npm'
            - name: Install npm
              run: npm ci

            - name: Test
              run: npm run test

This workflow is triggered when you push the code or when you merge the PR. This CI workflow is successful after I merge the PR.

Also, when you create the PR, you must see GitHub is automatically running the CI workflow as below:

Unit Test

Seog-Jun Hong — Fri, 10 Nov 2023 14:57:17 +0000

Jest

I used Jest to add unit tests in my typescript project, which is straight-forward and I used to work with Jest before, I felt it was handy.

What is Jest?

Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase.

Jest with Typescript

Prerequisite

npm i -D jest typescript

Step1

npm i -D ts-jest @types/jest

Step2

npx ts-jest config:init

Step3

Create {file_name}.test.ts for unit testing and run the following command.

 "test": "jest -c jest.config.ts --runInBand --",
 "test:watch": "jest -c jest.config.ts --runInBand --watch --",

npm run test command is to run all unit test files such as {file_name}.test.ts and npm run test:watch is to keep watching your test results when you fix your code.

Also, you can check the coverage based on your unit testing and it shows how many unit test covers your code, this is the script for checking coverage:

  "coverage": "jest -c jest.config.ts --runInBand --coverage"

Learning Opportunity

When I started with my project, my priority was to implement functionalities and run the project properly, so I really didn't think about edge cases and fail cases. Always assume that my app is working properly. However, this time I found out I missed lots of error handling function by using try and catch, so I refactored my codes and improved the quality of my project. Also, I realized unit testing is much harder and more important than implementing the features. It requires more energy and effort to verify my project works properly. I'll be getting used to unit testing and next time I'll implement an integration test with Github actions

Add Prettier and Linter

Seog-Jun Hong — Sat, 04 Nov 2023 21:56:13 +0000

Prettier

Prettier is one of the code formatter and I often use it to enforce a consistent style. The reason why I chose it is I'm pretty familiar with the formatter and contributed to open-source projects by installing it.

Eslint

Eslint is used to find and fix problems with JavasScript code, and my project is written in Typescript but it is still available as long as the configuration is setup.

Installation of Prettier

1. Install Prettier

npm install --save-dev prettier

2. Create a .prettierrc file and add the following

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

3. Set up Prettier to ignore certain files

node_modules

4. Add a command in your package.json

        "prettier": "npx prettier --write .",
        "prettier-check": "npx prettier . --check",

Prettier is to rewrite the files, and prettier-check is only to check the files.

Installation of Eslint

1. Install Eslint

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Create `.eslintrc` file

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ]
}

3. Create `.eslintignore` file

node_modules
dist

4. Add a command in your package.json

"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",

lint is to only lint all .ts files whereas lint-fix is to lint and fix the files.

Integrating tool with VScode

Create `Settings.json` file under `.vscode`

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Learn from process

I used to install Prettier and Eslint a couple of times for open-source projects before, but from this time I completely figured out how to use formatter and why it is required for many open-source projects. Before I used formatter for this project, I didn't find any problems or issues but after I installed it I realized there were a couple of minor issues that I dealt with. I would say these formatter is super essential to every developer and we should use it to avoid minor problems, then we can only focus on programming.

New Feature: Syntax Highlighting

Seog-Jun Hong — Wed, 01 Nov 2023 01:58:36 +0000

Describe feature

New feature is syntax highlighting, code blocks are text blocks wrapped around by strings of 3 backticks.

What did you build it?

I modified the unwrapMdxCodeBlocks function from Docusaurus and created a new function unwrapCodeBlocks to my project.

export function unwrapCodeBlocks(content: string): string {
  const regex = /```
{% endraw %}
(.*?)\n(.*?)\n
{% raw %}
```/gs;
  content.replace(regex, function (match, lang, code) {
    if (lang === "") {
      content = `<pre><code>
      ${code}
   </code></pre>`;
    } else {
      content =
        `<pre><code class="language-${lang}">` +
        `
      ${code}
      </code></pre>`;
    }

    return content;
  });
  return content;
}

Also, I added Prism to the .html to highlight code blocks automatically.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
      <link
        href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css"
        rel="stylesheet"
      />

There are lots of supported languages on Prism and the class name depends on what user put in.

function helloWord(){
    console.log("helloWord");
}

This is codeblocks.txt and javascript value is going to be class name like class="language-javascript" and when I run the app the output is as below:

Issues

The app looks fine when I run codeblocks.txt file, but there are couple of issues, one is that <p> tags are automatically added to code blocks in .html file. The other is that code blocks and other tags are not working together, so when unwrapCodeBlocks function runs it replaces other texts with <pre><code> tags. The next step is to fix these bugs.

Code Reading Docusaurus

Seog-Jun Hong — Wed, 01 Nov 2023 01:26:43 +0000

Docusaurus feature

For this week, I found a couple of nice features from Docusaurus and I thought Code blocks feature is pretty cool and I'd like to add the feature to my static website general. For example, if you write 3 backticks with code in .md file, you will see code blocks below:

function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Code Blocks source code in Docusaurus

Fist, I got into Docusaurus Repo and searched codes that I was looking for, my keyword was codeblocks and there were some files involved with codeblocks. I could find the test file as well.

I found the unwrapMdxCodeBlocks function under packages/docusaurus-utils/src/markdownUtils.ts, and it returns code blocks after unwrapping the triple backticks.

export function unwrapMdxCodeBlocks(content: string): string {
  // We only support 3/4 backticks on purpose, should be good enough
  const regexp3 =
    /(?<begin>^|\n)```
{% endraw %}
mdx-code-block\n(?<children>.*?)\n
{% raw %}
```(?<end>\n|$)/gs;
  const regexp4 =
    /(?<begin>^|\n)```
{% endraw %}
{% raw %}`mdx-code-block\n(?<children>.*?)\n`{% endraw %}
{% raw %}
```(?<end>\n|$)/gs;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const replacer = (substring: string, ...args: any[]) => {
    const groups = args.at(-1);
    return `${groups.begin}${groups.children}${groups.end}`;
  };

  return content.replaceAll(regexp3, replacer).replaceAll(regexp4, replacer);
}

I guess this function is used to unwrap code blocks and return to preprocessor.ts, and also, Docusaurus automatically picks up syntax highlighting and this is powered by Prism React Renderer. However, I didn't really figure out how to convert that content into .html file with using Prism React Renderer.

I'm trying to implement the new feature in a similar way, but not exactly the same, so my plan is going to modify unwrapMdxCodeBlocks function and apply Prism to highlight the code blocks.

2023 Hacktoberfest Recap

Seog-Jun Hong — Mon, 30 Oct 2023 02:44:12 +0000

Finally, I successfully finished Hacktoberfest, and it was a really good experience to learn how open-source projects are created and contributed. In the first week, I had lots of concerns and worried about how to contribute to open-source projects because I'm just junior-level and I thought there was nothing to fix from my end. However, I searched the issue with a couple of labels like good first issue or Hacktoberfest and I easily found simple issues like dealing with Typo in Readme.md,Installing Prettier and Linting.

I tried to fix simple issues from the project, and when I created the first PR, I felt a sense of accomplishment and I became confident in open-source projects. After that, I gradually looked for more complicated projects and harder issues that I could handle. During the Hacktoberfest I found two interesting projects, those are written in typescript that I got interested in.

One is Codu and this is a kind of web platform for coders and people can share articles and their thoughts. There are over 50 contributors on the project, and the author responds quickly and there's Discord channel for the project. I already contributed twice, and working on another issue for now. This project is not that small not that complicated, and it's a good chance to learn typescript and Next.js together.

Another is MoveX and this is serverless real-time data-sharing infrastructure for frontend developers. This project has 27 contributors and I already contributed to the project twice, and keep an eye on issue sections to solve issues. I haven't really looked into the project in detail, but I guess this project is also written in typescript and I see there are lots of things to learn from the project.

Even though Hacktoberfest is done, I really got interested into open-source projects and I'll keep contributing to those projects whenever I'm available. And this is my updated github profile, feel free to reach out to me and please follow me!

DEV Community: Seog-Jun Hong

Release - Open Source Project(w. Movex )

Intro

Issue

Solution

gameReducer.ts

MockConnectionEmitter.ts

Summary

Progress - Open Source Project(w. Codu)

Intro

Issue

Challenge

End

Planning - Open Source Project(w. Codu)

Intro

Issue

Why did you choose this?

Challenge

Open Source Contribution(w. Movex)

Intro

Issue

issue1

issue2

How to fix

issue1

issue2

Open Source Contribution(w. Codu)

Intro

Issue

Investigate

How to fix

How to release a project(w. npm)

How to release

Step 1. Create a npm account

Step 2. Login to your npm account through cmd

Step 3. Check your project is ready to release

Step 4. Publish your project

CI Workflow(with. GitHub Actions)

Step 1: Go to GitHub Actions

Step 2: New workflow

Step 3: Choose a workflow

Step 4: Create a .yml file based on your prefrence.

Unit Test

Jest

What is Jest?

Jest with Typescript

Prerequisite

Step1

Step2

Step3

Learning Opportunity

Add Prettier and Linter

Prettier

Eslint

Installation of Prettier

1. Install Prettier

2. Create a .prettierrc file and add the following

3. Set up Prettier to ignore certain files

4. Add a command in your package.json

Installation of Eslint

1. Install Eslint

2. Create .eslintrc file

3. Create .eslintignore file

4. Add a command in your package.json

Integrating tool with VScode

Create Settings.json file under .vscode

Learn from process

New Feature: Syntax Highlighting

Describe feature

What did you build it?

Issues

Code Reading Docusaurus

Docusaurus feature

Code Blocks source code in Docusaurus

2023 Hacktoberfest Recap

Step 2. Login to your npm account through `cmd`

Step 4: Create a `.yml` file based on your prefrence.

2. Create `.eslintrc` file

3. Create `.eslintignore` file

Create `Settings.json` file under `.vscode`