## What Is Going on Under Your JavaScript Code

Disclaimer

I’m no expert in this field nor having a PhD in Compiler. This is just my pure curiosity and I hope to share of what I’ve discovered so people can continue their curiosity.

## Why I’m interested in this.

I was asked once during my technical interview, “What happen when you execute fs.readFileSync(‘’)”. What he meant was that how JavaScript code interacts with the machine under the hood. At the time, I thought I just wrote that code and there you go I got the content of the file.

I couldn’t answer and I didn’t get the job. I just recently became a JavaScript developer because of my interest in front-end and back-end in the same time. Knowing JavaScript allows me to get the best of both worlds. However, the only thing I know about JavaScript is that it’s something to do with V8 and I had no idea what’s going on under the hood. So, I took the time to really understand how JavaScript works and the history behind it. So, I started with the task a computer does best; executing commands or how does a computer execute a command.

## How does computer works?

One of the best movies for me is “The Core” where “Rat” had to hack the Internet to control the flow of information. The hacker claims that he only knew one language, “zeros and ones”. At the time, I understood that it’s something to do with binary number, and I thought that it’s just hollywood talk and these people didn’t know what they were talking. I have to write print('Hello'); to print Hello on my console, it has nothing to do with zeros or ones.

So, I started digging and I found this.

Basically, when we execute a piece of code, the compiler compiles the code to a set of instructions which is Assembly. Then, we have an assembler to translate the instructions to their numerical equivalents. For example,

is translated in x86 architecture like this.

Notice the HEX code 83C408 which you can translate to binary number later for the computer to understand.

You can use this online assembler to play with it.

## How does JavaScript engine (v8) work?

In a nutshell, V8 translates JavaScript code to machine code with JIT (Just-In-Time) compiler.

There are four main stages of how the code passes through V8.

2. Hydrogen - Intermediate code

3. Lithium - Machine specific code

4. Machine Code - This is what your computer understand.

In this post we’re going to see the assembly code which is the machine specific code.

## Show me the code

Enough talking. Now show me the code you say. Let’s say you have a simple function to add two numbers together like this.

To view the machine code in Assembly you need to install V8. First you need to install depot-tools. Once you install depot-tools you can run Follow this instruction.

Note: The documentation of how to install V8 is subject to change. So, please refer to link.

In order to get V8 you need to run. You will also need Python 2

The script will take sometime to finish. It will fetch V8 source code. Then you need to build all the dependencies by running.

Now you need to install D8. The next step is going to take a long time. So, get yourself a nice cup of coffee.

Once everything is in place, you’re ready to see how your code is communicating with your CPU.

You can do this to get the assembly code

This is what you’re likely going to see.

~~Now, in theory you can grab the hex code and run that in C and you should be able to get the same result. I haven’t tried it please let me know if it works or not.~~ It wouldn’t work because the generated code has fixed memory address from when the program was executed.

What I learn from this post is how is my JavaScript code executed in my computer and the next time I got asked, I will be able to answer that interview question. Sometimes, it’s nicer to be asked a question like this than how to revert a binary tree on a whiteboard. Don’t you think?

Oct 4th, 2016

## Are you struggling to get anything done?

Now we have this amazing tool that could change your life… I present to you Habitica. If you click now you will get this tool for free. Does that sound like a Direct TV ad?.

I’d like to write down my experience of how I use Habitica to change my bad habit one task at a time. I was introduced to this tool when I was visiting my friend Scott Muc in Berlin. We were chatting about time management and productivity. He introduced me to Cofitivity as well, which is also another great tool to increase your productivity. I guess I don’t have to tell you about pomodoro. After 4 months later, I’ve changed some of my bad habits. One of which is making my bed. It might sounds easy but I make my own bed everyday and even while I’m travelling.

## How?

Habitica is built around Gamification. If you don’t know what Gamification is, think about badges or number of likes or favourites. People love badges and people are crazy about likes. I was once crazy about checking in all the time to earn different badged on Foursquare or give a really detailed reviews just to earn reputation. It is fun and addicting.

