Assignment 4 issue #2037

The issue can be found here: https://github.com/mozilla/thimble.mozilla.org/issues/2037

tutorial

The during the creation of a tutorial.html file a button is created near the preview button. This enables users who remix the project to learn how to modify it to make it their own. The issue arrises when the tutorial.html button is deleted. The button that is created during the generation of the tutorial.html file is not removed when the html file is. This leaves a button that doesn’t do anything. To manually remove it the user needs to refresh the page.

After breaking the dialog.js file and attempting to delete a file I caused an error on the page where the delete file was handled. So I reverted my changes and began thinking of solution.

My initial idea was to fix this issue was to implement an automatic refresh when a file is deleted.

change

This image lacks the functionality that checks if the file is a tutorial( obviously will be changed it was just implemented a test to see if this line of code would successfully reload the page and remove the button)

this unfortunately resulted in a endless load.

I attempted to use brackets handleReload() method to handle restarting the browser, but this also resulted in an endless loading times. I also tried refreshing without including extensions and got the same result.

I then checked to see if thimble has a reload, which it did  not. I wanted to see if the reloading was failing due to the fact that I was working on thimble, so I went on localhost 8000 and attempted to delete a file on brackets to see if the file reloads successfully. It appears it still hangs on something (methods tried : window.location.reload(), handleReload(href), window.location.href = window.location.href).

Sensing this solution not going to work, I did some research on what functionality has already been implemented for tutorial. Upon looking at the available methods I saw a method that handles manipulation of showing and hiding this button. I am unfamiliar with how to include this path. I attempted putting in the standard path, but I got a script error from requirejs. My next attempt was following the same structure as I saw on some of the many other fetchers. This too resulted in a script error. My other attempt was using the getModule(“name”) method, but this results in a message saying “Module name  . . . has not been loaded yet for context”, which I am unfamiliar with and plan on doing a bit of research for.

For this plan to work I need to be able to figure out how the system can recognize the files name. This needs to be done so during the event of a file being destroyed I can integrate the functionality to drop the button only when a tutorial.html file is being deleted OR if the name is changed as it should be treated the same way.

Another possibility is that the functionality is already implemented it just isn’t working

I then checked to see if thimble has a reload, which it did  not. I wanted to see if the reloading was failing due to the fact that I was working on thimble, so I went on localhost 8000 and attempted to delete a file on brackets to see if the file reloads successfully. It appears it still hangs on something (methods tried : window.location.reload(), handleReload(href)).

A found out the issue with reloading was the location i was implementing the reloading.. I started handling reload in the bramble.js. after a lot of time going over the variables that don’t follow proper naming conventions I was able to fix this issue. I was unable to find a way to extract the name of the file, but I was able to access the path. So with a bit of string manipulation I extracted the file name. So I will be ableto identify if the application needs to be reset ( which would be when tutorial.html is deleted or when tutorial.html is renamed.)

correctly. This is gonna be the next step in researching this issue.

Assignment 3 issue 451 html+css

Pull request – https://github.com/mozilla/brackets/pull/666

dialog

The styling of this dialog box was requested to resemble Google docs dialog box. So when I began developing this software I made a placeholder that attempted to mimic Google’s dialog box.

upon creating the pull request and discussing with some other developers who are working on thimble, they suggested that code should be implemented to handle checks to see which OS the user is running and adjust the dialog accordingly. Where if the OS is a MAC the dialog should say Command + key (x, c, v) and in any other case use Ctrl + key (x, c, v) for the dialog. This was implemented using a script in the html file for the dialog and performed a check to see if the OS was a MAC or anything else. I was requested to remove the script from the html file and pass the variables into the html template for the dialog using mustache. This was a fairly quick adjustment, but I came across and issue where the Unicode I used to display the Mac command key would be displayed rather than the icon. This was due to me using twin curly brackets rather than triple curly brackets which allows for character escape.

once this was completed the UI was put up, so that Flukeout on github could review it. He green lit the UI and the pull request was merged on April 10th, 2017

Lab 9

In this lab we implemented a way to run code on a cloud infrastructure using heroku. We used our previous lab 7 & 8 as a building block to include this functionality.

implementing this lab included using node.js to add the Express framework to our application. We then went on to create a server.js file which describes how the server should operate, this includes, the desired port as well as routes which will use functionality from our seneca.js to perform tasks.

