DEV Community: MizuhoOkimoto

Small contributions may have more importance than you realize

MizuhoOkimoto — Wed, 15 Dec 2021 04:45:35 +0000

Small contributions are still meaningful on your road to becoming a good programmer (I believe!). I couldn't make my 4th Pull Request during the Hacktoberfest but I didn't want to give up, and also I was frustrated by not making it.
I tried to find an issue with medium difficulty, but it was very hard for me. When I was searching issues, I found a repo about Japanese translation.

Issue

The project is a Google Chrome extension to create guidelines on websites. I don't use any extensions, so I thought it was interesting to contribute to something new to me, and a good opportunity to see the project files to create an extension.

What I did

I added ja file under _locales folder and Japanese translations for all strings that are indexed by "message".

I tried to think from users' stand point and used proper Japanese. As you might think, it was kind of easy, but translating Donation link was tricky. In Japanese culture, "donation" or "tip" are not very common, and if we give donation/tip, we wrap money in a certain way and use an envelope to someone who provides good service.

What I learned

As I mentioned it was pretty easy, so I wanted to learn something with this contribution. Therefore, I decided to search about how to build a Google Chrome extension.
Firstly, I checked the official site. It says "extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience". It requires manifest.json, and the file needs to be specified background scripts, content scripts, an options page, UI elements and various logic files like this project did.

Inside the background script, it has to be declared onInstalled listener and it calls when the user clicks on the browser action.
Content scripts are files that run in the context of web pages. You can use the standard Document Object Model (DOM) to read the details of web pages accessed by browsers, make changes, and pass information to parent extensions.(The project used it calls inject.js)
Browser actions are buttons on the toolbar of the browser.
If you specify a popup, the popup is displayed and the content is loaded when the user clicks the icon.
Extensions can include various forms of user interfaces(UI). UI uses a popup, so create a file named popup.html and add it to the extension's directory.

Conclusion

I made this contribution as a part of my assignment and to make up for the missed Hacktoberfest. I filed an issue and asked to be assigned to it, but I was only able to make a pull request for this project.
It didn't use technical knowledge as a programmer, but it did achieve its goal in terms of contributing to an open source project and learning something new from it.

🔗Links

Project: pageliner
Issue: Issue20
PR: PR31

(Photo by Daniel Cheung on Unsplash)

Results: Contributing to a open source project

MizuhoOkimoto — Sat, 11 Dec 2021 04:49:20 +0000

As a closing for Release 0.4, which is the final task of my open source development course, let me share my results.

Issue

Issue: https://github.com/Seneca-ICTOER/IPC144/issues/64
I worked on the standardized frontmatter across all markdown pages. This open-source project is the C language course notes of my major program.

Pull Request

Pull Request: https://github.com/Seneca-ICTOER/IPC144/pull/143
I've done the following for the standardization of Frontmatter:

Added id, title, sidebar_position, and description for all markdown pages
Each property of frontmatter was unified in order
Unified format of description
Shortened description to maximum 160 characters (Reason: description becomes the <meta name="description" content="..."/> inside the <head>tag, and Google generally truncates snippets to ~155-160 characters)
Added "Standardize frontmatter" to the CONTRIBUTING.md file

What I learned

Unfortunately, my PR isn't merged yet. Also, the issue I filed a few days ago wasn't reviewed, so I'm not sure if I can make another PR. However, I would like to reach out to my professor about my PR and ask what more I can do or improve.
I can't honestly say that I was able to get involved in an open source project technically in this release 0.4. However, I spent time checking everywhere on the repository to see if the Issue I was working on might affect other issues and PRs, and checking most of the files in the project.
Other than that, I often read the Docusaurus documentation for this project and saw and learned how other students are actively involved in the project. Especially one of my classmates, Kevan, who contributes to this project significantly, so communicating with him made my PR easier.

Conclusion

The 14-week open source development course itself is over today.
However, I won't stop being involved in the open source community. Unlike other courses this was the most interesting course of my 5 semesters so far, as the entire class did not tackle the same assignments or need to take exams. On the other hand, I was a little depressed seeing the efforts of other students. I realized my problem-solving and programming-coding will need some extra work.

