Colorful world

 This week we start to practice how to test the project with a testing framework. In the lab, I choose Jest to test my link checker project  written by JavaScript.  Jest  is a testing framework developed by Facebook. Originally designed to make UI testing easier for React developers, it’s now a full standalone suite of tools for any type of JavaScript project (including Node.js) and includes features such as a built-in assertion library, code coverage, and mocking. Jest also runs multiple test suites concurrently, which can speed up the overall testing process.  Jest has a lot of advantages, so I want to use it. First of all, I install the Jest to my local project using the command " npm install --save-dev jest ". Then I write three unit tests for reading a file and requesting a url by creating two new .test.js files. After completing the coding, I try to test them using the command "npm run test" and it works well. Unit test Second, I add some scripts in the packa

Telescope is an open source web server and client application for aggregating and presenting a timeline of Seneca's open source blogs.  This week I try to fix an issue in the  Telescope project .  First of all, I setup the Telescope project in my local host. When I look at the "About page", I find that half of that page will be blank if I scroll down the page. It looks  weird. So, I create an issue about the problem.                                                            About page before In order to fix this issue, I create a new <div> tag to wrap the pictures. Then, I set CSS for this tag to make the <div> tag sticky to the top of the page.                                                           Add a new <div> tag After modifying the code, I start to test it locally in my host. It looks well. The pictures keep on the top of the page when I scroll down.                                                            Fixed page At last, I push the com

 For the first pull request of Release0.3, I choose a new project named  react-course-theme  to deal with.  In the project, there is a crash issue when the user input a url to enter the website directly. But it will be fine if the user enter the website through the link of the main page. Error message When I analyze the project, I find the problem comes from using  useLocation ( ) function of " react-router-dom ". W hen  every route is connected, the value can be passed from one page to the next clicked page. But when you want to enter the website directly through URL, the new page can't get the value from the  useLocation ( ) function.                                      Use  useLocation ( ) function to get value from previous page Pass value through history.push() function In order to fix the issue, I choose to parse the URL to get unique ID u sing  useParams () function of " react-router-dom ". Then I fetch the data from source data using find() function.  

 This week we learn to manage our projects using Static analysis tools.  Static analysis tools help us maintain the quality of our source code by fixing formatting issues, spotting suspicious coding constructs, or alerting us to common errors. Now I use my  testLink  project to practice these tools. Create a CONTRIBUTING.md File First, I create a  CONTRIBUTING.md file to  separate the setup and development content from README.md file. Add a Source Code Formatter I pick Prettier formatter for my JavaScript project. Following the instruction, I use the command " npm install --save-dev --save-exact prettier " to install the tool. After installing, I use the command " npx prettier --write . " to formate all my files and " npx prettier --check . " to check the files if there are some wrong formation. I also set the ".prettierrc.json" and ".prettierrcignore" file. Then, I create  a simple "one-step" solution for running my formatte

 This month we will start to work on Telescope project.  Telescope is a somewhat complex system that uses many technologies.  For the first week of this month, we need to prepare something for the project. First of all, I try to set up the  Telescope development environment on my local host.  I have to say, it took me a lot of time to  set up this environment . After searching for and installing relevant applications, I implement the Telescope project successfully. http://localhost:3000/posts http://localhost:3000/feeds Second, I add a new feature in my  Link Checker project  to  check the links in the last 10 posts indexed by my local Telescope. I create a new js file called readUrl to  implement  the function. After modifying the code, I test it successfully.                                                          Test record Then, I create a Gist which includes DIFF(git diff) in my GitHub. At last, I push my new commit of Link Check project to my GitHub.