DEV Community: jjung99

Getting to know about Docusaurus

jjung99 — Fri, 29 Oct 2021 14:21:08 +0000

What is docusaurus?

It is a react-based tool designed to make it easier for users to post documentation websites. In other words, basic website styles, forms, and simple document navigation are handy tools because they are parts that you do not need to take care of.

How to set it up?

The installation for this project is very simple.

First, create a folder to store this project and type the following instructions using the desired tool.

npx create-docusaurus@latest [name] [template]

Then another folder which is "name" is created, and various files are created in it. They look like the file tree below.

my-website
├-- blog
│ ├-- 2019-05-28-hola.md
│ ├-- 2019-05-29-hello-world.md
│ └-- 2020-05-30-welcome.md
├-- docs
│ ├-- doc1.md
│ ├-- doc2.md
│ ├-- doc3.md
│ └-- mdx.md
├-- src
│ ├-- css
│ │ └-- custom.css
│ └-- pages
│ ├-- styles.module.css
│ └-- index.js
├-- static
│ └-- img
├-- docusaurus.config.js
├-- package.json
├-- README.md
├-- sidebars.js
└-- yarn.lock

Next, enter the folder and run the command

npm run start

yarn run start

After confirming that the program is successfully running, you can check the program at http://localhost:3000.

feature I copied from Docusaurus and why

I liked the style part of this project the most because I thought that the style of the program I created was not much different from the document's style. So, it did not have a website advantage. In particular, it was interesting to see the change in website style with dark and bright themes.

Plan to implement a new feature from docusaurus to my SSG

If I could apply this nice feature right into my project, there would be nothing better than that, but as of now, I have to go step by step with what is possible. So as a first step, we received a parameter called theme and planned to change the background colour based on the theme. And the way I did it was as similar as other parameters.

    .option('t', {
        alias: 'theme',
        describe: 'css theme',
        type: 'string',
        required: false
    })

I added the style tag in my html generator format like below,

   <style>
    .container {
        width: 70%;
        margin: 0 auto;
    }
    ${theme && getThemeStyle(theme)}
    </style>

and I added a simple function for the theme.

function getThemeStyle(theme) {
    return theme === 'dark' 
    ? `body {background-color: black; color: white;}` : `body {background-color: white; color: black;}`;
}

By doing this, this feature wasn't completed. This step is just a prototype which I could do for now, and it needs to be improved step by step.

Next steps for the feature

In the next step, we will focus on more detailed changes depending on the background and further implement background changes using buttons in the domain.

Stepping into the real open source by first contribution

jjung99 — Fri, 22 Oct 2021 07:19:19 +0000

Through Github, I contributed to correcting typos in the open-source world for the first time!

what was the project about?

The name of the project is TDEngine. TDEngine is mostly written with C and python and it is an open-source big data platform that helps devices that need big data such as IoT, Connected Cars, Application Monitoring, etc.

what are the steps for solving the issue?

First of all, I commented on the issue page,
asking if I can be assigned this issue.

Next, Once I got the answer from the contributor, I forked it and git-cloned it. And then, I looked for the exact file I needed to fix for this issue.

Finally, I found the file and it was about a message typo as it was mentioned at the issue. It should be "press," but it was "presss" with an extra "s".

printf("presss any key to exit\n");

So, I fixed that part very quickly and fast.

what did I learn from this?

I haven't learned much about this issue in terms of programming. But obviously, this contribution informed me about the world of open source. It has helped ease fear by revealing that all issues are not as tricky as I expected but as easy as I did not expect. Also, communicating with a contributor or maintainer was a new experience for me. Although solving this issue was not a difficult task, I was amazed by the contributor's thank-you, and souvenirs offer. I was satisfied and fulfilled to think that I had helped someone and some project. Although not all issues are this easy, I believe that my contribution through this issue will serve as a good stepping stone for future open source contributions for.

My pull request: PR8300

Improving Code through Refactoring

jjung99 — Sat, 16 Oct 2021 01:59:54 +0000

For code improvements, I focused on the following points.

1. Separate files according to functional criteria.

I divided the code related to HTML generation and the code related to the command line, split it into two files, and put it in a util folder. There was one error in this part, but it was removed by adding the following codes.

command.js

module.exports = {
    getArgs
}

html.js

module.exports = {
    isKeyInObject,
    HTMLgenerator
}

index.js

const { getArgs } = require('./util/command');
const { isKeyInObject, HTMLgenerator } = require('./util/html');

2. In each divided file, unnecessary code is removed and structurally modified to make it easier to read.

In my judgment, there were many unnecessary if statements, so I removed them. I removed them because I think it would be better if it showed the error message. Through the first and second processes, I increased the readability of my project.

The part I removed in index.js