In Release 0.4 I made a plan; check the processes and then review all of my results. Now, I would like to make a new plan here on how I will be involved in the open source community in the future.

Deepen my knowledge of JavaScript and improve my SSG
Be Involved in testing
Learn a new programming language and start contributing with a small issue
Don't hesitate to communicate with other developers

When I started learning git, I was afraid I could break the repositories with my git commands, but I'm comfortable using git now. I will also continue learning git and hopefully become a git master!

Progress: my contribution to the open source project

MizuhoOkimoto — Thu, 09 Dec 2021 21:43:09 +0000

I planned how to contribute to an open source project last week and wrote about it in my previous blog. In the blog, I mentioned I would write a progress blog on Monday, so here I am!

Issue

For the last assignment(we call Release) of my open source course, I've decided to contribute to an open source project which is my college's C language course notes. The issue I'm working on is about "Standardize frontmatter across all pages". When we contributed to the project in our last Release, we added slug as one of the properties for frontmatter. However, it made links broken since internal links use page names vs. slugs, so my professor told me to review some of the PRs if they included it.

Made a PR

PR: https://github.com/Seneca-ICTOER/IPC144/pull/143
I've done the following for the standardization of Frontmatter:

Added id, title, sidebar_position, and description for all markdown pages
Each property of frontmatter was unified in order
Unified format of description
Shortened description to maximum 160 characters (Reason: description becomes the <meta name="description" content="..."/> inside the <head>tag, and Google generally truncates snippets to ~155-160 characters)
Added "Standardize frontmatter" to the CONTRIBUTING.md file

Getting reviews and change requests

One of my classmates reviewed my changes, and he asked me to reinsert slug in the root of the file, and also add a step in the Workflow in Contributing.md. Also, one of the repo's owners requested to change some descriptions in the frontmatter. When I worked on Standardizing frontmatter, the description was hard since I'm familiar with the course notes, but I wasn't very good at C language.

Next step

The goal for this Release is for my PR to get merged by this Friday. However, I didn't change any codes in this contribution. I still need to make more PRs for my previous Releases. It would be a lot of things to do in my final exams week. I will try my best and put lots of effort into all of these Releases.

Planning: How to contribute to an open source project

MizuhoOkimoto — Sat, 04 Dec 2021 02:27:41 +0000

For the last assignment(we call Release) of my open source course, I decided to contribute to an open source project which is my college's C language course notes. I had 3 Releases so far, and this 4th Release requires something larger and more impactful than anything I have done previously.
Repository: IPC144

Why did I choose this project?

I contributed to the project in my last Release, and also I'm familiar with the course notes as well. Moreover, when I worked on my last issue and pull request, I tried to unify the format with other people's PRs, but people modified in different ways, so I felt unsure.

Issue

The issue I will work on is about "Standardize frontmatter across all pages".

How I will work on it

I have never done standardizing for a project except my own projects, so it's challenging for me, but I will address this issue based on the following points:

Read and check all pages
Standardize frontmatter
Review PRs and request changes based on the standardization
Run Prettier and unify the format
Try to find and modify to standardize pages
Review

My schedule

I started working on it late, but this Release's due date is next Friday(Dec 10th) so that I only have 7 days. Therefore, my plan is make as much as progress as I can until Monday. I will review my progress and write about it here, and make a PR on Tuesday.
I will try to complete this Release, study, go to work, study... no sleep!💪

(Photo by Jon Tyson on Unsplash)

Releasing my npm package with a Tag

MizuhoOkimoto — Sat, 27 Nov 2021 02:35:58 +0000

I released a npm package in public for my Static Site Generator(SSG)! I was very surprised and impressed that I could do that like other packages that I used before💮

Package managers

npm is the package manager for the Node JavaScript platform. My SSG uses JavaScript, so I decided to use it to release my package.

How did I create a package?

