Ember.js testing focusOut

Quick note how to test focusOut in integration tests in ember.
I was writing signup form using easyForm with client side validations. Note that validations return a promise so we have async call. The feature was about displaying error when I leave field.
First I wrote this and it worked on local machine. But then on CI I started getting errors after running this again it occurs that it fails sometimes.

The solution was to invoke the blur even on element instead of going to another field.  Click helper is a async helper(http://emberjs.com/guides/testing/test-helpers/#toc_asynchronous-helpers) but it's probably waiting only for click event, not the corresponding ones.

Deploying emberjs app on production

Things you should do when deploying your emberjs app on production.

Catch errors.

window.onerror - most basic but gives you not many message, file, line. In development you might think "yeah I know where is the error!". But in production you will get message, line and column from your one big js file. Moreover here ends errors from user browser extensions. So if you will see "Script error;" or one of my last favorite "The RPC server is unavailable" don't ask yourself wtf, just leave it.

Ember.onerror - better and gives us some kind of stacktrace. But it not covers everything. In ember we have promises and you may write @user.save().then => dummy.trim() That error will go into void and you will not be informed about this error. Sucks.

When you catch error:

• Notify yourself about them. Write your own controller witch will send some email or use airbrake.io.
• Track user actions? After bunch of errors without any stacktrace I've decided to track user actions(see on gits)
• Limit errors. Sometimes your code will stuck in some loop and produce hundreds of errors you don't want them.

Leave some failover.

It is good to leave old version which use the old non spa. You may give the user choice if they want to try new version with better user experience or stay for now with old one. 

Still want somehow support old ie7(6)? Maybe your ember app works with them but it will be damn slow and time you spend for fixing bug for browser used by 1% of your users is not worth. 

Don't rollback everything.

If you want to rollback your spa from production don't touch api endpoints. Someone already uses your ember app and it may work for him. When you remove api endpoints it will definitely broke it.

You deployed fix and nothing changed?

Well probably it was not a good fix :)

But there is also situation when you deploy new assets on production it will not reload existing code in user browser so some errors from old codebase may still appears. Check the current js filename and compare it with error details.

Ember-data error handling? Forget.

Make sure that you handle 500 errors from api. They can happen when you have error in you api code but also when user have very bad connection and your http server just drops request. Normally (in no spa world) user see standard browser site that he should check connection. In ember everything will just stuck, your model object will come into isSaving state or isError and any further changes modifications will be not available. 

What we can do? 

Not much, currently (rc6.2) we don't have good error handling in ember-data. It is possible to detect error(http://discuss.emberjs.com/t/how-to-know-when-a-transaction-has-been-committed/1385/2 )

but after that you can try to rollback your transaction. The last option is just to reload page when you detect error.

FishFish and vim

Wanna new shell? Try fishfish. In osx you can easily install it with brew but it will give you some old version so try:
brew install --HEAD fishfish

Unfortunately fish doesn't support all the commands from bash(why?!!). It breaks some plugin in vim but  here is solution:

set shell=/bin/bash

add to your .vimrc file.

how about state machine in html widget?

I've got the task to create complicated widget to select date. When I crystallized in my minds how it must behave, then I saw many if/then conditions. When You are in a developing process it seems to be not so scary, but when You have to change it, or fix after few weeks, usually it is a bloody mess.

I stared wonder if there is a better way to handle this and here is a way (I think)  that could help. Use a state machine concept. We can create some instance variables to save state and relaying on them build all widget logic (it is crappy) like that:

The real state machine is something where you define available states, and events which changes the state. Pretty good lib to handle this is:
https://github.com/jakesgordon/javascript-state-machine . It allows You to define for one event many routes, depending on your actual state, which suits this state diagram. Also there are callback on enter/leave state and before/after fire event. To event you can pass message(an argument), so you can treat it as normal method, which do some extra stuff.

First of all is the pen and paper,  you need to draw simple graph for your control. Circles are the states and lines are the events, and that's all. When you properly design your graph, save this to code:

Define some callbacks on enter/leave state. Also useful are callbacks on fire specific event. To each callback will be passed arguments which allow You to do specific code basing on previous/next state, and argument passed explicitly to event. Now bind dom events and call events on state machine.


Further? OOP design of this example is probably not best. Operation explicitly on view should be in one class and flow in other.

windowSlider - JQuery UI widget

Here is modified slider widget from jquery ui - https://github.com/piotrze/window-slider. The new feature is that we can set totalMin and totalMax values. When slider reach end of  window, then window is moved(increase or decrease). Just checkout bellow:

setup rails with mongo rspec jasmine

If You wonder how to create new rails app with some fancy stuff, such mongo, haml, rspec, coffeescript, jasmine here a quick recipe:



Resources:
http://www.mongodb.org/display/DOCS/Rails+3+-+Getting+Started
https://github.com/rspec/rspec-rails
https://github.com/pivotal/jasmine-gem

Html blur effect

Fakeblur - I've released simple plugin which allows to imitate blur effect like in windows aero. It in inspired by blurjs.com. I decided to remove preparing blurred image in browaser. It can generate such image only basing on one html element with defined background. For me better way is to prepare blurred background mysefl rather than counting on user turbo pc.
My fork is here: https://github.com/piotrze/fakeblur