Blog

Nodejs on heroku

Heroku is a free service for opening source app development. We actually understand another similar service which is Azure because we study it in INT422.

NodeJS web server

First of all. I need to install express with

$ npm install express --save

 

Then I need to create a file to provide the information for the server

app.get('/validate/:email', function (req, res) {});

This is function creating a router to for the server

var email = req.params.email;

This is an example to get some variables.

app.listen(port, function () {});

Finally,  I need to listen to the server.

When all the code have been done. I need to push the code on heroku with

$ git push heroku master
heroku: remote name
master: branch name

Finally, I get this url which is hosting my server, and my lab is done.

This link returns a json file. It means I can do another thing by using this free server.

Creating timetable for this semester

Create a function to return data

exports.time = function (time) {
 switch (time) {
 case 'Tue':
 return { course: [
 { name: 'Unix', time: '8:00', room: 'S2159' },
 { name: 'DCN', time: '11:40', room: 'T3078' },
 { name: 'SOC', time: '2:25', room: 'D3054' },
 ],
 };
 .
 .
 .
 .
 default:
 break;
 }
 return {};
};

Create a router on the server file

// GET http://localhost:3000/time/:day
app.get('/time/:day', function (req, res) {
 var timeTable = time.time(req.params.day);
 res.json(timeTable);
});

 

Combine with my app to easily display my time table.

Photo 2017-04-20, 11 34 28 AM.jpg

 

The best way to find bugs is to change code.

Issue: https://github.com/mozilla/thimble.mozilla.org/issues/1745

Pull request:

https://github.com/mozilla/brackets/pull/650

https://github.com/mozilla/thimble.mozilla.org/pull/1891

 

Issue introduction:

On this issue, they want to allow users to choose if editing SVG file in a text editor.

097d6f28-f42d-11e6-95fd-c60da32f8908.png

 

Because of the previous experience, it is easy for me to add a feature about preference manager. However, it is not very easy.

  1. Merge conflict

Because another programmer adds a toggle on the same lines when I send a pull request, it shows merge conflict. This conflict mess up HTML format, so I merge upstream master to my branch to fix the conflict locally.

2. Another bug.

One of the good ways to find bugs is to change the code. When users add a non-text file, they cannot open the file immediately. They have to add another new file first, or they need to refresh the page. Because of this bug, my new feature doesn’t work very well.

8435529c-1bdf-11e7-8346-af40180571bb.gif

 

I spent on this issue one month, and I realized this code.

 function getOpenDocumentForPath(fullPath) {
   var id;

   // Need to walk all open documents and check for matching path. We can't
   // use getFileForPath(fullPath).id since the file it returns won't match
   // an Untitled document's InMemoryFile.
   for (id in _openDocuments) {
     if (_openDocuments.hasOwnProperty(id)) {
         if (_openDocuments[id].file.fullPath === fullPath) {
           return _openDocuments[id];
         }
       }
     }
   return null;
 }

If the bug happens, it returns null. if I can open as a text editor, it returns the _openDocument.

I use many ways to try to understand what causes this difference.  When I have an idea, I write it down. After I get home, I try to fix it with this idea. For example, I open 2 browsers and debug it line by line to see the difference. However, there are a lot of lines running when I add a file. Another attempt is I change a isImage function, and set it to always return false.  The bug is still happening. Finally, I realize that this bug may happen on other files type.

Finally, thanks for my professor. He fixes this bug, and my feature can be merged.

The best way to find bugs is to change the code. When we do some tests, we find another bug such as memory leak.  To see more, click here

 

 

Unit testing

In test-driven development, we will write testing code before we implement a function.  In this lab, I use a Facebook framework – Jest to test JavaScript code.

To install it.

npm install --save-dev jest

 

To code the test code.

  1. require the modal
  2.  Test for each function with describe(String, function)
  3. For each function, passing different arguments to the function and specify the expected result.

Finally I got this code.

Capture.PNG

In this case,

Description: “returns true for student myseneca address

Argument: someone@myseneca.ca

Excepted result: true

 

Capture.PNG

 

 

 

Working on the code that I completely don’t understand

The issue I chose is here

For this issue, they want to add icons next to files name. Like

screenshot1.jpg

To do this issue, I broke down into many steps:

  1. Add the same icon for each file.
  2. Use different icons for different file base on the extension name.
  3. Improve the code to make easier to add a new icon.

For the first step, I used chrome inspector to locate CSS file that I need to edit. Then I got the icon.

image

For the second step, I got the element ID ‘jstree-icon’ by the inspector tool, and search (ctrl + shift + h) in a new browser. Then I numbered all the keywords as ‘jstree-icon-1, jstree-icon-2’ and jstree-icon-3. After I refresh the browser, I can locate the code that I need to edit with the number. After that, I use ‘git checkout — file’ to easily restore other files.

Now, I know where I should edit, and I want to use different CSS classes base on the extension name. So I code this line.

