Assignment 1 - Fixing a real bug
This is a continuation from my previous post on getting a thimble testing environment to run. To keep you up to speed, my goal was to fix this issue right here:
As you can see, if one doesn't publish a project, the description isn't saved to the server. The text is persisted if you stay within the project editor page, which could fool a user into thinking the text is actually being captured, only to be surprised if they leave it. If everything within this page is saved without publishing, why isn't the description doing it as well? Well, my task was to fix that.
The actual problem narrowed down to how an ajax request is made in order to save the data to the server. Every time a user "published" a project, all of the data would be saved, the description included. "Unpublishing" a project would do the same, all of the data within the page would be saved. When not publishing, the page saved only certain elements, such as the Project name (upper left corner) and any code that you had written in the editor. Of course, in order to find this out it took a lot of experimenting. I also want to stress, communication was key. In order to find out what exactly was going wrong, I had to go against unfamiliar code, some of it documented, some of it not. Of course, when seen by someone more experienced, maybe this code wouldn't be so complicated. For an entry level programmer such as myself however that is a different story. The lovely folks on Thimble however, our professor included, helped me out a bunch, be it through the bug's pull request that I submitted, or even through Thimble's chat channel.
As we progressed together, the interesting thing was that the bug fix evolved into a change of design behind the code:
As you can see things changed. I went back to coding, removed the Cancel button (you can see it in the GIF posted above, in the publish dialog box), and began tinkering with the logic in order to save the description when clicking outside it.
I knew that I had to capture the event of clicking on a div named ".click-underlay" (basically it was a layer under the dialog box that would show up under it was opened, and it was used in order to close the dialog box when clicked). Problem was, I was not able to access this layer programmatically, due to logic already existing elsewhere. I was not able to find this code anywhere. It was flukeout, who helped me to spot it:
It sure did help. I applied my logic to this function, and surely enough, it worked! However the solution I found is not the most elegant. In order to save every detail, my code checks whether the project being worked on is "published" or "unpublished". If it is published, when clicking outside the dialog box, the code republishes the details over the previous ones on the same ID. What this does is persist all of the same data, including the description. If it it is unpublished, the code attempts to "unpublish" again, which throws an error within the console (of course logically, you can't unpublish an already unpublished project), but persists all of the data including the description. What this means is that whether or not the project is published or unpublished, the description data is now saved! As of now, I am awaiting a confirmation from our professor as to whether or not this fix will pass, flukeout has confirmed that the functionality is there, and the internal tests for merging all pass too (at first, these actually didn't pass - I had to edit unnecessary spacing I did between some lines of code in order for the two tests to turn green).
There could still be work to do, but I wanted to blog my experience as this is the due date for the 0.1 release. Overall, I think this was a great experience that taught me a lot in terms of how communication is so important in programming. Never be afraid to speak to someone who is more experienced than you, chances are they know exactly where you should be looking and can give you some guidance!
As you can see, if one doesn't publish a project, the description isn't saved to the server. The text is persisted if you stay within the project editor page, which could fool a user into thinking the text is actually being captured, only to be surprised if they leave it. If everything within this page is saved without publishing, why isn't the description doing it as well? Well, my task was to fix that.
The actual problem narrowed down to how an ajax request is made in order to save the data to the server. Every time a user "published" a project, all of the data would be saved, the description included. "Unpublishing" a project would do the same, all of the data within the page would be saved. When not publishing, the page saved only certain elements, such as the Project name (upper left corner) and any code that you had written in the editor. Of course, in order to find this out it took a lot of experimenting. I also want to stress, communication was key. In order to find out what exactly was going wrong, I had to go against unfamiliar code, some of it documented, some of it not. Of course, when seen by someone more experienced, maybe this code wouldn't be so complicated. For an entry level programmer such as myself however that is a different story. The lovely folks on Thimble however, our professor included, helped me out a bunch, be it through the bug's pull request that I submitted, or even through Thimble's chat channel.
As we progressed together, the interesting thing was that the bug fix evolved into a change of design behind the code:
As you can see things changed. I went back to coding, removed the Cancel button (you can see it in the GIF posted above, in the publish dialog box), and began tinkering with the logic in order to save the description when clicking outside it.
I knew that I had to capture the event of clicking on a div named ".click-underlay" (basically it was a layer under the dialog box that would show up under it was opened, and it was used in order to close the dialog box when clicked). Problem was, I was not able to access this layer programmatically, due to logic already existing elsewhere. I was not able to find this code anywhere. It was flukeout, who helped me to spot it:
It sure did help. I applied my logic to this function, and surely enough, it worked! However the solution I found is not the most elegant. In order to save every detail, my code checks whether the project being worked on is "published" or "unpublished". If it is published, when clicking outside the dialog box, the code republishes the details over the previous ones on the same ID. What this does is persist all of the same data, including the description. If it it is unpublished, the code attempts to "unpublish" again, which throws an error within the console (of course logically, you can't unpublish an already unpublished project), but persists all of the data including the description. What this means is that whether or not the project is published or unpublished, the description data is now saved! As of now, I am awaiting a confirmation from our professor as to whether or not this fix will pass, flukeout has confirmed that the functionality is there, and the internal tests for merging all pass too (at first, these actually didn't pass - I had to edit unnecessary spacing I did between some lines of code in order for the two tests to turn green).
There could still be work to do, but I wanted to blog my experience as this is the due date for the 0.1 release. Overall, I think this was a great experience that taught me a lot in terms of how communication is so important in programming. Never be afraid to speak to someone who is more experienced than you, chances are they know exactly where you should be looking and can give you some guidance!
