Skip to content

How to update content

Sly edited this page Oct 9, 2023 · 10 revisions

How to update content

If you are going through the curriculum and you found a typo or a bug, please help us fix the content!

By doing so, you would be helping us improve the content for the next generation of students.

To create new issues or PR go to: https://github.com/garageScript/c0d3-app

Steps

Before we create "New pull request" we need to create "New issue."

image1

First create an issue describing the bug. Make sure to notify engineering team to label the issue once you have submitted an issue. (You will not be able to label issues on your own unless you are on the engineering team).

This is good enough! Feel free to stop here if you like. At any project you work on or use in the future, you would be adding a lot of value just by creating an issue and documenting a bug. Depending on the severity, the bug or issue will be fixed by the engineers or other open source contributors. Please don't take it personally if they decide to close your issue without doing anything. There is always a good reason for that.

If you want to continue and help fix some of the curriculum issues, continue below!

Contribution

This section will teach you how to contribute! If you get stuck and don't understand any of these steps, please ask on discord. Your questions will help us improve this doc for the future students.

Prerequisite

Before you start, please make sure you have fully completed JS0 with all challenges approved. JS0 touches on the git basics that this guide will not cover.

  • Make sure you have yarn and NodeJS installed.

Click "New issue"

image2

Describe the issue and give appropriate title. Then click "Submit new issue" button.

Forking and cloning the repository

  1. Click on the button in the top right corner with the text Fork to create a copy of this repository.

image3

  1. After forking you will be redirected to your fork repository page, click on the "Code" green button and copy the ssh or https url.

image4

  1. Navigate to your terminal and clone git clone *url-goes-here*
  2. cd c0d3-app After cloning, you will want to change the current directory to the c0d3-app folder that was created (Clone to your desktop).
  3. If you cannot see the c0d3-app folder, type the directory manually in your file explorer. You can also type dir or ls in command prompt to check the folder has been created.

image5

Now you have the code base! Next, you want to find the file you need to make changes/ update. Search for a string in the content that you are reading.

Making changes/updates

This is a specific example for this case. You may search different keywords depending on the issue or bug that needs to be addressed.

Search: "Type a few characters"

image6

We will make a change in this JS3 content preflight.mdx file.

An MDX file is a dictionary file used by MDict, a multi-language dictionary application for Windows and mobile platforms. Because MDX files are plain text files, you can open them in any text editor, such as Microsoft Notepad (Windows) or Apple TextEdit (Mac). However, if you plan to edit an MDX file, you should open it in a source code editor, such as Microsoft Visual Studio Code (cross-platform) or the code editor of your choice.

  • Open the file and make changes

image7

  • Type git status in command prompt

image8

  • Type git diff in command prompt

image9

  • Type git add . This will add all the changes in the folder. As a SWE in a company, you would normally not use . because it might introduce a lot of unwanted changes. In this case, we typed git add content/lessons/js3 to specify what we want to add.

  • Type git commit --m '*type short message to describe the change*' - if you just type git commit without -m 'message' then you may see this screen.

image10

  • If you see the above screen, type your message to describe the change and click 'esc' then type :x to exit out from vim and go to the terminal.

image11

  • It should bring you to a screen like below once you escape out the previous screen.

image12

  • Type git status to check the changes we have made

image13

  • Type git push, you will be asked to authenticate (sign in) to GitHub. Once you do, you will see below screen.

image14

  • We are NOT done yet! We pushed the changes/updates to our own fork. Now we need to send a request to update the upstream master branch (original) repo. Go back to GitHub repository and click "New pull request"

image15

  • You will be brought to below screen

image16

  • Change the compare repository to your repository copy

image17

  • And boom! We have made our official request to the upstream master branch (original copy)!

image18

  • Wait! We are not quite done yet! Go back to your ISSUE you requested and post your pull request link

image19

image20

Additional learning material

  • CI (aka Continuous Integration): This runs the entire test that we have to make sure your change didn't break anything. Sometimes when engineers write code, they may accidentally break existing functionality. Tests are there to make sure that doesn't happen.

  • Vercel Deployment: This is called CD (Continuous Deployment). Your change is deployed into another server. You can view details and click on the generated link. This allows us to look at and play around with the changes on a separate site.

  • Code Cov: This is called Code Coverage. When engineers write code, they must also write tests. Sometimes engineers get lazy and write 100 lines of code and only write 1 test. Code coverage tool runs the tests and lets you know what % of your code is covered. We require 100% coverage. Meaning: 100% code coverage means there are at least 2 tests for the sampleFunction: One to make sure it returns 5 and the other to make sure it returns 10. image21

The last one is a CD deployment for our UI library. You can click the details and then on the link to see our UI library.

image22

image23

Thank you for contribution!