First of all, I opened Windows PowerShell and went to my SSG folder. Second, I typed npm login. It allowed me to enter Username, Password, Email. After I verified my email address, I could get this page:

Tag my Release

Tags can be used as specific points in history in open source projects to help users in the repository easily navigate to important parts of the code history.
I added v0.9.0. as a practice, and then created a v1.0.0 release with git tag -a v1.0.0 -m "my version 1.0.0" and checked all tags I added with the git tag command. My original release number was v0.1.0, so I changed package.json, yarg, README files to modify my version. After I added those files, commit, and push, I also pushed tags to main with the git push --follow-tags command.

Published my public package to the npm registry

Based on the npm document, the way to publish a package is using npm publish command. When I run it, I had the error below:

PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npm publish
npm notice
npm notice package: node-ssg@1.0.0
npm notice === Tarball Contents ===
npm notice 701B   __mocks__/fs.js
 ...
npm notice 842B   yargsConfig.js
npm notice === Tarball Details ===
npm notice name:          node-ssg
npm notice version:       1.0.0
 ...
npm notice total files:   25
npm notice
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/node-ssg - Package name too similar to existing package nodessg; try renaming your package to '@mizuho/node-ssg' and publishing with 'npm publish --access=public' instead

I firstly thought someone used the same name of the package, but it was just the name I didn't change inside the package.json file when I did npm init.
I changed name from node-ssg to pajama-ssg, and successfully released!

User Testing

My partner Gustavo tried to install and run my program, but it failed. The error message said it was caused by prettier. Since I moved prettier inside the devDependencies instead of dependencies in my package.json file. I corrected the location and pushed to git, and I updated the npm version number with the npm version 1.0.1 command. Then I published it again.
He could run my program and I also could run his program.

However, I couldn't see any files in my directory where I installed Gustavo's package, the node_module folder was installed globally(under my C drive). Another friend, Kevan helped me and suggested to do npm install inside the directory. It created a package.json and I did npm i <packagename> again, then I finally had the files inside the directory🎉

Modified README and CONTRIBUTING file

I modified those files and their contents to match by installing the npm package. The installation and usage became simpler. When I modified the README file, I didn't pay attention enough and realized that I had to change the CONTRIBUTING file as well. Because of my small changes, my release number grew to v1.0.4. I learned that I needed to think more about the affected area😅

Conclusion

I didn't expect that I could release a npm package in public. Through this course, I'm having good opportunities to communicate with other programmers(students, people online, professors) and experiences to publish in public such as this blog, a npm package, my open source project, and PRs. I'm a shy person so all of these social aspects are new to me, but I feel I'm getting more comfortable with all of it(I hope!)🌟

Links

My npm package: pajama-ssg
All you need is npm i pajama-ssg, and run npx pajama-ssg -i <file name>.
File name is your text or markdown files that you would like to convert to html. Please store a file(s) inside the project folder.

My GitHub repo | Gustavo's npm package | Kevan's npm package
My friends' SSGs are great! Check them out👀✨

Code Reviews

MizuhoOkimoto — Sat, 20 Nov 2021 07:13:18 +0000

After I contributed to an internal project, I experienced reviewing 2 pull requests and they were in the repository I contributed to. This project is for an online note for C language in my college, and uses Docusaurus.
🔗Repository: IPC144

When I contributed to the project, I audited and fixed the markdown page and was familiar with each task, so I reviewed the Pull Requests of other students who did it.

Review1.

🔗Issue: https://github.com/Seneca-ICTOER/IPC144/pull/95
I reviewed Reza9472's work, where he worked on not only the markdown file but also modified css and package.json file. He did a good job but I found some extra spaces similar to how I did it, so I made a comment about it.

Review2.

🔗Issue: https://github.com/Seneca-ICTOER/IPC144/pull/84
I read the markdown file line by line and found an extra comment, so I asked rclee91 to delete it. I wondered if we needed to delete extra indentations in the code blocks because I thought it wasn't user-friendly.

