Release 0.3

For release 0.3 I worked on fixing an Appmaker bug in the Drawing Canvas component brick. The “Drawing Canvas” brick was not working on the latest Firefox and Chromium browsers. Upon clicking on the “Drawing Canvas” brick we should expect to see a line drawn or dot but what actually happens is nothing gets drawn.

Before even beginning the debugging process, I had already run into problems with my development environment. After updating my local repo with the latest upstream from Appmaker I found that I could no longer successfully run node app to get Webmaker server started. To get it working again I had to remove my local repo, re-cloned from my forked origin of Appmaker and reinstalled node packages with npm install.

My approach to fixing this bug was to figure out what was causing it to break so I performed a walk through on the code using a mix of Firefox and Chrome’s web developer debug tool. The developer debug tool was something I was always aware of but never actually took advantage of. After seeing the debug tool in action during one of our DPS909 lecture it demystified it for me and it turns out it is easy to use and is an indispensable tool in the debugging process. The debugger tool provides a wealth of detailed information which is especially helpful for someone new looking at a new code base who wants to figure out what the code is doing. For the first two releases I was walking through the code in Sublime and writing alert statements to figure out what was happening. The debugger tool definitely helps save time. Hovering over variables while stepping through lines of code lets you see variable values. From that moment on I said goodbye to my old alert ways.

While playing around with the “drawing canvas” brick in debug mode I found that if the Read Only check box on the “Drawing Canvas” brick was toggled on and off then the brick would start to work again. Thus putting a breakpoint on that line I was able to check the logic at that break point using Chromium’s debug tool. Using the tool I was able to see the value of the readonly variable (which handles the toggle state of whether the canvas will allow editing) discovering it was set to empty ''. The code in the drawing canvas component by default sets readonly to false which is what we expect. Upon initial load of the Webmaker app before the user even adds the drawing canvas component, the readonly variable in drawing canvas component gets initialized to false as observed in the debugger tool. Which is what we expect but what we don’t expect is that the readonly variable’s value gets replaced to empty "" after the drawing canvas is added by the user - as observed in the debug tool. Because the readonly variable gets reset to an empty value "" the else statement gets triggered which triggers the block that sets the canvas to readonly mode. In the the end, the option that I went with to fix this bug was to ensure the else statement only gets called when readonly variable’s value is only true which stops it from getting triggered when the variable is empty. That fixed the drawing canvas to do what we expect.

After testing in Firefox and Chromium, I went over Appmaker’s submitting a pull request readme and followed their procedures for preparing the patch.

Here is the pull request #2359.