Wednesday, October 30, 2019

Release 0.2 Third Issue

A bug was discovered while testing my enhancement of my second pull request, which after testing on the stable release, existed before my PR. I was feeling confident from my second pull request so I asked to tackle this bug. Man what a mistake, I didn't think it would take 3 weeks to fix and was even able to submit my fourth PR before this one, but damn was I proud albeit extremely exhausted after this was accepted and merged.
The process of a player summoning a creature is as follows:
  1. Open the creature dashboard to summon a creature
  2. Select creature to summon
  3. Click on the summon button
  4. Place the creature on the map
There are multiple ways to open the creature dashboard, one of which is by right clicking on the mouse. A bug was appearing when the player was trying to place a creature on the map but right clicked on
  1. A unit on the map
  2. Empty space on the map
  3. Anywhere on the map
After a bit of investigation, I found the issue leading to the bug
  1. Right clicking a creature to view it calls showCreature function from the hexgrid.js
  2. The showCreature accepts a parameter of the passed creatureType
  3. The shown creature is then saved in a variable called this.selectedCreature
  4. When materializing(summoning) the creature, it uses the this.selectedCreature value. This causes an error because a player cannot have two of the same creatures on the field at one time.
The fix was extremely frustrating, because as a contributor starting out in open source and randomly choosing projects we don't read the whole code base. After all was said and done I had contributed about ~200 lines as the simple bug was actually a lot more complicated due to all the other functions interacting with each other.


I was extremely grateful as the maintainer is always available, usually replying within the hour and extremely thorough with his testing. After submitting which I thought was a fix, I found out there were other ways to access the creature dashboard... by clicking on the portrait of creatures on the field. Even worse this portrait option was written totally different from opening the dashboard by right clicking, or through a hotkey on the keyboard. This caused a lot of headaches as one fix, affected the other way of opening a dashboard. 

After some discussion and back and forth with the maintainer, I was able to submit a PR which took care of the bug and enhanced game play at the request of the maintainer. Feel free to view all the changes here!

Release 0.2 Fourth Issue and End of Hacktoberfest

The project itself is a platform for people to tag areas on a map and create reports. The platform is usually used by NGOs or first responders to manage disaster areas and this resonated with me as I always wanted to contribute to a project that helps people in helping others.

I chanced upon this bug as a pity one while working on another bug for the same project. This issue should've been either my first or second issue instead as the scope was very well defined and they were very clear on what to change to fix the issue. The issue can be found here, simply put the issue is there's a drop down that hides the language selector, but once a user enables the drop down.... there is another drop down to select the language which was redundant.

 The front end of the project is written in angular and the change was pretty simple

<div class="tool"> <h6 class="tool-heading" translate="app.language">Language</h6> <span class="tool-trigger init" ng-class="{'active': showLanguage}" ng-click="languageToggle()"> <svg class="iconic"> <use xlink:href="/img/iconic-sprite.svg#chevron-bottom"></use> </svg> <span class="label hidden">Show/hide</span> <span class="tool-trigger init" ng-class="{'active': showLanguage}"></span> <language-switch></language-switch> <div class="toggle-content" ng-class="{'active': showLanguage}"> <language-switch></language-switch> </div> </div>

I removed the <span> and the <svg> which contained the first language drop down and the arrow which shows beside it respectively.

<div class="tool"> <h6 class="tool-heading" translate="app.language">Language</h6> <span class="tool-trigger init" ng-class="{'active': showLanguage}"></span> <language-switch></language-switch> <div class="toggle-content" ng-class="{'active': showLanguage}"> </div> </div>

AND THAT IS A WRAP FOR HACKTOBERFEST.

This event was extremely nerve wracking, after we finish one issue, we're on the hunt for another that is hopefully not taken by someone. But I'm also thankful as previous to this event and the class (OSD600) in general, I always wanted to contribute to open source, but the massive code bases we had to navigate through as well as the thought of attempting an issue and failing always scared me off.

Did I hit any of my goals? As someone who didn't even understand ways to fix issues posted in the issues tab of projects. Yes. After this event I am much more comfortable with contributing to projects now.

I know:
  • how to use git other than just creating a branch and pushing it to origin
  • I can contribute to a project that has a million lines of code spread out through multiple files and folders
  • how to identify code causing bugs
  • different ways to contribute to a project than writing new functions or fixing code(such as installing a new version of an existing module or library to a project)
Now if I can get that t-shirt for the event from submitting 4 PRs I would consider this a total success!


