ProgrammingTips | @Cybrilla

Javascript jQuery Organisation ProgrammingTips

jQuery Best Practices- Performance

August 18, 2016 Published by: Abhishek Verma

Despite being one of the most popular JavaScript libraries today jQuery has its shortcomings too.

If used carelessly, it can lead to performance issues. This post will list some of the best practices in using jQuery that will help us avoid them.

Limit DOM Interaction
There is a cost when manipulating the DOM tree using jquery. So try to limit interaction with the DOM. Lets take a look at the below code:

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",
              "oranges"],
var list = $("ul.fruitsList");
$.each(fruits, function(index, value) {
  list.append("<li id=" + index + ">" + value + "</li>");
});

1

2

3

4

5

6

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",

"oranges"],

var list = $("ul.fruitsList");

$.each(fruits, function(index, value) {

list.append("<li id=" + index + ">" + value + "</li>");

});

Well, no points for guessing whats wrong here. This piece of code works just fine, since the fruits array is of 8 items only. But suppose we had a list of 1000 items, it would really mess up the speed of the website because we are repeatedly appending elements to the DOM, inside a loop.
Instead of doing this, we can build up a html first and then append it to the DOM.

// Dynamically building an unordered list from an array
var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",
              "oranges"],
var list = $("ul.fruitsList");
var futureItems = "";
$.each(fruits, function(index, value) {
  futureItems += "<li id=" + index + ">" + value + "</li>";
});
list.append(futureItems);

1

2

3

4

5

6

7

8

9

// Dynamically building an unordered list from an array

var fruits = ["mango", "banana", "guava", "strawberries", "watermelon", "apple", "grapes",

"oranges"],

var list = $("ul.fruitsList");

var futureItems = "";

$.each(fruits, function(index, value) {

futureItems += "<li id=" + index + ">" + value + "</li>";

});

list.append(futureItems);

Handling Events on Selectors
Though jQuery can select elements very quickly, it is not necessary to search for the same elements many times.

// Selecting the same element multiple times here.
$('.lump-sum-dist').keyup(this.calculateLumpSumSplit).bind(this);
$('.lump-sum-dist').change(this.validateLumpsumAmount);
$('.lump-sum-dist').keyup(this.calculateLumpSumTotal);
$('.lump-sum-dist').keypress(window.cred.util.isNumber);

1

2

3

4

5

// Selecting the same element multiple times here.

$('.lump-sum-dist').keyup(this.calculateLumpSumSplit).bind(this);

$('.lump-sum-dist').change(this.validateLumpsumAmount);

$('.lump-sum-dist').keyup(this.calculateLumpSumTotal);

$('.lump-sum-dist').keypress(window.cred.util.isNumber);

// better way
var contextElem = $('.lump-sum-dist');
contextElem.keyup(this.calculateLumpSumSplit).bind(this);
contextElem.change(this.validateLumpsumAmount);
contextElem.keyup(this.calculateLumpSumTotal);
contextElem.keypress(window.cred.util.isNumber);

1

2

3

4

5

6

// better way

var contextElem = $('.lump-sum-dist');

contextElem.keyup(this.calculateLumpSumSplit).bind(this);

contextElem.change(this.validateLumpsumAmount);

contextElem.keyup(this.calculateLumpSumTotal);

contextElem.keypress(window.cred.util.isNumber);

Optimize Selectors
With the first approach, jQuery queries the DOM using document.querySelectorAll(). With the second, jQuery uses document.getElementById(), which is faster, although the speed improvement may be diminished by the subsequent call to .find().

JavaScript

// Fast: $( "#container div.hello" ); // Super-fast: $( "#container" ).find( "div.hello" );

1
2
3
4

// Fast:
$( "#container div.hello" );
// Super-fast:
$( "#container" ).find( "div.hello" );

Specificity:
Be specific on the right-hand side of your selector, and less specific on the left.

JavaScript

// Unoptimized: $( "div.data .hello" ); // Optimized: $( ".data td.hello" );

1
2
3
4

// Unoptimized:
$( "div.data .hello" );
// Optimized:
$( ".data td.hello" );
Detach Elements to Work with Them
The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced detach() in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it.

detach and reattach elements
JavaScript

var table = $( "#myTable" ); var parent = table.parent(); table.detach(); // ... add lots and lots of rows to table parent.append( table );

1
2
3
4
5

