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

So now you want try again with frontend?

Those year with ie6 and craziness, when You decided to do not touch fronted never again and become "proud backend developer" .

Now we want to write single page application so anyway we have to touch css. You think in new century it will be easy, you head about html5 with those pretty logo and any browser will support it. I did.

New css properties transform and transition are really nice. We can resize, move, rotate, scale element with nice animation, using only css. But it won't work on ie.... again. Why they can't take a short release path as chorome/ff? Yet they have windows update? Ie has support for transform but without transition property it is useless for animations.
I've found working plugin for jquery to backport that features for ie9/8 - transform. It allow you to use scale, rotate, transform in .animation(). In normal browsers it will use transition and in IE it will use directx filters.

So now my first design of animation is in css(under chrome, due to debugger allow me changing value of css parameter using just arrow up/down. It really helps.). When it's nice and smooth then i do evil if isIE() and split my code for two cases. (In theory that plugin should do that stuff for me.... but in my particular case animation generated from plugin looks good only on IE)

So whats next? IE10 will be released maybe in this year, but after looking for some usage browsers version  charts over internet, it's getting sad. Current IE9 still doesn't sweep previous version.
What is your option? If You are just start creating new app, and it is not some bank stuff, drop ie8 support, at least animations. When Your application will be released, ie8 will be dying browser.

Rspec helper for sign in

After I've changed sign in logic, to use only facebook authorization my helper to sign in user in tests crashes. I used omniauth-facebook gem to handle authorization and clearance as legacy gem.
I've tried many times handle that problem.

1. Easiest way is click and fill, but that means you need connect to fb in test. We can handle that with VCR, which will mock your fb requests. Unlucky  on every test we have different user id, so recorded request will no match.
2.  Mock everything !!! Yeah, I thought I'll mock essential methods in application controller, current_user, signed_in? etc. In rspec we use rspec-mock, which has similar api as mocha.  This was little ugly, but it doesn't works. Rspec-mock has some bug with mocking methods in base class using any_instance.
3. The final solution was already designed in gem omiauth: 

hello world

Only editor crash tests. Do not read.

Nice now I know how to put gist from github