02 August 2014

AngularJS directive for slide-down animation with lazy rendering

AngularJS directive for slide-down animation with lazy rendering

In this blog post I am going to talk about a directive I created earlier that is available in my ng-slide-down Github repository.

In the company I am working for we have a lot of widgets that are expanded via jQuery "slideToggle" function, thus when I make new components I have to adhere to existing style. As you have probably guessed new parts are written in Angular.

Another requirement I had to satisfy is that we can have a lot of these widgets on a single and rendering them all in Angular would be wildly inefficient, so it had to only render HTML if widget was expanded.

In order to use resulting directive all you need to is to add a directive ng-slide-down to your HTML element and pass a variable that is going to control it:


<div ng-slide-down="slideDown">

Code

So let's start writing the code (fiddle).


Lazy rendering

In the next step we are going to add an option to stop angular from rendering HTML unless element is expanded


<div ng-slide-down="slideDown" lazy-render>


Final steps

Now we need to take care of a few extra details. Like, for example, what should we do if user closes widget before it's been fully expanded? In this case we should cancel promise. Another case we need to take care of is change in children's height. Final code looks as following

P.S.

Make sure to update your Angular JS because older versions contain bug (fixed) in the way ng-transclude and ng-if directives interact.

Be careful in general when you are using ng-if because it creates new scope.

06 February 2014

AngularJS + Socket.io

AngularJS provides a very interactive user experience, just like Socket.io. When you combine them in a single page application awesomeness is squared.

But some of the AngularJS mechanics produce buggy behavior for Socket.io.

For example if you subscribe to an event in your controller and then go to another view scope this controller is destroyed, but event subscription is still stored in a global socket.io object. So when you go back and controller is reinstanciated you get a second subscription. After a while of you going back and forth there's a chaos!

You don't want to receive 2+ messages from 1 event in your let's say chat application. So how can we deal we it?

I'll let code and comments speak for itself (coffeescript):

And here's how you use it:

Some use case for using reconnect (it's so simple I should't have included it):

29 January 2014

Readable NodeJS authorization

Today I'm going to post a nifty piece of code for NodeJS authorization.

Wow... It's been a while since I wrote something here.

Let's get dirty, first of all there are 2 reasonable assumptions:

  • You are using Express (or just Connect).
  • You are using Passport (for authentication). Passport is used to get a current user and his role from Request object.

For those who don't know: "authentication" is about finding out who the person is, classic example is email + password. Authorization is about what this person is allowed to do.

In this example for clarity I'm going to use Coffeescript, but it can be easily translated into JS (by using for example js2coffee.org).

What I wanted to do is to use rules in middleware style that works well with NodeJS async model.

The goal for authorization is to look something like that:

This is the cleanest API I could come up with.

Custom function can do 3 things:

  1. Allow action by returning next(true)
  2. Forbid action by returning next(false)
  3. Let the next middleware decide returning next(), if it was last function in a chain, than action is forbidden

So here's code that achieves it:

The beauty is that it works well with asynchronous calls just like good Node code should.

Thank you for reading my post! Have a few interesting things going on, hope some day I find time to write about them. :-)