if(flags['inputFlag'] == false){
                  argv['input'] = "test/The Naval Treaty.txt"
                  argv['i'] = "test/The Naval Treaty.txt"
                  }
                  if(flags['langFlag'] == false){
                      argv['lang'] = "english"
                      argv['l'] = "english"
                      }
                  if(flags['outputFlag'] == false){
                          argv['output'] = "dist"
                          argv['o'] = "dist"
                          }

3. Add the necessary parts due to the nature of the code function.

I have not previously added a -o, i.e. result value option. Since the output option was in the -config option, I decided that it was also necessary for the command line option and made it work by modifying the code. In addition, I also updated the README.md file according to the updates.

 const output = argv.output ?? 'dist';
        if (!fs.existsSync(output)) {
            fs.mkdirSync(output);
        }
        await fs.promises.writeFile(`${output}/${filename}.html`, getHTML(filename, html, lang));

I committed to each of the above processes. And when I pushed it, there was a git error. Because among the codes I committed, there were overlapping code lines. So I made a manual correction after using fetch, pull git commands.

Adding new feature using remotes

jjung99 — Sat, 09 Oct 2021 02:51:17 +0000

I added a new feature from the new branch in the cloned repository in this lab. And I updated it to the remote repo using the git merge and push function.

The newly added functions are as follows.

Using the new command option -c and -config, receive the JSON file as an argument.
Import data corresponding to the SSG option from the JSON file.
Applying the imported data to the proper value or function (e.g., input, stylesheet etc.)

The following is an example of the code I updated. There were many if statements in the code, so the structure was more complicated than I contributed last time.