I checked C language code format, and the generator fixed the extra indentations, also some other students deleted the indentations in their PR. However, the original course note (IPC144)has the same indentations so I just suggested him to change it.
rclee91 said the indentations are the same for all of the code example in the md file. The owners of the repo didn't say anything, so I was driven by the desire to have all the formatting the same, but decided to overlook it.

Conclusion

I experienced getting reviews and also reviewing through this assignment. By comparing what I did with what other people did along the same task, it was helpful to be able to know what I was missing.

Audit and Fix a Markdown Page

MizuhoOkimoto — Sat, 20 Nov 2021 05:05:12 +0000

My recent contribution to an open source project is the improvement of the online course notes for the C language course (IPC144) in my college. The online note uses Docusaurus, and I had the opportunity to study Docusaurus a while back, so this contribution deepened my knowledge.

Issue

The issue I worked on was the Audit and Fix a Markdown Page. Each chapter of that online note consists of its own md file. My professor file an issue with a list of all of the md files and 19 tasks for improving each page. I selected the "output-functions" page in it, filed a new issue, and worked on the tasks.

Checking display

I set everything up locally and checked for problems with the display. Such as: typo, markdown, the Light and Dark mode, and the desktop and mobile.

Using tools for improving the quality of web pages

As my professor mentioned, I tried running the page through Lighthouse and Web Hint.
I had never used them, but it was easy to check with those tools.
Lighthouse checked if the page is optimized for each item, and showed me there is no alt tag for images. After I added alt, performance, accessibility, best practices, SEO scores went up.

When I checked the page using Web Hint, I got 55 hints, but nothing about the page I was working on.

Fixing Frontmatter for the page

Markdown documents can use the Markdown FrontMatter metadata fields, enclosed by a line --- on either side.(Docusaurus official page)
I added the FrontMatter below:

---
sidebar_position: 5
title: Output Functions
id: output-functions
slug: modularity/output-functions
desctiption: This chapter on output functions is about invoking standard library procedures to stream data to users
---

Reviewed from other students

I made a PR, other students reviewed it and gave me some requests.
They were:

Removing extra space I missed in the md file
Adding a hyperlink to a related page
Adding Description to the page(as a Frontmatter)
Adding backticks to function names

Conclusion

I thought there were a lot of tasks, but it wasn't too difficult. It was good to be able to contribute to the project that actually used Docusaurus and to experience the improvement of the page using Lighthouse and Web Hint. This time, my professor listed the tasks and provided them to us, which made the contribution easier, and I would like to use the task when working on external issues myself in the future.

🔗Links

IPC144 Project repo | Issue | Pull Request

(Photo by Glenn Carstens-Peters on Unsplash)

Adding Continuous Integration: GitHub Actions Workflow

MizuhoOkimoto — Sat, 20 Nov 2021 03:14:43 +0000

During the Hactoberfest, I had a problem with GitHub Actions Workflow. This week I learned about it, so this is my introduction.

✅Why do I need CI (Continuous Integration)?

Testing is very important because many people are involved in an open source project. I used Jest last week to test my Static Site Generator(SSG), but I might forget testing when I push or merge pull requests. CI is a way to automatically build and run tests (integrate everything into our project) whenever something is pushed to the repository or a new pull request is made. Therefore, adding CI to my project is very useful for managing and making it work all the time.

✅How did I implement CI?

I used GitHub Action Workflow for it. You can use actions to automate your workflow in response to events in your GitHub repository. I chose to build Node.js from the Actions tab in my SSG repository. The following yaml file (config file) was automatically generated.

name: Node.js CI
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
  strategy:
    matrix:
      node-version: [10.x, 12.x, 14.x, 16.x]
      # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm test