insClassName = "jstree-icon-" + extension.toLowerCase();

And CSS file code:

ins.jstree-icon-css {

    left: @jstree-icon-backindent !important;

    background: url("images/icons/css.gif") center center no-repeat !important;

}

ins.jstree-icon-html{

    left: @jstree-icon-backindent !important;

    background: url("images/icons/html.gif") center center no-repeat !important;

}

The last step, improve the code.

For the CSS file, if I want to add more icons, I need to copy the block and edit for each icon. It takes time.

For this file, I see something like ‘@jstree-icon-backindent’. This should be a variable. And it should support for loop.  Then I google what less file is, and I make sure less must support it. So I search ‘less for loop’, and I get a lot of examples.

Before

ins.jstree-icon-css {

    left: @jstree-icon-backindent !important;

    background: url("images/icons/css.gif") center center no-repeat !important;

}

ins.jstree-icon-html{

    left: @jstree-icon-backindent !important;

    background: url("images/icons/html.gif") center center no-repeat !important;

}

After

.for(@extensionName, {
 ins.jstree-icon-@{value} {
 left: @jstree-icon-backindent 8px !important;
 top: 8px;
 background: @bg;
 }
 });

.for(@list, @code) {
 & {
 .loop(@i:1) when (@i =< length(@list)) {
 @value: extract(@list, @i);
 @bg : url("images/icons/@{value}.gif") center center no-repeat !important;
 @code();
 .loop (@i 1);
 }
 .loop();
 }
 }

After this modification, I can just add new icon here:

@extensionName: gif, html, svg;

Conclusion

Even though I don’t understand how the program generates each file in the file tree, I learn how to locate quickly to the code that I need to change. This is a very good experience for me to work on a big project in the future.

I also learn what less file is by adding this feature.c0246632-12d7-11e7-9dba-cd5d13037d04.png

 

 

Two good editors for programming

Sublime vs. Atom

Why a good editor is necessary?

  • A good editor can help to improve the efficiency.
  • It can help you fix typing mistakes.
  • it well formats your codes.

Sublime

https://www.sublimetext.com/

Sublime text is a cross-platform source code editor. It is free to use, and it supports most of the languages we can see now.

Open files

openfile.gif

Change indent

indent.gif

Find keywords

ctrl + p to search file

ctrl + f to search keyword in this file

ctrl + shift + f to search in many files

search.gif

Split views

split.gif

Change formats

language.gif

Zen coding pulgin

zencoding.gif

Atom

https://atom.io/

Atom is a free and open-source cross-platform text editor.

Most of the short-cut key are same with the Sublime.

Support git

1.PNG

More user-friendly

To customize the editor, we can easily download and install package or theme on the editor without opening another browser.

4.gif

 

Some useful extensions for web page programming that I installed

1.Auto Close HTML package

Under normal circumstances ending tags will be inserted on the same line for inline elements and with\n\t\n in between for block elements. This is determined by attaching an element of the given type to the window and checking it’s calculated display value. You can use Force Inline and Force Block preferences to override this.

2.CSS Autocomplete package

CSS property name and value autocompletions in Atom

3.HTML Autocomplete

4.linter-spell-javascript

 

Conclusion:

I will choose Atom because it is open source. Many people are working with it to make it better. Compare with Sublime, it is more user-friendly. We can very easy to install a package without opening another browser.

Fixing a bug on opening source environment is a communication

The bug I chose was a brackets bug. “`allowJavascript` preference not honored on refresh”

Issue #606

Introduction of this bug

For the previous bug fixing, I only need read the requirement, ask where to start, fix it, and send a pull request. However, for this bug, I send a pull request, but they don’t accept it because they want to fix this bug on brackets side. After I fix a bug on brackets side and send a pull request, they want to change a little bit codes. In opening source environment, there should be a lot of discussions about determining what the best way to fix a bug.

Here are the details how I fix this bug

Fixing a bug on thimble side

When the toggle is clicked, it does 3 things.

1.Set the UI
2.analytics.event()
3.disable/ enable JavaScript

However, it only sets the UI when it initials. We can call the enable/disable function when it initials.

Pull request

This change fixes this bug very well. However, they don’t accept it because brackets and thimble are two products. The bug is on bracket side, so we should not fix it on thimble side.

 

Look for similar bug

First of all, I play with this program. Link of this product

捕获.PNG

There are two toggles on the allow javaScript toggle. I disable the wrap long line and refresh the page. Bracket doesn’t wrap any long line. It means the bug of wrap long lines has been fixed. I search on GitHub for wrap long lines and color theme, but I can’t get any useful pull request or issues. It means I should look at how the system disables javaScript because this is a specific bug only for ‘Allow JavaScript’.

Using preference system instead local variable

First of all, I should locate to the codes which define how to disable javaScript. I can disable on thimble with bramble.disableJavaScript(). I can look at this function and see what it does.

