rinat.io

Mixing in and Extending JavaScript Getters and Setters

mail@rinat.io (Rinat) — Sun, 24 Aug 2014 21:06:26 +0000

I like to use JavaScript getters and setters. Even though they do not work in IE6-8, we can use them with node.js on server side. There's one issue though — mixing in those methods.

A lot of JavaScript libraries and frameworks have mixin helpers, for example jQuery.extend(), angular.extend() and _.extend(). It is simple and powerful, although if you try to use those methods for extending getters, here's what you'll get:

var sumMixin = {
    a: 1,
    b: 1,
    get sum() {
        return this.a + this.b;
    }
}

var Foo = function() {};
_.extend(Foo.prototype, sumMixin);

var foo = new Foo();
foo.a = 3;
foo.b = 3;
console.log(foo.sum); // will output 2

That's because after _.extend execution Foo.prototype.sum is not a method, it is actually a result of sumMixin.sum execution.

We can workaround this issue by assigning prototype directly, although if you want to add other methods to Foo.prototype you'll have to make it this way:

var Foo = function() {};
Foo.prototype = sumMixin;
Foo.prototype.bar = function() {};
Foo.prototype._test = 'test';
// And here's a getter :/
Object.defineProperty(Foo.prototype, 'test', {
    get: function() {
        return this._test;
    }
});

var foo = new Foo();
foo.a = 3;
foo.b = 3;
console.log(foo.sum); // will output 6 now

It works, but

we can apply only one mixin this way
we lose the sugar we had with extend() helpers.

If you still like magic methods and mixins you can tweak your favorite extend() method to respect getters and setters like this (based on Underscore):

_.extend = function(obj) {
    Array.prototype.slice.call(arguments, 1).forEach(function(source) {
        var descriptor, prop;
        if (source) {
            for (prop in source) {
                descriptor = Object.getOwnPropertyDescriptor(source, prop);
                Object.defineProperty(obj, prop, descriptor);
            }
        }
    });
    return obj;
};

Object.getOwnPropertyDescriptor and Object.defineProperty help us copy sum method description instead of its value to the prototype. Now mixing in works as expected:

var Foo = function() {};
_.extend(Foo.prototype, sumMixin, {
    bar: function() {},
    _test: 'test',
    get test() {
        return this._test;
    }
});

var foo = new Foo();
foo.a = 3;
foo.b = 3;
console.log(foo.sum); // will output 6

AngularJS & jQuery Plugins Memory Leaks

mail@rinat.io (Rinat) — Tue, 18 Feb 2014 18:22:12 +0000

Sooner or later working on single page applications you start worrying about JavaScript memory leaks. We're using AngularJS in our project and while it does a lot of magic behind the scene you still need to make sure jQuery plugins are getting unloaded when you leave the page because that stuff is out of AngularJS scope.

tl;dr

Use AngularJS $destroy event to unload your jQuery plugins and DOM events:

.directive('dtPicker', function() {
    return {
        link: function(scope, elm) {
            elm.datetimepicker();
            scope.$on('$destroy', function() {
                elm.data('DateTimePicker').destroy();
            });
        }
    };
});

Checking memory leak

First you need to check if there's a memory leak or not. Here's a great video that helped me to get started with timeline and profiling in chrome DevTools. It also has a good explanation on how the JavaScript garbage collector works and why memory leaks happen.

Example

To illustrate the issue I added a simple test page with two directives. Both of them use bootstrap datetimepicker jQuery plugin as an example and one of them have memory leak while another one doesn't.

In short: when you suspect a memory leak on some of your pages you need to open that page in incognito mode, run memory timeline recording and load-unload the page few times. Here's a short video where I test first datetime picker directive:

On the timeline you can see that number of DOM nodes and event listeners is constantly increasing, that's a sign of memory leak:

This process might be very time consuming, but it is the most straightforward and simple way I found so far.

AngularJS $destroy event

To fix this memory leak we need to unload the jQuery plugin when the page is changed or scope is destroyed. AngularJS has a handy $destroy event and most of the jQuery plugins provide some kind of destroy method. All you need to do is call that method on $destroy event:

.directive('dtPicker', function() {
    return {
        link: function(scope, elm) {
            elm.datetimepicker();
            scope.$on('$destroy', function() {
                elm.data('DateTimePicker').destroy();
            });
        }
    };
});

If we try same steps on the example page for the new directive now, you can see that memory is getting unloaded properly and number of DOM nodes and event listeners stay the same:

AngularJS also triggers jQuery $destroy event on the DOM element:

elm.on('$destroy', function() {
    elm.data('DateTimePicker').destroy();
});

You can make a clean up this way as well if you'd like, I haven't found any difference so far.

AngularJS Directives with jQuery Plugins

mail@rinat.io (Rinat) — Sun, 03 Nov 2013 00:00:00 +0000

AngularJS directives are very powerful, but first time it looks quite tricky on how to set them up with jQuery plugins. Let's say we want to add the spectrum jQuery color picker on our form using a directive. Here's how we could make that with an isolate scope and two way data binding:

var app = angular.module('app', []);

app.directive('colorPicker', function() {
    return {
        scope: {
            color: "="
        },
        link: function(scope, elm, attrs) {

            elm.spectrum({
                color: scope.color,
                change: function(color) {
                    scope.$apply(function() {
                        scope.color = color.toHexString();
                    });
                }
            });

            scope.$watch('color', function(newColor) {
                elm.spectrum('set', newColor);
            });

        }
    };
});

See the Pen by Rinat (@rinatio) on CodePen

Here we're listening for the color picker change event to update the data when user chooses a new one. Note that you have to use $apply here because event is being triggered from outside of angular framework. On the other hand we're watching for external data changes with angular $watch to update the color picker value.

Usually in such cases it's better to use ngModel with NgModelController instead of isolate scope and two way data binding, since it also provides a validation behavior for our input:

var app = angular.module('app', []);

app.directive('colorPicker', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ngModel) {
            elm.spectrum({
                color: ngModel.$viewValue,
                change: function(color) {
                    scope.$apply(function() {
                        ngModel.$setViewValue(color.toHexString());
                    });
                }
            });

            ngModel.$render = function() {
                elm.spectrum('set', ngModel.$viewValue || '');
            };

        }
    };
});

See the Pen by Rinat (@rinatio) on CodePen

Now we can check if the form is valid and show a proper validation error etc. In this example the text input value won't be updated and submit button will be disabled until we select the white color. Note that we cannot use isolate scope with ngModel directive.

Finally imagine we want to reuse this directive somewhere else, but it needs a different options for jQuery plugin:

var app = angular.module('app', []);

app.directive('colorPicker', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ngModel) {
            var options = angular.extend({
                color: ngModel.$viewValue,
                change: function(color) {
                    scope.$apply(function() {
                        ngModel.$setViewValue(color.toHexString());
                    });
                }
            }, scope.$eval(attrs.colorPicker));

            ngModel.$render = function() {
                elm.spectrum('set', ngModel.$viewValue || '');
            };

            elm.spectrum(options);
        }
    };
});

See the Pen by Rinat (@rinatio) on CodePen

Now we can set an additional plugin options in the colorPicker attribute like this: <input color-picker="{showInput: true}">. Notice how they are getting extended with angular.extend.

OOP Wrapper for Facebook Test Users API

mail@rinat.io (Rinat) — Tue, 15 Oct 2013 00:00:00 +0000

If you have a tight Facebook integration in your project and it's time for tests, there's a useful test users API with a simple GUI as well as a programmatic access.

Since I worked on automatic testing with behat BDD framework, I've created a simple oop wrapper with Guzzle for their json API. It's easy to install and configure, just use composer

$ php composer.phar require --dev rinatio/Facebook:~0.1

then configure namespaces, set your Facebook application credentials

use rinatio\Facebook\Test\User as TestUser;
use rinatio\Facebook\Facebook;

Facebook::setAppId('fbAppId');
Facebook::setAppSecret('fbAppSecret');

and you're ready to go:

// create a user
$user = TestUser::create(array(
    'name' => 'Jack Black'
));
echo $user->access_token;
echo $user->login_url;

// add a friend
$friend = TestUser::create(array(
    'name' => 'John White'
));
$user->addFriend($friend);

// Get full user profile
$user->fetchProfile();
echo $user->username;
echo $user->gender;

// Get all test users created in your app
$users = TestUser::all();

// Delete a user
$user->delete();

// Or delete all of them
TestUser::deleteAll();

Installing Bower Dependencies from Grunt

mail@rinat.io (Rinat) — Wed, 02 Oct 2013 00:00:00 +0000

If you use both bower and grunt in your node.js project and you don't like to perform bower install manually every time while you already have a grunt default, here's a simple task you can add to your Gruntfile.js using bower's programmatic api:

