BLOG

standard

Event delegation in JavaScript is fast but how fast?

22.11.2014 Posted in Javascript No Comments

People say always use event delegation for adding event because it’s faster. But how fast exactly? I really want to create a test case for this, but I couldn’t figure out how to run Benchmark.js in browser. So, I thought we could just use Chrome Developer Tool to achieve this.

What are we measuring?

As I said in the beginning, we want to know how fast event delegation is compared to direct binding that most people do. For example, I’ve always seen people do this

1
2
3
$('#ul li').on('click', function() {
  // doing something amazing.
});

What is actually doing is, jQuery will add the event to each of the li in the DOM. If you have 3-4 lis, then I don’t think it’s going to make a big difference. However, if you have a thousand lis, you will see some difference. I’ll show you by using Chrome Developer Tool.

What do we need?

We need some basic HTML

It’s going to be something like this

1
2
3
4
<ul id="parent">
  <li></li>
  // 999 more <li>
</ul>

Then we will have JavaScript like this

1
2
3
4
5
6
7
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $('#parent li').on('click', function() {
        console.log('you clicked me!');
    });

</script>

If you open your html page on Chrome you should see something like this.
Screen Shot 2014-11-21 at 7.06.19 PM

If you go down to where JavaScript is executed You will see it takes around 37ms to execute the snippet.
Screen Shot 2014-11-21 at 7.07.18 PM

Now change your snippet to be event delegation

1
2
3
4
5
6
7
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $('#parent').on('click', 'li', function() {
        console.log('you clicked me!');
    });

</script>

And refresh the page you should see something like this.
Screen Shot 2014-11-21 at 7.12.02 PM

Now it will only take 2ms to execute the snippet. It’s because the event is added to one element not 1000 of them.

This is just an easy example that you can do it yourself to improve your performance.

standard

How to create a simple vagrant plugin.

21.11.2014 Posted in Knowledges No Comments

I have been searching all over the Internet to find how to create a vagrant plugin. Vagrant homepage has information on how to create a vagrant plugin, but I would like to give a real world example. The plugin I’m going to create is vagrant-ls which is inspired by vagrant-list.

How do you start

Vagrant that you installed already won’t work with local developing plugin. So, I recommend you to create a new gemset for your plugin. If you haven’t used RVM, I highly recommend you use it now. It’s awesome!.

Once you have RVM installed you can create a gemset using this command rvm gemset create vagrant-ls. Then rvm gemset use vagrant-ls (Just in case). I recommend you do this for each of your ruby project. It helps you separate your gems, and it won’t mess up with different versions of your gems. First thing that you have to install is Bundler gem install bundler. It’s because we will use Bundler to manage all of our dependencies. Then you can create Gemfile.

1
2
3
4
5
6
7
8
9
source "https://rubygems.org"

group :development do
  gem "vagrant", git: "https://github.com/mitchellh/vagrant.git"
end

group :plugins do
  gem "vagrant-ls", path: "."
end

This is the most basic you would need for your plugin development. If you wonder what is

1
group :plugins

. Vagrant plugin has already explained that. This will load your local plugin automatically without doing

1
bundle exec vagrant install plugin vagrant-ls

which will not quite work anyway.

Then you can create your gemspec file. I name it vagrant-ls.gemspec

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require File.expand_path('../lib/vagrant-ls/version', __FILE__)

Gem::Specification.new do |s|
  s.name            = 'vagrant-ls'
  s.version         = Vagrant::Ls::VERSION
  s.date            = '2014-11-18'
  s.summary         = "List all vms"
  s.description     = "A simple vagrant plugin for listing all vms"
  s.authors         = ["Noppanit Charassinvichai"]
  s.email           = 'noppanit.c@gmail.com'
  s.files           = `git ls-files`.split($\)
  s.executables     = s.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
  s.require_paths   = ['lib']
  s.homepage        = 'https://github.com/noppanit/vagrant-ls'
  s.license         = 'GNU'
end

Then you crate Rakefile

1
2
3
require 'rubygems'
require 'bundler/setup'
Bundler::GemHelper.install_tasks

Then you move on to create your plugin using this pattern.

1
2
3
4
5
6
7
8
9
10
11
# lib/vagrant-ls.rb
require 'bundler'

begin
  require 'vagrant'
rescue LoadError
  Bundler.require(:default, :development)
end

require 'vagrant-ls/plugin'
require 'vagrant-ls/command'

I almost forget you need to create VERSION file for gemspec to get your version number

1
2
3
4
5
6
# lib/vagrant-ls/version.rb
module Vagrant
    module Ls
        VERSION = '0.0.1'
    end
end

Then you create your plugin class, this will be the place where vagrant finds information about your plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# lib/vagrant-ls/plugin.rb
module Vagrant

    module Ls

        class Plugin < Vagrant.plugin('2')
          name "List"

          description <<-DESC
          This plugin 'ls' all of the vms running inside the machine
          DESC

          command 'ls' do
            require_relative 'command'
            Command
          end

        end
    end
end

This is where you will name your command.

1
2
3
command 'ls' do
...
end

Last one, this is where vagrant will know how to execute your plugin

1
2
3
4
5
6
7
8
9
10
11
12
# lib/vagrant-ls/command.rb
module Vagrant
    module Ls
        class Command < Vagrant.plugin('2', :command)
            def execute
                exec('VBoxManage list vms')
                0
            end
        end
    end

end

I just run VBoxManage command to list all of the vms. Once you are done, you are ready to test your plugin.

You can run this command

1
bundle exec vagrant ls

. If everything is correct, it should list all of your vms with the name of your vms, so you know where you are you running all those vms.

Publish your gem

Now, it’s time to spread the love of your gem. You need to build your gem first. Remember the Rakefile? You can just run

1
rake build

It will pack your gem to .pkg folder. Then you can just run

1
gem push pkg/vagrant-ls-0.0.1.gem

. That’s it you have your gem published. If you look for documentation for publishing your gem.

You can find my repository here. The reason I create this post is that, the plugin might evolve but this blog stays and it will be a good starting point for other people.

standard

Twitter is a good tool for customer support if used carefully.

7.10.2014 Posted in Knowledges No Comments

I recently moved to NYC and I just got a pre-paid T-Mobile just to try it out how it goes. And this is what I tweeted and got a reply back from T-Mobile.

I think they might have got hundred of tweets a day. So they might have slipped. The first when I read this I quickly scrolled up to see if I got a typo. But they’re right though I chose T-Mobile. Just a little laugh for me today.