Planet CDOT

February 24, 2018

Abdul Kabia

B-but it’s right there, VSCode!

Hello again! It's me, your favorite - hopefully by now - mediocre blogger/programmer! So for this week, I was tasked with looking into a bug on Microsoft's VSCode and see what it is that I can understand from it. Now I must admit, at first this seemed and felt very overwhelming. Primarily because I've never …

Continue reading B-but it’s right there, VSCode!

by akkabia at February 24, 2018 03:32 AM

Vimal Raghubir

Installing VSCode as a Developer

My experience with VSCode installation was definitely a tough learning lesson for the future. I encountered several errors that revolved around the yarn and yarn run watch commands to not be able to find my C++ compiler. After doing extensive research into my environment variables, Visual Studo versions, and carefully examining the path that was being used to find the C++ compiler, I discovered the root of the issue.

I have several versions of Visual Studio installed including 2013 and 2015. I encountered several installation problems when trying to download a C++ compiler for Visual Studio 2015 in the past. Due to this reason, I never bothered to code C++ programs on 2015 but instead coded on 2013. The issue with this project relative to this Visual Studio issue, is that the path used to find the C++ compiler was looking into Visual Studio 2015. And since the C++ compiler doesn’t exist, then it was breaking with many errors. My solution to this problem was to download a C++ compiler for 2015 and everything runs smoothly after that including all tests and live debugging.

After setting up Visual Studio as a Developer, I decided to download several extensions from the Visual Studio User version. Some extensions I decided to install were:

  1. Debugger for Chrome- An extension for Google Chrome that debugs JavaScript code on the browser.
  2. ESLint- An extension that allows VSCode to integrate ESLint library.
  3. Go- An extension that support Go programming on VSCode.
  4. Kubernetes- An extension that allows VSCode to interact with Kubernetes Clusters.
  5. Openshift-vscode-extension- An extension that connects VSCode to your OpenShift platform.

I chose the last 3 extensions because I am interested in DevOps tools like OpenShift and Kubernetes. Go is a programming languages that a lot of these platforms/applications use so having an extension that makes VSCode support Go is crucial. The Debugger for Chrome was recommended as an alternative to using brute force debugging tactics. This recommendation came from my professor David Humphrey.

So far I haven’t changed any settings of VSCode, but I am sure I will once I start using it to do projects. I normally use Notepad++ for my programming in languages like HTML, CSS, JavaScript, however this application doesn’t have a debugger. VSCode is not only a universal editor, but it allows me to debug my code. Definitely will switch over to this and stop using Notepad++.

What I have discovered about some of the technologies used in VSCode includes;

  1. TypeScript is a super set of JavaScript that focuses on defining the type of variables whereas regular JavaScript allows you to have variables that have undefined types. E.g. greeting : string is the same as var greeting but the difference is that greeting in TypeScript can ONLY be string or else an error, unlike JavaScript.
  2. Electron is a Open Source framework used to allow Desktop applications to incorporate components specific to web applications.
  3. Sinon is a standalone tester for JavaScript that works with any Unit Testing Framework.
  4. Mocha is a testing framework in Node.js.

by Vimal Raghubir at February 24, 2018 02:31 AM

Matthew Quan

SPO600 Lab 4: Looking at Vectorization and SIMD

Link to lab:

In this lab we are investigating vectorization and what effect it causes on the assembly.

1. First we had to write a program that had two arrays that had random numbers and add them to a third array.

Originally my code looked like this:

#include <stdlib.h>
#include <time.h>
#include <stdio.h>