grunt.registerTask('bower', 'Install bower dependencies', function() {
    var bower = require('bower'),
        done = this.async();
    bower.commands.install().on('log', function(result) {
        grunt.log.writeln('bower ' + result.id + ' ' + result.message);
    }).on('error', function() {
        done(false);
    }).on('end', function(results) {
        done();
    });
});

Note that it has to be asynchronous. Now you can add it into your default task:

grunt.registerTask('default', ['bower', 'concat', 'uglify']);

And make sure you have bower in your npm dependencies:

npm install bower --save

Now you don't even need to install bower globally and you can run everything you need with one grunt command.

Guzzle

mail@rinat.io (Rinat) — Thu, 15 Aug 2013 00:00:00 +0000

I never liked to use php curl functions. Consider this code which sends a simple POST request:

$resource = curl_init('http://example.com');
curl_setopt($resource, CURLOPT_POST, 1);
curl_setopt($resource, CURLOPT_POSTFIELDS, ['name' => 'value']);
curl_setopt($resource, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($resource);
curl_close($resource);

It is so unreadable and hard! And all those curl_setopt constants...

But recently I discovered an amazing library with funny name: Guzzle. It is so powerful and simple, I'd like to use it everywhere. Here's a code for the same POST request with Guzzle:

Guzzle\Http\StaticClient::mount();
$response = Guzzle::post('http://example.com', [
    'body' => ['name' => 'value']
])->getMessage();

Isn't it simple?

If you look at the documentation you will find how flexible and powerful it is. It even allows to send a parallel requests through curl_multi_* functions. Guzzle is used by Drupal and other php libraries like Amazon AWS SDK and Goutte. Alright, try it yourself!

Deploying Yii Application with Capistrano

mail@rinat.io (Rinat) — Fri, 12 Jul 2013 00:00:00 +0000

There's no standard solution to deploy a php application to a server. Many developers have their own self written scripts or tools. If you're looking for something simple and powerful, try capistrano, it's awesome. It might be not so fast to learn and understand the flow of that tool, but it'll be very very useful once you get it. Even though it was originally written for ruby on rails, it isn't so hard to adjust it for any other framework/language.

Let's consider simple example with yii/php application:

$ gem install capistrano
$ clone git@github.com:yiisoft/yii2-app-basic.git
$ cd yii2-app-basic/
$ capify .

Now you have a Capify and config/deploy.rb files in your app. Copy this code sample into your config.rb, change :user, server settings, load composer and deploy your app:

$ curl -sS https://getcomposer.org/installer | php
$ git add .
$ git commit -m 'Added composer.phar and capistrano config'
$ cap deploy:setup      # prepare servers (create basic directory structure etc)
$ cap deploy:check      # check if everything requred is installed (git for example)
$ cap deploy

Now setup your http server to look into correct directory. It would be something like /home/username/www/yii2-app-basic/current/www (notice current). And there we are

Here're some useful links:

Deployment directory structure: wiki. (we replaced logs, pids, system with www/assets, runtime, vendor in our case)
Original deploy.rb code: deploy.rb
An explanation of default deployment behaviour: picture and wiki

Still cannot figure out how to set up logger...

Also you can find more information about capistrano tasks with cap -T or cap -e deploy:setup. Good luck!

Handling Yii Debug Mode

mail@rinat.io (Rinat) — Thu, 20 Jun 2013 00:00:00 +0000

If you're working with Yii, you most probably know what YII_DEBUG constant is and you know that it should be disabled on production servers. Default Yii bootstrap just put a note in index.php saying that you should remove "define-yii-debug-true" line in production mode, but how would you handle that? I've seen few different approaches.

Create specific file for debug mode

It might be something like debugmodeon in your project directory. In your index.php you check if that file exists or not and enable/disable debug accordingly. This approch forces you to apply some VCS stuff, for example you have to put debugmodeon into .gitignore.

Put settings into environment config

If you use an architecture like YiiBoilerplate with different config for specific environment, you might put code to enable/disable debug in those config files, but... In this case you should include that config before Yii being included, otherwise Yii will define constant itself and you will get a notice that "Constant YII_DEBUG already defined". So you have to either replace CMap::mergeArray with something else, or load CMap class directly without Yii autoload.

Use server environment variable

In my opinion best approach is to use server environment variable (like APPLICATION_ENV/RAILS_ENV in ZF/RoR). It's quite simple and you don't have to handle .gitignore or do some magic with configs.

if (!defined('YII_DEBUG') && getenv('YII_DEBUG')) {
    define('YII_DEBUG', true);
}
// In apache:
// SetEnv YII_DEBUG 1

// Or nginx:
// fastcgi_param YII_DEBUG 1;

You can even set that value for whole server, and every project will use it. The only drawback is that you have to know apache or nginx config a little bit :)

