OSD600 -- Release 0.4.3

 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.


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 didn't know it was here before. I only know 'control + f' to find codes in a file, and I was not sure there is something I can use by finding codes for the entire project. I was so dumped for trying to find specific codes by browsing around files. Now I can easily find them using this feather. 

The fifth PR I have done is that fix Scroll To Top button on the search page does not work on mobile version. 

Actually, this is a bug I made. I did not realize there are two selectors in the Scroll Action component.

    const anchor = mobile
      ? (event.target.ownerDocument || document).querySelector('#back-to-top-anchor-mobile')
      : (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');

I only add id for back-to-top-anchor, and I need another id for back-to-top-anchor-mobile to move the scroll on the mobile version.

 To fix this bug, I made another div element to store the id of back-to-top-anchor-mobile. I was questioned by my professor that why using the extra div element in the searchPage Component. I think I have to because one element can not store two ids. Therefore, I don't think this is a good design because we need an extra div element to just store a different id. 

To prevent using an extra div, I think we can only use one .querySelector('#back-to-top-anchor') for both mobile and desktop, and then add responsive CSS in each component instead of using two querySelectors. I will ask for the project maintainer's opinion for a redesign of this code.

The sixth PR I have done is Port ScrollAction from Gatsby to NextJS

Telecope project is porting existing Gatsby to NextJs, and also introducing TypeScript in the front-end. I decided to contribute to this by port ScrollToTop component because I have done a few PRs that are related to this ScrollAction and BackToTopButton. In the beginning, I thought this ScrollToTop contains BackToTopButton and Scroll Action. However, it turns out that the task list in porting existing Gatsby to NextJs is just outdated. Joelazwar took the BackToTopButton in issue-1480, so I only need to work on ScrollAction for now. 

Telescope project now is using two front-ends, so before I contribute to this issue,  I read the new front-end document Telescope Frontend Development. Since I have no experience with NextJs and I am also not familiar with Typescript. I start it by reading the document Migrating from Gatsby. After I finish the reading, I started to create the ScrollAction.tsx and its parent folder. Then I copied all the code from Gatsby front-end to it. There were several variables has read error underline. Then I watched a useful youtube video React Typescript Tutorial. I learned some basic typescript for props, hooks, and render props. I created an interface named Props and set the varible children type to ReactNode.  Then I Passed this interface into a functional component ScrollAction. 

However, there are always errors in the window and the document said they are undefined.


Firstly, I think it must be just Eslint errors. Finally, after I found an answer said that add env: { browser: true } inside eslintrc.js will remove the undefined errors. When I checked eslintrc.js, there is an env: { browser: true } in the file already.

Then I thought it is caused by Nestjs because there are a lot google search for Window Not Defined In NextJS?  and this is one of the article Why Is Window Not Defined In NextJS? I read a few of them and it seems not the answer to my problem, but I also learned alot from those articles and might be useful if I work with NextJs again in the future. 

Then I came back to check eslintrc.js file again, I found that I was so careless. The env { browser: true } is under the comment // JavaScript for Gatsby  not under // TypeScript for Next.js . After I add the env { browser: true } under Nest.js, the problem solved. 

Summary

I have sent six PRs for my released 0.4, four of them are related to ScrollAction and BackToTopButton:

and two of them are not.
By finishing my released 0.4, I have learned a lot including features of VScode, Typescript, React, material UI, material UI/icons, NestJS, and Eslint. 

Comments

Post a Comment

Popular posts from this blog

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
Read more

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
Read more

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
Read more