var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// ... add lots and lots of rows to table
parent.append( table );

Use Stylesheets for Changing CSS
If you’re changing the CSS of more than 20 elements using .css(), consider adding a style tag to the page instead for a nearly 60% increase in speed.

// Fine for up to 20 elements, slow after that:
$( "a.login" ).css( "color", "#0769ad" );
// Much faster (though, best would be, if we write the css in a separate css file):
$( "<style type=\"text/css\">a.login { color: #0769ad }</style>")
    .appendTo( "head" );

1

2

3

4

5

// Fine for up to 20 elements, slow after that:

$( "a.login" ).css( "color", "#0769ad" );

// Much faster (though, best would be, if we write the css in a separate css file):

$( "<style type=\"text/css\">a.login { color: #0769ad }</style>")

.appendTo( "head" );

Avoid $( window ).load()
The $( document ).ready() is fired when a page’s own DOM is loaded, but not external assets like images and stylesheets while $( window ).load() is fired when everything a page is made up of, including its own content and its sub-resources are loaded.

So, if you’re writing a script that relies on a page’s sub-resources, like changing the background color of a div that’s styled by an external stylesheet, only then use $( window ).load() else it’s better to stick to $( document ).ready().

Javascript ProgrammingTips

Execute a function within a Directive from outside in AngularJS

January 6, 2016 Published by: Mahesh M

We were working on two problem statements at different points in time of a project and we interestingly found similar solution for both.

Problem A: We have a form, one of the input fields (defined as a directive) has a clear button. This clears the text in the input field, the data in the ng-model as well as the data held in the variable that gets submitted finally via the form. Now, we have a universal clear button that also needs to clear all the 3 data points.

Problem B: We have a section that has been defined as a directive which can be expanded/collapsed using a toggle button. The expand/collapse is handled by the directive. The initial state of the directive, whether it should be expanded or collapsed, is actually dependent on a value obtained from an API call.

In both cases the common thing that one can notice is that there is an external trigger that needs to be passed on into the directive. In Angular 1.4 there is no direct way to do this. Directives do support two way binding, and passing initial values. But neither would solve the exact requirement in both problems.

The solution that we came up with was passing a control object to the directive. The controller defined a control object, a key of which will be pointing to a function. This object was passed on to the directive, and directive initialised the control object’s key (control object which is two-way bound) with a function that gives access to the variables/functions inside the directive. Being two-way bound, this function is now available in the controller. This can be passed on to anywhere (factory, as it was in case of solution for problem B) or used locally.

Sample code:

$scope.control-object = MyFactory.control-object;

1	$scope.control-object = MyFactory.control-object;

<mydirective control="control-object">

1	<mydirective control="control-object">