on: specify when this workflow is triggered.
jobs: run on ubuntu (can add/change mac or Windows' OS)
matrix: for all of the different versions of node that it's going to run against.
steps: compile code and test code. I also can add any steps that I have to do or if I need to install other dependencies.

✅How did I test my CI?

I added a new test code to my project, ran Jest to make sure it passed, then pushed and created a PR. Then, on GitHub, the pull request triggered the CI workflow and it looks like the image below.

For practice, I went back to the test code again to see how this workflow was interrupted. I rewrote the code so that the test failed, and I pushed to my repo from the same test branch. As I expected, CI failed this time as shown below.

✅Adding tests to another Project

I added a test code to my partner Jun's project and sent a pull request.
Jun used a mock file that I couldn't implement last week. It was difficult to think and add some test code to his project, but it was a very good experience and I also would like to use his idea/code for my SSG project. Jun added almost the same yaml file as I did, but since he deployed his project with Netlify, Netlify's CI was also run.

✅Conclusion

I learned about unit testing and e2e testing last week and found testing was very difficult, but GitHub Actions CI Workflow was very easy to set up by following my professor's lecture.
I will continue to study testing. This time I used Node.js for my JavaScript project, but I hope I can practice in different languages and different construction environments.

🔗Links

My SSG repo | My PR to test my CI | Jun's SSG repo | My PR on Jun's repo

Testing my Static Site Generator with Jest

MizuhoOkimoto — Sat, 13 Nov 2021 04:50:56 +0000

Up until now, I've focused on adding new features and code to my Static Site Generator(SSG), but this time I've implemented a test. Testing helps you manage and evolve your software.
I've learned about Jasmine, Karma, and Mocha in the past, but my SSG uses simple JavaScript so I decided to do a unit test by using Jest.

Installation

I already installed npm, so I used npm i jest --save-dev to install Jest.

I also added the following npm scripts to run a test on the command line.

"scripts": {
    "test": "jest --",
    "test:watch": "jest --watch --",
    "coverage": "jest --collectCoverage --"
}

Jest test

First, I created a test file and wrote about when the style path is not specified.

describe("Argument match tests", () => {
  test("no specified style", () => {
    expect(
      tempGenerator("", "language", "title", "titleName", "text")
    ).argv_s = `<link rel="stylesheet" type="text/css" href="please_add_your_css_path" />`;
  });

describe can create a block that groups some related tests, so I had two blocks: "Argument match tests" and "Function argument tests", for the file containing the HTML template.
Jest requires using test which is the actual test block, so I wrote what to expect to get as an output inside of it.
I added other tests such as: no arguments, missing one argument, argument is a null, and so on.
When I worked on missing one argument my test didn't pass, and I had to change my template JavaScript file and add the code let body = text ?${text}: "";.

Once all the tests passed, I got this screen.

PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npm test
> node-ssg@1.0.0 test
> jest --
 PASS  ./tempGenerator.test.js
  Argument match tests
    √ no specified style (2 ms)
    √ no specified laungage (1 ms)
    √ no specified title
    √ no specified text (1 ms)
  Function argument tests
    √ input all arguments (1 ms)
    √ missing style
    ...
    √ missing all arguments
    √ null arguments
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Time:        1.046 s
Ran all test suites.

Coverage

I tried Coverage, which I added to the package.json script to make sure it contained as many code path test cases as possible.(npm run coverage) By running Coverage, you can see how much of the implementation is running during the test run, and more importantly, what parts are missing. I had the following result:

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |      100 |     100 |     100 |
 tempGenerator.js |     100 |      100 |     100 |     100 |
-----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Snapshots:   0 total
Time:        0.934 s, estimated 1 s
Ran all test suites.

Got stuck 📌

I wanted to try to test if my file system passes the test, so I attempted to implement mock and also _mock_ folder and fs.js file inside. However, I had this error and it didn't work.

  ● Test suite failed to run
    TypeError: Cannot read properties of undefined (reading 'forEach')
      54 |
      55 | // Read files/lines
    > 56 | argv.i.forEach((input) => {
         |        ^
      57 |   if (!fs.existsSync(input)) {
      58 |     console.error("Input is not a file or directory!");
      59 |     return;

I searched around but I couldn't find any solutions, I just found npm mock-fs is one of the options to use mock easier. I hope I can figure it out.

Conclusion

I have done testing for React components before, but I received feedback that testing wasn't enough. I learned testing is very important but difficult depending on the situation. I only added small unit testing this time, so I would like to try integration testing too. I'm going to be a Quality Assurance Analyst as a Co-op from January, so I will definitely continue to work on this👩‍💻

Use Static Analysis tools to my Static Site Generator

MizuhoOkimoto — Sat, 06 Nov 2021 03:16:58 +0000

Static analysis tools help maintain the quality of your source code by fixing formatting issues, finding suspicious coding structures, and alerting you to common errors.
I added Prettier and ESLint to my Static Site Generator(SSG) using JavaScript, so I would like to show how I implemented them step by step.

1️⃣Add a Source Code Formatter: Prettier

Prettier is one of the tools for applying a consistent code style throughout your code base.
First of all, I set it up as follows using npm.
npm install --save-dev --save-exact prettier
Second, I created a prettierignore file directly under the project and added the following files that do not need to be formatted.

# Ignore artifacts:
build
coverage
node_modules

I also created prettierrc.json file and added a Basic Configuration.

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

Third, I added the following script inside my package.json so that Prettier can be executed in one step from the command line.
"prettier": "npx prettier --write ."
Finally, I ran Prettier with npm run prettier, and it fixed my format based on the configurations above.

> node-ssg@1.0.0 prettier
> npx prettier --write .
dist\test.html 137ms
doc\test.md 84ms
index.html 471ms
package-lock.json 172ms
package.json 17ms
pajama-ssg.js 271ms
README.md 101ms
tempGenerator.js 11ms
yargsConfig.js 17ms

After I checked if my program still worked, and it was perfect! Yay!😇

2️⃣Add a Linter: ESList

ESLint aims to improve code consistency and avoid bugs. Open Source projects can involve multiple people in a project so it's a very useful tool.
Again, I started with the installation with npm.
npm install eslint --save-dev
Next, I set the configuration file using the --init flag(npx eslint --init).

PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npx eslint --init
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
Successfully created .eslintrc.js file in C:\Users\Mizuho\Desktop\OSD600\pajama-ssg

From --init flag, it created .eslintrc.js file for me with the code below.

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 13,
  },
  rules: {
  },
};

I added this "semi": ["error", "always"] inside the rules to enforce consistent use of semicolons.

Like Prettier, by creating .eslintignore file in the root directory, I instructed ESLint to ignore certain files and directories.

# Ignore the build directories for next
build
coverage
package.json
package-lock
node_modules

And I added the following to the package.json file to easily run ESLint from the command line.

"eslint": "eslint --config .eslintrc.js",
"lint": "npm run eslint",
"eslint-fix": "eslint --config .eslintrc.js --fix"

I used the above options based on the official site, and a lecture by my professor.
--f: "This option instructs ESLint to try to fix as many issues as possible. The fixes are made to the actual files themselves and only the remaining unfixed issues are output."
-c, --config: "This option allows you to specify an additional configuration file for ESLint (see Configuring ESLint for more)." There are many other options on the official site: https://eslint.org/docs/user-guide/command-line-interface

I ran ESLint npx eslint ., and I got many errors...

   19:11  error  'removeDir' is not defined  no-undef
   49:5   error  'process' is not defined    no-undef
   64:5   error  'files' is not defined      no-undef
   89:17  error  'process' is not defined    no-undef
   97:13  error  'lines' is already defined  no-redeclare
   98:13  error  'title' is already defined  no-redeclare
    ...
   2:18  error  'tempGenerate' is not defined  no-undef

I didn't notice that I already declared 'lines' and 'title', so I deleted var for the error.
I added /* global process, files process */ on top of the main JavaScript file. However, 'removeDir' became an error and my program had an error and couldn't run.
I've searched everywhere to fix the problem and I decided to add this instead /* eslint-disable no-undef */, and it ran without errors.

3️⃣Editor Integration: adding .vscode folder

I created a .vscode folder that shares settings, task configurations, and debug configurations and integrates tools with the Visual Studio Code. I stored extensions.json and settings.json in it. In extensions.json, I added extensions inside the Recommendation and added user and workspace settings to settings.json.(my .vscode folderhttps://github.com/MizuhoOkimoto/pajama-ssg/tree/main/.vscode)

4️⃣Add a CINTRIBUTING.md and Update README.md

For future contributors, I added a CONTRIBUTING.md file and updated README.md file as well.

5️⃣Squash, Commit, Merge, Push

I checked if my project still worked and pushed it. However, I was working on this project after I finished 3 jobs and it was very late. My brain didn't work properly and I made mistakes again when I rebase and I even lost my changes 🙉 I have decided to watch some lectures again and check the documents as well. Phew... I had to make other commits and squash, but I could implement tools and configurations!😇

✅Conclusion

I installed Prettier and ESLint as a extension on my Visual Studio Code, but I didn't know how they work or how to use/share them with other people. I'm really enjoying to keep my project updated. I would like to add huskey(Git Pre-Commit Hook) too, at some point!

Links🔗
Pajama-ssg | Prettier | ESLint
Configuring ESLint | VSC:User and Workspace Settings

(Photo by Dan-Cristian Pădureț on Unsplash)

Hacktoberfest 2021! My third contribution

MizuhoOkimoto — Mon, 01 Nov 2021 02:47:30 +0000

It's the final week of October, and I finally found an issue that I could work on. I would like to introduce this project and what I have learned from it, as it's a little larger than my two previous organizations that I have contributed to.

Project

This project is called Atomic-React which is a React library that implements UI components according to Atomic design specifications. Developers are able to have features such as Flexible, tree-shakable components, Full documentation, Auto-import, and many others.

Issue

The issue (#987) pointed out was about displaying scroll tabs, where when you clicked on a tab, the line at the top disappeared.
One of the repository's owners specified how to make the change, so it wasn't difficult to fix except finding the particular file.

Implementation

I added padding top 1px to the SCSS below.

&--scrolling {
    .a-tab-group__tab-wrapper {
      white-space: nowrap;
      overflow: hidden;
      padding: 1px 1px;
      display: flex;
      flex-wrap: nowrap;
    }

The padding fixed the issue:

I've never used SCSS, so I was a little confused about how to use &(ampersand).　My understanding is SCSS(Sassy Cascading Style Sheets) is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SCSS is like CSS with better formatting. SASS's & (ampersand) is basically a function that allows you to "reference the parent selector". Parent selector reference is a function that describes in CSS after compilation so that when written using the "nested function", the "selector one level above" is copied as it is.

Make a Pull Request

This time, I was careful about branch/commit/push. Their link to the contribution was broken, but I was able to find how people made commit messages.
However, I had a question about the contents of the issue.
It said "Additional context: After the change is made, the GitHub action workflow Update Snapshots needs run on the published branch, and that should update the visual regression test assets."

I couldn't understand the meaning so I asked the person who filed the issue. The person kindly explained to me how to check:

"So when you add the PR the tests will run and should fail because the snapshot images will be different. Those snapshot images are updated via GitHub action. I took a screenshot from over in the Actions tab. On the left side, click "Update Snapshots" and then on the right side choose your branch. When the workflow runs, it'll update the snapshots and commit the change to the branch you selected."

I still wasn't sure, but as the person said I made a PR, and checked Action, and updated the snapshot.

I searched about workflow, but do not fully understand it yet, so please share your knowledge about it with me. After I ask my professor, I will update here.

Conclusion

This time, both the filing issue and making a PR had some rules to maintain for the project. It was interesting, but I also thought I needed to expand my knowledge. I was surprised that people in this open-source community were nice. Even though Hactoberfest is almost over, but contribution never ends. I'm still looking for one more issue to complete my goal(4PRs) this month. If you have any recommendations to find repos or know something helpful about it (especially JavaScript), please feel free to comment below💌

(Photo by Tony Hand on Unsplash)

Open Source: Copy a Cool Feature from Docusaurus

MizuhoOkimoto — Sat, 30 Oct 2021 02:52:18 +0000

Has anyone used Docusaurus before? I hadn't until this week!🙉
I would like to introduce what Docusaurus is, what I learned and implemented from it, and next steps for the future.

What is Docusaurus?

Docusaurus is a Open Source project built by Facebook(Meta?) which provides a great Static Site Generator(SSG). According to the official website, Docusaurus is a "tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details."
Those teams would create the document website which is built on the same SSG, so each team does not have to build styles and navigation with different specifications, and makes it consistent and easy to maintain. Docusaurus also has a lot of features, so it's very flexible.

Tried Docusaurus tutorials and features!

It has a walk-through style tutorial that lets you build a website in less than 5 minutes(I took 10 mins😂). Using a classic template, I created a React page easily. The main features are:

Create a Document
Create a Blog Post
Markdown Features
Configurable Sidebar
Deploy your site

In addition, it has more features such as:

Theme
Search Engine Optimization (SEO), including meta tags in the HTML head
Static Assets for images, stylesheets, favicons etc.
Plugins
Versioning

The list goes on and on, so I will post a link here again.

Plan my Feature and File Issues

I planned what I would implement to my SSG by copying one of their features. I decided to work on Full Markdown support, changing the theme, static assets for stylesheets, and filed those issues on my repo.

Implementation

I searched "node markdown to html" and I found markdown-it. It said "Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed(GitHub repo)". It was perfect for mine, so I installed it and implemented their "classic" way on my main js file.

var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
...
// when input .md file
lines.forEach((line) => {
    var result = md.render(line);
    text += result;
    template = tempGenerate(argv.s, argv.l, title, titleName, text);
})

Comparing to the previous code, I was able to reduce some code below.

if(line.includes("*")) {
  line = Array.from(new Set(line.split('*'))).toString();
   let get = line.replace(",", ' ')
     text += `\n<i>${get}</i>`;
  } else if(line.includes("#")) {
      line = Array.from(new Set(line.split('#'))).toString();
      let get = line.replace(",", ' ')
      text += `\n<b>${get}</b>`;
  } else if(line.includes("---")) {
      let get = line.replace("---", '<hr>');
      text += `\n${get}`;
     }
  else {
    text += `\n<p>${line}</p>`;
  }

npm has what I'm looking for and it's very interesting. This time it was markdown support, but I thought there might be something else I could use for my SSG.

Deployment

When I deployed my Docusaurus sample page, even though I was following this deployment guide, I got the 404 page. The reasons why it didn't work were:

I had < > when I set up GIT_USER, like this: cmd /C "set "GIT_USER=<MizuhoOkimoto>" && yarn deploy". The correct command was cmd /C "set "GIT_USER=MizuhoOkimoto" && yarn deploy"
When I run the above command, it created gh-pages branch automatically like below, and I needed to set up the source from that branch instead of the main branch.

Deploy command invoked...
main
organizationName: MizuhoOkimoto
projectName: Docusaurus_sample
deploymentBranch: gh-pages
Remote branch: https://MizuhoOkimoto@github.com/MizuhoOkimoto/Docusaurus_sample.git
https://github.com/MizuhoOkimoto/Docusaurus_sample.git
e088072c3fdc9f7fec6d107c52acdbe7e66fc659
...
Website is live at "https://MizuhoOkimoto.github.io/Docusaurus_sample/".
Done in 70.97s.

This is the Pages setting on my repo:
I appreciate your help again, Anatoliy🌟

Conclusion

I planned implementing another 2 features as well which are adding themes and SEO within 2 weeks, but they were tougher than I thought. For the SEO, I'm working on changing my template(tempGenerator.js). However, I have no clue for the theme since I was going to copy from Docusaurus, but that was for React, so I will try to implement it in a different way.
If you have any good ideas, please message me or you're welcome to Pull Request! 🙋

👀Links👀

My pajama-ssg repo: https://github.com/MizuhoOkimoto/pajama-ssg
Issue: Issue-21
Commit: a4433b4
My Docusaurus sample page: https://mizuhookimoto.github.io/Docusaurus_sample/
My Docusaurus repo: https://github.com/MizuhoOkimoto/Docusaurus_sample

(Photo by Daniel Cheung on Unsplash)