BLOG

standard

My 2015

5.02.2015 Posted in Knowledges No Comments

I just want to take a break from writing about technical posts to just talk about myself a little bit. I’m inspired by Scott Muc’s post about his 2015 Resolutions. Before getting into 2015 I want to take a step back and review my 2014

My 2014

  • I got the opportunity to work in Turkey as part of my consulting job with ThoughtWorks. I can count Turkey to be my 6th country I have lived and worked in. I used to work and live in Thailand, China, India, United Kingdom, Germany, Turkey.
  • Learned C#. C# is the first language I learnt at school when Windows Form was a big thing. I loved it but then the web took over and I felt in love with Java instead and never look back. The project in Turkey is C# so I got to relearn that again and I can say that I like it more than Java now. The language is nicer and more functional. I can do more stuff with less code.
  • Moved to the US.

My 2015

Move to the US and join Fusion

I decided to join Fusion and left my glamorous consulting job. Partly because of the city. I felt in love with New York City when I was there in 2013 for a conference and I thought it would be nice to live here. When the opportunity came I took it immediately. Now two months passed by and I still love the city and my job. Much to explore and lots of places to travel in the US. Fusion is also the first place I get to know what’s like to work remotely. I absolutely love it. I get to be anywhere and also do what I love which is coding. I will write another post about remote collaboration later. Fusion is a media company which is a new field that I haven’t explored before.

Join Kollaboration

I join Kollaboration New York as a Technical Director because of my roommate Tanner Chung. Kollaboration is a non-profit organization that help and promote Asian American artists through entertainment. In this organization, I get to learn what’s like to be Asian American. I’m asian myself but I was born in Asia. So, I didn’t know the problems a lot of asian people living abroad having.

What I want to do in 2015

Learn to invest

Who doesn’t want to have money? I’m going to learn how to invest my saving and will keep posting the results.

Travel across America

When I was living in Europe, you can get to a lot of countries in just 2-3 hours but in America everywhere is so big and South American has always been my dream location.

Learn Spanish

My previous goal leads to this goal. I speak Thai, English and Mandarin. I learnt German before but didn’t really get anywhere. This year I’m going to learn Spanish and make it my fourth language. I love languages and it’s fun to talk to the locals and amazed them with their language.

Run a marathon

My friend Rajveer and Srini inspire me to running. I’m a chubby guy and I really want to get into shape. Running a marathon takes a lot out of you mentally and physically. I thought if I could do it at least for once, I’d accomplish something.

Summary

I started off 2015 pretty good. I went to India for my friend’s wedding in Rajasthan. I went to US west coast to experience super cold whether. I learned PHP and WordPress and improved my JavaScript skills which I will continue doing that.

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.