Also if you play video game, you must remember countless of hours you spent on killing monsters to earn XP or rare items. That’s the core idea of Habitica. It keeps your motivating and you won’t get bored easily. I say easily because eventually you will find Habitica too easy. They have a reset button where you can reset your character class or if you’re too overwhelmed by all the habits and dailies.

Habitica combines the fun of RPG (Role Playing Games) and Gamification. Instead of fighting monsters, you’re fighting with your own habits. After you get something done, you earn XP and gold so you can level up your character or buy cool weapons to show off with your friends.

## So how do I use Habitica.

Personally, I don’t use Habitica for any of my work tasks. I use Wunderlist instead. If you’re like me my work tasks tend to be really long and sometime I lose track of what needs to be done if I enter every task to Habitica. I use Habitica for anything that I want to make myself doing it or I want to change my bad habit. For example, I have a negative task every time I eat something unhealthy, like cookies or sweet. Every time I eat a cookie I have to click that - button and I’d lose my health. Or I would create a task to check my plane ticket for my next vacation.

Another example of how I changed my habit is making my bed. I created a task to make my bed every morning. It might sound too simple but it really did change my habit. Now I make my bed everyday without even knowing it. I wake up every morning, make my bed and click the checkbox. I earn XP and I feel good about it.

Another example would be that I could finish my Coursera course that I have always wanted to do for a long time. I used to sign up to all the classes on Coursera and I ended up not passing even the first week. Now I can force myself to finish the course week by week. If I don’t do it in time, my character dies, loses all the golds and one rare item.

Now if you have been playing for quite sometime, your tasks or habits can get really long which you have to scroll up and down. One thing I do is to group tasks together in checklist. For example, if I want to finish a book, I list out all the chapters then I check it off chapter by chapter. This helps you keep track of what else needs to be done.

You can also set the difficulty of the task. For example, making my bed is easy but learning a chapter on Coursera is hard. I would get more XP on my Coursera task.

Discipline is really important in Habitica. You can create as many tasks as you like and keep clicking it until you level up which no one will stop you. Eventually the game will be too easy and you will get bored and you won’t change anything. This also means that if you do negative tasks you have to click that - button. There’s no shame on binge eating on your cheat day. Habitica has reward system where you can create a reward for yourself which you have to use your golds.

## Challenge accepted!

Habitica has a social aspect that can keep you motivated. You can form a party with your friend and fight the big boss or you can accept a challenge from the community to make your game harder and more engaging. For example, I recently signed up for a Spanish class and I joined the Spanish Duolingo challenge (Now I’m 50% done). Challenges have pre-populated tasks and dallies for you already. You just have to tick them off when you finished the task. If you’re discipline enough you might get diamonds from the owner of the challenge as a reward. This way, you will have other like-minded people to discuss or to encourage each other.

## It’s open source

This is the best thing about Habitica. It’s open source. You can fork the repository on Github and create your own version or help the community to make the application better. It’s all open source including iOS and Android.

Let’s change your bad habit one task at a time! Come and say hi to me on Habitica or let me know how you use Habitica to change your habit.

All after I finished this post I get to tick it off my list!

Mar 2nd, 2016

## Gatling Cluster

### Performance matters

I think we can all agree that performance is one of the most important things in any application. That’s why we have performance or load testing. There’s a lot of tools out there we can choose from. But for this tutorial I pick Gatling.

Now it’s easy to say I want to generate 1,000,000 requests and hit the machine as hard as possible. In reality, your machine won’t be able to do that due to OS or Network Card limitations. The most common thing is ulimit

Gatling has a way to scale out the test scenario to different machines but there’s not enough documentation on the website.

Credit goes to nimrodtech for creating the script but I adapted a bit so if anybody wants to grab this please feel free.

My version assumes that you’re using EC2 instance and the directory structures are different between the host and local.

Feb 17th, 2016

## Round to the Left Most Digit

