Posts

OSD600 -- Release 0.4.3

Image
 In my preview blog  OSD600 -- Release 0.4.2 , I have listed six issues I am working on for my release 0.4.  I have explained what I learned and how I did for the first 3 issues, now I am going to go through the rest of the 3 issues. Issue-1449  Post header overlap (z-index) issue with hamburger menu Issue-1464   Scroll To Top button on the search page does not work in mobile version Issue-1469   Port ScrollAction from Gatsby to NextJS #1469 The  fourth PR  I have done is that  Fix Post header overlap (z-index) issue with hamburger menu. This is the simplest PR I have done so far. I used the developer tool of Chrome to check z-index of both the hamburger menu and the header. It turns out that the hamburger menu has a lower z-index than the post header.  During finding where is the z-index of each component, I learned that I can search all the code inside a big folder by right click on the folder and select "Find in Folder" in the VScode.  This feather is so powerful and I did

OSD600 -- Release 0.4.2

Image
 OSD600 -- Release 0.4.2 In my preview blog, I have listed a couple of issues from telescope  repository that I am currently working on. They are  Issue-1424  Fix font colours in GitHub Contributor component Issue-1271  Long search results need the "Scroll to Top" component Issue-1426   Scroll To Top button doesn't move to correct position Issue-1449  Post header overlap (z-index) issue with hamburger menu Issue-1464   Scroll To Top button on the search page does not work in mobile version Issue-1469   Port ScrollAction from Gatsby to NextJS #1469 The first PR  I have done is that fix colours in Github Contributor component. I found the color property inside the link was set to text.secondary(lightBlue). I changed it to primary.contrastText(white). Then I removed the hover effect and the text-decoration to underline.  so the colour of the Contributor component from to  I also removed are an unused variable and fix a linter error in the file. I fixed a tag from  href={'

OSD600 Lab9

Image
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

OSD600 -- Release 0.4.1 -- Choose Project and issues

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 To Top button doesn't move to correct position Issue

OSD600 Lab8

Image
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  = ( urlString )  =>  {    const   PATT

My PR for release 0.3 External Project

Image
 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 components and Function

The first PR to lovely Telescope

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 folder is responded to consoling the  LOG_LEVEL. require ( '../lib/confi