int main(){
	int array1[1000];
	int array2[1000];
	int array3[1000];

	int i;
	for(i = 0; i < 1000; i++){
		array1[i] = rand() % 2000 + (-1000);
		array2[i] = rand() % 2000 + (-1000);
		array3[i] = array1[i] + array2[i];
		printf("number: %d \n",array3[i]);

However, this didn’t work as the objdump did not have any vectorization as shown below:

400560:	a9bc7bfd 	stp	x29, x30, [sp, #-64]!
400564:	d2800000 	mov	x0, #0x0                   	// #0
400568:	910003fd 	mov	x29, sp
40056c:	a90153f3 	stp	x19, x20, [sp, #16]
400570:	5289ba74 	mov	w20, #0x4dd3                	// #19923
400574:	a9025bf5 	stp	x21, x22, [sp, #32]
400578:	90000015 	adrp	x21, 400000 <_init-0x4b8>
40057c:	911ee2b5 	add	x21, x21, #0x7b8
400580:	f9001bf7 	str	x23, [sp, #48]
400584:	72a20c54 	movk	w20, #0x1062, lsl #16
400588:	5280fa13 	mov	w19, #0x7d0                 	// #2000
40058c:	52807d17 	mov	w23, #0x3e8                 	// #1000
400590:	97ffffd8 	bl	4004f0 <time@plt>
400594:	97ffffeb 	bl	400540 <srand@plt>
400598:	97ffffde 	bl	400510 <rand@plt>
40059c:	2a0003f6 	mov	w22, w0
4005a0:	97ffffdc 	bl	400510 <rand@plt>
4005a4:	2a0003e3 	mov	w3, w0
4005a8:	aa1503e0 	mov	x0, x21
4005ac:	9b347ec1 	smull	x1, w22, w20
4005b0:	9b347c62 	smull	x2, w3, w20
4005b4:	9367fc21 	asr	x1, x1, #39
4005b8:	9367fc42 	asr	x2, x2, #39
4005bc:	4b967c21 	sub	w1, w1, w22, asr #31
4005c0:	4b837c42 	sub	w2, w2, w3, asr #31
4005c4:	1b13d821 	msub	w1, w1, w19, w22
4005c8:	1b138c42 	msub	w2, w2, w19, w3
4005cc:	0b020021 	add	w1, w1, w2
4005d0:	511f4021 	sub	w1, w1, #0x7d0
4005d4:	97ffffdf 	bl	400550 <printf@plt>
4005d8:	710006f7 	subs	w23, w23, #0x1
4005dc:	54fffde1	400598 <main+0x38>  // b.any
4005e0:	52800000 	mov	w0, #0x0                   	// #0
4005e4:	f9401bf7 	ldr	x23, [sp, #48]
4005e8:	a94153f3 	ldp	x19, x20, [sp, #16]
4005ec:	a9425bf5 	ldp	x21, x22, [sp, #32]
4005f0:	a8c47bfd 	ldp	x29, x30, [sp], #64
4005f4:	d65f03c0 	ret

With some help with my prof I changed my code to this:

#include <stdlib.h>
#include <time.h>
#include <stdio.h>

int main(){
	int array1[1000];
	int array2[1000];
	int array3[1000];

	int i;
	for(i = 0; i < 1000; i++){
		array1[i] = rand() % 2000 + (-1000);
		array2[i] = rand() % 2000 + (-1000);

	for(i = 0; i < 1000; i++){
		array3[i] = array1[i] + array2[i];

	for(i = 0; i < 1000; i++){
		printf("number: %d \n",array3[i]);


and this fixed my problem with my code not being vectorizable.

2. Compiling

According to this article:, you need to add -O3 to enable vectorization.

So I ran this command: gcc -fopt-info-vec-all -O3 -o loop.c 3.a
You also want to add -fopt-info-vec-all because it will allow you to see if vectorization occurred.

It should say that your code got vectored after running gcc.

3. Annotate the emitted code

Here is the output of my program when I run objdump:

400560:	d285e810 	mov	x16, #0x2f40                	// #12096
400564:	cb3063ff 	sub	sp, sp, x16
400568:	d283f401 	mov	x1, #0x1fa0                	// #8096
40056c:	d2800000 	mov	x0, #0x0                   	// #0
400570:	a9007bfd 	stp	x29, x30, [sp]
400574:	910003fd 	mov	x29, sp
400578:	a90363f7 	stp	x23, x24, [sp, #48]
40057c:	5289ba77 	mov	w23, #0x4dd3                	// #19923
400580:	a9025bf5 	stp	x21, x22, [sp, #32]
400584:	914007b8 	add	x24, x29, #0x1, lsl #12
400588:	a9046bf9 	stp	x25, x26, [sp, #64]
40058c:	8b0103b5 	add	x21, x29, x1
400590:	a90153f3 	stp	x19, x20, [sp, #16]
400594:	9000001a 	adrp	x26, 400000 <_init-0x4b8>
400598:	f9002bfb 	str	x27, [sp, #80]
40059c:	910183b9 	add	x25, x29, #0x60
4005a0:	d2800014 	mov	x20, #0x0                   	// #0
4005a4:	72a20c57 	movk	w23, #0x1062, lsl #16
4005a8:	5280fa16 	mov	w22, #0x7d0                 	// #2000
4005ac:	9120e35b 	add	x27, x26, #0x838
4005b0:	97ffffd0 	bl	4004f0 <time@plt>
4005b4:	97ffffe3 	bl	400540 <srand@plt>
4005b8:	97ffffd6 	bl	400510 <rand@plt>
4005bc:	9b377c13 	smull	x19, w0, w23
4005c0:	9367fe73 	asr	x19, x19, #39
4005c4:	4b807e73 	sub	w19, w19, w0, asr #31
4005c8:	1b168273 	msub	w19, w19, w22, w0
4005cc:	510fa273 	sub	w19, w19, #0x3e8
4005d0:	b8346b33 	str	w19, [x25, x20]
4005d4:	97ffffcf 	bl	400510 <rand@plt>
4005d8:	2a0003e2 	mov	w2, w0
4005dc:	aa1b03e0 	mov	x0, x27
4005e0:	9b377c41 	smull	x1, w2, w23
4005e4:	9367fc21 	asr	x1, x1, #39
4005e8:	4b827c21 	sub	w1, w1, w2, asr #31
4005ec:	1b168821 	msub	w1, w1, w22, w2
4005f0:	510fa021 	sub	w1, w1, #0x3e8
4005f4:	b8346b01 	str	w1, [x24, x20]
4005f8:	0b010261 	add	w1, w19, w1
4005fc:	b8346aa1 	str	w1, [x21, x20]
400600:	91001294 	add	x20, x20, #0x4
400604:	97ffffd3 	bl	400550 <printf@plt>
400608:	f13e829f 	cmp	x20, #0xfa0
40060c:	54fffd61	4005b8 <main+0x58>  // b.any
400610:	d2800000 	mov	x0, #0x0                   	// #0
400614:	3ce06b20 	ldr	q0, [x25, x0]
400618:	3ce06b01 	ldr	q1, [x24, x0]
40061c:	4ea18400 	add	v0.4s, v0.4s, v1.4s
400620:	3ca06aa0 	str	q0, [x21, x0]
400624:	91004000 	add	x0, x0, #0x10
400628:	f13e801f 	cmp	x0, #0xfa0
40062c:	54ffff41	400614 <main+0xb4>  // b.any
400630:	d285e800 	mov	x0, #0x2f40                	// #12096
400634:	9120e35a 	add	x26, x26, #0x838
400638:	8b0003b3 	add	x19, x29, x0
40063c:	b84046a1 	ldr	w1, [x21], #4
400640:	aa1a03e0 	mov	x0, x26
400644:	97ffffc3 	bl	400550 <printf@plt>
400648:	eb15027f 	cmp	x19, x21
40064c:	54ffff81	40063c <main+0xdc>  // b.any
400650:	a94153f3 	ldp	x19, x20, [sp, #16]
400654:	52800000 	mov	w0, #0x0                   	// #0
400658:	a9425bf5 	ldp	x21, x22, [sp, #32]
40065c:	d285e810 	mov	x16, #0x2f40                	// #12096
400660:	a94363f7 	ldp	x23, x24, [sp, #48]
400664:	a9446bf9 	ldp	x25, x26, [sp, #64]
400668:	a9407bfd 	ldp	x29, x30, [sp]
40066c:	f9402bfb 	ldr	x27, [sp, #80]
400670:	8b3063ff 	add	sp, sp, x16
400674:	d65f03c0 	ret

Note these lines:
400614: 3ce06b20 ldr q0, [x25, x0]
This is using indirect addressing as it is accessing the combined value of x25 and x0 in memory.
The value of x0 is set in this line:
mov x0, #0x0

and the value of x25 is set here:
add x25, x29, #0x60
40061c: 4ea18400 add v0.4s, v0.4s, v1.4s
This line is taking 128 bits and dividing them into 32 bits by 4 lanes.
Then adding the lanes from v0 to v1 and putting the result into v0.

400620: 3ca06aa0 str q0, [x21, x0]
It is using an indirect store to memory and pointing to the combined values of x21 and x0.
The value of x0 is still 0 and x21 is set here: add x21, x29, x1

This lab showed me how sensitive the complier is to vectorization and how simd works.

by mattprogrammingblog at February 24, 2018 01:19 AM

February 23, 2018

Justin Vuu

OSD600 – Lab 3

We’re starting to move into larger, real projects now. This week, we took a look at Visual Studio Code (VSCode), Microsoft’s open-source development environment. Our professor selected a few issues from its repository for us to choose from and take a stab at fixing them.

I took the first bug from the list. From the description on the lab’s wiki page and the issue itself, it seemed simple enough. Well, it certainly did seem that way. The bug was that VSCode couldn’t search through files in directories with curly brackets – i.e. “{ }” – in its name. Looks like an issue with the regex pattern the search function uses. The prof worked through something similar with us before; it’s just like the bug with the Quick Open function we fixed as a class.



For the particular bug I’m looking at, the issue was easy to reproduce. Create a directory with curly brackets in its name, such as “{foo}”. Inside, a text document with some content, like “bar.txt” containing “hello”. In VSCode, you can either open bar.txt in the editor or not, the only difference is what files to include when searching. If you do open file in the editor, use the search function to find “hello” with “{foo}” in the files to include field. VSCode will tell you no results were found. If you didn’t open the file, still find “hello” but enter the absolute path including the folder name, e.g. “C:\{foo}”. VSCode will instead search indefinitely and still return no results.

To try to find the source of the bug, I used Chrome Debugging Tools in my build version of VSCode. I inspected the search function and inserted breakpoints in the code where I thought would be used or changed by the files to include field. This led me to various TypeScript files, but the one I thought was relevant was “SearchWidget.ts”. I viewed the same file in VSCode’s GitHub repository, just to make it easier for me to read and find things. In that file, there is a method that validates the search: validateSearchInput

getRegex()? I look at the top of the file where imports are declared, and focused on two particular files: findInput and inputBox.


Unfortunately, this is where my search comes to an unsatisfactory end. I couldn’t find anything within these two files that I thought would be what I was looking for.

by justosd at February 23, 2018 06:46 PM

Yalong Li

Analyzing bugs for vscode on Github

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.

by Yalong ( at February 23, 2018 02:50 AM

Matthew Quan

OSD600 Lab 3: Investigating a bug with VSCode

Link to lab:

For this lab we have to research a bug and find out why it’s not working as intended.

I asked my prof if this bug was good and he agreed:

The bug was having to do with the Find window which is this:
find regular

The problem was with inconsistent behavior between ctrl+f and ctrl+f3.
By default ctrl+f is bounded to Find and ctrl+f3 is bounded to Find Next Selection.

VSCode has a useful feature where you can enable Find Window to use regular expression to capture text.However, this feature is broken for ctrl+f3 as it doesn’t escape special characters.

For example, ctrl+f would take this: +{}[] and convert it to this: \+\{\}\[\]
But ctrl+f3 would not do this and the Find Window would just have this: +{}[]
In order to start finding out what was wrong I used the built in debugger and starting to debug the Find Window.

First I investigated if there was something was wrong with turning the regex on/off but both turned on regex on normally.I then worked from where I first saw searchString which is the variable that gets displayed in the input box.
From that I was able to deduce that the problem came down to one setting not being enabled.

As you can see from these lines in findController.ts it needs to see if seedSearchStringFromSelection is true to enable regex escaping:

if (opts.seedSearchStringFromSelection) {
  let selectionSearchString = getSelectionSearchString(this._editor);
  if (selectionSearchString) {
    if (this._state.isRegex) {
      stateChanges.searchString = strings.escapeRegExpCharacters(selectionSearchString);
    } else {
      stateChanges.searchString = selectionSearchString;

Turns out there was a flag that controlled if searchString was escaped and it was called seedSearchStringFromSelection.
Find looked like this:

forceRevealReplace: false,
seedSearchStringFromSelection: editor.getConfiguration().contribInfo.find.seedSearchStringFromSelection,
seedSearchStringFromGlobalClipboard: editor.getConfiguration().contribInfo.find.globalFindClipboard,
shouldFocus: FindStartFocusAction.FocusFindInput,
shouldAnimate: true

and Find Next Selection looked like this:

forceRevealReplace: false,
seedSearchStringFromSelection: false,
seedSearchStringFromGlobalClipboard: false,
shouldFocus: FindStartFocusAction.NoFocusChange,
shouldAnimate: true

I changed seedSearchStringFromSelection from false to editor.getConfiguration().contribInfo.find.seedSearchStringFromSelection in Find Next Selection. After building the project again it fixed the ctrl+f3 problem and passed all of the given tests. I submitted a pull request and am currently waiting for feedback from the developer team.

Throughout the debugging process I learned that debugging will bring you to code that you though you would never go to. I never thought that the problem was being caused by one setting in a file.

Overall, this was an interesting lab to do. It got me into looking into code and debugging what was wrong with an issue. I feel this will help me now with future releases. I’ll create another blog when I get a response back from the developer.

by mattprogrammingblog at February 23, 2018 02:37 AM

Leandro Navarro

0.1 Release

In my open source development class, I’ve been tasked to create an open source RESTful API web service that implements google’s libphonenumber library. Our app is supposed to take a string or a text file, parse it for phone numbers and return it. Once that is done, we are then supposed to find two other issues, in another students app, and fix it. This is done through Github. Students upload their repositories with the app and file issues for other students to fix.

We were free to do this project any way we wanted, using any programming language we were comfortable with. I ended up choosing javascript. It was difficult getting started, I didn’t know much javascript but I heard that it’d be one of the simpler languages to complete this task with, so I stuck with it. Not going to lie, I had to peak at other students repositories in order for me to get started for I had no idea how to even start. I’d even say that that was the most challenging part of this project, getting started. But it wasn’t to copy, and be done with it, but to understand how things were done, what packages were used and why. But since this is an open source class, it was kind of encouraged(?). After extensive research I was finally able to finish. Once that was done I then had to fix bugs on another student’s app. I looked for one that was also written in javascript, since I became comfortable with it and save myself the headache. I ended up fixing another student’s POST method and testers. Their post method needed an external tool like POSTMAN in order to test it, so I modified it so the app displays an HTML page in which the user can upload their text files. No POSTMAN needed. I also added more tests to their tester, for it was lacking.

This first release has taught me a lot of things. Like javascript and it’s massive library of packages to do certain things. Even the tester, prior to this class I had no clue what a tester was, but then I learned the importance of it, even big companies regularly used it. I became familiar with mocha and chai, two fairly popular packages used for testing. I also learned more about git and it’s commands. I’ve used git before, but only to push projects up. Doing this project has exposed me to filing pull request, exploring issues, merging, what to expect and such. I’ve also learned the importance of documentation, being detailed with clear instructions has helped me a lot. And open source licenses, why we need them, and the differences between licenses.

Because of this project I’ve experience both being a maintainer and a contributor. And I honestly prefer being a maintainer.I prefer the freedom to write how I want than trying to understanding someone else’s code, but that’s just open source development, and this is just a taste of it.




by jlnavarro42 at February 23, 2018 02:00 AM

Shawn Pang

Vectorization | SPO600 Lab 4

For this lab, we will be taking a look at vectorization and how our code is being auto-vectorized by the compiler.

We will write a short program that creates two 1000-element integer arrays and fills them with random numbers in the range -1000 to +1000, then sums those two arrays element-by-element to a third array, and finally sums the third array and prints the result, compiling the program on a AArch64 server and checking to see how the compiler will transform our loop into a vector operation.

First, we will make a file named vector.c with the following code:

#include <stdio.c>
#include <stdlib.h>
int main(){
 int a[1000], b[1000], c[1000];
 int i,j,q,sum;
 for (i = 0; i <= 1000; i++){
        a[i] = rand() % 2001 + (-1000);
        b[i] = rand() % 2001 + (-1000);

for (j = 0; j <= 1000; j++){
        c[j] = a[j] + b[j];


for (q = 0; q <= 1000; q++){
        sum += c[q];


Next, we will compile this code using [ gcc -o vector vector.c ] and run the code using the command [ ./vector ]. This program will create 2000 random variables between -1000 and 1000, and place them inside two different arrays. Then, it will add each individual array number to a third array, sum up all of the third array’s number, and print the variable.

Now, what is currently happening? Well, while we can’t see it, the compiler is currently moving around and changing parts of our code to make our code function better, which is auto-vectorization. Taking a look at the assembly language using [ objdump -d vector | less ], and finding the main part of the code, we can see that [ mov ] is being used on the immediate values and changing the location to vectorize our code loops, placing it in more optimised positions so our code will function faster.

by sppang at February 23, 2018 01:02 AM

Matthew Quan

SPO600 Lab 3 Part 2: Programming in assembly

Link to lab:
In the last part we had to build and compile assembly.
For this part we had to create assembly code that spits this out:

Loop: 0
Loop: 1
Loop: 2
Loop: 3
Loop: 4
Loop: 5
Loop: 6
Loop: 7
Loop: 8
Loop: 9

To start we were given this code in assembly that allows looping:

.globl    _start

start = 0                       /* starting value for the loop index; note that this is a symbol (constant), not a variable */
max = 10                        /* loop exits when the index hits this number (loop condition is i<max) */

    mov     $start,%r15         /* loop index */

    /* ... body of the loop ... do something useful here ... */

    inc     %r15                /* increment index */
    cmp     $max,%r15           /* see if we're done */
    jne     loop                /* loop if we're not */

    mov     $0,%rdi             /* exit status */
    mov     $60,%rax            /* syscall sys_exit */

Here is our code for X86(Gas):

.global _start

stdout = 1
start = 0
max = 10

	mov $start, %r15
	mov $10,%r10


	mov $0, %rdx
	mov %r15, %rax
	div %r10

	cmp $0, %al
	je loopCountined
	mov %al, (msg+6)
	add $48, (msg+6)

	mov %dl, (msg+7)
	add $48, (msg+7)

	mov $msg, %rsi
	mov $len, %rdx
	mov $stdout,%rdi
	mov $1, %rax

        inc %r15
	cmp %r15, $max
	jne loop

  mov $0,%rdi
  mov $60,%rax

.section .data

msg: .ascii "Loop:   \n"
.set len, . - msg

This code has two loops, one is for printing the first digit and another for printing the second digit.
First it moves r15 into rax and sets rdx to 0 because we used div on r10.
div then takes what is in rax and divides it by the given register.
It then places quotient into rax and remainder into rdx.

This results in a pattern like this:

r15 / r10
0 / 10 = 0 quotient, 0 remainder
1 / 10 = 0 quotient, 1 remainder
2 / 10 = 0 quotient, 2 remainder
3 / 10 = 0 quotient, 3 remainder
4 / 10 = 0 quotient, 4 remainder
5 / 10 = 0 quotient, 4 remainder
11 / 10 = 1 quotient, 1 remainder
12 / 10 = 1 quotient, 2 remainder

It then checks the value of rax to see if it’s equal to 0.
If it’s equal to zero it skips printing out rax.
That’s so our output doesn’t end up like this:

Loop: 00
Loop: 01
Loop: 02
Loop: 03
Loop: 04
Loop: 05
Loop: 06
Loop: 07
Loop: 08
Loop: 09

We want to skip printing out the second digit when it’s equal to zero.
It then moves rdx to msg+7 which is replacing the space in “Loop: \n” with the value in rdx.
It then adds 48 to this position so that it becomes an ascii number.
As you see in this website:, it would print out a bunch of garbage to the screen if we didn’t add 48.
After that it repeats cycle over and over again until r15 equals max.

Our group found that writing assembly was frustrating at times.

We found that writing assembly was hard due to every single line being important and one line can cause alot of trouble if it’s slightly wrong.
For example, our group had a couple of small problems like having a tabbed appearance:

Loop: 0
  Loop: 1
  Loop: 2
  Loop: 3
  Loop: 4
  Loop: 5
  Loop: 6
  Loop: 7
  Loop: 8
  Loop: 9

The problem we had some extra symbols in the section data that caused our len to miscalculate the length.
Once we removed the extra stuff in the section data it worked fine.
Another mistake we made was naming our section .rodata which mean it was read only so we couldn’t change the message.

Turns out not printing was caused by rdi and rsi were in the wrong position and after switching them it worked fine.
I also used gdb to help with debugging assembly code.
If I have some time I’ll try to make the aarch64 version of this.

by mattprogrammingblog at February 23, 2018 12:20 AM

Justin Vuu

OSD600 – Release 0.1


Developing Using GitHub

Developing My Own App (Using Google’s libphonenumber)

The first part of our assignment was to develop an API that parses phone numbers from a query string or text file. Instead of building our own API completely from scratch, we only coded the part that handles GET and POST requests and formatting the response. To parse for valid phone numbers, we used methods in Google’s libphonenumber.

We had the freedom to use any language to build our API, but I opted for Java, which libphonenumber is mainly built with. The reason is two-fold: I get to build my experience with coding in Java and learn to build a web-based Java app. With the help of others, I learned that I needed Eclipse – and Integrated Development Environment (IDE) – which also requires a server running on Apache Tomcat.

When it came to actually coding and testing my API, I had a much more difficult time than I anticipated. Just building the part of the API that handles GET requests took me a few days before I got it right. The one large hurdle I couldn’t get over was a ClassNotFound error for PhoneUtil, which is from libphonenumber. I double-checked, and triple-checked that I had its Java archive included and imported in the code. I tried running the code with it and without it, and eventually,  the Tomcat server would fail to launch. I was never able to find an explanation for that one.

I decided to restart from the beginning again. A few times, actually, because I kept running into that same error. I gave up and took a break from it for a day.

I looked at Google’s demo again and noticed something different in where they stored their archive. I looked at other student’s assignments – the ones coded in Java – to see if they did the same thing. That’s when I realized my mistake – I had the archive saved (and imported?) incorrectly! I wasn’t supposed to just add the archive, I had to save it in the WEB-INF directory!

WEB-INFIt was supposed to go here all along. No more hair-pulling!

After figuring that out and importing the archive the correct way, the ClassNotFound error was resolved, and I was able to finally get the GET request working. Coding the remainder of the API was a breeze in comparison. I had to search up what was needed to handle uploading a file – importing a couple more archives which also had to be saved in the WEB-INF directory.

Contributing to Other Assignments

I found this to be the more enjoyable part of the assignment. Probably because simply adding to someone’s code is much easier than coding the whole thing yourself. It didn’t require as much research or even knowledge of the language, too. Most of the other assignments were built in JavaScript – which I have almost zero experience in – but I was able to understand their code, fix their bugs, and add new features all in one sitting.

Here are the pull requests of my two contributions:

On a side note: Man, how I wish I had learned JavaScript earlier. Node.js and its package system – NPM – seem so much easier to understand compared to Java. Perhaps I’ll take the break to dive into more JavaScript and learn more about all the tools that make use of it.

npmNeed to install a package? Boom! Done.

Unlike with my own assignment, fixing a bug or adding a feature to someone else’s code gave me this feeling of… accomplishment? Like my work actually meant something. And it’s great when work has meaning. I’ve never had this feeling in any of the assignments I’ve done in the past for this program.

I still have some worries, though. This assignment is nothing compared to the larger “real” projects we’ll be working on. I feel a little shame having to always look up how something is done – like reading in text from a file, I always seem to forget. These larger projects were made by professionals, who probably code a level much higher than me, and understand all these things. Will I be able to contribute something to them?

by justosd at February 23, 2018 12:18 AM

February 22, 2018

Alex Wang

Obtaining VS code project and getting started in open source using a Mac

Installing VS Code as a user

The process was a breeze. I simply navigated to, clicked the download button and everything else was history.

Extensions Installed

I’ve come from a background of having used the Atom editor as well as Sublime text 3, so I have a few plugins that I really like. In addition, there were a few I installed later on that is required to work on the developer version of VS Code. They are all great tools that help troubleshoot or extend a developers capabilities to do more.

• Google Chrome Developer Tools: Required for VSCode development
• JSHint: A JavaScript syntax checker before error messages hit the fan
• TSLint: A Typescript syntax checker before error messages hit the fan, used for VSCode development
• VIM: I love VIM editor shortcuts. It makes writing code super fast
• VS-Code icons: Just to spice up the look of the editor
• Prettify JSON: I do a lot of web programming, especially with web service so it is nice to have formatted JSON that’s human readable
• TODO Highlight: A tool that allows you to customize words to highlight in the editor to make notes as you code (i.e. FIXME, REVIEW, TODO, etc.)
• Code Spell Checker: I’m not very good with spelling, so this will save me the embarrassment

My Custom Settings

"git.autofetch": true,
"editor.tabSize": 2,
"editor.fontSize": 14,
"editor.fontFamily": "SFMono-Regular,Menlo, Monaco, 'Courier New', monospace",
"editor.wordWrap": "wordWrapColumn",
"editor.rulers": [80],
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
"window.zoomLevel": 1,
"cSpell.language": "en",
"workbench.iconTheme": "vscode-icons",
"todohighlight.isEnable": true,
"todohighlight.keywords": [
"text": "TODO:",
"color": "#3f3f3f",
"overviewRulerColor": "grey",
"isWholeLine": false
"text": "NOTE:",
"color": "#e0e0e0",
"backgroundColor": "#0e8738",
"overviewRulerColor": "grey",
"isWholeLine": false
"text": "REVIEW:",
"color": "#e0e0e0",
"backgroundColor": "#6302d3",
"overviewRulerColor": "grey",
"isWholeLine": false
"text": "DEBUG:",
"color": "#e0e0e0",
"backgroundColor": "#0045f9",
"overviewRulerColor": "grey",
"isWholeLine": false
"text": "HACK:",
"color": "#000",
"overviewRulerColor": "grey",
"isWholeLine": false
"editor.minimap.enabled": false

Here are the things I’ve changed for the editor:
• Disable minimap: Since I’m on a 13″ MacBook Pro, screen real estate is very precious. The mini-map significantly reduces the available space to display code. I make up for this by using find (cmd + f) or using VIM plugin to scroll up and down via (ctrl + F and ctrl + B).

• todohighlight settings: These settings as mentioned above, allow me to customize words and the colors used to present them on the editor. It improves my workflow by allowing me to make notes that I can refer to as I am developing

• cSpell: This setting is for the spell checker explained above and specifies English and the language.

• editor.rulers: Specifies an array of numbers for which the editor should include a vertical ruler. This is helpful to see if your text is too long and is wrapping to the next line.

• editor.wordWrap: Specifies how the editor should perform wordWrap. In my case, I’m using soft wrap. This means if the text overflows past 80 characters, the editor will automatically wrap my text instead of me having to do it manually.

• tabsize: I like using only 2 spaces for tabs to conserve space and display more code.

• editor.fontFamily: This is very important to me because it is the very text I read every time I’m coding. I have it in the following order “SFMono-Regular,Menlo, Monaco, ‘Courier New”. The first font is the monospaced version of the new San Fransisco font that apple has released about 4 years ago. It is smooth, modern and really easy on the eyes. The others are also my favorites, but in descending order as they are more dated fonts.

Technologies used by VS Code

• Electron – Electron is a framework by GitHub that supports building native apps on desktop/laptop using web technologies. It uses Node JS as a back-end and Chromium to render the UI to the user.

• Typescript – A new language that is a super set of JavaScript created by Microsoft that transpiles down into JavaScript. It’s special feature includes compile time type checking, support for interface, enum, generics, tuple, and namespaces.

• Mocha – A Node JS framework used to perform unit testing to ensure code runs as expected as multiple developers collaborate together and the application becomes more complex.

• Sinon – A spy/mock testing tool for Node JS. This tool helps with unit testing by mimicking data and results (mocking) or inspecting data as it passes through functions (spies) to ensure the application is working as expected. It is used in conjunction with unit testing frameworks such as Mocha.

• Yarn – A package installer created by Facebook to install Node JS packages. It is lightweight, uses checksum for package integrity, allows offline reinstalling, and automatic retry on download failure. It also supports a .lock file to ensure packages installed on one system will be installed exactly the same way on another.

• ESLint / TSLint – Both are syntax checkers for JavaScript and Typescript respectively. As the developer is working on his/her code, the linters will display red squares/dots on the editor to note errors in the code before the code gets compiled or executed.

• Node JS – A JavaScript environment that is built on Google’s V8 JavaScript engine. It’s purpose is to provide a run-time environment for JavaScript applications that is lightweight and super fast. The primary use of Node JS is for web development because of its event-driven and non-blocking I/O capabilities, which makes all requests asynchronous, allowing web apps and services to be more responsive. It also features Node Package Manager, a popular package manager to install modules to extend its capabilities.

Getting Started

As a lab, my professor David Humphrey got me started on working on Microsoft’s VS Code. It is an amazing text editor that combines the best of Sublime Text editor with Microsoft’s intellisense code completion system. Furthermore, it has a built-in debugger, terminal and of course, a large list of plugins to choose from.

Here’s the process I went through:

1) Fork the repo from Microsoft’s VS Code github.

2) Clone the repo to my local machine by running git clone

While I’m using the link to my repo, you can make this work for your own repo by switching out the link with your own.

3) Add Microsoft’s VSCode repo as remote upstream. This allows getting the latest updates from Microsoft while working on a bug fix or new feature. You will notice I’m using SSH version of the link here. This is to simplify interacting with GitHub without prompting for my login each time. You can set up SSH keys for machines you frequently use here.

git remote add upstream

4) Install all of its required dependencies based on how to contribute wiki page inside their repoistory. Since I’m on a Mac machine, I’ve installed Python 2.7.14 via Homebrew, XCode LibTools, Node via Node Version Manager (NVM), and yarn package manager.

I did not install git because git was shipped as a standard development tool from Apple and while it is not the latest version, it is sufficient for my needs.

It is important to note that I used NVM during the installation of Node because Microsoft has specified that only versions >= 8.9.1 and < 9.0.0 are supported.

To install a specific version of node using NVM execute: nvm install 8.9.1

5) Execute yarn via terminal in the repo’s directory to build the developer version of VS Code. At this point, I ran into some issues, which I will detail later.

6) I then executed ./scripts/

However, at this point, I’ve ran into more problems.

Problems, problems, more problems

The first problem I ran into was the compiler complaining about a missing plugin NSFW. This plugin is associated with Electron, a framework that allows users to develop native applications on desktops/laptops using web technologies (Node JS back-end and Chromium front-end).

I was able to avoid this initially by going directly into the /build directory and running yarn, but the problem eventually would come back to haunt me.

The second problem that occurred was when I ran ./scripts/ to launch the editor. The error message was:

* Activating extension `vscode.merge-conflict` failed: Cannot find module ‘vscode-nls’.

* Activating extension `vscode.git` failed: Cannot find module ‘vscode-nls’.

* Activating extension `vscode.emmet` failed: Cannot find module ‘@emmetio/html-matcher’.

The solution I’ve found was to execute npm run postinstall inside build/

NSFW Won’t install

The NSFW issue came back while I was attempting to run tests to verify that the code base did not have issues before I begin working on the repository. When I executed ./scripts/, there was a large amount of errors being returned. This is how it looks like:

[11894:0212/151338.307494:INFO:CONSOLE(270)] “[object Object]”, source: /Users/awang05/dev/vscode/test/electron/renderer.js (270)

* Executed ./scripts/ –debug as suggested by David Humphrey to get more descriptive error message

Error: Cannot find module ‘../../build/Release/nsfw.node’ at Module._resolveFilename (module.js:470:15) at Function.Module._resolveFilename (/Users/awang05/dev/vscode/.build/electron/Code – at Function.Module._load (module.js:418:25) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object. (/Users/awang05/dev/vscode/node_modules/nsfw/lib/src/index.js:3:16) at Object. (/Users/awang05/dev/vscode/node_modules/nsfw/lib/src/index.js:130:3) at Module._compile (module.js:571:32) at Object.Module._extensions.js (module.js:580:10) at Module.load (module.js:488:32)

With the help of my professor, I executed ./scripts/ --debug to gain more insight into the problem.

Since we’ve noticed NSFW was missing, we tried installing NSFW via yarn yarn add nsfw. However, yarn warns that XCode Alcatraz package manager is missing. So the deep dive into the issue continues.

2018-02-12 15:39:59.752 xcodebuild[13996:3090356] [MT] PluginLoading: Required plug-in compatibility UUID B395D63E-9166-4CD6-9287-6889D507AD6A for plug-in at path ‘~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin’ not present in DVTPlugInCompatibilityUUIDs

2018-02-12 15:39:59.753 xcodebuild[13996:3090356] [MT] PluginLoading: Required plug-in compatibility UUID B395D63E-9166-4CD6-9287-6889D507AD6A for plug-in at path ‘~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin’ not present in DVTPlugInCompatibilityUUIDs

After having found how to add UUIDs for the required plugins, I executed defaults write MyPlugin.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add B395D63E-9166-4CD6-9287-6889D507AD6A. However, this did not work.

I then found an alternative from here and executed

defaults write ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins/Alcatraz.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add $(defaults read /Applications/ DVTPlugInCompatibilityUUID)

defaults write ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/Info DVTPlugInCompatibilityUUIDs -array-add $(defaults read /Applications/ DVTPlugInCompatibilityUUID)

The result from executing these two commands were

/Users/awang05/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/MacOS/AdjustFontSize: code signing blocked mmap() of ‘/Users/awang05/Library/Application Support/Developer/Shared/Xcode/Plug-ins/AdjustFontSize.xcplugin/Contents/MacOS/…

At this point, I got more assistance from my professor and realized that I had Macports and Homebrew installed. To eliminate potential conflicts between Macports and Homebrew, I uninstalled Macports.

Then I performed the following in the terminal.
1. brew install python 2
2. brew install libtool

We want to install homebrew’s version of libtool to bypass Xcode’s libtool since it tends to be more up to date and supports more features.

However, Homebrew notes that I already have this tool installed (from XCode) and that I only need to link to it to make it work. Naturally, I executed sudo brew link libtool. However, for security reasons, Homebrew now refuses to perform any action via sudo since it provides the execute script with root permissions.

To grant permission to the local system to perform linking, I tried sudo chown -R $USER:admin /usr/local/share/libtool/. However, this lead to another issue:

Error: Could not symlink include/libltdl/lt_system.h
Target /usr/local/include/libltdl/lt_system.h
already exists. You may want to remove it:
rm ‘/usr/local/include/libltdl/lt_system.h’

To preserve these files, I’ve attempted renaming them by adding a “.old” extension to the end of the files. However, the same error message would appear with a different file name each time. At this point, for the sake of sanity, I used the following command:

brew link --overwrite libtool.

Crossing my fingers, I ran yarn inside vscode directory hoping it would work. Yet, the same error occurred. However, we’ve noticed this time, it complained that a --static flag not being supported:

libtool: unrecognized option `-static’

Further investigation has led to the conclusion that my path was pointing to the version of libtool that does not support the static flag (very likely the original libtools shipped with XCode). To solve this issue, I renamed /usr/local/bin/libtool to /usr/local/bin/libtool.old (to preserve the old version).

The path now points to homebrew’s libtool: /usr/bin/libtool.

Now VSCode compiles and all tests work.

by Alex at February 22, 2018 10:11 PM

Woodson Delhia

Strange Vscode {Open Issue}

For my open source class, we were given a pretty interesting task. The task was to find a beginner-friendly open issue in Vscode’s library.  So, I decided to look at this open issue link. I found this issue very strange; the detail of the issue is that when we try to make a search for a text by including a specific folder name that we want to look into, we get a bad result if the specified folder name is wrapped within curly braces “{}”. For Instance, one would create a directory like so “{dir_name}” and add a text file(hello.txt) containing “hello” in it.

I was baffled by this because I have never heard or seen anyone create a directory with such format. Below is an image of the steps and error result.


Maybe they have a specific use case that requires them to create directories with such format. However, is it really a Vscode bug?  Anyhow, I still decided to have a look a the base code to find out where it is being parsed. Unfortunately, I was unable to find the module yet because there was so many service module that I just got lost. I will try to give it another shot maybe next week.

by Woodson Delhia at February 22, 2018 09:17 PM

Contributing To Classmate Project

Last week for my open source project my task was to find one of my classmate’s project and contribute to their issues on Github. I decided to contribute to two open issues of a classmate’s phone parser library. The first issue needed the library to have Heroku support, and the second issue needed liting support for the code.

Honestly, forking and setting up the project wasn’t too hard. I had to modify some part of the code just because some adjustments that were needed due to Heroku specifications. All in all, my contributing went pretty smoothly.

by Woodson Delhia at February 22, 2018 08:48 PM

Ray Gervais

How I Approach Bug Fixes in a new Code Base

The one thing that Humphrey said which really resonates with me on the topic of bug fixing is summed up as this, “[on bugs] they’re easier to understand since the code foundations have already been laid out before you, all you have to do is understand it”. Even at work, I found myself for the past 4 weeks focused on bug fixes to our product prior to the Mobile World Congress (MWC) event, so I was both sick and very well experienced in trial-error approaches towards bug fixing. Here are three concepts / thoughts which I find often result in a step in the right direction when it comes to solving the infamous issue, resolving the ticket, or adding the feature which exists in a different scope.

Is the Bugfix a result of Data Corruption and or Race Conditions?

This issue I find a lot working with ‘data-driven’ applications, the type of applications where charts, tables, and UI elements themselves are powered by JSON responses from a backend. In this case, the expected response (contract) differs from what is actually returned. In my first COOP with TechnicalitiesPlus, part of the learning experience was debugging and discovering that the front-end code itself functioned as expected, and it was the persisted data which had changed. This break of contract / agreement is often easy to overlook, assuming that the data itself is always the expected ‘source of truth’. The issue which led to this experience? The JSON array was returning objects which lacked very specific attributes which existed in the database. This caused failure to render and a very frustrated 19 year old to lose hours thinking it was Front-end logic creating the issue. The amount of hours I spent learning that scope inside-out before verifying the data response itself is a lesson that I will not forget, and it is why my primary debugging check is to verify the data.

Is The Requested Feature Already Implemented Elsewhere?

I find a lot of the bugs that I commit to are feature extensions to an already working component, so this question often comes up quickly when I start going crazy with the keyboard and terminal. Often, the feature exists in a different scope such as a dropdown, component, or platform even. If so, you then have a good base to research and understand how said base was implemented, thus granting you a giant leap ahead. For my two accessibility bugs as of last week, neither were applicable for this approach. That being said, my good friend Svitlana’s (who can be found here) recent work with Visual Studio Code followed this exact pattern with her bugfix / improvement. Her approach was very similar to this, first discover where the functionality exists and understand how it works from there. We toyed with the idea of copying the entire function over to the new scope, or importing it directly; both ideas replaced with a much more suitable IAbstractAction class implementation which would call the imported function within the required scope. Essentially, it replaced the original idea of reverse engineering and dozens of lines of code with a single, fifteen line IAbstractAction class which did not repeat code or produce a new scope riddled with potential issues.

Will Calculated Trial and Error Produce a Visual Difference and or Indicator?

This is more of a workflow paradigm that I’ve adopted from the first days at Seneca, where if you don’t understand how to fix or implement a working concept, essentially do ‘smart’ brute force attempts. What do I mean by smart? Well, don’t make the mistakes that I did at first where every single compiler error results in a different implementation. First, focus on the scope which affects your area of the bug. Try to understand its circles of scope and interaction, and from there reach out to all that the scope touches where applicable.
Once I understand the basics of the scope such as adding a button to a list of common functions, here is the ‘smart’ brute force direction I sometimes approach issues from:

  • Add a static button to the list forcefully, omit programmatic idioms for now, do you see the visual change?
  • Make the button produce an alert / visual indicator of user interaction and handling, is the event handler working?
  • Now attempt to add the button programmatically if appropriate, does it appear? Make it.
  • Make said button’s scope directly relational to the scope you’re working with, does it interact with the components data, DOM, or other functions?

If the first failed, I’d probably try as many alternatives to adding the button to the DOM as I could. Only then, would I attempt the second point. Likewise with the third and fourth. This method of attack maybe is not the most efficient, but it produces a thorough understanding of the scope and attempts made to work in said scope. I find myself following this approach less and less as experience in the project grows, but I cannot deny just how much time I wasted using said approach, and the results which were produced only being possible in such a way. Break the DOM or logic 20+ times in 30 different ways? Check!

In the End, the Direction is What Matters

I keep saying ‘step in the right direction’, because I truly believe that if you’re new to a code base, it’s easy to get lost in all the functions, methods, variables; the lights and darks. I love the reinforcing concept of taking a ‘good’ step, meaning taking the risk and or time which results in me being closing to where I need to be to achieve this bug fix or feature implementation. Nothing is more depressing than taking a step and falling that much deeper into confusion or misdirection. It’s just like finding treasure, once you find enough clues or the map itself, and take the path which leads you to the correct direction, you’ll find the chest full of gold!

Debugging FreedomFreedom

by RayGervais at February 22, 2018 07:53 PM

Zhihao Cai

Baby Steps into Open Source

As my baby steps into open source world, I have built a node web API that extracts phone numbers using an open source libphonenumber-js library as my OSD600 course requested.

Usages (file type support – txt, docx, pdf):

GET  /api/phonenumbers/parse/text/{...string...}

POST /api/phonenumbers/parse/file

Steps to create this API:

  1. pick a language and framework – Node, Express
  2. set up coding environment and dependencies – Node.js, npm, package.json
  3. create a basic web API structure and test it works
  4. understand the library and merge pieces into our use cases
  5. choose a testing framework and write test cases – mocha, chai
  6. test through HTTP clients – Postman


Why do I choose Node.js?

I know that Node.js has a good majority of communities and it provides the ability to write lightweight but high-performance backend server, so I thought it would be nice to get the hang of it before jump into the open source world.



The hardest part I found is actually finding a testing framework and writing the test cases. As I mention, Node.js has a majority of communities, and the communities provide feedbacks and supports for building a better Node.js. Therefore, there are so many testing frameworks out there, Jasmine, Jest, Mocha, AVA, Tape, you name it.

Well, which should I go for? To be honest, I believe the best way to figure this out is just randomly to pick one. For me, I end up choosing Mocha and Chai. The reason is very simple, because you are new, and you don’t have much enough knowledge to distinguish the pros and cons.


Being a maintainer or contributor?

Part B is to contribute to others’ API, focusing on bug fixes and feature requests.


  1. follow to set up the project
  2. go through steps to build, run, test
  3. reproduce error for bug fixes
    1. try to locate the issue
    2. debug
  4. locate related codes for feature requested
  5. write your codes and add the test case
  6. commit your changes to your remote branch
  7. create a pull request

Overall, the process of being a contributor is quite different than as a maintainer, and also more challenging. When you are solving other’s issue, it’s like you got thrown into nowhere, and you need to find your way out – understand other’s logic, sometimes even the whole picture. But the result is rewarding, you will learn not only the best practices but also the inefficient approaches which you can avoid in the future.


What I have learned:

There is so many good stuff I have experienced with for this project, Mocha, Chai, Multer, Heroku and some other open source libraries that support file parsing. I would also like to explore TravisCI later.

This’s just for fun, after you login into Heroku in the terminal, you can deploy your functioning project directly from Github repo.

heroku login

./  apponheroku

by choy at February 22, 2018 06:37 PM

Aliaksandr Ushakou

Release 0.1

Today I want to talk about my experience in working on an open source project both as a developer and as a contributor.

“we don’t care”

Software development is an area in which you can participate in a real project without leaving your home or even without getting up from the sofa. However, the real environment can be not only so open and welcoming, but also very cold and even cruel. What I mean is that sometimes someone spends a tremendous amount of time and effort to implement a feature that the community has requested, and in return receives a very dry and indifferent response that basically means “we don’t care”. And of course, this is a normal response in a professional business environment, where money means everything, so spending time on a feature that is not needed right now means wasting money. I think the key is to feel when it is worthwhile to spend your time and energy and when it is not, and also just be optimistic and don’t take a rejection personally.

It may sound obvious for an experienced open source developer, but for a beginner, like me, this is an unexplored area where it is easy to get lost. Therefore, this release takes place in a kind of friendly lab environment, where students contribute to each other and everyone can get help or advice.

Release 0.1 consists of two parts. Part A is to build a project and part B is to contribute to someone else’s work.


The project that I have built in part A is a phone number parser. The requirement was to develop a RESTful API web service, so I decided to use Node.js as a runtime environment and Express as a web framework.

There are a few reasons why I chose Node.js. First, I think Node.js has a very active community and there are tons of examples and guides. Second, Node.js is cross-platform. Third, there is NPM, that’s also called the node package manager. NPM provides hundreds of thousands of different packages, that you can plug into your system in seconds. Also, NPM can be used to automate the building process for a project. There is  npm install  command that installs all the dependencies listed in the  package.json  file.

As I mentioned before, the web service that I’ve built is a phone number parser. And, the main purpose of this service is to request some data and respond with phone numbers found in it. I just used this vague term “data” because there are four API endpoints so far, that can process different types of data, such as plain text, a file or a web page URL. And I’m planning to add more. By the way, API is an application program interface. Simply put, “it is the part of the server that receives requests and sends responses”, according to this article.

So, these four API endpoints are two GET requests and two POST requests. The first GET request allows to send small snippets of text to be parsed. The second GET request allows to send a resource at given URL to be parsed. The first POST request allows to send a base64 encoded text file, and the second POST request allows to send a MS Word file to be parsed. All responses from the API are given in JSON format, and phone numbers returned from any of the endpoints above are not duplicated. Check the documentation for more info.

Also, I want to mention that this project is not yet complete, and this is so on purpose, thus other students can contribute and enhance it.


The part B of this release is a contribution to someone else’s project. The requirement was to find another student’s repo and to pick two issues to work on. I’ve looked at dozens of repositories and each implementation of the phone number parser was unique. I’ve noticed the usage of Node.js and Express that I’ve never seen before. Moreover, someone used the language that I’ve never heard before! And this is the Haskell! You can check the Haskell phone number parser implementation here, while I’m adding Haskell to my “wish to learn list”.

Also, while working on other people’s code, I’ve discovered a very useful development tool, called nodemon. Nodemon monitors the node.js application files and when any change occurs, it automatically restarts the server. So, I don’t need to restart the server manually every time I want to check the changes.


For part B, I’ve decided to work on new features rather than bugs and issues. The reason is that I was curious to work with Tesseract and HTML to text parser, and new features are the best way to do it.

So, the first contribution that I’ve made is the support for parsing a resource at a given URL. It wasn’t really hard due to NPM. For example, I’ve found html-to-text package that parses HTML and returns a plain text. Pull request that I’ve made can be found here.

The second contribution is the support for parsing images. Parsing images is always interesting because it can easily create a wow effect. So, in order to do it, I’ve used Tesseract.js. It is the JavaScript port of the Tesseract OCR engine. Although, I’m still not sure if my implementation is good enough, it works! However, the result depends on the quality of the image. Pull request for the image parsing feature can be found here.

Also, I’ve faced an interesting problem while working on it. I’ve made a screenshot of contact us page from the Toronto Zoo website, and when I tried to parse it, I got some weird results. All hyphens were read as “7”. So, instead of getting “416-392-5900”, the result was “416739275900”. I started to research this issue and found out that small or bad-quality images might be misread. Then I’ve made a larger screenshot of the same contact page, and it worked!

In conclusion

Developing a project from scratch is usually a process of using existing knowledge and favorite technologies. Whereas contributing to someone else’s work is being out of your comfort zone. You will certainly face a technology that you’ve never used before, a pattern that you’ve never seen, an algorithm that you’ve never heard of, and a logic that you’ve never thought about. Now add some weird indentation with lack of documentation, and here we are.

Open source development is a great opportunity to learn new things, to try your hand, to fail, and to have fun. So far I enjoy it a lot and I look forward to the new challenges!
(actually, there are lots of very complicated challenges, but I needed to finish this blog post in some fancy way)

by aushakou at February 22, 2018 09:07 AM

Evan Davies

Bug Fixing VScode

I was tasked with scouting out a bug in the VScode repository and attempting to fix it. I chose this bug:
The user stated that after opening up enough files (In their case, 100-200) that VScode's search function would become glitched and not return the search results, instead giving "spawn ENAMETOOLONG". 
My attempt to reproduce this bug was not fruitful however. After opening the user's recommended 200 files, I had no issue searching. This led me to believe that it may be a processing issue with the user's computer. I attempted opening around 1000+ files concurrently, but I was still able to search. This may point towards the user's computer not being able to handle 100-200 files open at once, and that it is not necessarily VScode that is to blame for this issue.

by Evan Davies ( at February 22, 2018 04:15 AM

OSD600 - 0.1 Release

This release consisted of 2 sections: A and B.
Section A required me to utilize google's phone number parser to produce a RESTful API which could parse phone numbers from either straight text input or from a test file.
The repository for this can be found here:

I produced the api in javascript using Node.js. This was the first project that required me to install Maven in order to complete it.

Section B required me to choose 2 issues from my peers' repositories and fix/complete them. I had chosen to produce a file for the output (Found here: as well as an HTML interface allowing for easier navigation of the api's features (Found here:
It was an interesting experience adapting to the different coding methods used, but I believe it was a very important lesson in what to expect in my future. Adapting to the different environments was an exciting task.

by Evan Davies ( at February 22, 2018 04:09 AM

Marco Beltempo

R0.1.2 | Injecting Front Matter Syntax Highlighting in Markdown Files

TL;DR Contributing to Visual Studio Code Timeline

In continuation of, Microsoft Visual Studio Code: First Contribution, I’ll be talking about my experience working with Visual Code extension grammars, Text Mate, and extension development.


Goal: implement a feature in a Visual Studio Code that will highlight a TOML Front Matter code block within a Markdown file.

Challenge: TOML isn’t natively supported in VS Code and requires extension support. Compared to an integrated language (ex.YAML) can be referenced by its source file source.yaml within markdown.tmLanguage.json.

First I’d like to simplify a process that took me quite some time to understand.
Exactly how syntax highlighting rules are injected into the editor.VS Code extensibility architecture

  1. A VS Code extension creates a language server in a separate process.
  2. The extension host is actively listening for specific file types.
  3. A Text Mate, `tmLanguage` file defines valid syntax (patterns) specific to the language. For example, the JSON snippet below will detect the following code block:
    //see below for definition
    "superjs-code-block": {
    			"begin": "superjs",
    			"end": "(^|\\G)(?=\\s*[`~]{3,}\\s*$)",
    			"contentName": "meta.embedded.block.superjs",
    			"patterns": [
    					"include": "source.js"
  4. When a pattern is detected, VS Code uses the appropriate colours to highlight the syntax depending on the current theme.Release 0.1.2 Capture

First Attempt

Although I had opted to go the more practical approach, I felt understanding how the “simpler” method is implemented could get me off to the right start.

Easy Fix: Visual Code has native support for various languages such as Markdown. The markdown.tmLanguage.json contains tons of rules for syntax highlighting within a Markdown file. Create a new rule that would be triggered as long as the user had TOML lanugage support installed.

Looking through the markdown.tmLanguage.json file you’ll notice many fenced_codeblock rules.

    "include": "#fenced_code_block_xml"
    "include": "#fenced_code_block_xsl"
    "include": "#fenced_code_block_yaml"

This naming convention was used for standard Markdown fenced code blocks using triple backticks ```. Although this wasn’t quite what I needed, it gave me a better understanding of how the XML elements were structured.

I continued to search through the file and came across another XML element named frontMatter.

"frontMatter": {
    "begin": "\\A-{3}\\s*$",
    "contentName": "meta.embedded.block.frontmatter",
    "patterns": [
            "include": "source.yaml"
    "while": "^(?!(-{3}|\\.{3})\\s*$)"

The above pattern defines a valid Front Matter YAML code block which uses triple hyphens ---.

My plan was to duplicate the YAML Front Matter rule and modify the regular expression to check for triple addition symbols +++. While trying to import source.toml.

I compiled and launched VS Code source with my changes only to find out nothing really changed.

Issue#1 – Since source.toml is not integrated withing VS Code there is no way of refrencing it’s source.

Second Attempt

At this point, I was getting frustrated with my lack of progress. Endless Google searches and document after document I decided to start over with a new plan. This entire time I was focused on the bigger picture. Instead of trying to integrate the feature directly into the VS Code dev environment, why not create a simple extension with the sole purpose of injecting a code block.

Duplicating Matt Bierner’s original demo, I would be able to test each function as I went along.

I added following lines to support the new code block.

Line 3: “injectionSelector”- The L represents the left side of a line of text within a markdown file.

Line 6: “include” – the name used to define your new rule on Line 10.

Line 11: “begin” – regular expression looks for the three consecutive addition symbols +++ on the first line of the file with no leading whitespace.

Line 12: “end” – regular expression looks for the three consecutive addition symbols +++ to close the block.

	"fileTypes": [],
	"injectionSelector": "L:text.html.markdown",
	"patterns": [
			"include": "#toml-code-block"
	"repository": {
		"toml-code-block": {
			"begin": "\\A\\+{3}\\s*$",
			"end": "(^|\\G)(?=\\s*[\\+~]{3,}\\s*$)",
			"contentName": "meta.embedded.block.toml",
			"patterns": [
					"include": "source.toml"
	"scopeName": "markdown.toml.codeblock"

I tried creating a copy of TOML.tmLanguage within the projects directory, in hopes that I would be able to reference it by scope.

Line 5: “path” – path to the TOML.tmLanguage copy

Line 11: “injectTo”: “text.html.markdown” – explicitly declares where this rule will be used.

 "grammars": [
        "language": "toml",
        "scopeName": "source.toml",
        "path": "./syntaxes/TOML.tmLanguage"
        "scopeName": "markdown.toml.codeblock",
        "path": "./syntaxes/codeblock.json",
        "injectTo": [

Testing the newly created extension, it was still unable to load TOML.tmLanguage file. BUT I was able to reference other syntax source files (source.js) to demonstrate that the new pattern was working.  Notice how the labels below such as name have no syntax highlighting.

Release 0.1.2 Capture 2

Issue#2 – Although the tmLanguage file path is set (line 5: package.json) , VS Code still requires a grammar server to access source.toml

After reading over VS code’s “Extension Authoring” documentation, they had referenced a tool named Yo Code.
A Yeoman tool that generates basic Visual Studio extension templates for themes, language support, snippets, TypeScript and JavaScipt extensions.yo code output
During this setup process, I was able to directly reference the toml.tmLanguage file from the “TOML Language Support” extension.

I couldn’t believe how simple the setup process was. It generated the necessary files to access a TOML language server.


I rebuilt the extension along with the newly integrated language server, and to my surprise…

R0.1.2 Capture 3

A valid Front Matter block on the first line of a Markdown (.md) file with no leading whitespace. Also, the code block can’t interfere with other syntax rules.


Midway through the process, I realized that I hadn’t submitted a single pull request.

Issue#3 – How do I contribute this thing?

Typically you’ll want to submit a somewhat working version of your code for review. Considering this feature would be injected from an extension, I was confused as to what the protocol was.

So I reached out for some feedback:

Release 0.1.2 Capture 4

The better-toml extension was created and maintained by a single person, bungcip. With minimal activity in recent months, I was concerned about if and when I would receive a response.

At this point, I did what I could and opened an issue. I made sure to clearly outline all the details and reference the original issue from VS Code.

Within a day I had received a response from bungcip. Since I had uploaded a demo repository, he was able to download it, test it and provide feedback. He had suggested some minor changes and outlined his requirements for structuring the pull request.

Within a few days, the changes were approved and better-toml 0.3.2 was released to the Visual Studio Marketplace and it’s 36,000 users.


The post R0.1.2 | Injecting Front Matter Syntax Highlighting in Markdown Files appeared first on Marco Beltempo.

by Marco Beltempo at February 22, 2018 03:12 AM

Hao Chen

1 : Open Source — Hao : 0

After finally setting up VSCode, I was ready to rumble! I found my first match who had been waiting eagerly for a challenger since May 19, 2017.

The issue: Quick Open cannot find files if user enters ‘./’ for current working directory(CWD).

Reproducing the issue: this was confirmed on both Mac and Windows OS as shown below:

Below outlines my attempt at figuring out the cause of this bad boy:

  1. Casted my net wide in the HTML code to get a rough idea of what class might handle the functionality of loading path.
  2. Dove into QuickOpenController.ts and noticed that getResults() handles a call for prepareQuery(), which to my understanding cleans the search value of irregularities. This function uses the query to return a list of search history ranked by score, a rank/priority given to each file (The exact formula to calculate score is classified…maybe you can find it?).
  3. At the same time, I’ve set some break points in FileService.ts, specifically at resolveFileData(). With a name like ‘file service’, you’d think the program would make a pit stop here to do something related to opening files…nope~
  4. Continuing from #2, I dove into QuickOpenScorer.ts to examine prepareQuery(). A gem immediately poped out to me:

My initial thought on the issue was that nobody considered using CWD when searching in Quick Open. So my naive solution was simply:

Did it work? yes and no…

Something broke!

My gut feeling tells me something is off, and the ‘fix’ was a facade. So I did not jump to the conclusion and consulted my professor David Humphrey on Slack.

Great feedback received.

I completely forgot that ‘.’ is a wildcard :P!

  1. Looking into query values was just the surface, I needed to go deeper! Maybe classes that handles opening files has something fishy going on. OpenFileHandler looked interesting, specifically the call to doFindResults(). This function looks for the file requested.
  2. Within doFindResults(), it calls queryBuilder’s query() function, passing it an Options object:
filePattern, I think I may be onto something.

Options.includePattern is passed to parseSearchPaths(), but it is undefined!

This is where I narrowed the issue down. My suspicion is that somewhere, ‘./’ is not noted as a pattern to include for parseSearchPaths(). Hopefully, I’ll get to finish what I started in the following weeks.

Summary of tools and technique used:

  • Developer tools
  • Break points
  • Consulting with others

What did I learn?

  • Trust your gut feeling
  • Understand the problem, before looking for the cause!

Hope you enjoyed the read,

Hao-ut (Hao out~)

1 : Open Source — Hao : 0 was originally published in Haorc on Medium, where people are continuing the conversation by highlighting and responding to this story.

by Hao Chen at February 22, 2018 02:11 AM

February 21, 2018

Kelvin Cho

Lab 3

For lab 3 we were supposed to fix a bug that is an issue on Github, which I was excited about. But unfortunately, I was not able to fix any of the bugs that I was working on.

The first bug we tried was the following bug. The problem was that we could not re-create the issue that was posted.

Things that we tried, base on the instruction on how to reproduce the errors were:

  1. Create a directory with 10,000 files.
  2. 10,000 text-files with 5000 lines of codes
  3. Installing the extension that they were using “note: some of the extension we could not find so maybe one of them may have been the cause”

After all of that, we still could not reproduce the bug that was posted. So we also moved

The second bug we tried was a problem with opening an image that has double underscores in the name. This one we also could not reproduce the error, we also read a comment from a user “Kieferlam” who also tested in different version and still could not re-create it.

So lastly, we decided to look at a bug that about the user can not find a result if the user enters the following special character ‘{}’. For this bug, in particular, we were able to re-create it. The person that issued the post also linked a particular part of a code that he thinks might have caused the problem.

We decided to investigate this code that was suggested. To our surprise, this part of the code was actually removed almost a year ago. When they were trying to fix another bug at the time. But after a long search, we still could not figure out the root of the problem.

The things that I learn while doing this is that reproducing a certain bug can be very hard. Since there are many factors that you have to consider like the extension that they used, how powerful is their computer is, and think what other things the users might have done to cause the problem in the first place.


by Kelvin Cho at February 21, 2018 08:54 PM

Release 1.0

Release 1.0 is an OSD600 project that we created to use the Libphonenumber that was made by Google. In this project, we are to create open-source server/application to use the Libphonenumber to parse phone-number from files and URL.

To start this project we had to select one of the following supported libraries or port one over into something you are using.

For this instance, I have decided to go with JavaScript as my programming type. Other programs that I used for this project was Node.js and Express as you can create a web server very easily.

As this is my first time using Node.js and Express. I have to look around to find how to use these frameworks.

The process of doing the release was mostly just messing around with the JavaScript and trying to find out how Multer and how to implement it into my own project.

My experiences as a maintainer verse being a contributor quite different.  Being a maintainer seems to be a  bit more enjoyable to me. It is interesting to see how people contribute to your project.

The most challenging part of the work was knowing where to start, once I found where I wanted to start it was very much easier. Then everything else seems to slowly come to me.

Things that I learned from doing this work was there were a lot of things that I need to look up, do my own research to make sure it everything works, and try testing more than once because it always somehow breaks the second time.

Overall, I felt that I have learned quite a bit while doing this project itself.

by Kelvin Cho at February 21, 2018 08:20 PM

Matt Rajevski

Workshop 4

This blog post will go over the method to set your code up to be auto-vectorized by the compiler. We were to create a program that would generate two 1000 element arrays with random values between 1000 and -1000, and print the sum of the two arrays.

Here is the first version of the program:

// w4.c //
#include <stdio.h>
#include <stdlib.h>
#include <time.h>

void main() {

int t = 0;
int x[3][1000];
time_t T;


for (int i = 0; i < 1000; i++) {
   x[0][i] = rand() % 2000 - 1000;
   x[1][i] = rand() % 2000 - 1000;
   x[2][i] = x[0][i] + x[1][i];
   t += x[2][i];

printf("Total of two arrays: %d\n", t);

I compiled the program and this was the objdump:

// gcc -O3 w4.c -o w4 //
0000000000400560 <main>:
 400560: a9bb7bfd stp x29, x30, [sp, #-80]!
 400564: 910003fd mov x29, sp
 400568: a9025bf5 stp x21, x22, [sp, #32]
 40056c: 5289ba75 mov w21, #0x4dd3 // #19923
 400570: a90153f3 stp x19, x20, [sp, #16]
 400574: 72a20c55 movk w21, #0x1062, lsl #16
 400578: f9001bf7 str x23, [sp, #48]
 40057c: 52807d13 mov w19, #0x3e8 // #1000
 400580: 5280fa14 mov w20, #0x7d0 // #2000
 400584: 910123a0 add x0, x29, #0x48
 400588: 52800017 mov w23, #0x0 // #0
 40058c: 97ffffd9 bl 4004f0 <time@plt>
 400590: 97ffffec bl 400540 <srand@plt>
 400594: 97ffffdf bl 400510 <rand@plt>
 400598: 2a0003f6 mov w22, w0
 40059c: 97ffffdd bl 400510 <rand@plt>
 4005a0: 9b357c03 smull x3, w0, w21
 4005a4: 71000673 subs w19, w19, #0x1
 4005a8: 9b357ec2 smull x2, w22, w21
 4005ac: 9367fc63 asr x3, x3, #39
 4005b0: 4b807c63 sub w3, w3, w0, asr #31
 4005b4: 9367fc42 asr x2, x2, #39
 4005b8: 4b967c42 sub w2, w2, w22, asr #31
 4005bc: 1b148060 msub w0, w3, w20, w0
 4005c0: 1b14d842 msub w2, w2, w20, w22
 4005c4: 0b000040 add w0, w2, w0
 4005c8: 511f4000 sub w0, w0, #0x7d0
 4005cc: 0b0002f7 add w23, w23, w0
 4005d0: 54fffe21 400594 <main+0x34> // b.any
 4005d4: 2a1703e1 mov w1, w23
 4005d8: 90000000 adrp x0, 400000 <_init-0x4b8>
 4005dc: 911ee000 add x0, x0, #0x7b8
 4005e0: 97ffffdc bl 400550 <printf@plt>
 4005e4: a94153f3 ldp x19, x20, [sp, #16]
 4005e8: a9425bf5 ldp x21, x22, [sp, #32]
 4005ec: f9401bf7 ldr x23, [sp, #48]
 4005f0: a8c57bfd ldp x29, x30, [sp], #80
 4005f4: d65f03c0 ret

There was no vectorization is this version of the program, so I made some changes to the source code and added another compiler option.

I separated the variable assignments into separate loops:

// w4v.c //
for (int i = 0; i < 1000; i++) {
   x[0][i] = rand() % 2000 - 1000;
   x[1][i] = rand() % 2000 - 1000;

for (int i = 0; i < 1000; i++) {
   x[2][i] = x[0][i] + x[1][i];

for (int i = 0; i < 1000; i++) { 
   t += x[2][i];

I also added the -ftree-vectorization option to the compiler and this was the objdump:

// gcc -O3 -ftree-vectorization w4v.c -o w4c //
0000000000400560 <main>:
 400560: d285e410 mov x16, #0x2f20 // #12064
 400564: cb3063ff sub sp, sp, x16
 400568: a9007bfd stp x29, x30, [sp]
 40056c: 910003fd mov x29, sp
 400570: 910103a0 add x0, x29, #0x40
 400574: a90153f3 stp x19, x20, [sp, #16]
 400578: 5289ba74 mov w20, #0x4dd3 // #19923
 40057c: a9025bf5 stp x21, x22, [sp, #32]
 400580: 72a20c54 movk w20, #0x1062, lsl #16
 400584: aa0003f6 mov x22, x0
 400588: 913f83b5 add x21, x29, #0xfe0
 40058c: 5280fa13 mov w19, #0x7d0 // #2000
 400590: 9100e3a0 add x0, x29, #0x38
 400594: 97ffffd7 bl 4004f0 <time@plt>
 400598: 97ffffea bl 400540 <srand@plt>
 40059c: 97ffffdd bl 400510 <rand@plt>
 4005a0: 9b347c01 smull x1, w0, w20
 4005a4: 910012d6 add x22, x22, #0x4
 4005a8: 9367fc21 asr x1, x1, #39
 4005ac: 4b807c21 sub w1, w1, w0, asr #31
 4005b0: 1b138020 msub w0, w1, w19, w0
 4005b4: 510fa000 sub w0, w0, #0x3e8
 4005b8: b81fc2c0 stur w0, [x22, #-4]
 4005bc: 97ffffd5 bl 400510 <rand@plt>
 4005c0: 9b347c01 smull x1, w0, w20
 4005c4: eb1502df cmp x22, x21
 4005c8: 9367fc21 asr x1, x1, #39
 4005cc: 4b807c21 sub w1, w1, w0, asr #31
 4005d0: 1b138020 msub w0, w1, w19, w0
 4005d4: 510fa000 sub w0, w0, #0x3e8
 4005d8: b90f9ec0 str w0, [x22, #3996]
 4005dc: 54fffe01 40059c <main+0x3c> // b.any
 4005e0: 910103a0 add x0, x29, #0x40
 4005e4: 3dc00000 ldr q0, [x0]
 4005e8: 91004000 add x0, x0, #0x10
 4005ec: 3dc3e401 ldr q1, [x0, #3984]
 4005f0: eb16001f cmp x0, x22
 4005f4: 4ea18400 add v0.4s, v0.4s, v1.4s
 4005f8: 3d87cc00 str q0, [x0, #7984]
 4005fc: 54ffff41 4005e4 <main+0x84> // b.any
 400600: 4f000400 movi v0.4s, #0x0
 400604: d283f000 mov x0, #0x1f80 // #8064
 400608: d285e401 mov x1, #0x2f20 // #12064
 40060c: 8b0003a0 add x0, x29, x0
 400610: 8b0103a1 add x1, x29, x1
 400614: 3cc10401 ldr q1, [x0], #16
 400618: 4ea18400 add v0.4s, v0.4s, v1.4s
 40061c: eb00003f cmp x1, x0
 400620: 54ffffa1 400614 <main+0xb4> // b.any
 400624: 4eb1b800 addv s0, v0.4s
 400628: 90000000 adrp x0, 400000 <_init-0x4b8>
 40062c: 91204000 add x0, x0, #0x810
 400630: 0e043c01 mov w1, v0.s[0]
 400634: 97ffffc7 bl 400550 <printf@plt>
 400638: a9407bfd ldp x29, x30, [sp]
 40063c: d285e410 mov x16, #0x2f20 // #12064
 400640: a94153f3 ldp x19, x20, [sp, #16]
 400644: a9425bf5 ldp x21, x22, [sp, #32]
 400648: 8b3063ff add sp, sp, x16
 40064c: d65f03c0 ret

The program has now been vectorized as shown by the bold instructions in the objdump.

The first loop couldn’t be vectorized because it uses the rand() function and the compiler can’t vectorize external function calls.

A major difference between the two programs is the size. The vectorized program has two extra loops to allow for the vectorization, so this creates more assembly code.

Overall, the source code for the vectorized program contains more but it is able to take advantage of the auto-vectorizer in the compiler.

by mrrajevski at February 21, 2018 07:41 PM

Margaryta Chepiga

Release 0.2 – Part 2

Type of the Release

This release is regarding the good-first-bug. The issue page for the bug is here.

How it was Chosen

There is not much story into how I found it. I was browsing though good-first-bugs and saw this issue. It seemed like a manageable and interesting bug to fix.

Expected Result

Process & Solution

So when I just had a quick look at this issue, I thought that it is going to be a very easy and straightforward bug to fix. I thought that it is just a small CSS fix. I have to admit, I was wrong. However, after all, I also have to admit that I am extremely happy that I was wrong. I learned so much fixing this bug.

I started by reading the issue page.

Basically, part of the URL has an icon which is clickable. When you click on it, it will show you connection information. However, the area around the icon should be clickable too.

Then I found out that there is another issue that was referenced to initial one.

So now, instead of just changing the area around the icon, I’ve set a bar a bit higher. I wanted to make the whole area clickable.

I started by opening VScode and looking for the keywords, which in my case I considered to be urlbarIcon and urlbarIconContainer.

I have found a couple of files. I looked through them, trying to understand the code. I was trying to understand what is wrong, where and how to fix this.

Honestly, it took me a while. I was going through the functions. I tried a couple of different things, but none of them worked. Then, I tried to break the code in order to understand which part is responsible for what. The funny thing actually was, that for the first couple of hours that I was trying to break the code, I actually couldn’t. I was changing things. Replacing urlBarIcon with urkbarIconContainer, and it would still behave the same way. I was extremely surprised. I understand when it takes me a while to fix something, but it was my very first time when I actually had problems breaking the code. I have spent three days trying to fix it and I couldn’t. One of the struggles that I faced was lack of knowledge in JavaScript and React. Since the solution wasn’t coming easy on me, I started searching for similar issues.

Note to self:

Always! Always look for the related issues!

There was a related issue mentioned, which is about making the bookmarkButtonContainer clickable. What’s meaningful about this is the fact that this issue was already fixed. Cool, let’s look at the issue and the fix for it:

The next step was to find bookmarkButtonContainer in VScode and see how it was done:

Since on the merged pull request, the fix was about adding the following two lines:

I assumed that most probably the fix has something to do with them. It didn’t. I spend hours playing around with width and height. It wasn’t working.

I have spent whole three days, and I barely made any progress. I felt confused, overwhelmed and I seriously thought that I would never be able to fix it.

So I took a step back. If I can’t make the whole area clickable, let’s try to make the area around the icon clickable. After playing around with CSS for a couple of hours, I actually successfully accomplished that goal.

All I had to do was to change margins a little and add a padding for the urlbarIcon. That made that area around the icon clickable.

Okay, great. This is at least some progress, but that is not enough. I also need to make the whole extended validation certificate information be clickable. The problem is, I don’t know how. I have tried. I failed. I tried again and again. Failed a lot. Failed miserably. Next step? I reached out for help.

Which was extremely helpful! No, I haven’t fixed the issue right away. But since I have spent a couple of days working on the code, I already familiarized myself with functions, it finally made sense what I was supposed to do. It took me a couple of days more until it worked.


Pull Request

Note:                                                                                                                                                There were a couple of things that I haven’t discussed here, but it will be addressed and discussed in Release 0.2 — Part 3

What have I learned?

  • Never give up. Even when it seems that you are not capable of doing something.
  • Use all available resources. Check all regarding issues. Google.
  • Failed? Try again. Failed? Focus on something else. Try again.

by Margaret at February 21, 2018 10:53 AM

Release 0.2 — Part 1

At the begging of the semester, one of the goals that I set for myself was to contribute to an open source project in as many different ways as possible.

Luckily, for past two weeks, I was able to partially complete that goal. Therefore, I have decided to separate my second release into three parts. Each of them for a different way of contributing to the Brave browser.

Type of the Release

The first part of my second release is regarding translations.

How it was Chosen

Brave provides various ways in which you can contribute to the project:

I wanted to push myself to try different ways of contributing. But why translations?

  • I can be useful. I know Ukrainian and Russian.
  • My previous bug fix was related to the string change, which means that new string needs translation into different languages.
  • I have never done it before!

Expected Result

I guess the expected result of the translations is to be as accurate as possible.

Process & Solution

In order to do the translations, first I followed the link that was provided in the Contributing page.

Once I’ve read the instructions, I followed them step by step. Which was very easy and straightforward. For an extra information on how to create an account with Transifex and make your first translation you can read in Svitlana Galianova blog here. She did an amazing job on that blog and I find it very useful!

After completing all the above, you should get up until this point:

Next, if you will scroll below you can see a list of languages and how many strings requires a translation. In my case I was interested in Ukrainian and Russian:

There are not many untranslated strings, but that doesn’t mean that you should not do it. You can be the person who translates those last strings.

Once you hover over the language, you can see the View Resources and Translate buttons:

Once you click on the Translate button, you can look for untranslated strings:

Once you picked a string that you want to translate:


Afterwards, you can go to your profile page which will show your completed work:

Translating things is not as easy as it seems. Of course some of the strings were very easy to translate; however, others were a bit of a pain. Honestly, that was a big surprise for me. It’s my mother tongue, I thought, how hard can it be? Apparently, it can be. Working on this, made me appreciate all amazingly translated books I ever read in my life.

Overall, I certainly loved the experience and I will do my best to translate the rest of the untranslated strings!

by Margaret at February 21, 2018 07:23 AM

Marco Beltempo

R0.1.1 | Microsoft Visual Studio Code: First Contribution

Microsoft Visual Studio Code

TL;DR Contributing to Visual Studio Code Timeline

What a better way to kick off the new term by continuing right where I left off. Contributing to the open source community. This time around things are going to be a little different. Last semester we were taught the necessary skills and methods to become a successful contributor. Now it’s time to take those skills and continue to grow them with new experiences and practice.

We’re encouraged to step outside of our comfort zone and take on much larger projects/tasks. Maybe it’s that project you always found interesting but too overwhelming. Or how about that open source code editor you use day in and day out?

In this case that was me. I’ve wanted to work on Microsoft’s Visual Studio for quite a long time now.  It’s an application that I’ve been using on a daily basis for 3 years now. How cool would it be I can work on a contribution…within the contribution.

The first place I always start off with any new project is the README.

Before I began searching through the 3000+ issues I made sure to setup my development environment. The last thing you want to do is take on a new issue before you can even begin working on it. From past experiences, the setup is the most frustrating and time-consuming task.

With a well detailed, straightforward guide (How to Build and Run VSCode  Source), the VS code build process went smooth. A little too smooth…

Searching for a Bug

Once I had my dev environment setup it was time to start searching for a good first bug. I began scrolling through the unfiltered issue page to get a feel for the process.

I came across a bug related to a CSS Emmet feature. So like any new contributor, I opened with my “noob” introduction comment.  “I am a new contributor to the vs code community…”

Shortly after I received a response from  Ramya Rao, a VSCode member. Ramya had politely informed me that this bug had quite some history behind it and that a whole lot would be changing in the upcoming release. So it was best that she worked on the fix. She had also suggested taking a look at the help-wanted tag for bugs open to contributions.

I took Ramya’s advice and quickly learnt that the help-wanted tag was the best place to search for new issues. Even over the Good first bug tag.

After a short search, I committed to working on Issue#41650 – Support TOML frontmatter syntax highlighting in markdown files.

The author had suggested that “It would be great if VS Code highlighted TOML frontmatter in markdown files like it already does with YAML.”

I’ll be honest, I’ve never worked with syntax highlighting let alone heard of Hugo, Front Matter, TOML.

This sounded like the perfect challenge.

Dissecting the Bug

Luckily for me, Matt Bierner was a huge help in getting off the ground.

He had provided two possible solutions.

Reelase 0.1 Capture

Now if you know me, the moment I read “This would be the cleaner approach”, that was the only approach. You know, because it wasn’t already challenging…

To breakdown the possible solutions:

Easy Fix: Visual Code has native support for various languages such as Markdown. The markdown.tmlLanguage.json file contains a ton of rules for syntax highlighting in a Markdown file.

For example, when you create a fenced code block to highlight a specific language.
``` ruby
require 'redcarpet'
markdown ="Hello World!")
puts markdown.to_html

Displays as
Rendered code block with Ruby syntax highlighting


Cleaner Fix: Contribute directly to the TOML syntax highlighting extension, better-toml. This is VSCode’s most popular TOML syntax highlighter. The plan would be to inject a new rule which targets markdown frontmatter.

Foreign term update: Hugo, Front Matter, TOML, tmLanguage, grammar injection.

In order to fix a problem, you have to understand the problem. Considering I had zero knowledge of syntax highlighting and VSCode extensions, I knew I had some serious research to start doing.


I spent a couple days looking examining the code of syntax/ grammar extensions and the methods used to detect a syntax within various file types.

TOML (Tom’s Obvious, Minimal Language)

  • easy to read configuration file format
  • map unambiguously to a hash table
  • easy to parse into data structures in a wide variety of languages


  • Language grammars are used to assign names to document elements such as keywords, comments, strings or similar
  • syntax highlighting and to make the text editor “smart” about which context the caret is in


  • Visual Studio Code extension that supports syntax highlighting for TOML files.

Front Matter

  • allows you to keep metadata attached to an instance of a content type
  • supports JSON, YAML, and TOML

Extending Visual Studio Code

At this point, I was confused as to how the injection would tie into VS Code grammar. So I reached out for some clarification.

Realase0.1 Capture 2

To be continued…

Matt pointed me to his demo repo, vscode-fenced-code-block-grammar-injection-example. This was a great help as it highlights how an extension separate from the editor was able to inject a simple code block using regular expressions. The only issue now was figuring out how to make it work with a language that isn;t natively supported in VS code.

In a follow-up post,  I will be going more in-depth about my failed attempts and what really goes into creating a syntax highliter.

Update R0.1.2 | Injecting Front Matter Syntax Highlighting in Markdown Files

The post R0.1.1 | Microsoft Visual Studio Code: First Contribution appeared first on Marco Beltempo.

by Marco Beltempo at February 21, 2018 03:51 AM

February 20, 2018

David Humphrey

What Happens when you Contribute, revisited

I sat down to write a post about my students' experiences this term contributing to open source, and apparently I've written this before (and almost exactly a year ago to the day!) The thing about teaching is that it's cyclic, so you'll have to forgive me as I give a similar lecture here today.

I'm teaching two classes on open source development right now, two sections in an introductory course, and another two in a follow-up intermediate course. The students are just starting to get some releases submitted, and I've been going through their blogs, pull requests, videos (apparently this generation likes making videos, which is something new for me), tweets, and the like. I learn a lot from my students, and I wanted to share some of what I'm seeing.

Most of what I'm going to say is aimed at maintainers and existing open source developers; I'm talking to myself as much as anyone. Because the students go out and work on real open source bugs in all different projects, anything can and does happen. I can't easily prepare them for the responses they'll encounter when they put themselves out there on the web: I see it all.

When you work on (i.e., specialize, focus on) a few projects, and within a particular community, it's easy to get lulled into normalizing all sorts of behaviour that may or may not be the most productive way to work. However, when you participate in a lot of different projects, you start to see that there are a many different approaches, each with varying degrees of positive and negative outcomes.

I wanted to lay before you the kinds of things I've seen this month. I'm not going to link to anything or anyone in particular. Rather, I want to show you the variety of possible scenarios when someone contributes to an open source project. For the most part, these students are at a similar level (i.e., undergraduate CS) and doing similar sorts of patches: first contribution to a project of small doc/test/code fixes, ~100 or fewer lines of code.

  • ...crickets.... It's really common for PRs to just get completely ignored. Sometimes this happens because students contribute to dead or dying projects, other times the maintainers just can't be bothered. I try to intervene before this happens, but even I can't always predict how submissions will be received (I had a big PR get rejected like this recently). Looks can be deceiving, and a lot of projects look more active than they are. I deal with this by marking the content/process of a change vs. its reception/outcome.

  • "LGTM, merged". A lot of times the code is correct, the expected process has been followed, and the PR is merged as is. There isn't a lot of criticism, but there also isn't a lot of fanfare. It's likely the 100th PR this maintainer has merged in recent weeks, and it's just another day at the office. This is pretty typical. I think it's OK, but it misses the chance to further engage someone new in your community. I wish GitHub did more to signal in a PR that this is someone's first work. That said, I think most maintainers know when a new person arrives on the scene. Take a minute to welcome them, say "thank you", and if you're smart, point them at follow up bugs to fix.

  • "I don't want this change, closing". I've seen a bunch of this recently. Students are often surprised by this, because there was a bug filed, and it looked like the change/feature was wanted. However, I'm not surprised, because most projects don't triage their bugs anymore. It's becoming increasingly difficult to look at the issues in a project and know whether or not you should tackle them. I have sympathy for both sides. I'm trying to teach students to communicate in bugs before they start working. Some do; a lot feel intimidated to expose themselves until they are sure they can fix the bug, so they start with the fix before announcing their presence. Even if you ask in a bug, a lot of projects won't respond to questions, only PRs, so it's a catch-22.

  • "Thanks, but we need to do this differently". Here you have a PR that "fixes" a bug, and a maintainer that wants it done another way. I would say that this is the expected result of a PR in 95% of cases--you always need review to catch things. However, at this point there are a few scenarios that can happen, not all of them desirable:

  1. review comments in the PR lead to follow-up work by the student in order to create the desired code
  2. the maintainer sends a PR to the student's repo/branch with some changes
  3. the maintainer just does it on their own in a new commit, closes the student's PR

I see all of these happen regularly. Not every open source project is a collaborative project, and I spend a lot of time these days trying to steer students toward and away from certain communities. There's no point spending time on a project that doesn't want your involvement. The projects that do this well take a raw, inexperienced contributor and encourage them to grow, and in so doing, help to invest in the future health of the project: "if you can fix this bug, you can fix these bugs too..."

  • "This is great! While you're fixing this, can you also fix this other related bug?" This is a great way to draw contributors deeper into a project. Often it means assigning them new bugs (i.e., not adding to the current PR) and expanding their involvement in the code. I've seen this go very well a lot of times across many projects. To be honest, I don't know why more maintainers don't just assign people bugs (I do it all the time). The worst that will happen is that people will say "no," or simply ignore the request. In many cases, though, I find that people step up and enjoy the responsibility and inclusion. What you're really saying is "I think you can do this," and people need to hear that.

  • "Thank you for this fix! We've made you a collaborator". I'm aware that this approach won't work for every project (e.g., security issues). But I see many projects doing it, and it's a fascinating approach. When someone shows up and is both willing and able to contribute, why not make them part of your core group? This week I saw one of my students not only fix bugs in a big project, bug also get contrib rights and assigned other bugs to review. That's an incredible gesture of confidence and inclusion.

  • "We really appreciated your contribution, here's a thank-you". When it happens, it's nice, and I saw it happen a few times this week. It can take a few forms, for example, sending people swag. This is beyond the reach of lots of projects, since it has a real-world cost for the swag, shipping, the time of the person co-ordinating it. For projects that can't send a physical thank-you, there are other ways. For example, I see prominent people/projects in the open source world use their social media presence to draw attention to contributor work. It means a lot to have someone you respect in a project take the time to thank you publicly, or to highlight your contribution. These acts build gratitude into your community, and help to encourage people to keep going.

  • "Why don't we pair program on bugs sometime." A few senior people have reached out to students contributing patches and suggested they work together in real-time. In one case that meant having the student go into their office and meeting in real life. In a few other cases it meant using remote screen sharing apps and video conferencing. What an amazing thing to spend time helping to level-up a committed contributor, and what a sign of confidence for someone who is feeling like an imposter working with so many advanced developers.

Even though it doesn't always go smoothly, I'm still a big believer in having students work on real bugs. Every interaction with the open source community is a learning opportunity, even if all it does is teach you that you don't want to do it again. Thankfully, that's not usually what happens, and even after 15 years of this, I'm still seeing new things I can't predict.

If you're an open source dev or maintainer, I'd encourage you to try submitting some PRs to a project you've never worked on before. You'll be surprised at the hoops you have to go through (they always seem more sane on your own projects), how you feel waiting on a delayed response to your fix, and seeing how you're treated outside your home turf. To keep myself honest and aware of this, I try to contribute fixes to lots of new projects. It's very humbling. Thankfully, if you've lost touch with what it's like to be new, just go fix a bug in a project you don't know using a technology you've never seen before. You'll learn a lot, not least about yourself, and it might affect how you respond to people in your own projects.

Anyway, I'm sure I'll forget I've written this post again and rewrite it next year. Until then.

by David Humphrey at February 20, 2018 09:11 PM

Svitlana Galianova

Release 0.2: How I fixed my issue

After the battle with my antivirus for a right to run locally compiled version of Visual Studio Code the most fun part started: fixing the issue.

It is always hard to start working in a new area of code or on something you have not done before. So it all starts with the research. My issue contained a few code pointers, but it was also about 1 year old, so those code pointers where only partly useful.

I took a look at the one of them, but that line didn't even exist at this point. God bless people who write comments! It was easy to identify that part of the code that was originally pointed out was this one:

It's an actual "Collapse All" functionality, I will be using in future. To find another code pointer I had to use good old git blame, but as I found out where it was pointing, I could not figure out why that piece of code was important (and I still can't, so maybe that is a reason why my pull request is Work In Progress and is not merged).

It is crazy how much code I got familiar with in "debug/debug console" while trying to find where the issue was supposed to get fixed. The first piece of code that popped-up was located here and looked like the place where the "neighbor" button "Clear All" was initialized:

Spoiler: wrong place... As I was trying to mimic "Clear All" button initialization, I got a better idea: why not to mimic the actual class, since those two are different. That's exactly what I did:

It was a good idea, as I found out later.

Still... Something was missing button did not magically appear on the screen. So I found another place where "Clear All" button was added to the Debug Console. I decided to try to add my button:

And after that I finally saw my "button", it was an empty placeholder without an icon! It felt like a real miracle. So it was just a matter of finding the right icon and CSS classes at this point.

And finally I got exactly what I wanted:

Even in both light and dark color schemes:

It took quite a long time to get exactly to the place of a change, but as soon as I found out where I need to make changes, fixing this issue become a pleasure.

I have got a response in my pull request asking to remove button from the title area and add it to context menu. So after all I had to go with the original idea I had:

So here is a gif of what vscode community actually wanted:

Now it is just a matter of time for my PR to be merged!

by svitlana.galianova ( at February 20, 2018 04:21 PM

Vimal Raghubir

My first open source project

My first open source project is a Phone number parser that integrates with Google libphonenumber library in order to take in phone numbers and parse them. The name of the project is PhoneNumberAPI and how it works is by taking in either a file or string containing phone numbers, and parses it. The 2 endpoints that the API is built with is a GET request that allows a user to pass in a string for parsing, and a POST request that allows a user to upload a file.

The README file in the repository explains exactly how to set up this API and test both endpoints, however I will summarize it here. You need to have npm and node installed on your computer prior to downloading/cloning the repository. After this you should also download an application called Postman that will allow you to test the API endpoints. The pictures in the README carefully details how to test the endpoints so I won’t go into that part here. And lastly, to run tests on the API simply type in npm test in a console window.

My process for doing this assignment involved refreshing my memory on how Node.js and Express.js works. I have prior experience with these technologies, so I had to look back at the project I did before and searching up some basic tutorials for setting up an API in these languages. It didn’t take long for me to remember how to build the API, but the actual coding and debugging is what took most of the time.

I used Node.js, Express.js, Multer, chai, and pdf2json as the tools in this project. I decided on using Node.js and Express.js for building the API simply because I built an API before in these languages and they are some of the best to perform this action in general. I ended up using multer for the file parsing since after testing many different other file parsers, this one seemed to do the job most effectively. I decided on using chai since I wasn’t very familiar with testing languages in general and after following a few tutorials, chai worked fine so I decided to settle with it. Pdf2json was chosen for exactly what the name says it does because of a similiar reason to multer in that it most effectively converted pdf formats to json for parsing.

The thing I found most challenging about programming this API, was the debugging. I have found debugging in JavaScript to be far more difficult than debugging in languages such as Java, C++, and C simply because of these languages have a proper IDE like Visual Studio, while I don’t have one for JavaScript. I found myself doing a lot of console.log statements to print out variables such as res or res.body to figure out what was being stored in the result parameter. This was definitely a brute force way to debugging and I certainly need to explore IDEs and other ways of debugging JavaScript in the future.

I found maintaining my code to be slightly easier than contributing to other people’s code. The problem that I faced when trying to contribute to other people’s code is that there computer may have different preferences or different versions of npm or node that conflicted with my version. I would have to update some packages and dependencies in order to ensure that their project runs on my laptop before contributing to the code. This may be a minor problem but comparing it to maintaining my code, maintaining my code is more preferential for me.

I learned a lot about the many different solutions that can be had to the same problem. I noticed in a lot of my peers’ code that they used various other libraries to achieve the same task as I did. For example other students used jest instead of chai and some used body-parser instead of multer. This really opened my eyes to the fact that there are many different solutions to a problem in software development, and that although a solution works it doesn’t mean its the best. So far this project has thought me this lesson which a lot of my other courses in this program have focused heavily on reaching the one solution to a problem.

I really want to learn about other ways to contribute to major open source projects to not only test myself, but also feel like I am making an impact in the world of software development. I am very interested in DevOps tools such as kubernetes and openshift, and I really do looking forward to hopefully contributing to their repositories in the future releases if its possible.

by Vimal Raghubir at February 20, 2018 03:32 PM

Geoffrey Wu

SPO 600 - Lab 3

In Lab 3, I'll be looking at Assembler and Assembly Language. For this lab, I will write a program that prints a message and its loop count for each iteration - in Assembly Language.

Here's the expected output:
Loop: 0
Loop: 1
Loop: 2
Loop: 3
Loop: 4
Loop: 5
Loop: 6
Loop: 7
Loop: 8
Loop: 9

Looks quite simple, isn't it? Well, in C that would get the job done:

#include <stdio.h>

int main(){
for(int i = 0; i < 10; i++){
printf("Loop: %d\n", i);
return 0;

But in Assembly Language, it is much more complicated. In fact, you actually have to manually convert the number into ASCII, concatenate it into the string, and then print it out:

.globl _start

start = 0
max = 10

mov $start,%r15

mov %r15,%r14
add $48,%r14
mov %r14b,msg+6
movq $len,%rdx
movq $msg,%rsi

mov $1,%rdi
mov $1,%rax

inc %r15
cmp $max,%r15
jne loop

mov $0,%rdi
mov $60,%rax

.section .data
msg: .ascii "Loop: \n"
.set len , . - msg

The next part of this lab can be quite tricky, if not confusing - I have to print 0 to 30 (with leading zeros), like this:

Loop: 00
Loop: 01
Loop: 02
Loop: 03
Loop: 04
Loop: 05
Loop: 29
Loop: 30

Once again, a simple job in high-level programming languages like C, but not in Assembly Language. To print a double-digit number in Assembly, I will have to do some math first - more specifically, division. In x86_64 assembly, idiv takes one operand, but it uses the value stored in rax as dividend. The quotient and remainder is stored in rax and rdx, respectively. 

After doing all that math, all I have to do is to concatenate the 2 digits I extracted into the string. 

Next, I have to write the same program for the aarch64 architecture. The logic is pretty much the same, but in aarch64 architecture I have to use msub instead.

msub takes four operands and does a multiply and subtract operation. This is useful for calculating the remainder of an integer division, for example:

msub r0,r1,r2,r3 

means "load r0 with r3-(r1*r2)".


Overall my experience with assembler is positive. Although it is so low-level I can't even print a number out without converting it ASCII by myself, I do found programming in Assembly Language very amusing. On a side note, after writing programs in Assembly Language, I finally understand why C was a high-level programming language in the 1980s.

Regarding x86_64 and aarch64 assembler, I personally doesn't found too much differences between them, only in aarch64, I don't have to put a percentage and dollar sign before the registers and Immediate values, respectively like x86_64 did - which makes my life a bit easier.

On the other hand, instructions in x86_64 are read from left to right, while in aarch64 some instructions are read from left to right (e.g. ldr, str and strb), some instructions are read from right to left (e.g. add, mov and cmp). Since I have been reading things from left to right throughout my entire life, instructions in aarch64 can be quite difficult to read. (I know, Classical Chinese are read from right to left, but by the time I am learning Chinese, it is already read from left to right.)

In general, I am fine with writing programs on either architecture.

If anyone is interested in the source code of programs I wrote, you can find it at here:

by Wu Geoffrey ( at February 20, 2018 07:40 AM

Aliaksandr Ushakou

Researching and Trying to Fix a Bug in VS Code

If we want to fix a bug in VS Code or any other open source project, we need to find a bug first. There are currently more than 4000 opened issues in the VS Code GitHub repo, when I am writing this post. It could seem easy to pick an issue when you have so many options. However, it is even easier to get the choice overload or to experience the paradox of choice. So, I decided to look for an issue that seems not very complex or unclear and that I can reproduce on my system.

The first issue that I considered was #43302 – “Opening .bat file in VSCode via context menu in windows explorer tries to execute it”. So, I created a test.bat file and tried to open it in VS Code via context menu in windows explorer, and VS Code just opened the .bat file for editing, as it should be. It means that I cannot reproduce this issue on my system for some reason, so I need to move on and search for another issue.

Then, I looked through a bunch of issues and I divided them into categories such as “can’t reproduce”, “I think it is Linux only or MacOS only issue (btw I’m currently on Windows)”, “too complex”, “meh”, and “might be what I need”.

By the way, the “might be what I need” category is the rarest, but I think that I found one issue that I might successfully tackle.

And that issue is #43465 – “Tabbar shadow glitch when minimap on the left side”.

First, let’s reproduce this bug. I want to reproduce it in a development version of VS Code. I have forked and cloned VS Code already, but I think it might be outdated because this project is being developed nonstop, even on weekends. In order to update my local repo, I use  git pull upstream master , while staying on the master branch.

Note: If you get the error that ‘upstream’ does not appear to be a git repository, it means that you need to configure a remote for your fork. To do so, execute the following command:
git remote add upstream

Now, we can build and run a development version of VS Code by using
 yarn run watch  following by  .\scripts\code.bat  for Windows or  ./scripts/  for Linux/OS X.

In order to understand what we need to do for reproducing the bug, let’s check the description of the issue.
It says: “Go to Settings and change editor.minimap.side setting to the left. Then you see that there is no shadow at the right side under tabbar (where minimap used to be)”.

If we take a look at VS Code before making any changes, everything seems perfect:

Then, let’s go to the settings and change editor.minimap.side to the “left”:

If we take a look at VS Code now, we can see that there is no shadow at the right side under tab bar, where minimap used to be:

It is not a very critical issue, but it can distract users from writing their “Hello, World!”.

Now, let’s try to locate the code related to the problem. First, run the  Developer: Toggle Developer Tools  command from the Command Palette.

The Chrome Developer Tools looks like this:

Then, we need to locate the element related to the shadow under tab bar. And here it is:
As we can see the width of the “scroll-decoration” is smaller than it should be.
So, I set a break on attribute modification to see what’s going on when I scale the window up or down. And the  fastDomNode.ts  file pops up:
After looking through this file, I think that it is not what I need, so I look at the Call Stack and find a very interesting file called  scrollDecoration.ts :
After clicking on it, render() function pops up:
The div element that I found earlier has a class “scroll-decoration” and the file that I just opened is called scrollDecoration.ts, so looks like it is worthwhile to look through this file.

After skimming this file I found a very interesting function called _updateWidth():
And the most interesting line is
 let newWidth = layoutInfo.width - layoutInfo.minimapWidth; .

After exploring  layoutInfo  object, I found  verticalScrollbarWidth , that we can use instead of  minimapWidth .

Ok, I think I might have found what needs to be fixed, so let’s try to fix it.

First, we need to create a branch for a fix by using  git checkout -b fix-43465 .

Then, we can edit the  scrollDecoration.ts  file, while  yarn run watch  is running.

That’s what I’ve done:

Ok, lets check if it fixes the issue. Open up a development version of VS Code again and see what’s going on:

Yeah! It is fixed! I guess..

Let’s run the unit tests. To do so, execute  scripts\test  on Windows or  ./scripts/  on Linux/OS X.

No errors!
Well, I’ve changed only one line of code…

Anyway, that is all! I think the issue #43465 is fixed!

Stay warm! And check out this walkthrough!

by aushakou at February 20, 2018 04:04 AM

Qiliang Chen

Debugging an Open Source API review

In the past several weeks, I've learned to build up an web api to retrieve phone number from string by using GET and POST. I've also learned to solve the issues for other students web api. I've shared the build web server experience in another blog page:

In this blog, I'm going to share experience about solving other project issues.

Briefly process:

1. Read README file.
2. Build dependencies. (Java environment, node.js, etc)
3. Fork project to own Github, then download project (download package or git clone url)
4. Compile and run project.
5. Test if issues exist.
6. Find the relative part and fix.
7. Upload the fixed project to own Github.
8. Pull project to original owner.

Some Git commands:

1. Clone resource to local: git clone url            
2. Check branch: git branch
3. Change branch: git checkout -b name
4. Check log: git log    or   git show 
5. Change stage: git add
6. Get update resource from origin: git pull origin
7. Initial git: git init
8. Upload project: git push url

Build VS Contribute:

Compare to building project, I feel contribute to project is much hard to start. To contribute other project, I need to read the code written by other. I need to understand the code structure. Cause programmers have different habits and style for coding, I need to get used for it. But when I build project by myself, I understand all code I write. This make me feel free to code.

But after I get used to it, I feel contributing other project is more funny. First, I can learn from other work. Even sometime I think the programmer write not good codes, but when I understand more of his code, I will change my mind. His code is better than I thought. This gives me idea so that I could do better next time in my code.

Secondly, I can find interesting project from others. Open source world have a lot of interesting ideas. I can borrow those ideas and contribute my ideas. When more programmers contribute their ideas, the project will be much more perfect. 

Third, I can save much time when working on a huge project. I don't need to make wheels for cars by myself. I can combine wheel made by other. Working on other project is same idea of making a car. I can get element from other. That will save a lot of time to make a project. Most of the time, open source world have many good existed products. Those products are much better than that created by myself. 

by Chan Kignor ( at February 20, 2018 03:46 AM

Hongcheng Zhang

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.


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.







by hongcheng1993 at February 20, 2018 02:11 AM

February 19, 2018

Patrick Godbout

Introduction Post

Introduction Post

Hello to all my DPS909 classmates who might end up reading this. My name is Patrick, I am a student in the BSD program at Seneca College, and I am participating in the DPS909 class this 2018 Winter semester. 

In terms of additional information that might become useful for cooperation, I speak English and French fluently, and the bulk of my programming experience is in Java and C++. If you would like to collaborate for the assignments, let me know either in person, or on this blog. We can communicate through Discord (my preference), or any platform you use that is easy for me to use as well, like the class Slack chat.

Thank you, and good luck to everyone for this current semester!


by Patrick G ( at February 19, 2018 02:09 PM

Research Study: MuseScore

As part of the learning curve of Open Source Development, it is good to browse and study further existing projects for inspiration, information, ideas and more. After some research on my part, I have found an Open Source project which interests me and I will share it with you using this post.


The name of the project is as shown in the post title; MuseScore. It is an Open Source project allowing professional music notation through its software developed in C++. The software itself offers many features, but all revolve around creating and playing sheet music from a wide variety of musical instruments. 

The MuseScore project started around 2008, and quickly became one of the best platforms that allowed powerful and easy-to-use music notation to create high-quality sheet music. You can find more information on this with the following links:

Technical Information

Language: English
Open Issues: Currently 13 Active Pull Requests, 0 Active Issues.
Contributors: 114

by Patrick G ( at February 19, 2018 02:09 PM

Introduction with VSCode & Extensions

After a few weeks of familiarity with Open Source Development topics, as well as some experience handling my own project through Open Source Development tools, we are now being introduced to VSCode, a platform tailored for Open Source Development in general. Here's a few comments and observations made after fiddling around with VSCode for the first time;

1- Which extensions did you install? Why did you choose them? What do they do?

I installed C/C++ and Java language support through two extensions (one for each), because those are my two most familiar languages and therefore the extensions I see myself using the most. So far, I know they can debug Java and C++ projects I have, which is what I expected.

Secondly, I installed two additional extensions that help towards developing in less direct ways. One of them is the "One Dark Pro" dark theme for VSCode, and the other one is VSCode Great Icons. Both of these extensions help me visualize files and projects in general more accurately, either by not breaking my eyes from a white theme or by being able to notice certain files by icon rather than trying to read names.

Lastly, I installed Shader Languages Support for VSCode since I am currently enrolled in a Game Engine Techniques class in which I started coding shader programs, therefore justifying the addition of this functionality. 

2- Which settings did you change? Why?

I looked through the commonly used settings, as well as Editor settings as I thought these would be the ones that impact my programming the most. I found out that a lot of settings are already turned on that allow "faster" programming. I like indenting my code clearly and I feel like these settings will help that. I've also learned that I can change font size through those settings, allowing me to use it if I am programming in a group setting where my code would be hooked up to a big screen. These kinds of small functionalities are good to know about, and generally make you feel more familiar with environments, so I am glad to have scrolled through them.

3- Did you have any issues trying to get VSCode built from source?

Building and testing the application generated a lot of minor issues that took a bit of time to fix and a couple of major ones that took longer to fix. Among those, a problem with line-endings prevented the script command from running VSCode from within my cloned repository. With the help of Git though, I was able to fix it using a couple of commands. Additionally, among smaller problems, I followed installation instructions for yarn and created an environment variable for Python that wasn't in the right location which caused more errors, but that was fixed when I moved it to the correct location. I also had a couple of errors where VSCode tried to find some installations that were not placed on the C drive by default, therefore it couldn't find those. I had to modify some paths in settings files to fix these kinds of problems. 

4- What did you find out about the related technologies used by VSCode? For example, what are TypeScript and Electron?

TypeScript is a set of libraries that complement javascript, mostly used for application development. This can include tools for browser applications, on any host, or any OS. 

Electron is a supporting framework for desktop application development that use tools like JavaScript, HTML and/or CSS. It also incorporates utilities based on JavaScript that take care of compatibility issues, effectively making developing for multiple platforms much easier.

by Patrick G ( at February 19, 2018 02:09 PM

DPS909 Release 01: First Open Source Project

Our first open source project was separated into two parts; the first being to create a web service in any language that could find phone numbers either from a string entered in a URL, or by sending in a file containing phone numbers. The phone numbers found would then be returned in JSON format back to the user. These following questions/answers will go into more detail:

1. What did you build? Discuss your web service and include links so people can find it.

I chose to program my web service using Java. The platform I chose was Eclipse IDE, Oxygen 2 version to be more precise. It was my first time making a web service in Java so I had to do a bit of research to make sure I knew what I was doing. The web service was tested from Eclipse since the IDE provides an internal web browser viewer from which I can debug and view the site. The server was downloaded via external dependencies and set up on my laptop, so the website will not run unless my laptop and Eclipse is opened, as well as having started the server. Luckily, as part of the second part of this assignment's release, my web service was put on Heroku, so it can run without my laptop needing to be on. Here is the link:

2. What was your process for this assignment?

The preparation for the assignment was important. I researched what needed to be done to install a server and essentially build the web service, and I found out about Apache Tomcat servers working well with Eclipse IDE & Java programming in particular. I followed a few tutorials before I found the Apache Tomcat but none of the other ones worked. When I finally found the one that worked, I started working from there and testing got a lot easier, especially because of Eclipse's internal web browser for testing. From there, I figured out which libraries I would need for the project's specs, and I was able to build the application to build those specs.

3. Which language, dependencies, and tools did you use? Why did you choose them?

The language I chose was Java, dependencies included google's libphonenumber library (Java version), mockito libraries for testing, JUnit libraries for testing, Hamcrest Core library, Spring Mock and Spring Core for testing, Commons Logging and Commons Collections libraries for added functionality, Log4j and LogKit libraries, Avalon Framework library, Servlet API library, Jackson Core, Jackson Databind and Jackson Annotations libraries, JSON library, and finally, Javax Servlet API library. All of these libraries were included to have the proper functionality which would allow me to meet the required specs.

4. What did you find challenging about your work?

Setting up the environment was by far the most difficult part. Since I was using Google's libphonenumber library to retrieve the numbers, the actual functionality of the code was very easy to deal with. Having the server running and the messages being sent back and forth like they were supposed to is what demanded a lot of time for this project.

5. Compare the experience of being a maintainer to that of contributing to someone else's project. Which did you enjoy more? Why?

I enjoyed being able to contribute to other people's projects, since it forced me to look into new things I hadn't done before and try to fix them. Since Open Source is a lot about being thrown out of your comfort zone, I think this aspect of the project did that for me, which was the most worthwhile element so far.

6. What did you learn as you did this work?

I learned to get better at using GitHub and applying version control. I understand the process a lot better than I did in the past, even though there is still a lot to learn. In terms of programming, I learned how important documentation is in these kinds of projects as that's what really helped me run other people's projects correctly, which I find saved a lot of time.

7. What do you still want to learn more about in subsequent releases?

I find that anything that showcases the best practices in Open Source Development would be worth learning about from now on. Apart from that, I am a solid believer that practice makes perfect, so anything that is similar yet different from this project would contribute to make us better at Open Source Development.

by Patrick G ( at February 19, 2018 02:09 PM

Margaryta Chepiga

How to find a bug?

So you decided to contribute to an open source project!

Maybe you even decided to which project you want to contribute! That’s amazing, but what do you do next?

Next step is to choose a bug, find an issue that you can fix.

Usually, once I get to this point I go through the following:

Denial Stage

  • There are too many bugs. I’m overwhelmed & confused. I can’t do it, I quit.
  • There are no bugs to fix. I can’t do it, I quit.
  • There are just enough amount of bugs, but all of them look complicated and scary. I won’t be able to fix them. I can’t do it, I quit.

You name it, most probably I had the exact same thought of why I can’t do it.

Based on my own experience, the biggest struggle for inexperienced or little experienced open course contributors (and fresh developers in general I guess) is finding and choosing a right bug.

I am expected to do at least one pull request per two weeks. Therefore, I have to master my skills in bug finding area. I am still learning, both from practicing myself and looking how other people doing it. Today, I want to share what I have learned so far.

Please note:

I will talk about how to find a bug in a specific project, as an example I will use Brave browser (how to find an open source project to work on, you can read in my blog here).

After I hit the Denial Stage, I just take a deep breath and moving forward. The key here is to take baby steps.

How & Where to start

Once I have decided to work on Brave, I directly went to their contributions page. I find this to be very important and useful, so highly recommended!

Usually, on contributions page, there are listed different ways how you can contribute to the project. Brave community did an amazing job on the contribution guide! Useful includes all important info yet short!

If we are talking specifically about the code contributions, most of the projects have something similar to what Brave has:


I think labels are a great way to find a bug! For the very first bug in the project, I prefer to pick good first bugs. However, there is something you should know. Good first bugs are often not good first bugs, curious why? Read this amazing post by David Humphrey.

What Other Labels and Where to Find Them

To see a list of labels,

So you can see a list of labels, where for each you can see the number of open issues. I think this is very convenient.

So if not good first bug, what other labels can you look for?

Brave has the following, and I am pretty sure that other projects have something similar:

For the priority ones, choose the lowest priorities levels. Usually the higher priority of the issue, the more urgent it is and the harder they can be.

Old Bugs — Another way

This way was suggested by my professor David Humphrey after I shared a story of mine in class. Once I was working on the bug and I needed to go to the Issues page to look for something I needed. Accidentally, I found this amazing bug, which was just opened like two hours ago. It was sweet and simple, I totally knew how to do it. Therefore, I left a message asking if I can work on it. After which, I continued working on my current bug. A couple of hours later the pull request for that bug was already send. Which is great for the project, but what if I would already start working on it, spend my time, maybe even fix it to only see how someone else send a pull request? The solution is to look for old bugs. They exist. They need to be fixed. No one is going to take it from you.

Reach Out to the Community

Another thing that I learned from David Humphrey, and which is probably the hardest way for me to look for bugs is reaching out to the community.

I don’t know about other people, but I would always reject reaching out to the community. I feel anxious, stressed. I am overthinking every little thing. I don’t know what to write, and I truly believe that something bad is going to happen if I actually gonna do it.

And then… I just go and do it.


  • Join the community on their Slack channel, or in case of Brave is Discord.
  • Introduce yourself and ask for a suggestion


No one bitten me. I didn’t feel stupid as I expected myself to feel. None of my fears actually happened! Instead, I was warmly welcomed to the community, received a suggestion and felt amazing after overcoming my fear!

Not every community will be as welcoming, helpful and responsive as Brave’s is. But don’t take it personally. Don’t give up. Give it a shot first. Try. You can only fail if you don’t take any actions. If you try, regardless of the outcome, you win. You win by trying something new, by overcoming yourself, by learning from that experience that you get.

by Margaret at February 19, 2018 07:16 AM

Owen Mak

Mid Boss: Servlet deployment

My latest adventure into open source led me to create my first very own micro web service using google’s libphonenumber repository.  The goal was to create an open source API that can process Http requests and respond by listing all valid phone numbers in JSON format.  The specifications to the API is posted here, and the source code for my project is hosted here on Git hub.

To solve the problem posted by the specs above, I created a Java servlet called ParsePNum. It is a java class that extends the HttpServlet class, and its body contains  doGet() and doPost methods which handles the GET and POST requests mapped to a specific URL path.  As for testing, I used the JUnit framework and mockito to mockup servlet requests for tests.  Lastly, I created a jsp (Java servlet page) file that acted as the user presentation to my API.  Here’s a screenshot of the jsp file:


The textfield under GET accepts Canadian phone number(s), and the file upload under POST will find all phone numbers inside a text file.  The API uses the findnumber() method in google’s libphonenumber library to search for phone numbers.  As such, it will only work on phone numbers delimited by spaces, and does not work for stings such as “4162974913abcd4162974914”.

This assignment itself was intimidating at first, as I was overwhelmed not only the task to be accomplished, but by the number of possible ways to complete the task.  The google library supported many languages and the first step was to decide which language to build the API upon.  I browsed the phone number libraries of PHP, Java and C#, as they were the languages I was familiar with.  The amount of choices paralyzed me for the first two days leaving me out of my comfort zone as I did not  sense the path needed to build the API.  Fortunately, google made a few demos for their library to show users how to use it.  After testing and reading the code for the Java version of the demo, I settled on using Java for the API and developed a rough idea of what needed to be done.

Having decided to use Java’s servlet framework to complete the assignment, I had to decide upon the software tools needed to build the servlet.  I caught another lucky break when a fellow classmate, Patrick Godbout, linked me a tutorial with a step by step guide to create a basic servlet.  To build the servlet, I needed the Java EE version of Eclipse, and an Apache Tomcat server.  With both of these tools, I was able to code and launch my servlet locally.  With source code from google’s demo, I was able to create the skeleton version of my servlet, which met the requirements from the specs.

To write my test cases, I settled on using Mockito and JUnit to mock up HttpServlet requests and responses.  With mockito, I was able to write test cases for the doGet() of the servlet without problems.  However, I ran into trouble for the doPost(), as I could not fake a request containing a file upload.  I left testing the doPost() as an issue for other contributors, who were later able to resolve the issues for me using the servlet’s FileUpload class.

During class, my professor mentioned a software tool called Postman briefly, and indicated this may be a good tool for testing the API.  With Postman, I can customize a HTTP request, and send it to a specified URL without the use of a browser.  Additionally, I can write a collection of test cases that tests the response of web pages after it processes the requests.  Once again, I installed Postman, tried out the tutorial, and was soon writing test cases for Patrick’s version of the API as one of the two issues I had to work on.  Below is a screenshot of the requests I customized and along with the test cases used to test Patrick’s API:


The collection of tests were then exported as a JSON file and added to the upstream repository as a pull request.

For the second issue I had to work on, I decided to deploy Patrick’s API using Heroku onto the web.  Heroku is a cloud application platform which can launch web applications onto their servers.  To get a basic idea on how this worked, I followed this tutorial and launched a basic application locally at first.  Here’s a screenshot of the “hello world” app for heroku:


After successfully deploying the “hello world” application onto the web, I worked towards deploying a servlet instead.  Fortunately, there was another detailed guide written for launching servlet instead.  With the help of the guide, I was able to deploy Patrick’s API onto the web. Below is a screenshot of the finished deployment:herokuPatrickAPI

The name peaceful-fortress-77561 was randomly assigned by heroku, and the web application is under’s domain.  In the near future, I would like to deploy my own web application using heroku as well.

Overall, this assignment was very enjoyable for myself, as it exposed me to new software tools such as Postman and Heroku.  In addition, I gained some experience using Travis CI as well, since a contributor helped setup my API for Travis.  For subsequent releases, I would like to learn more about OCR (Optical Character Recognition), and apply it to my API.

by Owen Mak at February 19, 2018 04:05 AM

February 18, 2018

Abdul Kabia

VSCode & The Spaces!

Who would win?: Visual Studio Code vs. File path spaces? If your answer was Visual Studio Code, you were wrong! Or if you were just confused by the question, let me explain. So over the course of the past two weeks, I was tasked with setting up the source code for VSCode and slowly work …

Continue reading VSCode & The Spaces!

by akkabia at February 18, 2018 07:42 PM

February 17, 2018

Jeffrey Espiritu

Lab 3 – Assembler Lab


In the previous lab, Lab 2, we compiled a simple Hello World application written in C, with various GCC compiler options on both the x86_64 and aarch64 architectures. The options we used allowed you to control the level of optimizations applied to the code, add debugging information, and statically link to libraries. We used objdump to display the disassembly of the executables and compared and constrasted the effects of switching on and off various compiler options.

Assembly, really?

Assembly language is definitely not easy to learn, especially if you’re used to writing programs in Java or Javascript. It is a low-level language because you have to deal directly with memory addresses, stack pointers, registers, syscalls, the data stack, and other fun things you never had to deal with in high-level languages like C, Java or Javascript. So why learn assembly if you could easily write an equivalent program in a high-level language like C or Java? There are two answers: fine grain control and embedded systems with limited memory. With assembly, you can make fine-tune adjustments to maximize performance that compilers are not capable of doing. And for the second reason, there are systems that are limited in memory and the only option is to use assembly which requires fewer resources to build and run.

Assembler Lab

In order to do Lab 3, we had to learn the basics of assembly language and make use of a basic list of instructions that would help us complete the lab. The main objective of the lab is write a program in assembly that prints out a message and the loop counter for each loop iteration.

Expected Output:

Loop: 0
Loop: 1
Loop: 2
Loop: 3
Loop: 4
Loop: 5
Loop: 6
Loop: 7
Loop: 8
Loop: 9

This seems like a fairly simple task. Let’s see what it looks like in C.


#include <unistd.h>
#include <sys/syscall.h>

int main() {
    int x;
    char msg[8+1] = "Loop:  \n";

    for (x = 0; x < 10; x++) {
        msg[6] = x + '0';

Okay, so how does the program look in assembly? I've added a lot of comments to help clarify what's happening on each line.


.globl    _start

start = 0                       /* starting value for the loop index; note that this is a symbol (constant), not a variable */
max = 10                        /* loop exits when the index hits this number (loop condition is i<max) */

        mov     $start,%r15         /* loop index */

        mov     %r15,%r14           /* copy loop index */
        add     $48,%r14            /* x = x + 48 */
        mov     %r14b,msg+6         /* msg[6] = x */

        movq    $len,%rdx           /* rdx = length of string */
        movq    $msg,%rsi           /* rsi = address of string */
        movq    $1,%rdi             /* standard output */
        movq    $1,%rax
        syscall                     /* write(1, msg, length) */

        inc     %r15                /* increment index */
        cmp     $max,%r15           /* see if we're done */
        jne     loop                /* loop if we're not */

        mov     $0,%rdi             /* exit status */
        mov     $60,%rax            /* syscall sys_exit */

.section .data
msg:    .ascii  "Loop:  \n"
len = . - msg

Note: You can try to cheat and compile the C program and use the disassembly output to write your assembly program, but the disassembly output will no doubt be difficult to read and understand.

If you don't have a strong background in C, you might have a harder time working in assembly because you have to deal with memory addresses and stack pointers. So if you're new to assembly then I would recommend searching up tutorials or articles that cover the basics of the language. Try to find the answers to basic questions like: How do I add, subtract, or multiply numbers? How do I print a string? How do I print a substring? How do I modify parts of a string? How do you compare values? How do you use loops? Once you have the basics down, you can start diving deeper into the language to build more complex programs.

I recommend the following links that cover the basics of assembly on the x86_64 platform.

The next part of the lab is a bit more tricky. This time you have print the loop counter from 0 to 30 and requires a little bit more work and some math. Now, you have to deal with numbers with two digits so you have to somehow extract the ones digit and the tens digit and store them in the string.

Loop:  0
Loop:  1
Loop:  2
Loop:  3
Loop:  4
Loop: 27
Loop: 28
Loop: 29
Loop: 30

So how do you do this? Using integer and modulus division.

idiv takes one operand, the divisor, but uses the dividend stored in rax. The quotient is stored in rax and the remainder is stored in rdx.

For example, if you had the number 25 and you wanted to extract the ones and tens digit, you can do the following:

mov $0, %rdx    /* always clear rdx to 0 for division */
mov $25, %rax   /* rax = 25 */
mov $10, %rbx   /* rbx = 10 */
idiv %rbx       /* 25 / 10, where rax = quotient and rdx = remainder */

Then all you had to do was modify parts of the string with the 2 digits that we extracted.

The lab isn’t done yet. Once you write the program for the x86_64 architecture, you had to write the same program for the AArch64 architecture. The major difference between them was that on AArch64, you had to use the MSUB instruction to obtain the remainder of the integer division calculation.

MSUB takes four operands and does a multiply and subtract operation on them. This is useful for calculating the remainder of an integer division.

msub r0,r1,r2,r3 // load r0 with r3-(r1*r2)

Source files if you’re interested:
Lab 3 x86_64 Assembly Source File
Lab 3 AArch64 Assembly Source File

by jespiritutech at February 17, 2018 06:51 PM

Connor Ngo

Logic Gate Project - Inline result vs conditional result

While implementing full and half subtractors into my logic gate mod I realized that using if/else statements was not the best approach. I should rather inline the actual boolean algebra into the result instead of checking for each combination.

Previously my method was:

//Half Subtractor
if(!in[0] && in[1])
SetPEPowered(out[0], 1);
SetPEPowered(out[1], 0);
else(in[0] && !in[1])
SetPEPowered(out[0], 1);
SetPEPowered(out[1], 1);
SetPEPowered(out[0], 0);
SetPEPowered(out[1], 0);

The above way is bad and it can be easily reduced down to simply:

SetPEPowered(out[0], in[0] ^ in[1]);

//Borrow out
SetPEPowered(out[1], !in[0] && in[1]);

(The ^ operator is XOR)

Here's the website that help set me straight.


February 17, 2018 05:13 AM

February 16, 2018

Sean Prashad

Lights, Camera, Action!

Stickers are tattoos of the future…

A new twist on fixing bugs

With our second release around the corner, summer internship interviews happening left and right and not to mention a Capstone project that’s causing a ton of headaches, I’ve been busy to say the least. But I’ve recently turned “busy” into a new kind of busy! Previously, I had taken to blog posts to express, document and portray my OSS work but now, I’m looking to live-stream on YouTube!

YouTube: A new platform

Live-streaming has been something I wanted to try for sometime after being introduced to The Joy of Coding hosted by Mozillian Mike Conley. I wanted to give it a shot as another way of expressing my thoughts and more importantly, practice “speaking out loud” for technical coding interviews (something which I’m not good at under pressure). I think it’s a win-win situation and it’s turned out great so far — see for yourself:

The overall reception as amazing! I received multiple retweets, comments and likes as well as recognition from Kumar McMillan and @diox, both accomplished AMO engineers:

Mathieu enjoyed watching me pick apart the issue!

In addition, I was very happy to see a recent friend, Caitlin Neiman— Community Manager at Mozilla, reach out to say nice work! Caitlin she had vouched for me back in my previous blog post, Revision 0.1: New Projects:

Mozilla swag?! COUNT ME IN!

With such a warm welcome and a deep enjoyment of live-streaming, I think I found how I would like to leave behind my mark on the web! With all that being said, let’s quickly dive into how I was able to setup live-streaming from my Macbook and then into my bugs.

Stream Your Thoughts

Mike had referred me to a program called OBS (Open Broadcaster Software) which was super simply to install: brew cask install obs using Homebrew Cask. Within a few minutes, I had OBS up and running:


Instead of writing out an entire guide on how to use OBS, I would love to take this opportunity to reference a great blog post by Drew Tyler! He clearly and concisely outlined the steps needed to setup your own YouTube stream. Feel free to reach out to me on Twitter if you have any further questions!


With OBS setup, I wanted to break down my thought process for my bug, showing how I was going to tackle things:

After exploring what was given to me, I made changes in a variety of source files and ended up with TravisCI breaking. After scratching my head for a bit, I left a comment on my PR asking for feedback to keep me going in the right direction.

With a response from Mathieu in the morning, I set out with some more hints that helped me progress some more:

After waiting on TravisCI to build my latest modifications, I had a beautiful purple “Merged” symbol and another contribution under my belt — woohoo!


I really enjoyed live-streaming my work and challenged my fellow peers to do so, but I definitely recognize that not everyone will be comfortable using this method — which is perfectly okay! Overall, I think that having my content on YouTube will expose my work to a larger user base, even if it’s only one speck out of billions of videos. It may also be easier for audiences to consume the audio passively as well as allowing me to link relevant material — like my website :)

A lot of views on my website after my first live-stream!

If you’re interested in following along with my journey, consider subscribing to my YouTube channel to stay up-to-date with what I’m currently doing! I also plan to throw up some videos on how to document OSS contributions on your resume using SharedLatex, prepare for technical and behavioral interviews and a few more topics that will help individuals in the Computer Science field.

Until next time,


Lights, Camera, Action! was originally published in Open Source @ Seneca on Medium, where people are continuing the conversation by highlighting and responding to this story.

by Sean Prashad at February 16, 2018 09:33 PM

David Humphrey

Edge Cases

Yesterday I was looking at a bug with some students. It related to a problem in a file search feature: a user found that having a folder-name surrounded with braces (e.g., {name}) meant that no search results were ever reported within the folder. "This isn't a bug," one of them told me, "because no one would ever do this." I found this fascinating on a number of levels, not least because someone had in fact done it, and even gone so far as to file the bug.

I love edge cases. I'm pretty sure it started during the years I worked on Processing.js--anyone who has worked in projects with comprehensive test suites probably knows what I mean. With that project we had a massive set of existing Java-based Processing code that we needed to make work on the web. Anything that was possible in the Java implementation needed to work 1:1 in our JavaScript version. It was amazing the spectacular variety and extremes we'd see in how people wrote their code. Every time we'd ship something, a user would show up and tell us about some edge case we'd never seen before. We'd fix it, add tests, and repeat the cycle.

Doing this work over many years, I came to understand that growth happens at a project's edge rather than in the middle: the code we wanted to work on (some pet optimization or refactor) was rarely where we needed to be doing. Rather, the most productive space we could occupy was at the unexplored edges of our territory. And to do this, to really know what was "out there," we needed help; there was too much we couldn't see, we needed people to stumble across the uncultivated border and tell us what needed attention.

The thing about an edge case bug is that its seemingly trivial nature often points to something more fundamental: a total lack of attention to something deep in your system. The assumptions underpinning your entire approach, the ones you don't even know that you've made, suddenly snap into sharp focus and you're forced to face them for the first time. Even well designed programs can't avoid this: whatever you optimize for, whatever cases you design and test against, you necessarily have to leave things out in order to ship something. At which point reports of edge case bugs become an incredible tool in the fight to open your territory beyond its current borders.

It's easy to think that what I'm describing only applies to small or inexperienced teams. "Surely if you just engineered things properly from the start, you could avoid this mess." Yet big, well-funded, engineering powerhouses struggle just the same. Take Apple, for example. This week they've had to deal with yet another show-stopper bug in iOS--if you paste a few characters of text into your phone it crashes. There's a great write-up about the bug by @manishearth:

Basically, if you put this string in any system text box (and other places), it crashes that process...The original sequence is U+0C1C U+0C4D U+0C1E U+200C U+0C3E, which is a sequence of Telugu characters: the consonant ja (జ), a virama ( ్ ), the consonant nya (ఞ), a zero-width non-joiner, and the vowel aa ( ా)...then I saw that there was a sequence in Bengali that also crashed. The sequence is U+09B8 U+09CD U+09B0 U+200C U+09C1, which is the consonant “so” (স), a virama ( ্ ), the consonant “ro” (র), a ZWNJ, and vowel u ( ু).

Want to know which languages Apple's iOS engineers aren't using on a daily basis or in their tests? It's easy to point a knowing finger and say that they should know better, but I wonder how well tested your code is in similar situations? You can't believe how many bugs I find with students in my class, whose usernames and filepaths contain Chinese or other non-English characters, and software which blows up because it was only ever tested on the ASCII character set.

The world is big place, and we should all be humbled by its diversity of people and places. The software we build to model and interact with it will always be insufficient to the needs of real people. "Everyone does this..." and "No one would ever do that..." are naive statements you only make until you've seen just how terrible all code is at the edges. After you've been burned a few times, after you've been humbled and learned to embrace your own finite understanding of the world, you come to love reports of edge cases, and the opportunity they provide to grow, learn, and connect with someone new.

by David Humphrey at February 16, 2018 04:12 PM

Michael Kavidas

SPO600 lab 3 – Simple Program in Assembly

For our third lab in the course we were tasked with writing a simple program in both x86_64 and aarch64. The program loops from 0-30 and prints the output on the screen.

Here is my code for x86_64:

.globl _start

start = 0 /* starting value for the loop index; note that this is a symbol (constant), not a variable */
max = 31 /* loop exits when the index hits this number (loop condition is i<max) *="" 

 mov $start,%r15 /* loop index */

 /*divide */
 mov $0,%rdx
 mov %r15,%rax
 mov $10,%r14
 div %r14 /*places quotient into rax and remainder into rdx*/
 cmp $10,%r15 /*see if we need to print the first digit*/
 jl skip /*if not skip*/
 /* first digit*/
 mov %rax,%r12
 add $48,%r12
 mov %r12b,msg+6
 /* second digit */
 mov %rdx,%r14
 add $48,%r14
 mov %r14b,msg+7

/* print */
 movq $len,%rdx /* message length */
 movq $msg,%rsi /* message location */
 movq $1,%rdi /* file descriptor stdout */
 movq $1,%rax

inc %r15 /* increment index */
 cmp $max,%r15 /* see if we're done */
 jne loop /* loop if we're not */
 mov $0,%rdi /* exit status */
 mov $60,%rax /* syscall sys_exit */

.section .data

msg: .ascii "loop: \n"
 len = . - msg

Here is my code for aarch64

.globl _start

start = 0;
max = 31;

mov x9,start

mov x0, 1 /* file descriptor: 1 is stdout */
adr x1, msg /* message location (memory address) */
mov x2, len /* message length (bytes) */
mov x10,10
udiv x11,x9,x10
msub x12,x10,x11,x9
add w13,w11,0x30
add w14,w12,0x30
cmp x9,10 skip
/* first digit*/
strb w13,[x1,6]
/*second digit*/
strb w14,[x1,7]
/*print */

mov x8, 64 /* write is syscall #64 */
svc 0 /* invoke syscall */

/*loop conditional*/
add x9,x9,1
cmp x9,max
bne loop

mov x0, 0 /* status -> 0 */
mov x8, 93 /* exit is syscall #93 */
svc 0 /* invoke syscall */

msg: .ascii "Loop: \n"
len= . - msg

I found it extremely interesting to learn about how the CPU works and how my programs work “under the hood”. I was also surprised to learn the differences and similarities between different architectures. When writing in assembler, even the simplest of tasks will take some planning.

This lab has given me a new found appreciation for the level of abstraction languages like c provide!


Fun facts: Roller Coaster Tycoon was written entirely in assembly and there is an open operating system written entirely in assembly called menuetos.



by mkavidas at February 16, 2018 06:21 AM

OSD600 lab 2 – Building Visual Studio Code

This week we were tasked with building Visual Studio Code from source. Following the documentation was pretty straight forward at first, but I ran into some issues with dependencies. Thankfully after reading carefully through the build logs I was able to track down the source of the issues (I was missing libsecret). On my system (Debian) this was easily fixed by running sudo apt-get install libsecret-1-dev. After that I was able to build, test and run VSCode on my system.

by mkavidas at February 16, 2018 05:47 AM

February 15, 2018

Joseph Pham

Lab 3 – VSCode Bug

Given the list of bugs I decided to work on “Fix #43302 Opening .bat file in VSCode via context menu in windows explorer tries to execute it”. The first thing I tried to do was to recreate the bug. In the steps to reproduce, the user mentions that you need to right-click the .bat file and click on “Open with Code”. For some reason, this didn’t show up for me. File explorer did not give me an option to “Open with”. I googled “Visual Studio Code Open with” and came across a website that shows how to get this to show up. Apparently, it is an option when you first setup VSCode.Capture.PNG

The only other option was to edit the registry on my laptop, which I did not feel comfortable doing, so I reinstalled VsCode with those options checked. Once it was installed, I right-clicked the file and “Open with code” shows up! I click on it and the .bat file opens in VSCode no problem. File explorer didn’t run the .bat file. I went back to the bug to see if I had missed a step. I noticed that the user listed the extensions he has installed on VSCode. I decided to install the same extensions to see if that might create the bug. After installing the 6 extensions, I tried again. Still nothing. The issue might be caused by the user using an older version of VSCode. He was on 1.19.3, while I’m using 1.20.1. Since I couldn’t recreate the bug, so I tried another bug.

The next bug I tried was “Fix #42720 Color picker: no longer appears in settings editor”. I went in VSCode’s setting to try to recreate the bug. I hover the cursor of the hex color value and the color pick shows up.  Again, I could not recreate the bug. I tried both Dev and Standard versions of VSCode. My partner wasn’t able to recreate the bugs either. We tried one more bug.

The last bug we tried was “Fix #16834 Search in folder with special characters `{}` yields no results.” The user is using Mac OS for this bug, but I decided to try to recreate it in Windows. I created a folder, {hello} with test.txt inside of it. I also create a folder without the {} just to see if the search function works to begin with. I followed the steps and couldn’t seem to find the file within {hello}. I finally found a bug! Yay? I then tried to search for the folder without the {}. It was able to find the directory. The next step is to locate where the code for the search feature is. After about an hour of looking, I couldn’t seem to find where the code was. (Edit 02/22: We went through this bug in class and found the code). I may have overlooked a function somewhere in the code.

In the end, finding and trying to recreate bugs is very tedious but rewarding. It really feels like you are doing detective work trying to solve a crime by working backwards. I definitely enjoy finding and recreating bugs. However, fixing them is another story.

by jpham14 at February 15, 2018 05:58 PM

Hongcheng Zhang


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/ 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.

by hongcheng1993 at February 15, 2018 03:44 PM

Svitlana Galianova

Release 0.2: Antivirus vs VS code

These 2 weeks I have been looking for and fixing this issue.

Recently my antivirus got updated... I am using Bitdefender and until this release I have never had problems with it. So one day when I had some time I decided to start working on my  issue. 

In my case the first step was reproducing the bug. So I tried to run vs code and I run into this error:

             [21:02:51] Using gulpfile C:\...\gulpfile.js
             [21:02:51] Starting 'clean-electron'...
             [21:02:51] Finished 'clean-electron' after 6.22 ms 
             [21:02:51] Starting 'electron'...
                ↓ [==============------] 68%events.js:183
                   throw er; // Unhandled 'error' event

             Error: read ECONNRESET
                at _errnoException (util.js:1024:11)
                at TLSWrap.onread (net.js:615:25)
           [21:08:18] Syncronizing built-in extensions... 
           [21:08:18] You can manage built-in extensions with the --builtin flag
           [21:08:18] [marketplace] ms-vscode.node-debug@1.21.1 ✔︎
           [21:08:18] [marketplace] ms-vscode.node-debug2@1.21.0 ✔︎
     '".build\electron\Code - OSS.exe"' is not recognized as an internal or external command,
      operable program or batch file.

So after a few hours of research on StackOverflow, I wasn't getting anywhere. It was a lucky coincidence and I decided to check my antivirus. 

It always gives me million notifications about what is happening in the system, but not this time... My Bitdefender just silently blocked executables needed to run VS code.

It took me a while to disable blocking of all the files I needed to run, but I finally managed to restore all the files and finally run my instance of Visual Studio code.

Tip for future: if something goes wrong and you don't have an explanation, check your overprotective antivirus.

by svitlana.galianova ( at February 15, 2018 03:34 PM

Leandro Navarro

VS Code

VS Code has become one of my favorite editors to use with it’s simple and sleek design, and the massive set of extensions to use. Setting it up was no hassle, though the developer version did take some time to setup, but no problems overall

Upon running the tests i encountered a keymapping error. This error seemed to be common with running the developer version on Windows machines, but other than that all the other tests seemed to have passed.

I have yet to explore the extensions fully, but I did install Git extensions for they will be helpful in this course, and in the future. I look forward to seeing what else I can do with VS Code.

by jlnavarro42 at February 15, 2018 03:24 PM

Svitlana Galianova

TIL: React Native and Android. Tutorial Edition

This week I have been working on React Native Android application for one of my courses, so I decided to write a tutorial with everything you need to know to get started with React Native.

You can find the full code from this tutorial on GitHub.

I am not planning to go through setup, you can check this blog (it's only for Windows, here is one for Linux and for Mac).

So what happens next after running your app?

Your main page is App.js, so let's take a look what's going on there.

Everything that is under render() function's return is your view, so that's the part you will modify the most, this structure reminds me a little bit of HTML.

On the next few lines we can see styles,

I prefer to keep structure and styles separated in different files.
So let's do that!

To include your stylesheet in App.js you need to export module from your styles file and don't forget to import all the dependencies in your styles file:

In your App.js you have to import this file and use it as a "library":

One of the hardest parts (at least for me) is configuring navigation from page to page.
To add navigation to the project, you have to modify index.js file:

First of all you need to import StackNavigator and create constant property to pass navigation property to it, later on we will use that property to move user from component to component:

Now you need to configure StackNavigator component and make it main/first screen by passing reactNavigation property we have just created. And we need to register StackNavigator component, now when you need to redirect user to the next screen you will use "App" title and your application will know what you are talking about.

Now let's create a few buttons and extra component, so we can play around with our navigation and don't forget to import Button component:

It is highly important to add ".bind(this)" when you call your function, otherwise this.props and this.state won't be available in your function.

So here is my Next.js page:

Now you need to add Next component to index.js file, so it can be accessible by App component. Don't forget to import the page first:

And add the page to StackNavigator:

So let's our app and see how it works:

As you can see Navigation has added a bar at the top of the screen, it's not pretty, so here is a solution on how to can get rid of it. You need to add a few lines in index.js file in you StackNavigator component:

And here is how the app looks now:

I prefer to work with Emulator to work on styling and components, because it's easy to reload and see the changes almost instantly. But sometimes it's important to know how your app would feel on the actual phone.

Here is how you can easily run your android app on your phone.

First of all you need to configure development mode on your mobile device. This configuration may vary for each model, so I am not including it here.
Next step is to connect your phone to your computer using USB cable.
Now to run your application you should bundle it using the following command first (you have to rerun this one every time you make changes in your code):

$ react-native bundle --platform android --dev false --entry-file index.js
--bundle-output android/app/src/main/assets/
--assets-dest android/app/src/main/res

Now you can run:

$ react-native run-android

And enjoy your awesome application on the phone!

You can find the full code from this tutorial on GitHub.

by svitlana.galianova ( at February 15, 2018 03:04 PM

Evan Davies

Forking and Installing Vscode

For this lab I had to create a fork of Microsoft's vscode repo on github, as well as clone a local version on to my computer. During the installation of yarn, I ran into an issue regarding its automated installer (It would freeze up during the installation). This was likely a fluke, as after a couple of retries, the installer completed without error. After building vscode from source, I attempted to install extra support for Javascript, Typescript, Python and PHP. I encountered an error however, with vscode stating that "No extension gallery service configured". I got around this by editing the product.json file and adding in the following code:

"extensionsGallery": {
"serviceUrl": "",
"cacheUrl": "",
"itemUrl": ""

Adding this to the json file and rerunning vscode seemed to do the trick.
I am excited to use this for further projects.

by Evan Davies ( at February 15, 2018 06:07 AM

Aliaksandr Ushakou

Getting Started with VS Code as a Developer

Installing VS Code as a user is very simple task. Just go to the official page and follow the instructions for your operating system.

Visual Studio Code looks like this:

One thing that I really want to mention is extensions. Code editor is a place where developers spend a significant amount of time; therefore, it has to be customized for a person’s needs. This is where extensions come in handy.

There is a huge amount of all kinds of extensions available in the marketplace, so you can adjust VS Code for yourself.

So far, I have installed only a few popular extensions such as ESLint (JavaScript linter), Debugger for Chrome, vscode-icons (fancy icons), and Python. Let me know the most useful extension for you in the comments below!

Okay, time to install VS Code as a developer!

Fortunately, VS Code wiki provides a very straightforward guide to build and run VS Code from the source. I’m using Windows and this OS has a reputation for creating problems out of nothing.
So, I expected to encounter difficulties, but everything went very smoothly.

The first step is to complete all prerequisites. The only thing that I had to install was Yarn. Yarn installation guide is here.
When all prerequisites are met, we can go to the next step.

The second step is  yarn  command.
Running  yarn  with no additional command will run  yarn install .
 yarn install  installs all the dependencies defined in a package.json file.

The third step is  yarn run watch  command. This command will do an initial full build and then watch for file changes. When you make changes, it will compile those changes incrementally.
 yarn run watch  takes some time to build VS Code, so be patient.

When everything is built, you will see “Finished compilation” message or something like this: (btw I’m using Windows PowerShell)
As you can see there are 10 errors; however, I don’t think this is a big issue. I’ve tried to update forked vscode repo to upstream repository and to build VS Code a few times. And every time I get different errors, or sometimes no errors at all.

Now lets run a development version of VS Code!

Run  .\scripts\code.bat  and VS Code will launch. (Note: it’s Windows only command. If you are using Linux/OS X, try  ./scripts/  or check the guide.)

A development version of Visual Studio Code looks like this:

Note a different logo:

The last part is testing. Run  .\scripts\test . (Note: it’s Windows only command. If you are using Linux/OS X, try  ./scripts/  or check the guide.)

If there is no error, you will see something like this: testing

That’s all!
We have built a development version of Visual Studio Code, run it, and tested it!

by aushakou at February 15, 2018 05:56 AM

Zhihao Cai

Get to Know VSCode as A Developer

I did use VSCode for a while a long time ago, simply as an editor to build ASP.NET with AngularJs project. Since I am using Mac at home, regardless of switching tools for different OS is very convenient. Back then, I have installed few extensions such as C#, TSLint mainly for the development environment.

But there are still so much to explore like I didn’t aware the live debugging feature before. And also, the main language of VSCode source code is TypeScript (91.5%, can’t believe I missed it 😵) and they use Electron to make it platform-independent as well.

Back to the topic, if we want to contribute to VSCode, there’re some prerequisites we need in order to build their source code. I have used Homebrew before, so the whole process of getting prerequisites went pretty smooth.

Build the source:

yarn run watch

Run development version of VSCode:


Now you can go hack Visual Studio Code!

Wait a minute before I end my blog.

Have you wondered why do you need all the prerequisites when you go through all steps and get them? And also why do they choose one over another?

I do. I don’t know what yarn is and I looked it up.

However, after reading yarn’s getting started page, I didn’t feel that impressed and a question popped up on my head – yarn does the exact same thing as npm, so why don’t Microsoft just use npm instead?

Then I found the official announcement of yarn from Facebook, so basically, they introduce issues that npm has raised, the attempts and the solution. It’s a pretty good article if you want to get a closer look at yarn.

So, what really turns me into yarn is the new process they built to fetch the packages. If you have been used npm for a while, you probably found the “works on my machine” bugs very frustrated. Especially, when you work with the release, it really takes up the time to figure out what the problem is. Although you can use npm ShrinkWrap as a workaround to lock down package version, it still requires extra efforts to consistently monitor and update.

Well, now with yarn, when you modify your package, it will automatically update the yarn.lock file, which ensures the exact same package being installed on different machines every time you run yarn. Hooray🙌🙌!


by choy at February 15, 2018 02:35 AM

Hao Chen

Setting up VSCode for future contributions

I currently develop in two different operating systems, Windows 10 and Mac OS. This leads to many problems when transferring work from one OS to another, but hey, I’m well versed in both system :] My choice of code editor on Windows was originally Notepad++, on my mac it was originally Atom. Now it is both Visual Studio Code. From my experience, VSCode is basically an Atom clone, however it loads much, much faster (time is money, who doesn’t love money $_$).

Here are a few of my favorite extensions:

  1. Beautify — code styling.
  2. Debugger for Chrome — debugging JavaScript code in the Chrome browser.
  3. Open in browser — right-click and open your HTML code within your default browser!
  4. Setting sync — since I program on two different OS, this nifty plugin syncs my settings.
  5. Unity Tools — I’m a casual game developer on the side, exploring ideas in Unity Engine. This plugin allows me to debug within the code editor instead of an IDE.

I followed the Microsoft’s guide on contribution here. The goal was to build VSCode from the source. And as expected, I ran into many challenges along the way.

  • The minimum Node version VSCode required was 8.9.1, I had 8.8.1. I had to uninstall Node the hard way as it was originally installed via .dmg file. This was on my Macbook. If you’re reading this, please… use Brew! I spent a lot of time fully removing Node from my Mac. This is a good start if you’re interested → How to uninstall Node.
  • The second issue I ran into was that Brew installs the latest version of Node, which was 9.5.1. VSCode does not work with Node above 9.0.0… sigh. So after rummaging on Stackoverflow, I discovered NVM(Node Version Manager)!.
  • Finally, after installing NVM and specified my Node version to 8.9.4, I couldn’t run NVM, Node nor Yarn. hmmm. After some digging, I found out that none of these commands were being recognized because I didn’t apply change to my bash_profile. DOH!

After finally getting Node to run, the tests and live debugging all worked smoothly.

I discovered a few popular technologies used to build VSCode:

  • Electron: an open source framework for creating cross platform native applications using web technologies such as JavaScript, HTML, CSS.
  • TypeScript: typed JavaScript that is compiled into plain’ol JavaScript.
  • Yarn: think NPM, but for JavaScript! Yarn is a package manager for JavaScript.


Setting up VSCode for future contributions was originally published in Haorc on Medium, where people are continuing the conversation by highlighting and responding to this story.

by Hao Chen at February 15, 2018 02:28 AM

Michael Pierre

Release 0.2 2018

For my second open source release, I had a lot planned weeks in advance. However due to the nature of open source sometimes things don’t go as planned and you have to improvise. In my case, I had to find a completely new project to escape the plague of my pull requests getting closed consistently and as noted in my previous post I ended up finding a pretty good project called Chart.js which is a JavaScript library to generate detailed charts. The bug I picked up for the project was to fix the array tick label alignment. Example:





As shown above, the main problem here is that the initial label in the array is centered however each consecutive label in the array is being printed below it and not being centered. To fix this initially I wrote:

context.translate(0, -tickFont.size * (label.length / 2));

which moves the labels up by the font size multiplied by the length of the array divided by two. This equation essentially finds the spacing between one label and the other and moves it up by that amount of space. For example to move “Row two” to the position of “Row one” it would need to be translated by negative eighteen. This was what I put up in my first pull request and as a result I got some good feedback.



It turns out my initial approach to fixing this issue had some flaws and thankfully I got some great guidance instead of having my pull request closed instantly like when I was working on other projects. Pettiness aside the problem with the code was that it was  slower to translate the label via the context than to move them using “y”. “y” in the code sets the initial printing position of the label so offsetting “y” would create an easier solution than translating the labels after the fact which is something I hadn’t thought of. Also if the graph was in vertical mode my code wouldn’t account for it and it ended up moving the labels into the bars.

Taking all the feedback into consideration I began writing code to update the pull request with the necessary changes.



This code also had some minor problems like using ternary operator instead of an if statement to check if the graph is horizontal and using predefined variables in the for loop. I began working with Simon Brunel who is one of the lead developers for the project so we could both find the right equation. It was apparent to me that we both different ideas on how to write the equation and some which were both incorrect.



In the pictures above Simons comment is the result of my equation and my comment is the result when using his equation. We were both slightly off but I’m glad I had someone to help me with the process. From this point, it seemed like we were both awfully close and were missing the small thing that would make the equation work for all cases. Shortly after that comment, I decided to try to divide the whole equation by 1.2 which was the hardcoded line space value in the project. I thought this worked, however, Simon found the real reason the equation wasn’t working.p7

Simons new equation ended up working thankfully and I put up an updated PR that got approved and merged shortly after. Although it wasn’t me who figured out the correct equation, in the end, I still felt like a fundamental part of the development process. Also being new to the project I didn’t know the key terms and variables that would influence the creation of the correct equation. Overall I really enjoyed working on this project and hope to tackle other bugs in the future I loved all the feedback and help which will keep me coming back for more bugs!

Pull requests that were wanted features but were rejected for this release:

Adds Custom Error Message

Adds Next and Previous Song Buttons

by michaelpierreblog at February 15, 2018 02:14 AM

February 14, 2018

Kelvin Cho

Lab 2

For our lab 2 that we are to install Visual Studio Code and also obtain a copy of the Visual Studio Code via Microsoft Github. Our goal today is just to mess around with VS Code and customize the Visual Studio to our liking.

Some of the Extension that I have installed are C/C++,  Debugger for Chrome, Python, and Dracula Offical.

C/C++ and Python were recommended to be installed when we follow the instruction on how to build Visual Studio Code.

Debugger for chrome felt very important to me mostly because I use chrome a lot so having a tool that helps you with debugging seems very helpful.

And Dracula Offical is just changing the theme colour of the background. I personally did not enjoy the default themes that much. I choose this extension purely on the theme colours that it comes with.

Another thing we had to do was to build VSCode from source. For the most part building, it was very straightforward. Some issue while building it occurred because I forgot to run Yarn. But after running it all the problem were fixed.

We were also supposed to research on one of the popular source projects. One that interested the most from all of them was Electron because people were able to use this to create stuff like Discord, VSCode.

Some of the things that I learned about Electron was it was originally named Atom Shell and it was started in April 2013. A year later it became open-source and then another year after they renamed it to Electron. And Electron V1.0 was then released a year later on May 2016.

Overall, it was an interesting experience from building your own VSCode, customizing my VSCode, and looking into what Electron was.


by Kelvin Cho at February 14, 2018 07:24 PM

Yalong Li

Contributing for the open-souce projects to classmates

It is fun to help others' projects because I get the chance to learn different methodologies to implement the same logic. In the Release 0.1, I added supports for the Word document and Eslint to two classmates' Github projects. I improved my programming skills by reading many documentations when finding third party packages to fix the issues. It's a good way to learn.

by Yalong ( at February 14, 2018 06:07 PM

Joseph Pham

Lab 2 – Visual Studio Code

This was my first time hearing about and using Visual Studio Code. The initial setup was a bit tricky because I haven’t had much practice installing applications through command line. I had to install all of the prerequisites such as Node.JS, Yarn and Python. I ran into issues where a command doesn’t exist or it is missing another application. Once I was able to run “yarn run watch” it started working!

My first impression of VSCode was that the layout and themes were nice. I generally prefer a darker theme to work in so I didn’t need to change that. I also didn’t change any of the settings because I haven’t used VSCode before, so I’m not even sure what I would want to change. I think once I use VSCode more, I’ll eventually change some of the keybindings.

The extensions I installed were the ones that dealt with other languages such as C++, C#, Java. Each of these extensions allows language support. I chose them because these are the languages that I know. It would be beneficial to be able to code those languages on VSCode.

I found the live debugging quite interesting. The option to toggle developer tools was easy to use. I have a little bit of experience playing around with the Inspect tool on FireFox and Chrome, so I was familiar with the one on VSCode. It was interesting to see how you can debugging right in VSCode. It makes it easy to follow the code and find where the source code is stored.

The web technologies that VSCode are all new to me. with the exception of Node.Js, this is my first time being exposed to them. After doing a bit of research on each of the different technologies, I have a better understanding of how each of them work.

TypeScript: a super set of JavaScript. Adds optional static typing.

Electron: Allows for development of desktop GUI applications to use components meant for web applications. Examples are Discord and Spotify.

Node.Js: Executes JavaScript code server-side. JavaScript was used mainly for client-side scripting. Node.js runs scripts to produce dynamic web pages before the page is sent to the browser.

ESlint: Open source JavaScript linting utility.

TSlint: Open soutce TypeScript linter.

gulp: JavaScript tool kit used as a build system for front end development. It is used for automation of repetitive and time-consuming tasks.

mocha: JavaScript test framework.

sinon: a standalone test spies and test framework for JavaScript. Allows spies, stubs and mocks.

yarn: a quick, secure and reliable packaging manager.

by jpham14 at February 14, 2018 05:12 PM

Matthew Quan

SPO600 Lab 3: A deeper look into assembly

In this lab we are further investigating assembly and C.

Steps 1 & 2: Building and looking at three different C programs

First we had to look at the three different code examples.
One used printf(), another used write() and the other used syscall().

printf() version:

#include <stdio.h>
int main() {
	printf("Hello World!\n");

write() version:

#include <unistd.h>
int main() {
	write(1,"Hello World!\n",13);

syscall() version:

#include <unistd.h>
#include <sys/syscall.h>
int main() {
	syscall(__NR_write,1,"Hello World!\n",13);

Our prof explained that printf() highest level function to print, followed by write() and then syscall().

printf() documentation:
write() documentation:
syscall() documentation:

We then ran objdump -d on each version.

printf() :

00000000004004d7 <main>:
  4004d7:	55                   	push   %rbp
  4004d8:	48 89 e5             	mov    %rsp,%rbp
  4004db:	bf 90 05 40 00       	mov    $0x400590,%edi
  4004e0:	b8 00 00 00 00       	mov    $0x0,%eax
  4004e5:	e8 06 ff ff ff       	callq  4003f0 <printf@plt>
  4004ea:	b8 00 00 00 00       	mov    $0x0,%eax
  4004ef:	5d                   	pop    %rbp
  4004f0:	c3                   	retq
  4004f1:	66 2e 0f 1f 84 00 00 	nopw   %cs:0x0(%rax,%rax,1)
  4004f8:	00 00 00
  4004fb:	0f 1f 44 00 00       	nopl   0x0(%rax,%rax,1)

It was interesting to look at the instructions given before printf gets called.
I think that mov $0x400590,%edi is putting the location of the string in memory and putting edi register which is the destination for data copies.


00000000004004d7 <main>:
  4004d7:	55                   	push   %rbp
  4004d8:	48 89 e5             	mov    %rsp,%rbp
  4004db:	ba 0d 00 00 00       	mov    $0xd,%edx
  4004e0:	be 90 05 40 00       	mov    $0x400590,%esi
  4004e5:	bf 01 00 00 00       	mov    $0x1,%edi
  4004ea:	e8 01 ff ff ff       	callq  4003f0 <write@plt>
  4004ef:	b8 00 00 00 00       	mov    $0x0,%eax
  4004f4:	5d                   	pop    %rbp
  4004f5:	c3                   	retq
  4004f6:	66 2e 0f 1f 84 00 00 	nopw   %cs:0x0(%rax,%rax,1)
  4004fd:	00 00 00

If you take a look at the 3 instructions above write you can notice a few things:
1. mov $0xd,%edx which is moving the value 13 into the edx register
2. mov $0x400590,%esi is moving the string location
3. mov $0x1,%edi is moving value 1 into edi register

These correspond with the arguments provided in the write(1,”Hello World!\n”,13) function.

syscall() :

00000000004004d7 <main>:
  4004d7:	55                   	push   %rbp
  4004d8:	48 89 e5             	mov    %rsp,%rbp
  4004db:	b9 0d 00 00 00       	mov    $0xd,%ecx
  4004e0:	ba 90 05 40 00       	mov    $0x400590,%edx
  4004e5:	be 01 00 00 00       	mov    $0x1,%esi
  4004ea:	bf 01 00 00 00       	mov    $0x1,%edi
  4004ef:	b8 00 00 00 00       	mov    $0x0,%eax
  4004f4:	e8 f7 fe ff ff       	callq  4003f0 <syscall@plt>
  4004f9:	b8 00 00 00 00       	mov    $0x0,%eax
  4004fe:	5d                   	pop    %rbp
  4004ff:	c3                   	retq

Sysall() and write() have the most lines in it and that’s caused by the multiple arguments being provided.
There is one more argument added in the assembly which is probably for the __NR_write in the syscall() function.

Step 3: Comparing assembly vs C ELF

x86_64 has two different ways of writing assembly code as shown below:

objdump gas(gnu):

0000000000400078 <_start>:
  400078:	48 c7 c2 0e 00 00 00 	mov    $0xe,%rdx
  40007f:	48 c7 c6 a6 00 40 00 	mov    $0x4000a6,%rsi
  400086:	48 c7 c7 01 00 00 00 	mov    $0x1,%rdi
  40008d:	48 c7 c0 01 00 00 00 	mov    $0x1,%rax
  400094:	0f 05                	syscall
  400096:	48 c7 c7 00 00 00 00 	mov    $0x0,%rdi
  40009d:	48 c7 c0 3c 00 00 00 	mov    $0x3c,%rax
  4000a4:	0f 05                	syscall

objdump nasm (intel):

0000000000400080 <_start>:
  400080:	ba 0e 00 00 00       	mov    $0xe,%edx
  400085:	48 b9 a4 00 40 00 00 	movabs $0x4000a4,%rcx
  40008c:	00 00 00
  40008f:	bb 01 00 00 00       	mov    $0x1,%ebx
  400094:	b8 04 00 00 00       	mov    $0x4,%eax
  400099:	cd 80                	int    $0x80
  40009b:	b8 01 00 00 00       	mov    $0x1,%eax
  4000a0:	cd 80                	int    $0x80

It is interesting to note that when running objdump on assembly the amount of extra code is greatly reduced in the ELF file compared to running objdump on the C code. Redirecting the output into a text file, assembly is ~1kb while C is ~8kb.

Also our group ran objdump on the two different stages of compilation and we noticed that the memory address is set to zero in the assembly phase and assigned after the linker was run.

hello-gas.o example:

0000000000000000 <_start>:
   0:	48 c7 c2 0e 00 00 00 	mov    $0xe,%rdx
   7:	48 c7 c6 00 00 00 00 	mov    $0x0,%rsi
   e:	48 c7 c7 01 00 00 00 	mov    $0x1,%rdi
  15:	48 c7 c0 01 00 00 00 	mov    $0x1,%rax
  1c:	0f 05                	syscall 
  1e:	48 c7 c7 00 00 00 00 	mov    $0x0,%rdi
  25:	48 c7 c0 3c 00 00 00 	mov    $0x3c,%rax
  2c:	0f 05                	syscall 

Step 4: aarch64 versions of printf(), write(), syscall().

Now we had to build 3 different C programs but this time on aarch64.
I find it interesting that objdump will comment on the value of the mov instruction.

printf() objdump:

0000000000400594 <main>:
  400594:	a9bf7bfd 	stp	x29, x30, [sp, #-16]!
  400598:	910003fd 	mov	x29, sp
  40059c:	90000000 	adrp	x0, 400000 <_init-0x418>
  4005a0:	9119c000 	add	x0, x0, #0x670
  4005a4:	97ffffb7 	bl	400480 <printf@plt>
  4005a8:	52800000 	mov	w0, #0x0                   	// #0
  4005ac:	a8c17bfd 	ldp	x29, x30, [sp], #16
  4005b0:	d65f03c0 	ret
  4005b4:	00000000 	.inst	0x00000000 ; undefined

Like steps 1/2 you can see the different argument values being passed in and that being reflected in assembly.

write() objdump:

0000000000400594 <main>:
  400594:	a9bf7bfd 	stp	x29, x30, [sp, #-16]!
  400598:	910003fd 	mov	x29, sp
  40059c:	90000000 	adrp	x0, 400000 <_init-0x418>
  4005a0:	9119e000 	add	x0, x0, #0x678
  4005a4:	d28001a2 	mov	x2, #0xd                   	// #13
  4005a8:	aa0003e1 	mov	x1, x0
  4005ac:	52800020 	mov	w0, #0x1                   	// #1
  4005b0:	97ffffb0 	bl	400470 <write@plt>
  4005b4:	52800000 	mov	w0, #0x0                   	// #0
  4005b8:	a8c17bfd 	ldp	x29, x30, [sp], #16
  4005bc:	d65f03c0 	ret

Like X86 you can see the value 13 and value 1 put into registers.

syscall() objdump:

0000000000400594 <main>:
  400594:	a9bf7bfd 	stp	x29, x30, [sp, #-16]!
  400598:	910003fd 	mov	x29, sp
  40059c:	90000000 	adrp	x0, 400000 <_init-0x418>
  4005a0:	911a0000 	add	x0, x0, #0x680
  4005a4:	528001a3 	mov	w3, #0xd                   	// #13
  4005a8:	aa0003e2 	mov	x2, x0
  4005ac:	52800021 	mov	w1, #0x1                   	// #1
  4005b0:	d2800800 	mov	x0, #0x40                  	// #64
  4005b4:	97ffffb3 	bl	400480 <syscall@plt>
  4005b8:	52800000 	mov	w0, #0x0                   	// #0
  4005bc:	a8c17bfd 	ldp	x29, x30, [sp], #16
  4005c0:	d65f03c0 	ret
  4005c4:	00000000 	.inst	0x00000000 ; undefined

Like X86 it has 4 values being passed in and they correspond with the function arguments.

Step 5: Like step 3 we took a look at the assembly for aarch64.

aarch64 source code:

.globl _start

	mov     x0, 1           /* file descriptor: 1 is stdout */
	adr     x1, msg   	/* message location (memory address) */
	mov     x2, len   	/* message length (bytes) */

	mov     x8, 64     	/* write is syscall #64 */
	svc     0          	/* invoke syscall */

	mov     x0, 0     	/* status -> 0 */
	mov     x8, 93    	/* exit is syscall #93 */
	svc     0          	/* invoke syscall */

msg: 	.ascii      "Hello, world!\n"
len= 	. - msg

Assembly in aarch64 looks very similar to x86 assembly.
One thing I do like about aarch64 is that its register naming scheme makes more sense than X86. Aarch64 registers start on 0 and go to 30 while X86 has registers that follow letter naming schemes (rax,rbx,rcx,rdx) and number (r8,r9,r10,r11,r12,r13,r14,r15).
Also note how in the ELF binary that the instructions are fixed in length which is different than X86 which is not fixed length.

aarch64: ELF binary:

00000000004000b0 <_start>:
  4000b0:	d2800020 	mov	x0, #0x1                   	// #1
  4000b4:	100800e1 	adr	x1, 4100d0 <msg>
  4000b8:	d28001c2 	mov	x2, #0xe                   	// #14
  4000bc:	d2800808 	mov	x8, #0x40                  	// #64
  4000c0:	d4000001 	svc	#0x0
  4000c4:	d2800000 	mov	x0, #0x0                   	// #0
  4000c8:	d2800ba8 	mov	x8, #0x5d                  	// #93
  4000cc:	d4000001 	svc	#0x0

Again looking at the objdump, there is a reduction in the amount of code in the ELF assembly file compared to the C ELF file.
Also our group noticed that the string memory location was set after linking the program.

For my next blog I will go into more detail about how our group got step 6 working.

by mattprogrammingblog at February 14, 2018 04:46 PM