Month: March 2017

DPS909 Lab 8 – Open Source Tooling and Automation

For this lab we extended our work from the previous lab to add unit testing. I decided to use Jest for the unit testing framework. It is a JavaScript tester that is created by Facebook.

Here is my GitHub repository for this lab: https://github.com/badrmodoukh/Seneca2017LearningLab

Steps I took to do this lab:

Doing this lab was straight-forward and I did not face any problems.

The first step I did was install Jest using the command npm install –save-dev jest. This installed Jest and saved it in the devDependency in the package.json file.

After I got Jest installed I created tests for the two functions I implemented in the last lab (isValidEmail() and formatSenecaEmail()).

I found creating tests for these two functions to be really useful. When I first implemented these functions I did not consider all the ways someone might use and misuse them. Creating tests for these functions allowed me to test them and improve them so that they can meet with the tests I did.

I created a test file name seneca.test.js which contains all of the tests.

The tests I did were for these scenarios:

for the isValidEmail():

  • testing a simple myseneca address
  • testing a non-myseneca address
  • user passes something other than a String to the function (ex. Number, Boolean)
  • user passes a variable which is actually null
  • email address contains leading whitespace
  • email address is for a professor vs. student (ex. ends with @senecacollege.ca)
  • email address uses old style Seneca address (ex. @senecac.on.ca)
  • string is empty

This is how the code looked for these tests:

Screen Shot 2017-03-28 at 2.04.43 PM.png

for the formatSenecaEmail():

  • adds @myseneca.ca to a simple string
  • adds @myseneca.ca to a string that contains spaces
  • user passes something other than a String to the function (ex. Number, Boolean)
  • user passes a variable which is actually null
  • string is empty

This how the code looks for these tests:

Screen Shot 2017-03-28 at 2.05.01 PM.png

Using describe() organized the code and grouped the tests together for each function. This made the code easier to read and follow.

I automated the tests by modifying the package.json file. I added a jest script and modified the test script to run lint and jest together.

This is how it looks:

Screen Shot 2017-03-28 at 2.11.20 PM.png

Conclusion:

I believe unit testing is important to take into consideration when coding. It allows you to improve on your code and take into account how other people might use your code. I used unit testing in the past for Java with JUnit. I don’t remember much of it since it was a long time ago, but the general idea is similar. I found using Jest to be easier and more simple than when I used JUnit for Java in the past.

DPS909 Lab 7 – Open Source Tooling and Automation

In lab 7 I was assigned the task to explore and learn about open source tooling and automation. I found this lab to be useful and learned some interesting things from it.

I did this lab by first creating a repository on GitHub. This repository will be expanded on in the coming weeks. It is a starting point to learning open source tools. I initialized the repository with a README.md file, added a .gitignore for node, and added a license using the MIT license.

Here is a link to my repository: https://github.com/badrmodoukh/Seneca2017LearningLab

After that I cloned the repository using:

git clone git@github.com:badrmodoukh/Seneca2017LearningLab.git

After the repository was cloned I initialized the package.json file using npm. This created the package.json file and included the information I set. The steps I took to accomplish this are:

  • npm init
  • entered the name, version, description, entry point, license

Once I created the package.json file I needed to create the node.js module in a JavaScript file called seneca.js.

I implemented the isValidEmail and formatSenecaEmail functions in this file. This is the end result of that file:

Screen Shot 2017-03-21 at 12.28.10 PM.png

The isValidEmail function checks to see if the passed in email is a valid Seneca email. The formatSenecaEmail function creates a Seneca email using the string that was passed into the function.

Once I finished implementing these functions I wanted to test my work and see if the functions did what they are suppose to do. In order for me to test my work I needed to write a simple command line tool that uses seneca.js.

I accomplished this task by following the steps done in this tutorial: Building command line tools with Node.js.

