OSD600 – RELEASE 3

In release 3, we are asked to continue working on real open source projects, but more. It means we need to fix or contribute more issues than release 2 to show a degree of growth. So,  I decided to fix more than two issues in different area from release 2. I found and contributed three issues.

---

what  I have done

The first one is Mozilla Science Lab. It is a community of researchers, developers, and librarians making research open and accessible.

The second one is Mozilla Office. Public Corsica instance for Mozilla office and home offices. If you are at a Mozilla office, this project is what powers the content on the flat screen TVs throughout office.

I found two issues about https. Http is a protocol that allows communication between different systems. It is used for transferring data from a web server to a browser to view web pages, but there is a issue that data is not encrypted. Therefore, we strongly suggest to use https, the ‘S’ means secure. Https involves the use of SSL certificate. It creates a secure encrypted connection between the web server and then web browser.

There are lots of insecure urls in above two projects. They want to convert the urls where already support https to https.

When I try to convert http to https in first project. I found more than 100 http urls, so I use switcher in VScode to convert all http to https. I did not realized some http urls sill not supported https. Of courses,  something is broken including links and images. Therefore, I have to go back on the origin one and double check the transform one by one to make sure each one is good.

Here is the first PR and second PR.

---

The last project that I contributed is Kitsune, which is the platform the powers SuMo( support.mozilla.org). There is a url pointing a Troubleshooter addon in settings.py which currently returns 404. It is not available. Therefore, I remove all references to troubleshooter addon. Here is my PR.

---

Conclusion

That is my last semester. To be honest, this course is most useful that I have took. I mean I attend college for finding a job. I have learned some language including C, C++ and JAVA etc, but all is basic and  I have to improve these skills to satisfy job requirement, but OSD600 is really related with job. In release 1, I created open source RESTful API and familiar with how to use GitHub, In release 2 and 3, I contributed real open source project. These real experiences what job required. Nice Course!

 

 

lab6

We need to fix URL bug at the Brave browser using TDD. 

Here is some case.

Most of these cases are good, but it is different between

• "https://www.google.ca/search?q=dog cat"
• "file:///Users/humphd/repos/browser-laptop/dog cat.txt"

 

So, I try to fix this bug and I found the urlutil.js and urlutilTest.js.

urlutil.js check the url. And then we can see there is a trimming space at the beginning and end,  that will cause the problem. I changed the ode to check the validation of the url

Next, we need add some unit test to test it.

Then, the result is:

release2-final post

In this blog, I will focus on what I contributed on this release2. I chose thimble and Android altert dialog.

Here is introduction for these project: https://hongcheng1993.wordpress.com/2018/03/27/introduction-of-thimble-and-android-alert-dialog/

Here is two PR for thimble and Android alert-dialog:

https://github.com/mozilla/thimble.mozilla.org/pull/2622/files

https://github.com/pedant/sweet-alert-dialog/pull/175

 

the first one is thimble.  The problem is & is not working anymore. Like below picture:

Therfore, I think html may be updated and we can just use & directly in the html.

I forked the repo and clone it.  I open it by using vscode and changed all & to & in every single region server.properties.

The second one is Android alert-dialog. Someone made a great and beautiful  alert dialog examples. However , more than three people post issues to ask changing the color of buttons, beause they can not set directly the color by using setColor() in the code. The sample is not supported yet.They have to import the library first. Then go to the values to customize whaterver they wants. So, I made PR to show how to customize the sample project.

here is Android alert-dialog PR again.

https://github.com/pedant/sweet-alert-dialog/pull/175

 

Conclusion:

In this release, I did not learn any new programing language. The only experience is to familar the Github. I spent most of time to find a bug or issue that I can fix. Also, I failed lots of time to fix bugs in vscode and Brave browser. It is hard to fix a bug in a big project. The good thing is that I still coontributed something.

Introduction of thimble and Android alert-dialog

In OSD release 2, we need to contribute a real open sourse project. The first step is finding some project that we are interested in. Therefore, I chose to work on Thimble by Mozilla and a Android alert-dialog. In this blog, I will introduce more details about these two project.