Thursday, October 10, 2019

Release 0.2 Second Issue

For my second issue as part of Release 0.2 I am working on a project called Ancient Beast. It is a game which you can try out here: https://beta.ancientbeast.com/

My assigned issue can be found here: https://github.com/FreezingMoon/AncientBeast/issues/851

The game is kind of like a table top game where you the summoner can move across the map. As the name implies, the player can summon monsters to battle opponent summoner and their respective summons. By clicking on the third icon, users can view within a modal; a list of creatures that can be summoned with their current resources, once a creature has been chosen a layout of where they can place the creature is then shown.

Currently, every time a user clicks/opens the creature list, their default creature is always randomized to an available monster they're able to summon. This is a hassle or slows down the flow of the game when a user previously viewed a creature they want to summon, but they want to re-position their summoner to summon a creature they previously had viewed.

The change asked by the maintainer is to have the game remember the last previously viewed creature. So when the modal is opened, it will default to the last previously viewed creature instead of a random one.


I was trying to understand my way around the program more so I had a bunch of console.log()  messages to see which functions were interacting with each other... for some reason I wasn't getting anything. It wasn't until I realized I had to disable cache in the f12 - network tab and clear browsing data every time I wanted to test changes to the code. Learned my lesson after 2 hours.

After a few days and a tip from the professor I was able to get the enhancement working



I added a few things:
  • clicking on a creature while in the creature menu will assign the creature id to lastViewedCreature
  • a check to see if the object's lastViewedCreature variable was empty. If so it will pass a variable to the function responsible for displaying the creature window to randomize it, otherwise it will open the creature window with the last viewed creature already selected
  • passing current player's turn will set the lastViewedCreature variable back to empty so next player's creature window won't default to the lastViewedCreature of the previous player




Friday, October 4, 2019

Release 0.2 First Issue

As part of Hacktoberfest, my first issue is in the link below:

https://github.com/edgi-govdata-archiving/web-monitoring-versionista-scraper/issues/162

Long story short, their current library, Raven is out of date. To the point where a new one titled Sentry has been released. Due to Raven being labeled legacy, support for it is being phased out and documentation is not going to be updated anymore.

The maintainer has expressed fear of configuring things wrong due to the disappearing or lack of documentation of their current library.

The change in itself is pretty simple... kinda.
  1. Fork the repo to my repo on github
  2. Clone the forked repo to my computer
  3. Update SDK by using npm install @sentry/node@5.6.2
  4. Check package.json for the @sentry/node dependency

Great, second dependency we can verify it has been installed properly.

Except there's a few issues now. When checking the documentation, the old way to configure the SDK in the old one as opposed to the new one.

Crap. Okay, just a few changes in the file right? I'll just change the require to require the new package and change config to init right...? I've checked all the files where this configuration is set up, I found the code in sentry-error.js and made the appropriate configuration changes.



From the above we have a few issues, should we keep the Raven variable name even though the SDK is not called Raven anymore? We were taught in class to make as little changes as possible. I messaged the maintainer if we should keep the const Raven for now as the variable is exported and address the issue in another PR to reflect the new SDK name.



Wednesday, October 2, 2019

SPO600 Lab4


Lab4. For this lab we're testing out a few things we talked about in regards to optimizing, as this is still a work in progress I'll flesh out the rest of the post later.

This is our starting file, pretty basic, we'll have 5 million random sound samples created by RNG. Scale the volume of all the samples by 0.75 then sum up the data. A few run of the command

time ./(file_name_here)

provided the following outputs. The following provides a breakdown of what each section is

real - total elapsed time
user - amount of cpu time spent in user mode
sys - amount of cpu time spent in the OS/system

One factor to account for the variance. This is run on a system shared by 30-40 other classmates. If there's a few of us attempting to generate 5 million samples and scaling them, a few times, that could cause it to take longer than usual.



SPO600 Ramblings

Coincidentally when I first got together with my group during our first lab, we were all pretty confused. This class was called Software Optimization and Portability, I was with a few group members who didn't read the course outline and thought this course was on refactoring or just writing code in general, be it more efficient, cleaner... You get the point.

I actually read the course outline, yet I didn't know what to expect, was this going to be like my Open Source Development Class? Were we going to be taught a few basics and thrown to the wolves? Were we supposed to find a smallish open source application and port that to another platform than intended?

