DEV Community: jsong89

Finally end with my release 0.4

jsong89 — Sat, 11 Dec 2021 04:25:16 +0000

Overview

Finally, I will introduce the process that was in the process of finishing Release 0.4, the last work of the open source development process :)

Target Repository

Working Repo => Repo

As a Todo-list app, when a user inputs a specific task and adds it, it is displayed together with the registration time in the form of an individual item list.

Issues

Working Issue => Issue

I set the following goals to add new features to the project while keeping details alive.
-Display current time + weather(can utilize external api)
-Based on the time automatically change the dark-light mode
-Insert more animations to good effect
-Progressive bar to check easily how many tasks have been done and need to do

Pull Request

Pull Request=> Pull-Request

This is a requested pull request for the issues listed above. Actually, I wanted to make a commit in advance and request a separate pull request to show the work status clearly by time period.. It was after this semester that I used Git Hub properly, so I accidentally completed almost the same as before and applied for a pull request after committing. From now on, I will make a pull request and commit in advance so that I can show the progress over time in a better way.

The part I did in the pull request included upgrades for the same 4 issues as the issue.

1

Get weather information from Openweather api and print it out. (It automatically tracks the current location and brings the local weather.)

2

By using the code below, the dark-light mode is automatically switched according to day and night.

if (
        new Date() <= new Date(data.sys.sunrise * 1000) ||
        new Date() >= new Date(data.sys.sunset * 1000)
      ) {
        toggleDark();
      }

3

opacity: 0.7;
  transition-duration: 0.5s

was used to additionally implement smooth motion transitions.

4

Based on the number of Todo list items stored in LocalStorage, the following progress bar has been implemented.

if (todos) {
    for (i = 0; i < todos.length; i++) {
      if (todos[i].completed) {
        checkedItem++;
      }
    }
    progressP = (checkedItem / todos.length) * 100;
  }
  progressBar.style.width = progressP + "%";
  console.log(progressBar.style.width);
  progressBar.innerHTML = progressP.toFixed(1) + "%";

So.. what I achieved in this release!

This release can be said to have been one of the really interesting courses I've taken so far. This is because I took all the parts that I had practiced once and mixed them well at once to create a result. Therefore, through this release, it seems to be the biggest achievement to review all the previously learned web development + JavaScript materials and to be able to apply them more proficiently.

As a result..

At the end of this release, the course has finally come to a practical end. However, based on what you have learned this semester, you will be able to further develop your personal projects and your own development skills. Personally, this semester has taught me very clearly the importance of time control and how to use it well. Also, the most important thing I could realize was the reason why I had to properly consider the names of various functions and classes that I had never considered when working alone, and why I had to think more about the location of various codes and functions and the design of the functions. will be This release 0.4 completely overcomes the schedule management mistakes and time control failures that were done in the previous release 0.3. I also think that we were able to successfully finish the project by perfectly accomplishing what we had planned.

Overall, this course was a continuation of surprise and freshness!!! It was a very valuable course that allowed me to look at the whole project from a broader perspective, breaking away from the simple coding and development skills I had learned before!

Release0.4 progress

jsong89 — Sun, 05 Dec 2021 21:58:04 +0000

Working Repo => Repo
Working Issue => Issue

In the progress..

Finally a week has passed!!! One week is short if it is short and long if it is long, but personally, it feels like the end of the semester so it is very frantic and has gone by so quickly. During this period, according to the plan I wrote last week, I was finally able to finish the part corresponding to #1(Display current time+weather(can utilize external api) among the issue items 1-4 at the time of writing. (#2 Based on the time automatically change the dark-light mode has already been completed).

Progress of first task (Add time and weather)

It was much more difficult than I thought to receive the time and weather information for number 1 from other api, process it appropriately and display it. First of all, even if the API is free or free for students, it was actually difficult to get an API made by another developer from the website of the API.

fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid={APIKEY}&units=metric`
  )

This part is a function that receives information from the API using the URL. However, very absurdly, because the rest of the "https://" was omitted, the request continued to generate an error saying that it violated the security policy of Google Chrome, Happens.. At first I thought the other side was the problem, and I actually rewrote the code, but the error persisted. So, I finally gave up and tried adding the string "https://" to it, and it finally worked.

Again, due to this situation, I realized that from now on, I need to be more careful and understand the code when writing the code. Because, this problem is not just this one time, it's been continuously consuming me a lot of time and energy since I decided to start programming. (Confusion in identifying the core problem => Decrease in efficiency)

Unexpected decision

In fact, it wasn't all about the weather. When fetching data from the api, I also wanted to get the location and weather of that location based on the location where the app is running, not the city I've already specified. So, I decided to add an API to get the current location, which was not planned.

navigator.geolocation.getCurrentPosition(success, error, options);

To get location information based on the connection place, I decided to use the google api above. Fortunately, location information was obtained without any problems through the api, and using that information, I created a function as follows and put the value into the weather api.

var crd = pos.coords;
  weather(crd.latitude, crd.longitude);

Now, when you run the corresponding Todo-list, you just need to allow the location information request and you will get the time + weather information based on your location!!! In the case of time, the function was implemented without any major problems using new Date().

What next

This week took more time than expected, but fortunately, seeing the finished product, I was very proud. Also, it feels very good to think that this part will be very useful for other personal projects or portfolios. Now for the rest of the week, our next task will be to add as quickly as possible items 3 and 4, dark-to-light mode calls for location and sunrise/sunset, and a progress bar to show progress.

Planning for release 0.4..

jsong89 — Sun, 28 Nov 2021 16:23:36 +0000

Overview...

Hello everyone! Finally, after a long journey, we have finally reached Release 0.4, the final journey of the OSD course! The task was to select an open source project or a school open source project that had been done in the past release tasks, and perform tasks such as adding functions or fixing bugs. So, I tried to work on the telescope at first, but in the end I decided to make a number of new features and improvements to the Todo-list app that I was working on with continuous updates!
Repository: Todo-list app

Why I decided this?

In fact, the reason I personally chose this project is very simple.. Because it is the project that has been updated and improved by investing the most time and effort while performing the OSD course on the open project, I wanted to continue to upgrade the project. Also, I wanted to spend more time on an existing one and make a definite improvement than wasting time looking for another project :)

What will be added?

Project Repo - issue
I actually thought a lot about this open project. Because, in fact, as a Todo-list, it has almost all the elements it should have, so I thought a lot about improvement or function. It seems that I have been thinking about what functions to add for almost 3 or 4 days.

So, in the end, I think there are four major improvements.

Display current time+weather(can utilize external api).
Based on the time automatically change the dark-light mode.
Insert more animations to good effect.
Progressive bar to check easily how many tasks have been done and need to do.

The reason for choosing the above improvement is first, the dark mode that I added is still inexperienced, so it adds more detail and naturalness, and secondly, most schedule APIs provide information about time and simple weather. I wanted to give them a level of perfection similar to them. Thirdly, because I thought it would be better to add a progress bar to show the progress and completion of the Todo-list more clearly.

My schedule

In fact, because I was worried and doing assignments in other subjects, I sent an issue to the owner of the open source project from the end of November and got permission to work on the repo. My plan is to complete items 1 and 2 above within this week and items 3 and 4 next week. However, there seems to be a possibility that episodes 1 and 2 will be extended until next week. Because the most difficult parts are the 1st and 2nd. However, we will do our best to keep the progress on schedule.

Wa! My API on the npm!!!

jsong89 — Sat, 27 Nov 2021 02:45:23 +0000

Github repo: https://github.com/juuuuuuun/jun-ssg
Npm package: https://www.npmjs.com/package/jun-ssg

OverView

Finally, the last lab 10!!! When I first started, I couldn't see the end of how to finish so many steps, but I can almost see the end with the semester :)

The task of this lab is to check whether the partner and each other's npm package work well after uploading the SSG API, which we have been working on as a release and lab, to npm!

What I have done

To meet the requirements of this lab, I chose npm. In addition, it was decided to set 1.0.0 as the release version based on the lab of the previous week for the release of the software. (1.0.1 as a modification of the current README)

After that, the first thing I did was add the version part using git tag.

First, in order to match the version with the git tag in package.json, version was set to 1.0.0.

After that, through the code below

git tag -a v1.0.0 -m "my version 1.0.0"

Added version tag.

Afterwards, it was confirmed that the version was added normally through git show,
We confirmed that the version was successfully added to the Github repository through

git push origin 1.0.0

Finally, after signing up for npm

npm adduser

and

npm publish --public-access

Finally, all the process I can do is over..!
Now, you can use the SSG API I made anywhere as long as there is an internet connection through the command below! :)

npm i jun-ssg

Partner's experience

My great partner, Hung, tested my npm package and was a bit confused in the readme (difference between npm and git versions), but soon recognized the difference and successfully downloaded the package and actually ran it. Fortunately on his machine, my package worked just fine and produced a successful html output. However, he updated the Readme version because he felt confused in the Readme.

My test about partner's npm package

Unfortunately, there was a problem with the partner's npm package, so testing was delayed. Hung's npm package worked very well, contrary to what I thought (sorry Hung(人´З`)).