These are a summary of the steps I did:

  • created an index.js file
  • added a shebang (#!/usr/bin/env node) to the beginning of the file
  • added a bin section in the package.json file with a property key “seneca” and property value “./index.js” which is the script that will run the seneca.js module
  • used “commander” npm package to receive arguments
  • defined the options to use
  • installed shell command using npm install -g

Here is how the index.js file looks at the end:

Screen Shot 2017-03-21 at 12.48.08 PM.png

This enabled me to test my seneca.js module by running the commands:

“seneca -v <seneca email>” which checks if the Seneca email is valid

“seneca -f <name>” which creates a Seneca email with the given name.

“seneca –help” which displays the options available to use this command

Here is how this looks:

Screen Shot 2017-03-21 at 12.50.34 PM.png

After I tested the functions I implemented I needed to add ESLint to avoid common problems in my code.

I accomplished this by doing these steps:

  • npm install eslint –save-dev (which installs eslint and adds it to the development dependencies in the package.json file)
  • create a configuration for eslint using ./node_modules/.bin/eslint –init
  • selected Airbnb JavaScript rules
  • selected JSON format the eslint config file

This created a new file called .eslintrc.json.

After I configured eslint I ran it to check the seneca.js file and it showed me a couple of warnings that are “Unexpected unnamed function”.

I fixed this error by adding the function name to the function. ESLint Rules provides all the errors that can occur and how to fix them.

I added a script to the package.json file to always check my code when I make changes.

The final step I did was to use TravisCI. I thought using TravisCI will be a difficult task to accomplish but surprisingly it was very simple to add to the repository.

I followed the steps on Getting started to accomplish this task. I found these steps to be really easy to follow and clear.

Here is a summary of what I did to add TravisCI to my repository:

  • signing in to Travis CI using my GitHub account
  • Enabling Travis CI for my specific repository
  • created a .travis.yml file for a node project to tell Travis CI what to build

Here is the link to my TravisCI build: TravisCI build for lab

Finally at the end I added the Travis CI build badge by copying the code in the Travis CI website. I did this by following these steps Embedding Status Images.

I learned a lot from doing this lab and found it to be really useful and interesting. The tools that are used in this lab such as ESLint and Travis CI are used in many other open source projects and being able to understand how to add them to a project I found to be really useful. Now I understand how other open source projects add these tools to their repositories.

 

DPS909 Lab 6 – Picking and Learning a Good Editor

The two editors I wanted to explore with are Atom and Brackets. I never used these editors before and wanted to explore what they offer and see which one I liked more than the other.

After experimenting with these two editors I decided to use Atom which can be downloaded from https://atom.io/.

I liked using Atom more than Brackets because I felt more comfortable with its layout and how the code’s font and size is displayed more clearly. Also I found it easier to customize and find different packages to install. Even though I chose Atom over Brackets I found Brackets to be not that bad and recommend you to try it out.

Here’s how Atom looks with the entire Mozilla Brackets project opened in it:

Screen Shot 2017-03-08 at 6.49.35 PM.png

And this is how Brackets looks:

Screen Shot 2017-03-08 at 6.51.00 PM.png

I will be demonstrating how to do 5 simple tasks with the Atom editor. These tasks are:

  • How to open an entire project
  • How to open the editor from the command line
  • How to split the screen into multiple panes
  • How to install editor extensions (packages)
  • How to change the theme of the editor

How to open an entire project:

Like most editors opening an entire project is done in a similar way. When you first open Atom it displays a Welcome Guide with an option to open a project. This is done like this:

openproject.gif

You can also open a project by going to File -> Open… -> and selecting the project you want to open.

How to open the editor from the command line:

Before you can open Atom in the command line you need to install the shell commands. This is done by going to Atom > Install Shell Commands. Then you can open Atom from the command line by simply typing “atom” in the terminal. This is done like this:

command.gif

You can also type “atom <file or project path>” which will open a file or project in Atom.

How to split the screen into multiple panes:

Splitting the screen into multiple panes can be done like this:

split.gif

How to install editor extensions (packages):

Installing extensions/packages in Atom is very simple. You goto Atom -> Preferences. This will open a Settings window in the editor. Than you goto Install and type in the package you want to install. This is done like this:

exten.gif

The install section also displays featured packages that you can install.

How to change the theme of the editor:

Many editors enable you to change the theme of the editor. To do this in Atom you goto Atom -> Preferences -> Themes. You can select from the pre-loaded themes. This is done like this:

change theme.gif

You can also choose to style Atom by editing the stylesheet.

My 5 favourite extensions(packages) for Atom:

Atom offers many extensions(packages) that you can install. The 5 most packages I found to be my favourite and most useful are:

linter-jsonlint:

This package I found to be very useful for linting JSON files. It saves you a lot of time when you are trying to find where the syntax error is in a JSON file. There are also other packages available for linting other file types like HTML, CSS, PHP, JavaScript, etc. Here is a demonstration of how this package works:

lint.gif

atom-beautify:

I found this package to be really useful for formatting code. Instead of going through every line to format the code properly, you can use this package to do it for you. It saves a lot of time. Here is a demonstration of this package:

beautify.gif

color-picker:

This package is quite interesting and useful. It shows you a preview of the color you want to pick in the CSS file. Instead of browsing through the different colors available, you can use this package which shows all the colors to you in the editor. Here is a demonstration of this package working:

colorpicker.gif

minimap:

I found this package to be really useful when working on files. It allows you to scroll through a file that contains a lot of lines of code faster. This package saves you a lot of time when scrolling through a file with 1000s of lines of code. The Sublime Text editor has this feature and it was great finding a package for Atom that offers this feature. Here is a demonstration of this package:

minimap.gif

git-plus:

The git-plus package is also one of my favourite in Atom. It enables you to work with Git without leaving the editor. I found this to be quite useful. Inside of the editor you can add, commit, push, pull, and do other git commands.

Release 0.2 – Fixing bugs 593 and 589 in Mozilla Brackets

For release 0.2 I decided to pick two bugs to fix on Mozilla Brackets. They are:

My pull requests for these two bugs are:

Fixing issue #589:

Fixing this issue I found to be quite interesting and learned a lot from it. The issue was that we needed to update the dependencies and devDependencies in the package.json file and ignore the updates for the dependencies and devDependencies that Adobe uses upstream. As humphd stated, these dependencies/devDependencies would get updated later when merging with Adobe upstream.

I fixed this issue by using a tool called npm-check. This tool helped me find the dependencies/devDependencies that needed to be updated in the package.json file. When I installed it and ran it, it displayed this:

Screen Shot 2017-02-24 at 11.48.31 AM.png

Screen Shot 2017-02-24 at 11.53.05 AM.png

This is a list of all the dependencies/devDependencies that Mozilla Brackets uses in the package.json file that had updates available. By running the command npm-check -u it enabled me to select all the dependencies/devDependencies that I wanted to updated. This looked like this:

Screen Shot 2017-02-24 at 12.03.18 PM.png

After I had selected all the dependencies/devDependencies I wanted to update (ignoring the dependencies/devDependencies that Adobe uses) the tool updated them for me and also updated the version number in the package.json file. I reinstalled bramble and ran it using these commands:

  • npm install
  • npm run build
  • npm start

And got a few error messages that looked like this:

Screen Shot 2017-02-24 at 12.36.37 PM.png

This error message was caused from updating the autoprefixer-core dependency. It caused the postcss dependency to not work correctly. I fixed this problem by switching over to autoprefixer and changing the code in the Gruntfile.js for the postcss task as humphd suggested. After doing this it fixed the problem and bramble installed and ran without any errors.

Fixing issue #593:

Fixing this issue I found to be simple. The ISSUE_TEMPLATE.md file got added when we merged with upstream. There were two options that were suggested to fix this problem. Either to remove the file completely or to modify it to fit our project. As suggested by humphd I needed to modify to file to fit our project instead of removing it.

I modified the file by using vim to change the text in the file. humphd suggested to modify the file with these suggestions:

  • Get rid of the Prerequisites section
  • Keep the section on Steps to Reproduce, Expected and Actual behaviour
  • Change the Versions section to be about which browser (name and version) and OS the user is using

After modify the file using vim to make these changes I created my pull request and it got accepted.

I learned a lot from fixing these issues especially updating the dependencies/devDependencies in the package.json file. I never installed a npm tool before and found that installing one like npm-check can be quite helpful when fixing a bug. I learned how to install the npm tool by using these videos that are available here which is from the npmjs website. I also learned that updating module dependencies/devDependencies in the package.json file don’t always work as planned and you have to sometimes rewrite code to work with the new APIs they use.

Overall, I found solving these 2 bugs in Mozilla Brackets to be interesting and fun. I learned a lot from solving issue #589 and found using an npm tool such as npm-check to be helpful and time saving when updating a lot of dependencies/devDependencies in the package.json file. Also I learned that updating dependencies/devDependencies don’t always go as planned and you need to sometimes rewrite code in order to get the updates to work correctly, which is what I had to do to get autoprefixer and postcss working.