I have never worked with anything like this, but it was pretty fun to include extra routes. I can see the benefits to using this cloud infrastructure in order to prototype and test your applications.

Lab 8

In this lab we were extending what we did in lab 7(https://mfainshtein4.wordpress.com/2017/03/25/lab-7/) and we implemented test cases for out 2 functions isValidEmail and formatSenecaEmail. We were given a handful of choices between which test case extension to use. I chose Jest which is an open source JavaScript tester made by Facebook. This lab was also very straight forward such as its predecessor. There were no technical difficulties implementing the tester, which seems to validate jest’s “Easy Setup”.

I have used unit testing in the past, but this was a long ago and it was for java. So the general advantages were apparent. To my memory using jest was much more simple than performing these unit tests with java.

I found the separation of test suites very useful using description() to help guide the programmer where tests are failing.

Lab 7

The purpose of this lab was to function as a practice for configuring projects with node.js modules and using tools such as linters in order to format our code in a consistent manner.

linter

In this lab we also set up a continuous integration service which runs all our checks with every commit. This allows for easy testing to make sure that you and other contributors don’t commit something that causes the project to break. We used Travis to do this.

implementing this lab was quite simple with no real issues apart from my .travis.yml not being found by Travis when it was running the tests. I fixed it by committing and pushing a different .yml file and then re-pushing the original.

I have never worked with extensions such as eslinter. It offers some amazing quality of life , which I am looking forward to experiencing on my future projects.

All commits can be seen here: https://travis-ci.org/mfainshtein4/SenecaDPSLearningLab2017

Lab 6

For this lab I selected Atom & Nuclide as my two editors.

Atom

Download link

https://atom.io/

Reason for picking

I chose this editor due to the fact that I never heard of it before and doing a little bit of research it seemed pretty cool and customize-able.

Supported languages

Using the default plugins the following language support consists of HTML,CSS, Less, Sass, GitHub Flavored Markdown, C/C++, C#, Go, Java, Objective-C, JavaScript, JSON, CoffeeScript, Python, PHP, Ruby, Ruby on Rails, shell script, Clojure, Perl, Git, Make, Property List (Apple), TOML, XML, YAML, Mustache, Julia & SQL.

Adjusting settings

in the settings tab which is accessible from File>Settings, or using the shortcut “Ctrl+,”, you can find and adjust all the settings and change them as you see fit. Including font size, tab length, auto indentation, etc. You will also be able to find all the keybindings with instructions on how to change them if you desire.

settings2

Command line use

You also have the option to open a project or file using the command line. First you need to configure your environment variables to specify the path to the bin file located at Users/{Users name}/Local/atom/bin. Once this is done you simply need to navigate to the file you wish to edit and use the command “atom {filename}”

Managing windows & searching between files

Moving and closing files is very easy in Atom. By right-clicking on the file headers at the top of the window you will get the access to move the file to another window or closing the file or other files with simple and easy to understand options. Through the Ctrl+f key you gain access to functionality to find or replace words with a couple of ways to adjust the search which includes case sensitivity, whole word matching, and section search which checks only the highlighted sections of the file. You also have the option of using the command Ctrl+Shift+f to open up a find/replace window that allows for multiple file searching, which can be narrowed down by folder or file type e.g *.js which would only check the JavaScript files in the project.

Useful commands
Ctrl+g : which goes to a line

Ctrl+end : moves to bottom

Ctrl+home : moves to top

Ctrl+Shift+k : delete current line

settings

Nuclide

This editor is actually a package which is added onto atom. I wanted to check this one out to see what it changes with atom.

Supported languages

Using the default plugins the following language support consists of HTML,CSS, Less, Sass, GitHub Flavored Markdown, C/C++, C#, Go, Java, Objective-C, JavaScript, JSON, CoffeeScript, Python, PHP, Ruby, Ruby on Rails, shell script, Clojure, Perl, Git, Make, Property List (Apple), TOML, XML, YAML, Mustache, Julia & SQL.

useful commands
Ctrl+down : move down to next line

Ctrl+up : move up to previous line

Ctrl+j : join lines together

installing packages

To install packages you simple need to go settings via File>Settings then go to the packages tab. Then you just need to type in what you are looking for in the search field or add something from the featured section below the search field.

Auto-Complete

In case you want to disable autocomplete the way to access the settings requires you to find the package autocomplete-plus which you can find under settings(File>Settings>packages) and all information regarding autocomplete which can be tweaked to your personal preference.

Opening projects

To open a project you either need to go to File>Open Folder or use the short cut Ctrl+Shift+o, then you just need to navigate to your project folder and hit open and a folder hierarchy of your project.

Extensions

I will be discussing atom’s extensions because Nuclide is a extension of atom itself.

Nuclide: advertises the use of a php debugger, a context view which allows for easy navigation between symbols and their definitions, as well as the functionality to connect to a remote server to edit files.

 atom-beautify: this extension beautifies HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom.

spell-check: highlights misspelled words and shows possible corrections

Language-javascript: This is a included extension that allows the support of javascript in Atom

turbo-javascript: a collection of commands and snippets for optimizing Javascript and Typescript development productivity

 

 

Assignment 2 issue 451 js

For this assignment I have selected issue #451


contextmenu
This issue consists of including copy, cut, and paste into the context menu for the editor. As well as include a check to see if the browser can support said commands, if not it should post a dialog.

During this adjustment I used https://github.com/adobe/brackets/pull/12674/files for reference as they have already implemented this modification. I started working on the dialog menu which ended up looking like this

the scripts to make this dialog open and quit seemed a bit off, but I had the initial hopes of changing it once I got it working. Once I completed it and added functionality to test if the commands are supported using document.queryCommandSupported(), I did some research on how to include my html file into the EditorCommandHandlers.js file and figured out that this method wouldn’t work. Once I realized I hit a dead end I started on a new path which was creating a modal where html code is appended into a var and calling modal to display it onto the current page. I haven’t gotten to give this a chance yet though. I am planning on trying it tomorrow.

I also decided to check to see if everything was working as I held it back for a while. I noticed that paste was no longer working since I made changes playing around with things. This is also on my to do list. Checking all the work I have done I was unable to solve the issue. I am planning on repulling and attempting to make the changes again to solve this issue.

UPDATE: I implemented the above, which worked as intended. Once this was resolved I noticed that the paste command which should return false when inputted into the document.queryCommandSupported() method when it should return false in chrome. After discussing the issue with David Humphrey we decided that paste shouldn’t use the document.queryCommandSupported() method and should always be treated as if it wasn’t supported by the browser.

Once the dialog was functioning correctly. I was on to fixing the next issue which consisted of the native shortcuts displaying the dialog box. The solution for this consisted of removed the shortcut from the keyboard.json file. They were unnecessary as the shortcuts should be handled naively. Once they were removed the code worked as intended.

After this was implemented and working it was just a matter of adjusting the spacing. I attempted to use npm test to use the linter in order to identify all my incorrect stylings. There was an issue that prevented the testing automation where files were missing(first instance was something called jasmine). I attempted deleting and repulling and  rerunning all the commands  where id then get a different issue. After I repulled from brackets and installed all the extensions, it finally worked. Though the linter didn’t point out any spacing inconsistencies. Where I’d accidentally mix tabs and spaces, or other basic issues. After this I decided to manually skim through all the code and carefully correct the styling.

The pull request is now pending and I am waiting to hear back from my reviewers. I will update the blog again with my conclusion about working on this issue.

UPDATE: the pull request was merged on April 10th, 2017

Assignment 1

The issue that I decided to tackle was issue number #1756 it was  a simple css fix to prevent navigation items from collapsing when window was adjusted. The issue was that the only thing preventing from navigation from collapsing was the min-width tag that was entered. Which did its job when there was no tutorial added to navigation bar, but once the tutorial menu item is applied the min with that would of been required 460. Instead of adjusting that though I added the whitespace: nowrap tag in the css nav items which also managed to fix the issue.

Lab4

working with branches in this lab was interesting and fun. It was generally quite easy to follow the instructions, but once I got to the part where there was a conflict with merging I had a slight issue recalling the vi commands for editing and saving and such. Apart from that lab was completed without a hitch.

Lab2

I contributed to Pug. My contribution consisted of adding a few new fields to their package.json file. My initial pull request had an issue as I missed a comma, Post fixing my initial mistake I needed to correct an inconsistency with my indentation. The editor I was using caused issues as my indentation seemed to match on it, but upon reviewing it in github it still wasn’t matching. 1 more adjustment and the pull request was accepted. I was surprised to see how simple it was to contribute to a open source project.