app.directive("mydirective", function () {
    return {
        restrict: 'E',
        scope: {
            controlObject: '='
        },
        controller:function($scope){
            //Initialise control object with init function
            $scope.controlObject.initFun = function(initValue) {
                    $scope.initValue = initValue;
            };
        }
     }
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

app.directive("mydirective", function () {

return {

restrict: 'E',

scope: {

controlObject: '='

},

controller:function($scope){

//Initialise control object with init function

$scope.controlObject.initFun = function(initValue) {

$scope.initValue = initValue;

};

}

});

app.factory('MyFactory', function () {

    function MyFactory() {
        var self = this;

        self.control-object = {initFun: null};
       
        //Promise called in context of the directive
        SomeHttpService.get(url,params).then(function(response){
             self.control-object.initFun(response.data);
        });
   }

    return new MyFactory();
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

app.factory('MyFactory', function () {

function MyFactory() {

var self = this;

self.control-object = {initFun: null};

//Promise called in context of the directive

SomeHttpService.get(url,params).then(function(response){

self.control-object.initFun(response.data);

});

}

return new MyFactory();

});

ProgrammingTips

Making Aws::SES API to work with ActionMailer

June 10, 2015 Published by: Mahesh M

Aws::SES SMTP integration is a cake walk indeed. But SES API does not directly work with ActionMailer. I think there could be a better approach but for the current requirement I made it work this way:

1. Added SES as a delivery method:

In initializer, add your SES configuration and add the SES client as new delivery method:

ActionMailer::Base.add_delivery_method :ses, Aws::SES::Client,
  :access_key_id     => ENV['AMAZON_ACCESS'],
  :secret_access_key => ENV['AMAZON_SECRET']

1

2

3

ActionMailer::Base.add_delivery_method :ses, Aws::SES::Client,

:access_key_id => ENV['AMAZON_ACCESS'],

:secret_access_key => ENV['AMAZON_SECRET']

You have to specify Region as well. I had already added

AWS_REGION: 'eu-west-1'

1	AWS_REGION: 'eu-west-1'

to my application.yml

2. Asked ActionMailer to use ses delivery method in your environment:

Add the following line to config/environments/<environment>.rb

 config.action_mailer.delivery_method = :ses

1	config.action_mailer.delivery_method = :ses

Once you are done with this you are ready to send mail. Well I also thought the same, but when I ran the code BOOM. So what we dont have is deliver! method in the Aws::SES module. So you extend Aws::SES:Client. I did it in the initializer itself.

3. Added the following code to config/initializer/ses.rb

module Aws
  module SES
    class Client
      def deliver!(mail)
        ses_return = send_email( source: Array(mail.from).first,
                    destination: {
                      to_addresses: mail.destinations
                    },
                    message: {
                      subject: {
                        data: mail.subject
                      },
                      body: {
                        text: {
                          data: mail.body.encoded
                        },
                        html: {
                          data: mail.body.encoded
                        }
                      }
                    })
        return ses_return.message_id
      end
    end
  end   
end

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

module Aws

module SES

class Client

def deliver!(mail)

ses_return = send_email( source: Array(mail.from).first,

destination: {

to_addresses: mail.destinations

},

message: {

subject: {

data: mail.subject

},

body: {

text: {

data: mail.body.encoded

},

html: {

data: mail.body.encoded

}

})

return ses_return.message_id

end

VOILA! You get back the message ID that the API send back and you can store it to track the delivery status of your mail.

Note: AWS SES provides SMTP service as well, which is easier to integrate but you wont be able to track the deliver from your application. Also SMTP access key pair is different from the access key pair that we use for API (which is global API key pair. I have not tried the IAM setting with this).

Asset Pipeline Development RailsTips

How to figure out Runtime Dependencies when using Bower via Rails Assets

June 3, 2015 Published by: Mohnish Jadwani

Recently, for one of our client projects we decided to make use of Bower via Rails Assets to better manage Javascript dependencies with respect to the application. This project is on Rails 4.0.13 . For reasons as to why we choose this approach one can refer to the below two blogs –

1. Better Asset Management in Rails Using Rails Assets

2. Bower through Rails Assets

In our application, we were basically replacing the existing dependencies(few of which were placed in vendor/assets/javascripts and others were gems like the jquery-ui-rails) with gems provided to us via the Rails Assets site.

One such third party plugin that we had to replace was the jquery validate plugin. After including the appropriate gem(rails-assets-jquery-validate) from rails-assets site in the gemfile and running bundle to install that gem you might observe from the Gemfile.lock that this gem depends on the rails-assets-jquery-gem.

The BIG question now is, how does the rails-assets-jquery-validate gem(I had installed the gem with version 1.13.1) know which version of the rails-assets-jquery gem it should pick up, given that unlike rubygems.org the current rails-assets site(based on the screenshot below) doesn’t currently list the runtime dependencies required for a gem(which in our case is that we can’t directly find the runtime dependencies for rails-assets-jquery-validate gem).

The workaround

One can find out the exact dependencies required wrt a specific gem by checking out the bower.json file with respect to appropriate code repository corresponding to the gem(in the context of our e.g., this would be for checking out the bower.json file of the rails-assets-jquery-validate gem related code repository) listed on the rails assets site.

Development ProgrammingTips

Auto redirect based on language in nginx

January 9, 2015 Published by: Mahesh M

When you want to do an auto redirect based on the AcceptLanguage parameter sent by the browser the first solution that comes up in Google is this:

map $http_accept_language $lang {
default en;
~pt pt;
~es es;
}

1

2

3

4

5

map $http_accept_language $lang {

default en;

~pt pt;

~es es;

}

This will not work because the AcceptLanguage is of the following form:

And Map will always map to the first one and will not respect the priority.

Solution:

Put this in the nginx

location = / {
rewrite_by_lua '
for lang in (ngx.var.http_accept_language .. ","):gmatch("([^,]*),") do
if string.sub(lang, 0, 2) == "en" then
ngx.redirect("/en/")
end
if string.sub(lang, 0, 2) == "es" then
ngx.redirect("/es/")
end
if string.sub(lang, 0, 2) == "pt" then
ngx.redirect("/pt/")
end
end
ngx.redirect("/en/")
';
#rewrite ^/$ /en/ permanent;

# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}

location / {
try_files $uri $uri/ =404;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

location = / {

rewrite_by_lua '

for lang in (ngx.var.http_accept_language .. ","):gmatch("([^,]*),") do

if string.sub(lang, 0, 2) == "en" then

ngx.redirect("/en/")

end

if string.sub(lang, 0, 2) == "es" then

ngx.redirect("/es/")

end

if string.sub(lang, 0, 2) == "pt" then

ngx.redirect("/pt/")

end

ngx.redirect("/en/")

';

#rewrite ^/$ /en/ permanent;

# First attempt to serve request as file, then

# as directory, then fall back to displaying a 404.

# Uncomment to enable naxsi on this location

# include /etc/nginx/naxsi.rules

}

location / {

try_files $uri $uri/ =404;

}

make sure you do :

RailsTips

Creating Your First Gem is Easy…

November 28, 2013 Published by: sravani

Many of us used of so many gems in ruby, so lets try to create a basic gem.
Simple, We just have to generate two files to create your own gem.

Step1: Create a gemspec.
Create a gemspec file inside root directory, file-name should be same as your gem name (Eg: In our case its greeting_gem.gemspec)

– Specify your gem specifications

Gem::Specification.new do |s|
   s.name = "greeting_gem"
   s.version = '0.0.0'
   s.date = '2013-11-28'
   s.summary = "Greeting Gem"
   s.description = "A simple greeting gem"
   s.authors = "Sravani Perala"
   s.files = "lib/greeting_gem.rb"
end

1

2

3

4

5

6

7

8

9

Gem::Specification.new do |s|

s.name = "greeting_gem"

s.version = '0.0.0'

s.date = '2013-11-28'

s.summary = "Greeting Gem"

s.description = "A simple greeting gem"

s.authors = "Sravani Perala"

s.files = "lib/greeting_gem.rb"

end

Step2: Add some code.
Create a greeting_gem.rb file in lib folder

class GreetingGem
  def self.greeting(name)
    puts "Helloo #{name}"
  end
end

1

2

3

4

5

class GreetingGem

def self.greeting(name)

puts "Helloo #{name}"

end

Step 3: Generate gem file.

 gem build greeting_gem.gemspec

1	gem build greeting_gem.gemspec

This command will build the gem, which can be used in another ruby program.

Step 4: Test the gem.
gem install greeting_gem, to install the gem locally to test it out.
open irb
>> require ‘greeting_gem’
=> true
>> GreetingGem.greeting(‘sravani’)
Hello sravani

Isn’t it simple!
Add as many methods you want in the same way and move on to bigger things.

ProgrammingTips RailsTips

RailsTip: Setting boolean values in ActiveRecord callbacks

September 22, 2013 Published by: sravani

I realized the importance of reading documentation clearly and with care, when I spent hours debugging this stupid problem.

This is an Active Record callback in action. We are setting a boolean field ‘approved’ to false in the before_create ActiveRecord callback.

class Topic  &lt; ActiveRecord::Base
  before_create :send_to_admin_approval

  private
  def send_to_admin_approval
    self.approved = false
  end
end

1

2

3

4

5

6

7

8

class Topic < ActiveRecord::Base

before_create :send_to_admin_approval

private

def send_to_admin_approval

self.approved = false

end

This code is simple, straightforward and looks flawless, until you see a ActiveRecord::RecordNotSaved exception when you try to create a Topic. Our only savior, the errors object also doesn’t give us any information on what went wrong.

Two important things we always forget and aren’t quite obvious are

1. Implicit return values in Ruby. This feature always returns the value of the last executed statement in a method or block.

2. If an ActiveRecord callback returns false, all the later callbacks and the associated action are cancelled.

In our example, the statement ‘self.approved = false’ returns false and since that is the last statement executed in the callback, the callback returns false which cancels the create operation.

So, the best way to set boolean values in an ActiveRecord callback is

class Topic &lt; ActiveRecord::Base
  before_create :send_to_admin_approval

  def send_to_admin_approval
    self.approved = false
    true # Explicitly return true
  end
end

1

2

3

4

5

6

7

8