Junyong's Blog for OSD600

This is the last lab for the course OSD600. In this lab, we are asked to release my 1.0 version of the command line tool I have built --  urlstatuschecker , and publish it to a registry. Since my command line tool is written in node.js, I decided to publish it to " npm " registry.  I followed the documentation of c ontributing packages to the registry from npm website. Since I already finished the first few steps in the documentation, I just simply go to the package.json to modify the name and version of my repository. I modify the version number from 0.0.1 to 1.0.0, then I add a git tag to my project using the command " git tag -a v1.0.0 -m "urlstatuschecker version 1.0.0". However, My Github workflows failed when and push it to my Github.  I had a look and found out the reason is that my snapshot still has a version of 0.0.1. After I updated my snapshot then re-tag it to 1.0.1, I typed the command "npm publish" to try to publish it. Another error s...

Release 0.4.1 -- Choose Project and issues For this release 0.4, we keep contributing to the open-source projects with larger/more pull requests. The next couple weeks would be very busy for me and I don't want to spend too much time on finding projects, and setting developer environments, so  I chose to keep contribute to  Telescope  for my last release. I have checked all the issues on the Telescope repository, and I found one I really want to work on Issue-1416  Improve Mobile Usability by adding a bottom app bar Sadly, it was picked by one of my classmates.  However, there are some front-end enhancements/bugs that I can work on.  I will start my release 0.4 by adding/fixing those  enhancements/bugs and keep finding all  related   enhancements/bugs to improve the overall front-end of the project. These are the issues I am currently working on: Issue-1424  Fix font colours in GitHub Contributor component Issue-1426   Scroll T...

OSD600 LAB8 In this lab, we were asked to add unit tests, code coverage analysis, continuous integration to my open source project  urlStatusChecker .  we were also asked to add Tests to Another project. Choose and Set Up a Testing Framework Since my command-line tool is written in javascript, I choose Jest as my testing framework. It is a famous javascript testing framework that works with projects using: Babel, Typescript, Node, React, Angular, Vue, etc. I  know that Jest contains a code coverage analysis as well, so it is the perfect option. I simply use the command " npm install --save-dev jest " to install it and start writing my unit test. Write My First Test I have never write any unit tests before. After I watched this week's video, I have a basic concept of what is unit testing, integration testing, end to end testing. I chose the  simplest   function  in my project to begin to write my first unit test.  const   goodUrl  = ( ur...

 Picking the issue I am so glad to hear that we are allowed to work on repositories that  we have already worked on in the past. That means we don't need to spend time on set it up and learn the code. I decide to work on  issue-collab  since I am so familiar with the repository. Different than any other issue I have work on, I filed the new issue-76 myself and tried to create a pull request for it. The issue I filed is that add a scroll to the top button. I am trying to add the scroll to the top button into this issue-collab repository just like the one in Telescope. The owner of Issue-collab thinks this is a good idea too. Working on the issue The first time when I tried to work on it, I just tried to study the code from Telescope and some from google and playing the code around. I was so annoying that I can't put some code together successfully in React. After watched some React video, I realized that there are two different components which are Class compone...

Picking the issue   After watching my professor's video  A Tour of the Telescope Project  and followed through Environment Setup documentation ,  finally   I am able to setup Telescope on my machine successfully, and tried to do my first PR to Telescope project. When I browsing the existing issue list, I found one Issue-1264  which mentioned in Week 7's video  Fixing a bug in Telescope  still there. I always afraid that I might fail to fix a back-end bug, so I have tried it before I  ask for the assignee.  Fix the bug that the setting of LOG_LEVEL in .env is not working properly. Even set  LOG_LEVEL=debug ,  npm start  still print as  LOG_LEVEL=info .  Working on the issue Firstly, I tested the bug by set LOG_LEVEL to debug in .env and confirmed that it only consoled the level of logs. Then I need to find which file consoled those logs. After scan over the back end files. I found logger.js inside utils folde...