It’s probably unusual for me to write anything about Math. I hated math and I failed the subject all the time. But I got pretty excited when I knew this trick from my colleague. I also asked this question at stackoverflow.

### The problem

Let’s say you have a number 423 and you want to round the number to the nearest left-most digit which in this case it’s 4. If you want to round to the left-most digit it’s going to be 400.

### The solution

The solution is quiet simple. You just need to get the place value of the number, take the number in question divided by the place value and floor the number then multiply the result with the place value again. That’s it! Simple right?

So, the place value of 423 is 100.

\begin{align} \frac{423}{100} \end{align}

which you will get 4.23. The you floor the number

And then you multiple 4 with 100 to get the rounded number.

\begin{align} {400}\cdot{100} = {400} \end{align}

The problem is how are we going to get the place value of the number?

You want logarithm.

The idea of this is to reverse the operation of exponentiation. For example, the log10 of 423 is 2.62634036738 then 10^2.62634036738 equals 423. But you want the place value. You would need to round the 2.62634036738 which is going to be 2 then 10^2 is 100. There! you get the place value of the 4.

\begin{align} d = \lfloor\frac{n}{10^{\lfloor\log_{10} n \rfloor}} \rfloor \cdot 10^{\lfloor\log_{10} n\rfloor} \end{align}

Jan 16th, 2016

## Goals for 2016

I want to make this a habit for me that I want to make goals for every year and commit to them. So, here’s what I want to achieve in 2016.

### Fitness, psychically and mentally.

I know everyone makes this a New Year resolution. But I really want to make this true this year. I’m not much overweight and I lift. I’m really into 5x5 program and I’ve just busted my plateau from last year. This year, I want to be more consistent. Another important thing is I’m going to run a marathon this year as I didn’t do it last year even if it’s just going to be me.

Progress 1. Squat 185lb 2. Oh Press 80lb 3. Deadlift 265lb 4. Barbell Row 170lb

I’d like to increase every move by at least 25lb by the end of this year.

The most important thing for me this year is my mental hygiene. When I was a monk, I used to meditate 30 minutes a day but once I got out of it I never did it. I’m going to make this my mission to meditate 10-15 minutes a day before going to bed. I added this as my daily habit on my habitica.

This resolution kinda sums everything that I want 2016 to be. I just want to be a happy me. If something’s going to create more stress I’m just going to say no.

### Reach level of my fluency in Spanish

I’ve just started learning Spanish a couple months ago and I like the language. There’s levels of fluency but I want to be able to make at least basic conversation. I should be comfortable ordering meals in Spanish restaurants in New York city. I’m planning to travel in South America and I would like to be able to make conversation with local people. I don’t want to be able to read news or make business conversation.

### Become a Data Scientist

It wouldn’t be complete without a technical goal. I’ve just changed my career as my interests in data grew. Now I’m a Data Engineer. My day to day job is to create and maintain data pipeline for an organization. I still build stuff but it’s just different product. I like my job now but I would like to get involved more in the science. I’m taking Statistics courses and learning some algorithms to analyse a large dataset. I don’t have a degree in maths so it’s going to be a challenge for me but hey challenge accepted.

### Travel

I know this is everyone’s resolution. I have been to a lot of countries when I was working with ThoughtWorks. I’d like to go to less countries but spend more time to learn the culture and talking to local people. I used to just go to different countries to hangout by the bar or restaurant but this year I’m going to make less trips but more meaningful.

Jan 1st, 2016

# Reflections on 2015

• I gotta say that my big win for 2015 is I deleted most of my social media accounts even I didn’t plan on doing that at all. I deleted my FB account a couple times in the past. I ended up getting it back. I increase Signal to Noise ration a lot by just deleting that. I used to spend at least 1-2 hour(s) on Facebook browsing what my friends have been doing. Sometimes, I got depressed because it seemed like all the people on Facebook they are on expensive vacation trips.

