• Multiple yield blocks with contextual components in Ember.js

    A component in Ember.js normally takes only one block. However, with contextual components (available since Ember.js 2.3), you can achieve a similar functionality as if you had multiple block arguments to a component. The use case where I needed this is for a popover. In this blog post I will show how you can make a component that accepts multiple yield blocks by means of the popover example.

    Read more

  • The Command pattern applied to your Ember.js application

    The Command pattern is one of the patterns for object-oriented software design that is treated in the famous GoF book. The essence of the pattern is to encapsulate the actions in your application into separate objects. Using this pattern appropriately can make your code cleaner and easier to test. I had a situation in the HSTRY application (built on Ember.js) where it was well applicable and I found out that it actually fits well into the architecture of an Ember.js application. Let me elaborate on how to use the Command pattern in an Ember.js application.

    Read more

  • Agile development at HSTRY

    In a previous post, I wrote about the deployment process that the HSTRY development team follows, i.e. the flow of the implementation of a feature from local development to the live application. In this post, I will stay in the realm of agile development and explain more about our development process. Read on if you want to hear about Scrum, Trello boards and daily standups!

    Read more

  • How we deploy the Hstry application

    As an application grows in size and in users, having a good deployment process becomes increasingly important. It’s not only important in order to avoid breaking existing functionality when pushing changes but also to make sure that everyone on the team (developer and non-developer) is happy with the implementation of the feature that is going live. In this blog post I will describe how we structured our deployment process at Hstry.

    Read more

  • Internet Explorer 11 doesn’t like <main>

    Even though the <main> tag became part of the HTML5 standard in July 2013 and Internet Explorer 11 was released in October 2013, full support in the browser for the tag is missing. It seems to be behaving like an inline element instead of a block element. Fortunately, the solution is a simple one-line CSS rule, which also doesn’t affect the behavior of the tag on the other browsers.

    main { display: block; }
  • Empty scope in Rails 4 with `none`

    Rails 4 introduced the none query method which allows you to chain ActiveRecord query methods on an empty array. Imagine you have a method posts_for_user which is implemented as follows:

    def posts_for_user(user)
      return [] if user.nil?
      return Post.where(user: user)

    The problem is that ActiveRecord query methods are not chainable on the empty array []. The solution to this is the none query method (see http://api.rubyonrails.org/classes/ActiveRecord/QueryMethods.html#method-i-none for the doc):

    def posts_for_user(user)
      return Post.none if user.nil?
      return Post.where(user: user)

    Nice solution for a often recurring problem, especially if you apply defensive programming techniques.

  • Recursive search and replace from the command-line

    I found myself having to change the name of a model in a Rails and Ember.js application. This meant changing not only the name of the model, but also the controller, the serializer, the stylesheets, along with the same thing on the Ember side of things. A quick recursive search and replace did the job:

    find ./ -type f -exec sed -i -e 's/apple/orange/g' {} \;

    So first all the files in all subdirectories from the current folder are found using find and then passed on to sed to do the regex replacement.

  • Integration tests for your Ember.js application

    Yesterday I gave a slightly-longer-than-usual lightning talk at the monthly Boston Ember.js meetups. The title of the talk was “Integration tests for your Ember.js application”. Lately, there’s been a lot of attention going to testing in the Ember.js community but I feel it focuses almost exclusively on the Ember side of things. However, most applications interface with a back-end and I don’t think much has been written how to do integration tests in Ember.js that test your whole stack, including the back-end. Hence this talk. Particularly, I go into how you can seed your data before running each test.

    You can watch the video below.

  • An ‘always’ function for Ember.js Promises

    Update (11th June 2014) As was pointed out by @EmberSherpa, there’s the finally method that does exactly this. So just don’t read this blog post and use that instead!

    In the Hstry application, I had the situation where I needed to perform some operations, regardless of the result of a Promise. Unfortunately, the Promises/A+ spec does not specify an always function so this behavior was not implemented in the RSVP implementation that Ember.js uses.

    On GitHub, Yehuda Katz suggests extending RSVP with the following method andThen:

    /* 'andThen' is like 'then', but it takes a third
    /* parameter `always` that is always executed,
    /* no matter what the outcome of the Promise. */
    Ember.RSVP.Promise.prototype.andThen = function(success, error, always) {
      return this.then(function(value) {
        var ret = success(value);
        return ret;
      }, function(reason) {
        var ret = error(reason);
        return ret;

    Unfortunately, this doesn’t work for promises returned by DS.Model.save() in Ember Data because they are not of the type Ember.RSVP.Promise but instead implement the Ember.PromiseProxyMixin mixin (anyone can clarify me on why that is?). To solve this, we add the following:

    // See http://stackoverflow.com/a/24164813/1269194
      andThen: function() {
        var promise = this.get('promise');
        return promise['andThen'].apply(promise, arguments);
  • Displaying error messages in your Ember.js forms

    Handling errors in forms

    In an ideal world, all form fields in a web application would be filled in with valid values at all times. However, this is not an ideal world. Users make typo’s, omit fields by accident, or accidentally press “Enter” before having finished filling in a form. In this post, I will explain how you can easily display error messages in your Ember.js forms without too much added work.

    Read more