Furthermore we were even more confused when we were told to start programming in assembly for X86_64 and ARM64 architecture during our lab. At this point a few people in the group were already rethinking about their choice in enrolling for this course. I guess what was going in our minds was
HOW IS THIS HELPING US LEARN SOFTWARE OPTIMIZATION? and "WE DON'T EVEN KNOW WHAT WE'RE DOING IN THIS LAB, god help us".

It wasn't until recently during our lecture where it kind of came full circle. The professor gave us an example using a digital image. Say we have a picture on a resolution of 1920 x 1080 and each pixel contains 3 bytes (RGB) in the non optimized scenario we'll have about 6 million bytes to render. However if we analyze the picture, we could make a table of all the colors existing in the image reducing the need to hold data for shades of colors that are not used. 

Furthermore to reduce the size of the table, if we take pixels on the screen which are extremely close in shade, we can settle with either of the colors for both to further reduce the amount of colors needed for the picture, further reducing data in what is called psychovisual redundancy. I am assuming this is what happens when you choose to compress an image and depending on the compression the computer may be more/less aggressive with this technique.

Similar techniques are also applied to sounds such as song files, as we can discard or de-emphasize the data that is less important or where humans will not be able to tell the difference. By reducing the number of bits used to describe a sample of music, it is very much similar to reducing the number of colors for a digital image on a screen. Just like when compressing images, the bit rate compression determines how aggressive the computer may be with this technique.

How does efficiency relate to anything our professor then asked? One application he mentioned was battery life of mobile devices. These steps into optimizing performance and efficiency is what allows us to use our mobile devices longer. As processing any data takes power, less processing means less power used.

Ah.

SPO600 Lab3 Pt2/2

Maybe its because I was too used to programming assembler on X86_64 but trying to do the same thing on ARM was a lot more difficult in my opinion. This week we finished up with the lab we were assigned by doing the same thing except on the ARM64 instead of X86.

The concept of a lot of the things are the same, such as use certain registers so your values don't get trampled or lost. 


I lied, with a bit of further practice, it is as the prof said: "easier than x86_64".

Just like with X86, we increased the string by one more character to accommodate the extra number, we also changed the register holding the max loop value to 30 and introduced another register to hold the value of the divisor.

There is also a loop written in if/else format with the more: and print: section. If the current loop count is greater than 10, the program will branch to label more: and continue from there, otherwise it will continue along and then branch to label print: section. I made sure some instructions were written after the branch to other labels as there's no point in calculating the ASCII value of register 25 or replacing the character of the string offset 7 if we're not going to use it or the character is going to be overwritten by a later instruction.

The biggest difference between the two architectures regarding this assignment was a division function that also calculated the remainder. In X86 there was a div instruction that put quotient and remainder into dedicated registers, ARM64 didn't have one and instead we had to use two instructions udiv to calculate quotient and msub to calculate the remainder.

In the following in the more: section the remainder was calculated by multiplying whatever the calculated quotient was from the previous line in register 23

udiv    x23,x20,x22

by 10 and then subtracting that from our current loop count.


SPO600 Lab3 Pt1/2

We started working on assembly as part of our lab, for the first part we worked with Xerxes (X86_64)

This was fun and much harder than the programming I've done for most of my life. In modern programming languages we would use variables to hold values or even refer to other variables. However in assembly, there are no variables in a sense. I can't just say int i = 1, if I want to use a loop I can't just keep increasing i and print it. 

I have to use the available registers and assign a value to them either from another register denoted by % or an actual value denoted by $. Another thing to take note of when writing in assembly is there are two 1 in a sense, 1 as a value... and 1 as a written number. In assembly, we found out the hard way if we tried to to output the current count of the loop in register 14, we wouldn't get a number. It is because we didn't change it to ASCII, if we printed our loop we'd see nothing really following Loop: , because the first 9 ASCII characters in the table are not even numbers. To get "string" output of the number we had to add a value of 48 to the current loop which you'll notice with the line 

add    $48, %r14

after that we replace the character c we put in the message as a placeholder with the number in register 14 to get the output. As a group we messed up earlier because we didn't change the line 

.section.rodata

and started getting compiler issues. It was because ro meant the line was read-only and we were trying to write to it. By changing the line to 

.section.data

the issue was solved. The syscall line will then output the msg line with the correct loop #, the register keeping track of the current loop count will then increase by 1 and we then compare if the loop count is equal to max(10). If not we jump back to the start of the loop: section and repeat.

When the current loop count is equal to max and comparison is done, a flag will not be triggered allowing the program to bypass the jne loop and move onto the movq $0, %rdi line