At first, I was worried because I wouldn’t be able to get in touch with some of my friends and family. But I still talk to my family. We have LINE Messanger which we share pictures and videos. And all of friends that want to contact me, they always find a way to contact me if they want to contact me. I didn’t feel left out at all.

One of the main reasons that I don’t seem to like Facebook as it’s been abused a lot. My mum is the best example, she reacts aggresively and unnecessary to political opinions.

• I didn’t have any excuse for not running the Chicago Marathon but myself to blame. I didn’t train hard enough. I deferred it until 2016 and that would be my 2016 Resolutions.

• I did learn Spanish. I signed up for the beginner class and now I’m on the second level. Yo hablo poco Espanol!

• I didn’t learn to invest at all. But my knowledge on how to survive in the US has improved a lot (After spending almost \$500 on my medical bill).

• I went to Peru and it was awesome! I highly recommened anyone to do it.

# Summary

## Move to the US

I moved to the US a year ago. I didn’t regret the decision at all. I joined Fusion Media Network in 2015 as a Developer. However, as my curiosity in Data Science grows. I decided to join Condé Nast as a Data Engineer to quench my curiosity. It feels weird for the first month not building a website or web service. But I got to learn a whole new side of Engineering.

## Kollaboration

I joined Kollaboration as a Technical Director to help out my friend. Unfortunetely, I failed on Time management and I didn’t have enough time to contribute. I’ll devote 2016 to improve my Time management skill.

## Germany

I met with a bunch of ex-Thoughtworker friends in Germany and I had a blast. I realised how much I love spending time in Germany. I love Berlin and I love the culture over there. People are nice and the coffee is the best I’ve had anywhere. I also received the saddest news whilst I was in Germany.

## Thailand

I spoke in Agile Tour Bangkok 2015. My talk wasn’t that popular because I was up against with some big names but I did send my message to the audience and I got some positive feedback.

## Habit

I found the task management board that works for me. I didn’t say it’s the best because certainly it lacks a lot of features but it works for me. Will have to come up with another post for this one.

Dec 24th, 2015

## Cosine Similarity for Dummies

Have you ever wonder how recommender system works? Or How Spotify or Amazon recommends what songs you might like or what product you might like to buy. I do. In this post, I’m going to try to explain how the recommendation algorithm works. First, let’s create a perfect scenario. I like to create an ideal example, it’s easier to understand.

Let’s say you have a very simple data of movies that users like collected from your site and you would like to match those people together based on their interests. How would you do that? One of the most popular methods is Cosine Similarity. When I first saw the name I was so confused; why Cosine? I remember when I was a kid I remembered my teacher told me about trigonometry so why does it have to do with that?

Here’s the sample data.

User 1 likes these movies

User 2 likes these movies

Even without any algorithm we can say that two users like the same movies. But we want the algorithm to tell us that the two users are very similar. Before we get into the mathematical formula world. We have to understand what a vector is?

# What’s a vector?

In Pyhsics, a vector has two things; magnitude and direction which can be written as

I’d like to explain what a vector is but this site explains a lot better.

However, in Computer Science, 1-dimentional array is called a vector. But list in Python cannot perform vector operation so we have to use numpy or you have to build your own which I don’t recommend.

Now we know what a vector is but how does it relate to Cosine Similarity. In a nutshell, Cosine Similarity is a measure that calculates the cosine of the angle between them.

# Cosine Similarity

In order to find the angle between the two vectors, we need to find the dot product of the two vectors as the formula below.

\begin{align} \text{cosine-similarity}(A,B) = \frac{\left<A,B\right>}{||A||\cdot||B||} \end{align}

# Show me the code

Ok. enough about explanation, show me the code.

In the perfect example, we can see that the two users have the same interests.

Oct 29th, 2015

## Python's Monkey Patch for Dummies

Alright, I’m going to cut to the chase here. I’m having problems with Monkey patching in Python and I want to make it clear for myself and anybody who might stumble upon my post in the future. So, what’s the big deal here?

Let’s say you have a model

And you have a Phonebook class that’s trying to access the database