npm i osd600-ssg

I tried to download and run it simply through the above command, and I checked that all functions were working properly. :)

However, in the README, in the case of the npm version, it would be better to distinguish more precisely the difference between the usage and the case of downloading and using it from Github.

With Closing Final Lab..

To be honest, this lab10 was easy to complete because there was no process of making something new or very difficult. However, this is not to say that I didn't learn anything or that I liked it because it was easy. With this lab10, the question I had been wondering about how many kinds of APIs were uploaded to npm and how easy it was to use was solved, and I was also able to learn the importance of version control and the meaning of each part. It was a strange but very satisfying experience for someone to test and use my project. I think it will be one of the most important parts of my career and developing my skills going forward.

Release 0.3 - Code Review

jsong89 — Sat, 20 Nov 2021 05:15:05 +0000

Release 0.3 - Internal Project

jsong89 — Sat, 20 Nov 2021 05:14:54 +0000

Release 0.3

jsong89 — Sat, 20 Nov 2021 04:03:58 +0000

Testing.. how?!

jsong89 — Sat, 20 Nov 2021 02:48:42 +0000

Github repo: Repo
Github github actions run: Action Run
Testing PR at Another Repo: Another Repo

Add CI

This week's Lab09 was to apply CI and check the compatibility of the test code using Github Action for the function. I added node.js.yaml for this task.

name: Node.js CI

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

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 15.x]

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

It is possible to remove or add a version to test the node of the desired version by modifying node-version in the relevant part. In my case, I only tested the 14.x and 16.x versions because the core features of SSG are based on Node 14. At first, I didn't understand why I had to do this, but after a while I realized the importance of compatibility. In addition, it is now possible to know which parts are in conflict before the application of PR.

Add test another Project

To meet the other requirements of Lab09, I collaborated with Hung Nguyen, a student I had worked with previously, and Mizuho Okimoto, a very cool and fun new collaborator. After adding the simple level test code in the student's project

describe("test syntaxHighlight", () => {
  const prepareForHead = () => {
    const head = parse(`<head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
      </head>`);
    return head;
  };
  const prepareForBody = () => {
    const body = parse(`<body>
          <pre>will be highlight</pre>  
      </body>`);
    return body;
  };

  test("No commands were passed", () => {
    const body = prepareForBody();
    const head = prepareForHead();
    syntaxHighlight(body, head);
    expect(head.querySelector("link")).not.toBeNull();
    expect(
      body.querySelector("pre").classList.contains("highlight")
    ).toBeTruthy();
  });
});

As a result of the CI, fortunately, it passed safely and I requested a PR.

One of the most difficult lab..

jsong89 — Mon, 15 Nov 2021 00:28:02 +0000

Github Repo: Project
Commit log: Commit-log

Start..

This lab 8 was to implement tests to apply to the static-site generator in progress in class. In fact, I've heard of this part before, so I chose JEST, a test framework I've heard of before. The framework can test only the part you want, and you can also try running it for each internal test code (npm run is not required!!!).

Processing

Below is what I did to use JEST.
First, I downloaded jest using npm.

npm i -D jest

After the download is complete, I put the following test run command in the package.json file.

"test": "jest",
"test:cover": "jest --coverage",

Lastly, for the files that need testing, I created a test folder and created a test code in ~.test.js under it.

Howevver..

It was easy up to this point, but the problem was that the linkage of each code of my static site generator was too high ( ex:) Even if I wanted to test only A, it was impossible to test only A because B and C were connected.) I've spent a lot of time trying to. But, unfortunately, it was a problem that could not be solved within a limited time because the part had to be repaired from the bottom up...

There are many problems, but one of them is this.