The next loop we wrote had to show a count of 00-30 while suppressing leading 0, meaning the program shouldn't write 01, 02 and so forth. A few immediate changes we made was to increase max to 30(duh) and add one more space preceding the c to account for the extra character. 

The difference here is that we use a divisor of 10 so we don't run into issues when replacing a character in the message with a number. Also the div operation always uses two registers, rax for quotient and rdx for the remainder. Another rule is rdx has to always be zeroed before the next division happens hence the 

mov $0, %rdx 

at the start of the loop: section. One other thing to note is the addition of two sections more: and less:. Which is really a if or else condition. Based on the the comparison between the current loop count and 10 one or both sections will be triggered. 




SPO600 Lab2

Assembled C Lab

This lab was done on x86_64 Architecture

The first image was compiled using the following command
gcc -g -O0 -fno-builtin

followed by
objdump -fs --source (program_name_here)

The following is an output of the main from the objdump command.


(1)
The following is an output adding the -static command when compiling, you will notice at 401bc3, instead of calling printf like the original, _IO_printf is called. The file is also a lot larger at 1720912 bits vs 22272 (standard). The reason being for this is because the executable must have all library files ready within its own executable file.


(2)
The following is an output by removing the -no-built-in command when compiling, so we're using built in function optimizations. At 40112f instead of printf being called, a puts function is called instead.

(3)
The following is an output by removing the -g command when compiling, skipping debugging information. You'll notice the line printf("Hello World!\n"); is missing now right after 401127, as this information is only useful for debugging... and we've told the compiler we don't need debugging info, it does not bother outputting any of that info, making the program smaller as well. Although the current size of the files are at 22272 vs 22272 bits each, we only have a few lines in our program (the printf line) so the savings by not using -g are non perceptible.

(4)
The following is an output by adding more arguments at the end of the printf. In my example I added an integer, float and another string. You'll notice there are much more lines in this <main> than any of the other images. This is because the we need more registers to hold the additional integer,, float and string values I added which is accomplished by the extra mov and movq.


(5)
The following is an output by moving the printf function in the main method to another function called output() and calling output() in the main method. You'll notice instead of calling printf, the program is instead calling output.


(6)
The following is an output by modifying the -O0 option when compiling which uses minimal optimization to -O3 ... make as many optimizations as possible, even ones that may be dangerous for certain programs. The program skips the first step entirely from the original and puts the printf line right onto the current location in stack. Instead of the mov of a value into the eax register, it does a xor of the register with itself






SPO600 Lab1

As part of this lab we were to find two projects with different licenses and do an analysis on their processes.

For this assignment I have chosen a project with an MIT license (React) and Apache License 2.0 (Kubernetes). In terms of differences between the licenses there isn't much actually although Apache is much much more verbose, both are pretty permissive except Apache requires users to maintain a modification notice of all changes they have made to the original software.

React
Filing issue
  1. Create issue on project's github - , describe if issue is a bug or feature request. If it is a bug, describe the current behavior and ways to replicate issue, describe expected behavior. Provide version of React user is using, browser that caused issue and OS. Provide any details on regression.
  2. A React JS core team member will take a look at issue and assign appropriate labels
Pull Requests
  1. Create pull request referencing issue, the bot for the repo will check for a signed CLA from the github user
  2. A bot called sizebot will do an analysis of different between code in master branch and PR 
  3. Code review for PR will be assigned to two other React JS core team members, only one approval is needed
  4. React team member merges commit


Kubernetes

Filing issue
  1. Create issue on project's github - https://github.com/kubernetes/kubernetes/issues, describe in detail regarding issue: environment, version, error logs and ways to reproduce issue
  2. Assign appropriate labels to issue
  3. Members will then check the issue and categorize by adding an area specific label and ping appropriate user to take a look at the issue
Pull Requests
  1. Create pull request referencing issue, the bot for the repo will automatically assign labels such as do not merge and assign code review to two members. Users are required to assign type of fix PR addresses and priority.
  2. If it passes code review, the PR is then assigned to the kubernetes patch release team
  3. Final approval from two senior contributors on the project and a maintainer
  4. Repo's bot will merge the commit while running tests
I personally like Kubernetes a lot more as it is a lot more automated with the K8bot they have in the repo handling merging and labeling.

Contains Duplicate (Leetcode)

I wrote a post  roughly 2/3 years ago regarding data structures and algorithms. I thought I'd follow up with some questions I'd come...