I was building a system which relied on URLs that were frequently redirected. Curl does not automatically redirect when it receives a 302 response.

Use curl http://www.example.com --location to follow URL redirects.

I didn’t see a straightforward way to setup Redis on a box built using Elastic Beanstalk so I decided to go with Redis hosting.

I setup Sidekiq to use an external Redis database. You have to configure both the client and the server for Sidekiq to work this way.

1
2
3
4
5
6
7
8
9
10
11
...

Sidekiq.configure_server do |config|
  config.redis = { url: '...', port: 9999, namespace: 'name', auth: "..." }
end

Sidekiq.configure_client do |config|
  config.redis = { url: '...', port: 9999, namespace: 'name', auth: "..." }
end

...

For more information on configuring Sidekiq, check out the advanced options docs.

I use the % key to switch between do-end statements at work. This feature came with a group of plugins that I share with my co-workers.

I’ve tried to implement it on other machines but haven’t been able to trace the source of it until today.

matchit accomplishes block switching. This is particularly useful when dealing with specs.

I had this issue earlier, here is how I solved it.

Jasmine spec runner was returning ‘Error: Unexpected request: GET /locations/1 No more request expected.’ I stubbed the call by specifying the action (GET) and the path (‘locations/1’). If you are relying on the response data in your test then return the appropriate JSON object(s) instead of an empty array.

...
beforeEach inject(($controller, $rootScope, $httpBackend, $location) ->
  ...
  $httpBackend.whenGET('/locations/1').respond([])
  ...
)
...

I’m building an AngularJS app with Rails 4 as an API and router. Using Rails for routing causes problems as users follow links, controller code on different pages isn’t being loaded. To solve this problem, I force page reloading by adding target=_self to links.

Haml example:

%a(href="/projects/{{project.id}}" target="_self") {{project.name}}

Yesterday I ported some existing code to a different gem. Instead of returning objects, the new gem returns hashes. To stave off a major refactor, I casted each hash to an OpenStruct which allows you get hash values with dot notation.

house = {}
house["bedrooms"] = 5
house = OpenStruct.new house
house.bedrooms #=> 5

I wanted to add a foreign key to an existing table using Rails’ references feature but this was not an option for existing tables. The good news is that Rails 4 makes it possible.

I prefer references because it allows you to be lazy by automatically adding the foreign key and index.

$ rails g migration AddUserRefToProducts user:references

This migration will add a user_id column to your products table and index it.

I installed my project’s dependencies locally while debugging. It didn’t take long to notice that control-P would pick these files up while fuzzy searching. This rendered control-P useless as it presented me with gems that I didn’t care about editing.

My solution was to instruct control-P to ignore files in the vendor directory by adding this line to the .vimrc file:

set wildignore+=*/vendor/*

I came across iconmonstr yesterday while searching for icons to use in my new app. I decided to go with a set instead but they definitely had some cool stuff.

This is a super useful method. Most developers tend to use SCSS just like CSS but there are tons of possibilities in this extension of CSS.

Yesterday I decided to invest some time in refactoring my stylesheets to take advantage of this power. A common pattern that I developed involved the @extend method.

Use Case

Imagine that you need to display profits and losses. You have two classes for each group which are very similar except for the text color.

@extend allows you to abstract common attributes and focus on what’s unique about each class.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.loss {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
  color: red;
}

.profit {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
  color: green;
}

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.metric {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
}

.loss {
  @extend .metric;
  color: red;
}

.profit {
  @extend .metric;
  color: green;
}

This helps a lot when prototyping UIs. I no longer need to jump around my stylesheet to update properties. I can simply modify the extended class in most cases.

Yesterday I wrote about making my first filter for AngularJS. This morning I created a test for it. Here’s the pattern that I followed.

index.html.haml
1
2
3
4
5
6
7
!!!
%html(ng-app="ExampleApp")
  %head
  %body
    .row-fluid
      %span(ng-bind-html-unsafe="(1 > 2) | whatAmI")
      %span(ng-bind-html-unsafe="(1 < 2) | whatAmI")
controller.js.coffee
1
2
3
4
5
6
7
8
app = angular.module("ExampleApp", [])

app.filter "whatAmI", ->
  (statement) ->
    if statement
      "<span class="answer-true">I'm true</span>"
    else
      "<span class="answer-false">I'm false</span>"
controllerSpec.js.coffee
1
2
3
4
5
6
7
8
9
10
11
12
#= require_tree ../../app/assets/javascripts
#= require angular-resource
#= require angular-mocks

describe "whatAmI Filter", ->
  beforeEach angular.mock.module("ExampleApp")

  it "returns I'm true if the expression is true", inject((whatAmIFilter) ->
    expect(whatAmIFilter(true)).toBe "<span class="answer-true">I'm true</span>")

  it "returns I'm false if the expression is false", inject((whatAmIFilter) ->
    expect(whatAmIFilter(false)).toBe "<span class="answer-false">I'm false</span>")

Notes

  • I’m using JasmineRice to test Angular in my Rails app.

  • Notice that the mock name ExampleApp corresponds to the name of the app. This is not optional. You cannot mock something that doesn’t exist.

  • Filter should be appended to the name of your filter when evaluating it directly in the test.

I wrote my first AngularJS filter today. I needed to render HTML although I used Haml for templating and it was my first time implementing the ng-bind-html directive.

Here’s a pattern that illustrates what I achieved. I’m using a simple example to illustrate the powerful concept of filtering.

controller.js.coffee
1
2
3
4
5
6
7
8
app = angular.module("ExampleApp", [])

app.filter "whatAmI", ->
  (statement) ->
    if statement
      "<span class="answer-true">I'm true</span>"
    else
      "<span class="answer-false">I'm false</span>"
index.html.haml
1
2
3
4
5
6
7
!!!
%html(ng-app="ExampleApp")
  %head
  %body
    .row-fluid
      %span(ng-bind-html-unsafe="(1 > 2) | whatAmI")
      %span(ng-bind-html-unsafe="(1 < 2) | whatAmI")

The first filter returns I'm true.

The second filter returns I'm false.

Notice that curly brackets are not used in the ng-bind-html statements.

Helpful Links:

You most likely have a model called test.

Remove it with:

$ rails destroy model test

I ran into this issue after coming into a project where the client-code was developed first. An unused test model was created by the previous pair. As I began writing tests for the app, this test model caused a namespace conflict.

I ran into some frustrating issues while writing integration tests for an AngularJS app. My factory_girl records were not being sent to the client. After two days of struggling to figure this out, I decided to pass on integration tests for my own app. Then I ran into the same issue while pairing with my bud, Thomas Barnwell, on a Backbone app.

I soon realized that stubbing ActiveRecord at the controller level solved the problem but my pair was unsatisfied with stubbing so we continued exploring. We realized that our database cleaning strategy had everything to do with it, thanks to Avdi Grimm.

There are two ways around this issue:

1. Stub the ActiveRecord portion of your controller call

it "shows all of the posts" do
  Post.stub(:all) { [ post1, post2 ] }
  ...
end

The code above assumes that FactoryGirl was used to create post1 and post2. The controller returns the stubbed data as JSON.

2. Use database_cleaner and :truncation strategy for integration tests

Avdi sums this method up pretty good.

I’m not sure why but I had to stop my development server after making changes to spec_helper.rb before this would work.

I also completely removed this line from the spec_helper.rb after adding Avdi’s database_cleaner code.

 config.use_transactional_fixtures = true 

Avdi’s strategy assumes that you are using js: true to enable javascript and signal that you are writing an integration test.

For example:

describe "user creates a post", js: true do
  ...
end

I ran into this problem earlier and had to do two things:

  • Run chmod 600 on the .pem file

$ chmod 600 ~/Downloads/example.pem

This allows the owner to read and write.

  • Prepend ec2-user@ to the host name

$ ssh -i path/to/example.pem ec2-user@ec2-an-ip-address.compute-1.amazonaws.com

Don’t forgot to prepend ec2-user@ to the host name once you’ve retrieved it from AWS console.

Using Angular markup in an href attribute makes the page open to a wrong URL if the user clicks that link before angular has a chance to replace it with actual URL. The link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

Here’s an example in HAML:

1
%a(ng-href='{{house.url}}') {{house.address}}