As a result, I decided stop working for this until now. But, I will update and fixing step by step later :)
It was really competitive and sometimes disappointed for mem but I believe these all things will be an asset for me.

Lab7 - Make it prettier!

jsong89 — Fri, 05 Nov 2021 00:10:34 +0000

Github repo: Repo

Overview

In this lab 7, the goal was to make the personal ssg project that was conducted in the class cleaner and prettier in design and grammar using various APIs.

What I decided?

The description of the lab introduced several useful tools, and among them, I decided to use Prettier and ESLint, which I have used before.

Prettier

Prettier makes it look better by checking the files of the set format in the desired range when running. To use the formatter, I added

"prettier": "prettier --write \"./**/*.{md,js}\"",
"prettier-check": "prettier --check \"./**/*.{md,js}\""

, an executable script, to package.json among various usage methods. Also, I created a .prettierrc.json file and applied my personal preference settings.

ESLint

Actually I was a little confused when I added Prettier and looked at the formatter to add ESLint. This is because the resulting output from Prettier and ESLint was almost exactly the same (in terms of formatter). Therefore, as a result of looking into the relevant part a little more, Prettier does not show the user what part has been fixed by formatting the codes with a script inside without a separate process. However, in the case of ESLint, formatting is the same, but it helps users not to repeat the mistake again by making the user recognize which part needs to be fixed and which grammatical part or design part is the problem.

Personally, I think ESLint is more helpful for developers :)

So, as in Prettier, I put the ESLint execution syntax in package.json

"eslint": "eslint --ignore-path .gitignore .",
"eslint-fix": "eslint --fix --ignore-path .gitignore ."

, and applied the customized ESLint settings .eslintrc.json.

Contributing

If there are no guidelines for that part, of course, users may be very confused about using the feature, so we created Contributing.md for the newly added part so that users can naturally familiarize themselves with the feature.

With closing..

Actually, this week's lab was very easy compared to the previous rap. In fact, I think it was the professor's consideration when considering Release 0.3. (Laughs) With this, we will wrap up the lab and move on to Release 0.3 quickly.

About lab6

jsong89 — Sat, 30 Oct 2021 07:21:54 +0000

Github repo: https://github.com/juuuuuuun/jun-ssg
Github page: https://juuuuuuun.github.io/Dinosaurs-are-cool/

Overview..

This nice api provides users with a beginner tutorial and a lot of useful features to provide users with a very sophisticated and nice static site in an easy way.

What I interested in..

Among them, I especially liked the Theme feature. When designing a website, I always wanted to change the website to dark mode in a simple way, taking into account the user's situation at any time of the day or night. But, unfortunately, I was lazy (giggle) and always left the idea in the corner of my head. Nevertheless, Docusaurus finally got me intrigued by the Theme feature and decided to add it to my SSG-api. Therefore, I created issue about this and start to work on it. I made Argument receive the application of Theme, and also made it possible to change the generated pages to dark mode by adding the css code below.

theme == "dark" ? theme = `<style>
        body {
            background-color: #292929;
        }
        h1, h2, h3, h4, h5, h6, b, strong, th, p, a, xmp, code{
            color: #fff;
        }
        </style>` : "";

With closing..

This concludes my rap this week. However, this is not the end. I will further refine and extend this feature to upgrade it to a much more sophisticated feature.

Applied design part

jsong89 — Thu, 28 Oct 2021 08:40:43 +0000

Github Repo: Project
Issue: Issue
Pull-Request: Pull-Request

Overview

This 3rd project also snooped around a lot of projects in search of parts that I could touch, and it was an endless battle with the constant mass of projects. In fact, the 3rd week project and the preparation period for the midterm exam overlapped, so I wanted to choose a project that was not too difficult. So, this time, I looked for a design part project that I had not touched before. I was able to find a project with a reasonable level of difficulty, and in this issue, I asked to make a logo. So, I immediately tried to fix this issue.

In the progress

In the case of design, I did not spend much time, but fortunately, there were basic images of the API or representative banner photos, so I immediately started creating a logo that could express the API by combining the images. Since it is a program where users can have a conversation at any time while taking a break, a steaming coffee cup meaning rest and a coding or dialogue bar meaning conversation or work are properly arranged and decorated using complementary colors.

So at the End

After, done the project I immediately just submitted and start to do other work because I didn't have enough time to do all!!! :(