Now, we know that get_name is accessing some database and we don’t want that to happen in unit test. We would like to stub that.

Coming from Java, I’d write my test like this.

It makes sense right? I want to stub something from models.person.get_name so I’m telling mock to stub that class but my test failed miserably.

Why? Because patch behaves differently than what we expected. This is explained in Where to patch. I’m going to summarize for you. Basically, patch is going to take effect from where it is looked up… For me after reading that I’m still confused. I might be the only one who’s confused here so I’m going to continue writing.

If we take a closer look how import behaves in Python, it would be clearer.

The line says please import get_name to the namespace in models/phonebook.py. So, when we want to use it we can just called get_name() without having to write models.person.get_name() Now if you change your code to be

You test would pass. Because now our Phonebook is looking up models.person.get_name namespace instead of having function get_name being imported to its namespace.

Now if you want the old test to work, your patch has to be changed to

That’s it for now. If you’re wondering why this is the case then looking at the source code of patch would help a lot. It’s using __import__ function.

Oct 25th, 2015

## Why You Should or Should Not SSL Your Blog

After I switched to Octopress, I knew that I wanted to write about performance and SSL. Those are the main reasons why I switched.

Last year, Google announced that they will include Https as a single in their ranking. So, if you want to be the cool kid, go and SSL your site now. But what does SSL really do to your site? Have you seen that in action? I only know that from reading all the blog posts about this. In this blog, I’ll show you what SSL does to your site.

Thanks to my friend Suksant who helped me conducting the test.

## What will you need?

1. Wireshare is a network protocal analysis.

## Simple website.

I’ve created a simple site that you can fake login form. So, you can go ahead and deploy that to your heroku. I chose Heroku as the platform of choice because you can try the site with and without SSL.

There’s a couple things you need to do before you can capture the password.

1. Open your wireshark and go to Capture -> Interfaces and click en0 that should be your Wifi connection.

Then click ‘Start’ to capture the packets

1. In the Filter section, put this frame contains topsecret (That’s going to be your password)

1. I deployed the application here. Go ahead and enter “username” in username and “topsecretpassword” in password It could be anything. Try to check if the URL is not SSL.

without even trying to do anything hard. You can clearly see the password.

## Now with SSL.

1. Change your URL to be https:

## What gives?

In conclusion, what have we learned here? SSL encrypts everything being sent to the server will be encrypted. It’s safer and make the site more trustworthy. However, if you’re just running a blog you probably won’t need SSL. If you have a website that capture anything from the user then big ‘YES’ you need SSL. For me, I just want to be a cool kid so I SSLed my site.

Oct 9th, 2015

## Why Algorithm Matters?

If you have been to one of those technical interviews, you will like this.

I’m not going to rant about how broken the technical interviews are. There’s enough people who are more qualified to rant about this more than me.

So, why this matters? I just want to give a quick example of why algorithm matters. Please no haters! I know some of you might read this and will say “I do that all the time, what’s the big deal”. I’m still a bad developer and I’m still learning.

## Scenario

You are a general, your home country is at war and you have to fight for your country. You are given a group of soldiers. You want to come up with a strategy to win the battle. Here’s the example of the soldiers.

You came out of a high-profile meeting and all the generals agree that this formation will be best to fight the enemy; infantry, machine-gun and rocket-man. How can I rearrange this quick enough because we’re going to attack tomorrow? Simple I go ahead and write the code.

First, let’s generate a bunch of soldiers

Then let’s rearrange them.

It works, but you’re too late you can’t form the soldiers in time. If you take a closer look, this algorithm takes O(nm)* for the time complexity given the number of soldiers is n and the category is m. If you have a million soldiers and a million categories you would get O(n^2). How can we make this one faster?

Here’s my second version. Hmm, rearrange into category… category is bucket. How about using map?

This is the time difference of those two algorithms.

By just changing the data structure, you can see that the map version is almost twice as fast. I hope I can demostrate how choosing the right algorithm matters in your program.

Oct 8th, 2015