Here is their links:

Thimble: https://github.com/mozilla/thimble.mozilla.org

Android alert-dialog:https://github.com/pedant/sweet-alert-dialog

 

Thimble is onliine code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. It is very useful for the web language beginingers.  Also, it is easy to use. You just need to go to the website and start to run your code as possible as quickly.  It is a combination of a code editor, web browser and developer tools and it is free.

Thimble supports to instantly see your changes, remix thimble project and built-in JavaScript Console so on. It is a full-featured code editor.

Android is most popular mobile language. There are lots of functions and libraries to support it. Altert-dlalog is one of them.  A Dialog is small windows that pormpts the user to a decision to enter addtional information.  Some times in the application, if you wanted to ask the user about taking a decision between yes or no in respone of any particular action taken by the user,  by remaing in the same activity and without changing the screen, you can use  Altert Dialog.

lab5

In lab 5, we need to update a repository, which shows you bridges locate in Ontario. Here is repository link: (https://github.com/humphd/bridge-troll). We need to add the feature to switch night and day.

Before we change and debug the code, we need to install suncalc.SunCalc is a tiny BSD-licensed JavaScript library for calculating sun position, sunlight phases (times for sunrise, sunset, dusk, etc.), moon position and lunar phase for the given location and time. More details about suncalc on this link:(https://github.com/mourner/suncalc). Typing   ”npm install suncalc” in terminal to install that.

The another thing is finding the map themes based on library Leaflet (http://leafletjs.com/).

Next, I gonna fix the code.

I import the module in map.js

 

Then we need change the code to implement the feature. Here is the code what I fix and change.

Next, run it and copy the localhost.

It is day.

It is night map.

It works.

lab4-OSD

In this lab, we’re learning Open Standard. We need to work on lots of tests suites and write some tests for JavaScript  (ECMAScript ) standard.

Firstly, what is open standards?

An open standard is a standard that made available to the general public and are developed and maintained via a collaborative and consensus driven process. In open source, open standards are guidelines to keep technologies “open”.

 

Next, what isECMAScript ?

ECMAScript is a subset of JavaScript, which is basically ECMAScript at its core but builds upon it.  The specification defined in ECMA-262 for creating a general purpose scripting language. ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be consider ECMASript compliant.

 

Finally, let me talk about my testing experiences.

1.create new test.js –> This test is for  the reverse function.

here is code link:

	//tester.js
	// Copyright 2009 the Sputnik authors. All rights reserved.
	// This code is governed by the BSD license found in the LICENSE file.
	/*—
	info: |
	The elements of the array are rearranged so as to reverse their order.
	The object is returned as the result of the call
	esid: sec-array.prototype.reverse
	es5id: 15.4.4.8_A1_T1
	description: Checking case when reverse is given no arguments or one argument
	—*/
	//CHECK#1
	var x = [];
	var reverse = x.reverse();
	assert.sameValue(x,x.reverse());
	//CHECK#2
	x = [];
	x[0] = 1;
	var reverse = x.reverse();
	assert.sameValue(reverse,x.reverse());
	//CHECK#3
	x = new Array(1,2);
	var reverse = x.reverse();
	assert.sameValue(reverse,x.reverse());
	//CHECK#4
	assert.notSameValue(x[0],2);
	//CHECK#5
	assert.notSameValue(x[1],1);
	//CHECK#6
	var arrLength = x.length;
	assert.sameValue(arrLength, 2);
	// //CHECK#1
	// var x = [];
	// var reverse = x.reverse();
	// if (reverse !== x) {
	// $ERROR('#1: x = []; x.reverse() === x. Actual: ' + (reverse));
	// }
	// //CHECK#2
	// x = [];
	// x[0] = 1;
	// var reverse = x.reverse();
	// if (reverse !== x) {
	// $ERROR('#2: x = []; x[0] = 1; x.reverse() === x. Actual: ' + (reverse));
	// }
	// //CHECK#3
	// x = new Array(1, 2);
	// var reverse = x.reverse();
	// if (reverse !== x) {
	// $ERROR('#3: x = new Array(1,2); x.reverse() === x. Actual: ' + (reverse));
	// }
	// //CHECK#4
	// if (x[0] !== 2) {
	// $ERROR('#4: x = new Array(1,2); x.reverse(); x[0] === 2. Actual: ' + (x[0]));
	// }
	// //CHECK#5
	// if (x[1] !== 1) {
	// $ERROR('#5: x = new Array(1,2); x.reverse(); x[1] === 1. Actual: ' + (x[1]));
	// }
	// //CHECK#6
	// if (x.length !== 2) {
	// $ERROR('#6: x = new Array(1,2); x.reverse(); x.length === 2. Actual: ' + (x.length));
	// }

view raw

tester.js

hosted with ❤ by GitHub

2.go to the folder where your test located and test it by typing test262-harness test/*.js in the terminal.

It works.

lab3-VS_Code Fix

In lab 3, we try to fix VS code bugs on Github. I selected  #16834 bug.

Here is the link:     https://github.com/Microsoft/vscode/issues/16834

 

This bug is that vs-code does not provide results when users search in folder with special characters ‘{}’ yields. Let me provide more details about that.

step1:

open VS code. Then go to vscode directory and then open vscode dev by typing ./scripts/code.sh in terminal.

step2:

I created folder called {hello} and then placed hello.txt file in folder with hello text.

step3:

I enter {hello}/ in sidebar to “Find in Folder” hello and then I got no results found.

step4:

I try to find and fix the problems. I think the problem may be on string format logic part.

 

Unfortunately, I still can not fix the bug after many time debugging.  After I try this bug , I guess it may be a specific feature for some use case.

Assignment 1 – Open Source

This assignment has two parts.

The  part A is to create a REST API web service. It includes GET endpoint and POST endpoint. This REST API can find phone numbers from submitted resources.  All responses from the API should be given in JSON format and then back to the user.

The part B is to contribute someone’s repository. Picking two or more issues to fix them.

1. What did I built?

I built a REST API web service in javascript ( Node.js, NPM and Express framework). It calls phonenumberparser-js.

LINK HERE: https://github.com/StevenZhang123/phonenumberparser-js

2. What was your process for this assignment?

This assignment really challenge me. That is my first time to build a REST API. I am not familiar with Node.js, Express, NPM, chai and mocha. I have to learn all of these tools first and know how to use it .

Therefore, I learned some knowledge about these tools and frameworks. Also, I have to do some works on the GitHub. I use a few times before. Now, I am better to use git and GitHub and manage GitHub repositories.

 

 

 

 

 

 

lab2-OPEN THE VISUAL STUDIO CODE-DEV AND INSTALL EXTENSIONS

After installing the visual studio code in right way, I install Yarn by Homebrew and I had npm installed. After I finished these steps, I can open the visual studio code-dev. I type the ./scripts/code.sh command in my terminal and then I can use the visual studio code-dev.

 

Visual studio code is free and can run anywhere. Also, it is powerful, which combines the simplicity of a source code editor with powerful developer tooling (ex: IntelliSense code completion and debugging). There are lots of extensions to help users. I installed some extensions to help me develop web and open source including Debugger for Chrome for debugging JS and Python in the Chrome browser, Beautify for make code styling better, C++ intelligence for C++ programs.

FIRST-POST for Open Source

Hello everyone, my name is Hongcheng Zhang. You can call me Steven. I am CPA student and that is my last semester.

project: machine learning

link:https://github.com/collections/machine-learning

 

Machine learning was coined in 1959 by Arthur Samuel. He is a computer at IBM.

Machine learning is the study of algorithm that use data to learn, generalize, and predict.  The causes make machine learning exciting is that with more data, the algorithm improves its prediction.

Now, some tools like Amazon Web Services and Hadoop use machine learning to improve their efficiency.