OSD600 LAB7 in this lab, we were asked to add  a source code formatter, add  a linter, integrate them to my editor and  add a Git pre-commit hook  to my open source project  urlStatusChecker .  Add a Source Code Formatter Since my project is written in javascript, I chose the most famous javascript fomatter "Prettier" to automate the format of my project. I followed Prettier documentation to install it to my repository using the command " npm install --save-dev --save-exact prettier ". Then I created two empty files  .prettierrc.json  and  .prettierignore . I wrote my setting in  .prettierrc.json  as  {    "semi" :  true ,    "trailingComma" :  "all" ,    "printWidth" :  80 ,    "tabWidth" :  2 ,    "bracketSpacing" :  false }  Then I add some files that not need to format in .prettierignore file.  When I tried to test Prettier by running...

OSD 600 LAB 6 in this week's lab, I am asked to set up Telescope as develop mode on my machine and update my urlStateschecker to check posts' url from Telescope server.  Setting up telescope It's not too difficult for me to set up Telescope on my machine because I already installed Window Linux subsystem, Ubuntu, and Docker for my preview repository. I am using Window home system, I guess it's the most difficult version to set up Telescope. I glad that I suffered it already when I tried to contribute do some repository on Github.  However, I found a "bug" from Gatsby Develop. When I tried to  start the Gatsby dev serve " npm run develop ", it always  stucks at the first time. When I cancel it and rerun, it works. When I tried to google the bug, I found that it is an open issue ( https://github.com/gatsbyjs/gatsby/issues/25216 ) in Gatsby  repository since Jun 22.  Check Links in Telescope Posts I choose the easiest way which is adding  some code to i...

 I have sent 4 pull requests for Release0.2/Hacktoberfest this month, three of them are merged and one is waiting for view. To recap, I contributed to the following open-source project. the First PR to  onefetch At the beginning of hacktoberfest, I started with an easy issue for my first pull request -- first issue . This issue just reduces the size of an  ASCII logo  of  onefetch  repository. It is a pretty easy task but I still spend a few hours on it. It's because I don't know how to run a Rust project property on my machine. I learned some basic commands of Rust by doing this pull request . the Second PR to  issue-collab The preview PR I sent is reducing the size of an  ASCII logo  of  onefetch  repository which has nothing related to programming. Therefore, I decided to find an issue that at least do something programming for my second PR. I finally work on  issue-collab  which is a React web-app that does simila...

  Picking the Issue I have spent a lot of time finding an issue that I am capable to work on this time. I feel that I am so bad at self-learning. I looked at quite a few issues and tried to work on it but I just can't understand them even I googled and tested a lot. Finally, I gave up on adding a new feather for my fourth pull request. Instead, I decided to contribute to the project mattermost  which larger than my previous projects.  The issue-16167  basically just convert all the file under a component from Javascript to Typescripts. The member of the project also provides the checklist for the migration. < ] Rename the files to their associated TypeScript extensions (ie.  js  to  ts ,  jsx  to  tsx )   Update any components using those to the correct imports [ > Fix any errors generated by the TypeScript compiler. You can run  make check-types  to display any errors Working on the issue Firstly, I change...

Picking the Issue Since I never deal with bugs for my first and second pull request, I decided to find a bug issue to work for my third pull request. The funny thing is that I just noticed that one of the contributors of my second PR's project  issue-collab  listed a bug about " Page not reloading after clicking next on pagination ". The owner of the repo wants someone to share a video/gif about the issue because he not really clear what the bug exactly is. I tried and uploaded the gif of the bug.  Then the owner reproduced it as following: Click Find Issues Scroll to bottom of page and click Next page Click Find Issues again (observe it doesn't work) Click Find Issues a second time (observe it loads the first page) I asked him assigned the issue to me and he did it immediately. Practice the git commands I checked the requirement of release 0.2, and I am able to work on at least 3 different repos for my PR. That means I can work on this repo twice plus 2 more differe...

In this week's lab, we are going to refactor our code of release 0.1. Since we have learned some git history commands this week, we are going to practice the commands git rebase, git commit --amend to rewrite the history of the previews commits after the refactoring. Refactoring my release 0.1 The first change I rewrote the code about sending asynchronous requests. I was using sync-request dependency for sending the asynchronous request. It makes the request super slow since they were waiting for the preview request to finish. I removed the sync-request dependency and installed the request dependency, then I created my checkUrls() function that returns an array of promise(Promiss.all).  const   checkUrls  = ( urls ,  json ,  status )  =>  {      return   Promise . all (          urls . map (( url )  =>   sendRequest ( url ,  json ,  status ))   ...