git grep disableJavaScript

I locate this function and find another keyword “BRAMBLE_ENABLE_SCRIPTS”

git grep BRAMBLE_ENABLE_SCRIPTS

it calls this function “HTMLRewriter.enableScripts();”

1. Search “HTMLRewriter” on this file

var HTMLRewriter = brackets.getModule(filesystem/impls/filer/lib/HTMLRewriter);

  2. Open HTMLRewriter file, and search “enableScripts()”

exports.enableScripts = function() {
jsEnabled = true;
};

This function only does one thing – change a value of this variable.

 3. Search and read the documentation of this variable.

/**
– * This variable controls whether or not we want scripts to be run in the preview window or not
– * We do this by altering the mime type from text/javascript to text/x-scripts-disabled below.
– */
– var jsEnabled = true;

It sounds this is what I am looking for.

 4. Change it to false and test it.

Editor disables javaScript and the alert doesn’t show – This is what I expect.

5. Change it to true and test it

The editor enables javaScript and the alert shows up – This is also what I expect.

6. Set this variable always equal to preference and send a pull request

Pull request

They don’t accept it at first because they want to keep a local variable.

7. Keep the local variable and get merged

 

What I can improve for next fix

  • The title of my pull request is “Fix issue606”. I should change it like “Fix issue606 – `allowJavascript` preference not honored on refresh”
  • I don’t why they want to keep the local variable, and I should ask why!!!

 

 

Fixing bug on brackets

Issue#606:  https://github.com/mozilla/brackets/issues/606

This regression is from my previous bug fixed

https://github.com/mozilla/brackets/commit/b524178098f17ccf129268daf4664493916835cb

The toggle can remember UI setting, but it doesn’t actually disable javaScript.

We can play the bug by doing this steps:

  • Open up Bramble in a browser
  • Add somewhere in the tag of the index.html file and watch it pop up an alert every time you hit Enter in your editor
  • Open your dev console and type in bramble.disableJavaScript(). Now, every time you press Enter in your editor, you won’t get the alert.
  • Refresh the page and the alert pops up again and every time you hit Enter in the editor, it will alert.
  • Inspect localstorage for the bramble-property::allowJavaScript and you’ll see that it is false. But the editor clearly does not honor that.

Analyze this issue

When we click on the toggle, it sets the UI, and it disables/enables javaScript.

However, when we load it, it only sets the UI without disables/disables javaScript.

We can call the disableScrpt() or enableScript() function when the brackets is loading.

Adding feature for thimble

Issue#1745: https://github.com/mozilla/thimble.mozilla.org/issues/1745

In this issue, they want to add a feature to allow users editing svg file instead of showing a preview.097d6f28-f42d-11e6-95fd-c60da32f8908.png

Analyze this issue

There is a function called findSuitableEditor(), it loops for all editors and returns one suitable editor. We can hack an imageView and let a canOpenFile() function return false when the users want to edit the svg file instead of viewing it.

Fixing a bug on Mozilla Thimble

Tools:

  • NodeJS
  • Vagrant
  • GitBash
  • Virtual box

 

#1  Install brackets

1 Fork the brackets on

https://github.com/mozilla/brackets

 

2 Clone to your own computer

git clone –recursive git@github.com:{your-username}/brackets.git

Remember to have –recursive to get all sub-module.

 

3 Start npm to host brackets

 

cd brackets

npm install

npm run build

npm start

It may take some time to finish. Once it finishes, it should show the follow message.

捕获.PNG

Goto

http://localhost:8000/src/hosted.html

You should see your bracks has been installed.

If this error message shows up. You should try another computer.

捕获.PNG

 

 

#2 Install thimble

  1. Install vagrant and virtual box
  2. Fork thimble here https://github.com/mozilla/thimble.mozilla.org
  3. Clone using this command

git clone git@github.com:{your-username}/thimble.mozilla.org.git

vagrant up

success.PNG

3500.PNG

#3 Fixing bug

Here is the bug I want to fix.

https://github.com/mozilla/thimble.mozilla.org/issues/1631

The editor doesn’t remember the Allow JavaScript toggle setting. If I turn it off, when I refresh, the toggle is still on.

To do this, we can find something similar to this issue.

First of all, I play around the thimble. Beside the allow java script toggle, there is a word warp toggle. This toggle can remember the setting.

Then I search “word wrap” in github. I found the following pull which is similar with my issue.

https://github.com/mozilla/brackets/pull/378/files

I learned and add codes to support remembering the allow javaScript toggle backend.

modify.PNG

 

Now, the back-end part has been done.

 

We still need to use this property when the UI is initializing on thimble.

Use inspect to get the toggle ID.

Search the ID and we finally locate bramble-menus.js

Here is the code to initializ the UI.

https://github.com/mozilla/thimble.mozilla.org/pull/1725/files

Finally the has been fixed. When I refresh the page, it remembers the setting.

Capture.PNG