Issue 2014

For this issue, the problem was that the publish link when it is generated, it did not have the hypertext protocol (https://) applied to the link. Pomax was concerned that Microsoft Edge did not like how the link was not generated with https://.

To solve this issue, I used the Firefox inspector to find how it is generated. I was able to find the javascript code used. Using the github repository for Thimble, I searched up different element and tag names used in the javascript.

Because there were so many files found, I was unable to locate the specific file that was used. Since the link is generated, I thought it was created from the server side. I was wrong. Gideonthomas replied in the github that it is actually generated from the client side. I am assuming this is the case since it requires the client's username to create a publish link. He was able to locate the exact file that was used to generate the href and text in html. 

From the page, I appended the word "html://" to the variable that held the original link. Once I refreshed the page, everything seemed fine. 

Below is the html page which is generated by the client side javascript codes: here it shows the href and the text to show up with hypertext protocol. 

The issue with my pull request is that once it is published with http://localhost, it does not work correctly. I think this may be due to the local dev factors which does not know how to deal with the protocol. 

Issue 1928

My 0.3 release is with issue-1928, which is posted on thimble repository, but it's actually under bracket. The issue is that URL hints does not do the right thing when spaces are in the path name.

This image shows what "hints" I am talking about. It displays the file names to make coding easier for web developers! According to the issue, if the path has a space in it, such as in file name, the Bracket URL encodes the path name, and adds "%20" wherever the spaces are found. According to David Humphrey, it was due to a javascript code encodeURI() function in bramble code. 

To fix the bug, I had an idea. It was to add hyphen(-) or underscore ( _ ), or just allow spacing in the path name. I suggested my idea and David was able to reply quickly. He asked me to just try removing the encodeURI() function from the code to see what happens. 

Once I removed the function, the hints came out perfectly. The path name did not have %20, when there were spaces in the path name. Surprisingly, it was quick bug to fix. I tested the hints with different characters as well and performed accordingly. I was suggested with other test by David, where I should see if I can publish the project. 

This is where everything went down hill for me! It looked perfect on preview even when I tested for different type of images (jpg, png, and gif). But when I try to publish them under localhost, nothing was working. All the images showed up as broken links. I was surprised this was happening and at the same time frustrated. Checked whether my repository was up-to-date as well, and it was. 

In the end, David suggested that he wants this issue closed. Mainly because he is rethinking the issue he filed originally and said that it may be correct to encode the path names that has spaces in it. 

Issue 1912

This issue is regarding UI design. The "sign in" and "Create account" link was changed to black for some reason in the recently updated master's repository. Flukeout just wanted me to change the colour of the text to the original which was white colour.

This was due to a recent changes to master's repo in github. Of course, this was unintentional!

To solve this issue, I used the Firefox inspector to find which html selector was being used. Then I was able to locate proper CSS page. Because I had experience with using CSS from previous bug that I worked on, I thought to myself, "oh this bug is gonna be super easy" - I was dead wrong.

It looked simple, but for someone who doesn't have good knowledge of HTML and how selectors work it was still a bit difficult. Or maybe I was thinking too simple. I thought all I need to do was to nest the selectors in one another but it did not work for me because according to Google, opacity cannot be overwritten.

Another thing I tried to do was change the opacity of navbar-anonymous selector, which encapsulated the entire top right text box, but since in thimble, the "sign in" and "create account" links are within the selector, they also changed to 0.65 opacity.

flukeout was able to give me hand with this one. He told me to look at the entire navbar, instead of just looking at the section - which is what I did. There, it was missing a "colour" in that element. With this, I was able to fix the issue and commit the changes.

And another bug!

Lab 5

This blog is about the new bug I will be working on. This bug occurs when the webpage is refreshed. When the page refreshes, it moves the cursor to the top of the page, making it very difficult to use because user would constantly have to scroll back down whenever this happens. My goal is to prevent this from happening. When ever the page refreshes, it should stay where the cursor was in its last position.

flukeout has noted that the refresh does not occur when you are just typing text into the HTML page. Preview will only update, but will not refresh. But when a tag is added, or when editing a style sheet that is connected to the page, refresh will occur.

To work on this bug, I need to know how to reproduce the bug. On the Github issue page, there are multiple notes regarding how the cursor is positioned, how the bug is produced and where the code that affects the bug is located. I will have to look into all the necessary information given on the issue page here.

Lab 6 - Editors

The editors I choose to test out are ATOM and Visual Studio Code. I have never used either text editors. The text editor I am most familiar with is called Notepad++. This is because it gave me many flexibility working with different file system, allowed me to have multiple files open, and lets me divide the work space. ATOM and Visual Studio Code is compared with my understanding of Notepad++.

Visual Studio Code
First, you may be thinking, Visual studio is a Microsoft software, therefore, it can only be used  in Windows OS. But this is not the case. It is available for all platform. MacOS, Linux, and Windows. You name it. It will work. Some of the features provided by Visual Studio Code is that it lets you install any number of third-party extensions. It lets you customize the editor to your needs. Since this is an open source project, you can also use the editor to contribute to the community as well. It was very quick and easy to install Visual Studio Code as well.

Different from Notepad++, it contains supports for IntelliSense code completion to ease the coding method of users. It has command-line that you can use for quick shortcut just like using command-line or terminal on your OS. It also has a debugging tool to help coders walk-in and walk-out of the code they have problems with. It also has Git integration built-in to the software. To make changes to the editor's settings, you need to change it through the text editor which seemed little odd. It did not provide any GUI to change the settings you want to change. It felt like I needed to know all the setting names before I could understand what I need to do.

ATOM
ATOM was really similar to that of Visual Studio Code. But interesting fact about ATOM is that it is built by GitHub. Creating the text editor specifically for open source community and more! Just like Visual Studio Code, it gives you plenty of extensions for users to install to make the text editor that you want. If you want IDE features, just go and install a package. It also has over active community in open source.  Also, design seems to be better than Visual Studio Code in my opinion. It also has command-line palette. It has very good GUI for changing settings not like Visual Studio.

Similar to Notepad++. it allows side by side coding. But unlike Notepad++ you can have all the files organized on the side panel. Which is very convenient if you want to locate the file you want to open easily.

Overall, I feel like they are both good editors. They are definitely better than Notepad++, and it gives me good opportunity to move away from it. I love the design of ATOM and the features that offers which is all that Visual Studio Code can do. Therefore, starting now, I will get myself to use ATOM text editor.

Lab 3 Complete

Issue #1100

I feel really bad about this lab. I started with little bit of confidence on working on a different issue, which was Issue #1100. But I ended up not being able to solve the issue. I could not find out exactly what I needed to change in the code. I have used the browser inspection to figure it out, but due to lack of experience using it, I could not pin point the exact area in the code where I had to add or edit.

Issue #1722
Due to this, I decided to work on a different issue. This issue was about changing the html element's fade/refade transition time when a user hover overs an icon. To do this, I used the same approach I used for issue 1100. Used the inspector to locate the folders that contained the CSS code for each icon used in html. Then I tried to break the code by figuring out what each classes and elements did. I also had to understand what the CSS specific does did. Then I played around with the code by changing numbers, moving transition class to elements that may or may not require. After, I looked at the code carefully, and found part of the code that holds the actual transition time.

/* Transition time for hover effects */
@transitionTime: 0.15s;

.transition {
  -webkit-transition: @transitionTime;
  -moz-transition: @transitionTime;
  -ms-transition: @transitionTime;
  -o-transition: @transitionTime;
  transition: @transitionTime;
}

.transition-only-opacity {
  -webkit-transition: opacity @transitionTime ease-in-out;
  -moz-transition: opacity @transitionTime ease-in-out;
  -ms-transition: opacity @transitionTime ease-in-out;
  -o-transition: opacity @transitionTime ease-in-out;
  transition: opacity @transitionTime ease-in-out;
}

Then I came up with the idea to simply add the transition class into appropriate CSS element that required for the animation to occur. Now all I need to do in the end is to change the numbers on both CSS files to change the transition time to the developer's preference.

Lab 3 - DPS909 Getting Thimble to work!

Setting up Thimble locally on my computer was super easy! It only took me an hour to set everything up and it was mostly due to waiting for installation to complete. I am running Windows 8.1 Enterprise edition as my operating system, and I expected to have some difficulty. But installing node.js, getting the open source files from github, and setting up virtual machine using vagrant was smooth sailing. I am happy that I can start working on the Thimble bug I chose.

The Thimble issue I chose was: https://github.com/mozilla/thimble.mozilla.org/issues/1100

The issue is that when you change colour settings on Thimble, it does not change the part under Files tab. This files tab is framed under Bramble. To fix this issue, I must identify where tab is in Bramble and figure out how to change the colour once the user selects different colour tab.

The image above is Thimble and Bramble running on my device locally