Posts

OSD Release 0.3 final post

Image
When I try to fix this issue  in debugger.html, I found some other bugs. Both issues are related to the "Set directory root" menu button on the left side panel of the debugger. They are not in the issues tab. The first issue occurs when there is a webpack folder. When trying to set the sub directory to the root, the content of the folder will be missing, but when setting it up directly, the content is rendered. It happens because of the webpack has different url than the ordinary ones. Issue 1 - STR: Go to  https://firefox-debugger-example-react-js.glitch.me/ On the left panel, right click on "Webpack" folder and Click on "Set directory root" Then right click on "app" foler and Click on "Set directory root" ( notice the content is missing ). Issue 2 - STR: Go to  https://davidwalsh.name/ On the left panel, right click on "davidwalsh.name" and Click on "Set directory root" Then expand the subfol

OSD lab6 blog post

Image
During this lab, I found that the Brave browser will fail to search or open the correct content for the two url: "https://www.google.ca/search?q=dog cat" "file:///Users/humphd/repos/browser-laptop/dog cat.txt" they all have a space between dog and cat, and because of that, the browser will consider they are not a valid url. I tried to fix this bug. I found when they check the url, they only trim the spaces at beginning and end. The space between dog and cat won't be replace or encoded as an url. So, I added the code. And I wrote test cases: As well as ran the unit test:

OSD Lab5 add light-dark mode switches

Image
For this lab, we were asked to fix this  issue  which was to add a new feature for the project. Initially, I didn't know where to begin, but after a bit of investigation of the code, I knew that the UI layer is in the Base-UI file. So I wrote a new class mode and imported to the base. The plugin I used for calculating sunrise and sunset time is called "suncalc" and it can be found  here . Final results: After doing this lab, I have learned how to implement a class in JavaScript and use a open source plugin.

OSD release 0.2 final post

Image
This was a valuable learning experience of working with the  issue  on Mozilla/devtools:  debugger.html . The issue was related to adding flow coverage for one of the type.js file. At beginning, I did not think it will be a hard process, just need to learned flow as I supposed to. However, it was actually not that easy because I ran into many troubles like figuring out the meaning of the code and make good adjustment for fixing. Thankfully, after I push my PR on GitHub,  here , Jason, the owner of debugger repo helped a lot. He fixed last three errors which really need deep understanding of the code. However, we all ran into the last problem, which is shown in the screenshots below, This error is tough because I am not sure what is it causing it. By doing some research, it might be flow itself causing the error. So, Jason asked me to created another PR just for debugging this error and merged other code to the master branch. Overall, my first contribution to open source projec

OSD release 0.2 intro post

Image
For the release 0.2, I choose to work on the flow issue in debugger.html  link . It is for maintaining the core health of the project. By adding "// @flow" to src/workers/parser/types.js, flow will check the JavaScript code for errors automatically. Check  here  for more information on Flow. First, it introduces 28 errors: I found there is a easy error to fix so I reduced it to 27. I am going to do my best and fix the rest of issues.

ECMAScript Test Suite - create reverse tests

Image
During last week of study on open source standards of web, I learned that JavaScript is implemented all based on ECMAScript specification. The latest standards in ES2017 however most of the major browsers only support ES2015 so for and partial of the later standards. More information about JavaScript and ECMAScript can be found wiki  and  github/test262 . Then, I wrote the test cases about array reverse, the code can be found on gist : In order to execute the test case, we need to install test262-Harness: Then, run the command and pass the js file: It will return the result of the test cases.

Analyzing bugs for vscode on Github

Image
For the OSD600 lab3, I am trying to fix a bug for vscode. I found this bug in the issues tab,  Rename folder collapses it . The reporter illustrated clearly that when renaming the parent folder of a structure of folders, the folder tree collapsed. I analyzed the code and tried to fix it. I found that it actually deleting the folder structure first and then re-add them to the view with the new name. When rename the folder name: The folders get deleted one by one Then it will re-add it with new folder name  This is the code that has been doing the action. I don't know why it's done this way, but certainly there's reason for that. What I can do is to add code to expand the folders after they got added to the view.