First of all, I added json file and put data in it.

 fs.readFile(TextArr.length > 1 ? './Texts/'.concat(filename, "/", TextArr[filenum][0], ".", TextArr[filenum][1]) : './Texts/'.concat(TextArr[filenum][0], ".", Text

The JSON file was created in the Test directory because the file was read from the directory "Texts".

Secondly, I added if statements when it accepts -config command option and few other code lines accordingly.

            if(options.config){
                const json = args.slice(3).join(' ').toString();
                jsonData = require(`../${json}`);
                filename = jsonData.input;
                url = jsonData.stylesheet;
            }

Finally, I pushed it into the working branch of my fork repository. And I reviewed my pull request as well.

I was confused about the concept of git remote and the clear difference between git merge and fetch. However, working on git and trying things after watching the git lecture, I know git fetch is for reading and merge is for updating the code. I can't say I am comfortable using git yet, but I definitely understood that it would be so handy once I practice it a lot.

Merge my new feature branches

jjung99 — Mon, 04 Oct 2021 16:13:27 +0000

This week I updated my SSG, adding two new features in different branches. Then, I successfully merged them into my master branch using git commands.

New Features

The first feature I updated is the optional command for generating the lang attribute on the root <html> element. I simply added one more option for command line function as below example.

    .option('l', {
            alias: 'lang',
            describe: 'lang attribute for html',
            type: 'string',
            required: false
        })

The second feature I updated is a horizontal rule in Markdown. So, --- in the markdown file should be converted to <hr> tag. I added a if-statement for --- inside of the if-statement when file type is markdown. The code block looks like this.

     else if(e === '---')  
         html += `<hr>${deli}`;

I know these new features are considerably easy, but I ran into some issues when splitting the sentences. The problem was new line comes out differently depending on what system you use, like window32, ubuntu, etc. So, I changed few lines for the delimiters, something like this.

     const deli = process.platform === 'win32' ? '\r\n' : '\n';

Instead of using

     let resArr = res.split(/n/n);

I use

     let resArr = res.split(deli);

As a result, all the extra <p> tags are gone, and the output looks good!

Git merge and branch

I have experience with this git feature. In one of my other classes, we submitted our assignments through git. My professor briefly explained how the git works and encouraged us to use a branch to avoid unrestorable updates and changes.

Making branches and working in that specific branches was the same process as I have been doing. The command is,

$ git checkout -b [branch name]

And it means making a branch that's named [branch name] and going into that branch.

However, I made an extra commit, but I wanted to remove it. Because it could give me confusion about which commit is new or what I want, and I only need one. How I solved this problem was the reset command.

If you enter:

$ git log

It shows you a history of everything that happened to the repository. You can see there are hash codes for your commit. So, I copied that and entered:

$ git reset [hash code]

Then, I could finally add my new files again, go to the master branch, and merge my branches. The command is :

$ git merge [branch name]

Even though I edited the same file, index.js, the parts that I touched in each branch were different. So, I didn't get any errors, but it can give you an error message if it is overlapped. So, be aware of that!

I am glad that I am understanding and learning about git. I know there must be more good features about git, and I can't wait to learn and use them!

My first contribution

jjung99 — Fri, 24 Sep 2021 20:52:50 +0000

This week, for the first time, I contributed to another project for code update. It was about allowing markdown file and turning it into HTML regarding their syntax.

First, I created a new issue to let the project's owner know that I updated his code. After that, I created a new branch with my issue number and did clone my partner's git repository.

Second, I took a look at the code. For me, the code was easy to read and understand. It wasn't a complicated process, but some lines came along with the new line when I sliced the line. So it took a while to realize what the problem was and solve it. Plus, I had forgotten so many javascript syntax and functions I struggled a little bit. But, other than that, his code was clear, and I just texted him when I had any confusion. What I did was pretty much using his code snap and added if-statements for the file type and feature of markdown heading syntax.

Finally, I added all the files that I made changes, committed and pushed to my new branch, issue-19. The process of git was smooth. I didn't have trouble with git throughout this lab. I think the week-2 lecture helped me understand how git works and how to use it appropriately (effective use of git)

When my pull request was merged, I felt good and achieved something from what I contributed. Throughout this lab, everything related to git wasn't a problem. I felt more confident and comfortable using git now, although I wanted to avoid it a month ago.

Getting to know about Github

jjung99 — Thu, 23 Sep 2021 00:35:42 +0000

Throughout this week, I feel like I am learning what GitHub can do and how to use it properly. I know the part that I have learned is like a tip of an iceberg, but it is a start.

This week, I tested my friend's code and gave her feedback. I have known her quite a while. I know she is really good at programming and enjoys coding. I knew she already had a partner, but since my professor said okay to review someone who has a partner, I asked her, and she said okay.

When I tested her code and reviewed it, I realized that it was readme was more critical than I thought. I needed it for testing her code and knowing what features she had since we had choices for the optional features.
One of my findings in her project was also about the readme file. It might look like a tiny mistake but, one missing space didn't let me run her entire project.

The biggest thing I learned this week was how to use feathers and the usefulness of the functions in the Github. Even though it had been more than a year since I encountered the Github, I didn't really understand much about it. I also came to realize how important readme files are when I meet other people's codes.

what I reviewed:
https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/issues/17

My First Open-Source Project With SSG

jjung99 — Sat, 18 Sep 2021 05:27:09 +0000

SSG

What is SSG? It is a acronym of Static Site Generator. It simply creates a static site that doesn't really need to be updated. So, I built a program that generates a html file that is created with a text file. Here is how it works.

How to run

git clone [git address]
redirect to a1-gss and enter "npm i"
Open any terminal and Enter "npm i" and "node . -i [filename]" You'll see the new "dist" folder and a new HTML file that has a same name as the text file.
Now, let's try the folder. Enter "node . -i [foldername]" You can also try other flags like -v, -h.

Features

Commend-line flag
Identify title and content in a text file
Identify input weather if it is a file or folder
Generate HTML file(s) with a folder where new HTML file(s) is.

Reflection

The first assignment of the open-source class is done! This task was about generating HTML file(s) from a text file(s). Unlike previous assignments, where instructions were mainly specific, I was slightly confused because I am not so used to this concept of assignment that is pretty flexible. I was lost at first in what language to choose and where to start. However, through this assignment, I spent a lot of time looking at many open sources and thinking about combining them with my code. In addition, by using a new library related to the command line, I felt that I was developing the skills I really needed in the working environment and taking a step closer to this field rather than doing a set school task.

License

MIT

My Github Repo

My introduction

jjung99 — Fri, 10 Sep 2021 16:37:01 +0000

Hello! My name is Jiyun Jung. I am in my 5th semester of CPAC(Computer programming and analysis) at Seneca College.
I am from South Korea, but I am currently living in Toronto right now. It is challenging for everyone because of covid-19, but I feel grateful to continue my study remotely. This pandemic has shown me the advantages of this career as the only tools that I would require are a computer and the internet.

I took OSD600 class because I wanted to improve my ability to use the tools of open source development. There are a lot of advantages to using open source, but what attracted me the most was the software community. I want to learn, collaborate and share my thoughts with the community.

At the end of OSD600 class, I hope to use open-source tools appropriately by learning the licensing and copyright laws regarding software. I don't know what specific project I want to work on, but I want to work on web development.
I am excited to learn how to break large chunks of code into smaller codes and debug them throughout this class so that i will be more comfortable handling open source by myself later. Plus, I know that I need to manage my time and push myself, so I am looking for a better myself when managing and organizing my schedule.

The GitHub trending repo that I researched and attracted me was short javascript code snippets. The title of "30 seconds of code" peaked my interest as soon as I saw it, and I am always interested in javascript, so that is why I chose it. When I looked into their website, I found many helpful javascript snippets that I can use, not only javascript but also react hooks, python, git, etc.
This GitHub threading repo is about helping programmers code faster and easier because they provide pieces of the shortcode that can be used for a particular purpose, such as Math, Algorithm and String, etc. As a student still learning to program, I think this would help me when I struggle with coding by learning different ways of coding.
Here is the 30 seconds of code link