Click Events on Elements with CSS Transition

mail@rinat.io (Rinat) — Thu, 06 Jun 2013 00:00:00 +0000

Yesterday I faced interesting issue: click event sometimes doesn't get fired on html elements with css transition on :active state. For instance button with 3D push effect. In the example below try to click on the top edge of button and you can find a place where counter won't be updated.

Check out this Pen!

The issue become even worse if you have an html inside your button:

Check out this Pen!

Very annoying. It took me a while to figure out and seems like click event get fired only when you mousedown/mouseup on same html node. I found very interesting explanation and solution by Chris Coyier. The trick is to add :after pseudoelement with absolute position and proper left, right, top and bottom. Although Chris considered simple example without html inside button that approach seems to work in thit case too:

Check out this Pen!

Other way around is to use mouseup or mousedown event handlers instead of click for such buttons.

Hover Info Popup with CSS

mail@rinat.io (Rinat) — Fri, 24 May 2013 00:00:00 +0000

Last week I got a task to add hover info on some of our pages, like this:

At first I was intended to use jQuery hovercard but seems like it supposed to work only for one line (one word) hovering. So I decided to make it with pure css, and here's what I came up with:

Check out this Pen!

It's two divs with same rules for padding, border, shadow etc (left picture) and that's why there're some side effects. For example if you set big blur radius for box shadow (right picture):

But it works alright in simplest cases, although it worth to apply a transition here someday.

If you need to show info only on hovering part of visible text, you will have to adjust css a bit and use javascript to toggle some class name, for example:

$('.hover-info').on('mouseenter mouseleave', 'h3', function(e) {
    $(e.delegateTarget).toggleClass('hover', 'mouseenter' == e.type);
});

Have fun!

Cleaning Assets after Deploy

mail@rinat.io (Rinat) — Sun, 12 May 2013 00:00:00 +0000

If you use assets for your js, css stuff in yii application, you have to re-publish it on deploy. And probably simplest way would be to delete everything under /path/to/public/www/assets. And we used to do that same way with YiiBoilerplate deployer for example. Although it isn't quite right solution:

If browser cached html page, the js/css tags in it still point to old directory which you deleted.
If you built heavy javascript application (or even single page application) which loads JS files on the fly, with require.js for example, it won't be able to find those deleted files after deploy until you refresh the page.

And you will have an errors like this in your log:

[error] [exception.CHttpException.404] exception
'CHttpException' with message 'Unable to resolve the request
"assets/c7d87fdd/js/libs/jquery/jquery.min.js".'

So, what's a solution? Best way to clean assets I found so far is to update modification time of assets directory with shell or php touch function, since CAssetManager::publish takes hash name based on path and path mtime.

Although you won't have such issues when you publish file, not directory, because modification time will be changed on content change. But modification time of directory won't be updated unless you added/deleted some files in there.

One more note: if you use some preprocessor like compass or r.js, don't forget to apply it before "touching" a directory that has to be published.

Yii2 Preview and Composer

mail@rinat.io (Rinat) — Sat, 04 May 2013 00:00:00 +0000

Great news - Yii2 in town! I decided to spend some time and switch this site for it. I use composer for dependencies and since Yii2 doesn't support it yet I added repository definition by myself. Here's what I came up with:

Since there's no documentation for Yii2 yet, upgrading was tricky sometimes. This slideshare helped me a lot. Also built in demo app was very useful. Here're some notes:

Everything under namespaces (except Yii and YiiBase classes which is questionable)
$this isn't instance of current controller in views. It's instance of \yii\base\View class with bunch of interesting methods like beginPage, head, beginBody etc. You still can access controller through $this->context.
Asset manager supports bundles that looks promising but I wasn't able to figure out how to forcePublish them on development environment and it doesn't have old excludeFiles.
You have to use echo $this->render('view') in controller actions
For rendering partials in view you can use echo $this->render('_partial') which is the same as echo $this->context->renderPartial('_partial')

Still cannot figure out how to set up logger...

I haven't spent too much time playing with it, so I might be wrong somewhere. Definitely a lot of stuff was changed and a lot of stuff will be changed, and it certainly looks interesting and surely going to be fun!

UPD: They needed 3 days, now you can download yii2 from packagist.

P.S.: Here's a simple yii2 kickstart app on github. Comments are welcome!