Jesse's Octopress Blog

A blogging framework for hackers.

AngularJS Tutorial

I recently completed an AngularJS tutorial that is available at the official AngularJS website.

I love the structure of this tutorial. After cloning the git repository, you will find that the sections are broken down in branches. To access the first section you use git checkout -f step-0

This well written tutorial makes a point of highlighting keywords such that essential terms and concepts standout.

Pre-requisite Knowledge

  • *NIX Shell / Command Line
  • git (Basic Commands)
  • HTML
  • REST

Testing

I am familiar with test driven development and behavior driven development in a Ruby on Rails environment. Specifically I have written tests in Rspec and Cucumber.

This AngularJS tutorial provides unit testing using Karma, as well as “End to End” tests which are run through webdriver.

I think using these two types of testing are good practice. The unit tests provide fast functional coverage; while the end to end tests provide tests that closely mirror a real user. Smartly written tests will save you a lot of time and keep your refresh button from wearing out.

The javascript unit tests remind me a bit of rspec. There is a plain English description of expected behavior, followed by the code to perform the test. I have always preferred this compact style as opposed to splitting up the description and code like with cucumber tests.

AngularJS Vocabulary

Routing

The syntax of routes is similar to routing in Rails. The construction of URLs is identical. Variables in the url are preceded by a colon. For example /phones/:phoneId could be a valid rails route; though I am not sure CamelCase is acceptable in Rails routing.

Filtering

Filters can be chained together by using the pipe | character as a delimiter. This feels very intuitive to me as it is reminiscient of piping output to grep or other tools in the terminal.

Event Handlers

One of the most basic handlers is ngClick. You can pass a function of the relevant scope to ngClick – this is very straight forward. But I wondered if you could pass two or more functions to ngClick. Indeed you can with an array. For example ng-click="[setImage(img), setBackground(img)]" could be used to execute two functions.

Animations

AngularJS Animation Guide

Speed Bumps

The first problem I ran in to was when I tried to run the tests using npm test. I received an error message:

ERROR [launcher]: Cannot start Chrome
Can not find the binary google-chrome
Please set env variable CHROME_BIN

This is because I use Chromium, the open source version of the Google Chrome browser. The fix was quite simple. Just as the error message requested I ran the command with an environmental variable:

CHROME_BIN=chromium npm test

Show Sender and Subject of Newest Emails Using CheckGmail

If you access the preference window of CheckGmail you may notice that under External Commands a shortcode of %u is used to represent the Gmail web address.

Just below this, there is an input box for running a command when new mail arrives.

My goal was to cause a notification bubble to display info from the new email – specifically the Author and Subject. Unfortunately, there is not a shortcode for these items, in fact the only shortcode available is %u for the Gmail url.

CheckGmail Preferences External Commands

I had never seen any perl code before, and certainly had not written any, so I was surprised when I succeeded at this goal. Perl feels very similar to Ruby to me.

The instructions below show how to add shortcodes to reference the Author (%a) and Subject (%s) of the newest email, for use in the External Commands section of the CheckGmail preferences.

Edit the file /usr/bin/checkgmail

Locate this block of code

/usr/bin/checkgmail
1
2
3
4
5
# allows the number of new messages to be used in scripts! :)
if ($command =~ m/\%m/) {
  my $messages = @messages;
  $command =~ s/\%m/$messages/g;
}

After the above block, add this code

/usr/bin/checkgmail
1
2
3
4
5
6
7
8
9
10
11
# show the newest message sender name
if ($command =~ m/\%a/) {
  my $author_name = $messages[0]{'author'};
  $command =~ s/\%a/$author_name/g;
}

# show the newest message subject
if ($command =~ m/\%s/) {
  my $subject = $messages[0]{'title'};
  $command =~ s/\%s/$subject/g;
}

Now you can use the code %a to display the name of the sender of the most recent mail message.

Use %s for the most recent subject.

For example, I use this command to display a notification with this info

notify-send "New Mail\n From: %a\n%s"

The above code is put in the checkgmail preferences in: Command to execute on new mail. It causes my notification popup to show the author and subject of new mail. I use dunst for notifications.

Installing Elance Tracker on Arch Linux X64

Elance provides a time tracker application that is required to work hourly jobs. It supports Linux, so I was not expecting a problem getting it to work.

Download

The tracker is available to download under Resources –> Widgets & Tools –> Elance Tools

Click the clock button, for me it said “Loading…”

Select RPM then Download

Extract the RPM

Install rpmextract

# pacman -S rpmextract

Put the TrackerSetup.rpm file in a seperate folder. I named mine elance-tracker. Extract the files from TrackerSetup.rpm

$ rpmextract.sh TrackerSetup.rpm

You should see new folders named etc opt and usr.

Try to run Tracker

Navigate to opt/Tracker/bin

$ cd opt/Tracker/bin

Run the file Tracker

$ ./Tracker

Oops permission denied. Set the file to exectuable.

$ chmod +x ./Tracker

Now when you run the file, you will be greeted with some friendly error messages. First we will address the error of not finding Adobe AIR

This application requires a version of Adobe AIR which cannot be

found.

Please download the latest version of the runtime from http://www.adobe.com/go/getair,
or contact the application author for an updated version.

Install adobe-air and adobe-air-sdk from the aur using your favorite method. I use yaourt.

$ yaourt -S adobe-air adobe-air-sdk

Run Tracker again

$ ./Tracker

The same error appears! How can this be?

The program is looking for Adobe AIR in the wrong place. To fix this create a symbolic link that points to the Adobe AIR runtime in the place Tracker expects to find it.

# ln -s /opt/adobe-air-sdk/runtimes/air/linux/Adobe\ AIR/ /opt/Adobe\ AIR

Run Tracker again

$ ./Tracker

A new error appears! This is because you have not accepted the Adobe AIR EULA. To do this, run the following

echo -n 2 > ~/.appdata/Adobe/AIR/eulaAccepted

A big thank you to the ArchWiki page about Adobe AIR Running binaries that use AIR