#emberspotlight

If you haven’t heard already, popular static hosting site Divshot was acquired by GoogleFirebase last week. For those of you using them to host your Ember apps, know that the service as we know it will cease to exist on December 14th, 2015. Furthermore, because Firebase hosting is inferior to Divshot, those of you who want a custom domain for your sites will not be able to simply migrate over to their new offering without forking over a subscription fee. Life as we knew it with Divshot is over, unfortunately.

Despair not, however! In walks Pagefront, the dedicated hosting solution for Ember applications! Using their simple addon Ember-Pagefront, you can easily deploy your projects to production in minutes. Simply follow these steps:

Create a Pagefront Account

Add an app in the Pagefront dashboard to represent your application deployment

Copy the installation command from the dashboard an execute it from the command line.

That's it! Now you will be able to deploy your app to Pagefront with ease using the `ember deploy` command.

If you’ve been following my Twitter, you won’t be surprised by this week’s Spotlight choice. Ember-Sinon is an essential addon that provides an Ember CLI wrapper around Sinon, a framework-agnostic stubbing library. Some of you may know of my own related library, Js.Edgar, and wonder why I’m promoting Sinon instead. Simply put, I wrote Edgar during a time when Sinon didn’t play nicely with Ember CLI, before Ember-Sinon existed. Furthermore, I wrote it to be a super lightweight library focused on the unit testing story for spies & stubs. It still does that very well, and I’m proud to have an easy-to-understand DSL for the API that effectively accomplishes its goal. However, Sinon was built for more extensive purposes, and it may be better suited for ambitious applications. Additionally, it has an Ember CLI addon, whereas I haven’t gotten around to writing one for Edgar yet (though you can still easily use it as a global in your Ember app). There are still use-cases where each library is useful, especially given that Sinon has some overlap with addons like Ember-CLI-Mirage. YMMV, so pick what works for you, which brings me back to the main point.

Ember-Sinon gives us an easy bridge to the Sinon library, allowing us to create spies, stubs, mocks, and more in our tests. For unit testing, this means we can test the I/O of a specific method without allowing any additional methods to be executed, so that our assertions are verifying the exact behavior we want to test. If you’ve seen Ember-Sinon before, you might know that it had a shim to integrate Sinon-QUnit, a great library that turns each test callback into a sandboxed Sinon environment, making it easy to create and cleanup spies without any manual work. However, this created a problem for two reasons:

Ember-QUnit also wraps the test callbacks and executes them with a custom context from Ember-Test-Helpers, which in turn destroyed the context that the Sinon sandbox was created in.

With Sinon being a framework-agnostic library, it didn’t make much sense for Ember-Sinon to deviate from that path to specifically support QUnit.

So, for my Open Source Good Deed™ this week, I decided to solve both of these problems with a brand new addon, Ember-Sinon-QUnit! This project exports a new test that properly wraps test callbacks to play nice with Ember-QUnit so that developers have a simple drop-in solution for sandboxing their spies, stubs, and mocks. Furthermore, the release of this addon enabled Ember-Sinon to drop explicit support for QUnit, which improves the story for integrating Sinon with other testing libraries, such as Ember-CLI-Mocha. In fact, mocha users could build a similar Ember-Sinon-Mocha addon that applies the same sandboxing technique to their tests. If you do, let me know and I’ll update this post to recommend it, too.

This week’s spotlight is on an indispensable addon, Ember-CLI-Document-Title. This project takes your routing to the next level by allowing you to easily set your application’s document title on a per-route basis. Ember-CLI-Document-Title supports both static and dynamic page titles, giving you both ease of use and flexibility to meet your project’s needs. This week’s Open Source Good Deed™ was another Ember 2.x upgrade, bringing the addon up-to-date with the latest dependency versions.

I’m going to leave you with another great tip for using this addon, courtesy of some recent work by my CheckMate colleague Chris Nixon. We’re leveraging Ember-CLI-Document-Title to additionally set a page header in our application, like so:

Router.reopen({ pageHeader: inject.service(), setTitle(title) { this._super(title); this.set('pageHeader.title', title); } });

Ever had to deal with redesigning an application while maintaining old routes so that existing links out in the wild still hit the correct content? If so, Ember-Redirect has the answer! In the author’s own words, “this addon aims to be a simple and easy way to preform route based redirects with minimal effort.” Looking at the README examples makes it clear that this is truly the case, as redirects can simply be defined within the Ember Router and this addon takes care of the rest.

For my Open Source Good Deed™ of the week, I went through and submitted a PR upgrading the addon to the latest Ember-CLI blueprint, as well as adding a bit more interactive nature to the dummy app. As mentioned in previous Spotlights, I’ve also integrated ember-cli-github-pages so that a demo application can be easily deployed.

This week’s spotlight is on a relatively unknown addon, Ember-World-Flags, brought to us by Francois Harbec. This project is does just one thing, and it does it incredibly well; it provides a useful Ember Component for displaying world flags by codes according to the ISO 3166-1 alpha-2 Specification. Nearly all of the 263 officially recognized countries, territories, and special areas are supported.

This addon is great if your app has any sort of International features, whether it’s allowing a user to select their home country or displaying the flag associated with a phone number based on its country code. For my Open Source Good Deed™, I submitted a Pull Request upgrading the addon to the latest dependency versions provided by Ember-CLI, as well as building a demo app that can be deployed via ember-cli-github-pages. Until that PR is merged, you can view my fork’s demo page here:

http://github.jhawk.co/ember-world-flags/

Looking to contribute to Ember-World-Flags? That’s great! There are ~40 remaining country codes that are not yet added to the repository, and your help completing the ISO spec would be greatly appreciated. Just check out the issue I opened in the project repo detailing the missing flags and open a PR today!