How to Change Your Habit One Task at a Time

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.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
#Assuming same user name for all hosts
USER_NAME='ubuntu'

#Remote hosts list
HOSTS=( IP_ADDRESSES )
PEM_FILE=~/.ssh/your_pem.pem

#You should change all of this values to suit your structure
CURRENT_DIRECTORY=$(pwd)
GATLING_LOCAL_HOME=$CURRENT_DIRECTORY/performance/gatling
GATLING_REMOTE_HOME=/home/ubuntu/gatling

GATLING_LOCAL_SIMULATIONS_DIR=$GATLING_LOCAL_HOME/user-files/simulations/
GATLING_REMOTE_SIMULATIONS_DIR=$GATLING_REMOTE_HOME/user-files/simulations/

GATLING_LOCAL_RUNNER=$GATLING_LOCAL_HOME/bin/gatling.sh
GATLING_REMOTE_RUNNER=$GATLING_REMOTE_HOME/bin/gatling.sh

#Change to your simulation class name
SIMULATION_NAME='YOUR_SIMULATION'

#No need to change this
GATLING_LOCAL_REPORT_DIR=$GATLING_LOCAL_HOME/results/
GATLING_REMOTE_REPORT_DIR=$GATLING_REMOTE_HOME/results/

GATHER_REPORTS_DIR=~/Downloads/reports/

echo "Starting Gatling cluster run for simulation: $SIMULATION_NAME"

echo "Cleaning previous runs from localhost"
rm -rf $GATLING_LOCAL_REPORT_DIR
mkdir $GATLING_LOCAL_REPORT_DIR
rm -rf $GATLING_LOCAL_REPORT_DIR

rm -rf $GATHER_REPORTS_DIR
mkdir -p $GATHER_REPORTS_DIR

for HOST in "${HOSTS[@]}"
do
  echo "Cleaning previous runs from host: $HOST"
  ssh -i $PEM_FILE -n -f $USER_NAME@$HOST "sh -c 'rm -rf $GATLING_REMOTE_REPORT_DIR'"
done

for HOST in "${HOSTS[@]}"
do
  echo "Copying simulations to host: $HOST"
  scp -i $PEM_FILE -r $GATLING_LOCAL_SIMULATIONS_DIR/* $USER_NAME@$HOST:$GATLING_REMOTE_SIMULATIONS_DIR
done

for HOST in "${HOSTS[@]}"
do
  echo "Running simulation on host: $HOST"
  ssh -i $PEM_FILE -n -f $USER_NAME@$HOST "sh -c 'nohup $GATLING_REMOTE_RUNNER -nr -s $SIMULATION_NAME > $GATLING_REMOTE_HOME/run.log 2>&1 &'"
done

echo "Running simulation on localhost"
$GATLING_LOCAL_RUNNER -nr -s $SIMULATION_NAME

echo "Gathering result file from localhost"
ls -t $GATLING_LOCAL_REPORT_DIR | head -n 1 | xargs -I {} mv ${GATLING_LOCAL_REPORT_DIR}{} ${GATLING_LOCAL_REPORT_DIR}report
cp ${GATLING_LOCAL_REPORT_DIR}report/simulation.log $GATHER_REPORTS_DIR


for HOST in "${HOSTS[@]}"
do
  echo "Gathering result file from host: $HOST"
  ssh -i $PEM_FILE -n -f $USER_NAME@$HOST "sh -c 'ls -t $GATLING_REMOTE_REPORT_DIR | head -n 1 | xargs -I {} mv ${GATLING_REMOTE_REPORT_DIR}{} ${GATLING_REMOTE_REPORT_DIR}report'"
  scp -i $PEM_FILE $USER_NAME@$HOST:${GATLING_REMOTE_REPORT_DIR}report/simulation.log ${GATHER_REPORTS_DIR}simulation-$HOST.log
done

mv $GATHER_REPORTS_DIR $GATLING_LOCAL_REPORT_DIR
echo "Aggregating simulations"
$GATLING_LOCAL_RUNNER -ro reports

#using macOSX
open ${GATLING_LOCAL_REPORT_DIR}reports/index.html
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

1
  Math.floor(4.23); // 4

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}

Show me the code

1
2
3
4
n = 423
d = Math.floor(Math.log10(n))

Math.floor(n / Math.pow(10, d)) * Math.pow(10, d) // 400
Jan 16th, 2016

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

Retrospective 2015

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

1
['Superman', 'Walking Dead', 'CSI']

User 2 likes these movies

1
['Superman', 'Walking Dead', 'CSI']

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.

1
2
3
4
5
6
7
8
import numpy as np

def cosin_sim(v, w):
    return np.dot(v, w) / np.math.sqrt(np.dot(v, v) * np.dot(w, w))

# 1 if movie is in the list of movies and 0 is not. 
cosin_sim([1, 1, 1], [1, 1, 1])
# 1.0

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

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

models/person.py
1
2
3
4
def get_name():
	// Doing some database lookup
	// But I'm going to return a hard-coded name for now
	return 'John Doe'

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

models/phonebook.py
1
2
3
4
5
6
from models.person import get_name

class Phonebook(object):

    def lookup(self):
        return get_name()

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.

tests/test_phonebook.py
1
2
3
4
5
6
7
8
9
from unittest import TestCase, mock
from models.phonebook import Phonebook

class PhonebookTestCase(TestCase):

    @mock.patch('models.person.get_name')
    def test_main(self, mock_person):
        mock_person.return_value = 'Another Name'
        self.assertEqual('Another Name', Phonebook().lookup())

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
tests/test_phonebook.py F

=================================================================================== FAILURES ===================================================================================
_________________________________________________________________________ PhonebookTestCase.test_main __________________________________________________________________________

self = <tests.test_phonebook.PhonebookTestCase testMethod=test_main>, mock_person = <MagicMock name='get_name' id='4460968592'>

    @mock.patch('models.person.get_name')
    def test_main(self, mock_person):
        mock_person.return_value = 'Another Name'
>       self.assertEqual('Another Name', Phonebook().lookup())
E       AssertionError: 'Another Name' != 'John Doe'
E       - Another Name
E       + Noppanit

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.

models/phonebook.py
1
from models.person import get_name

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

models/phonebook.py
1
2
3
4
5
6
import models.person

class Phonebook(object):

    def lookup(self):
        return models.person.get_name()

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

tests/test_phonebook.py
1
2
3
4
5
6
7
8
9
from unittest import TestCase, mock
from models.phonebook import Phonebook

class PhonebookTestCase(TestCase):

    @mock.patch('models.phonebook.get_name')
    def test_main(self, mock_person):
        mock_person.return_value = 'Another Name'
        self.assertEqual('Another Name', Phonebook().lookup())

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.

Setup your wireshark

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)

Capture the 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.

  1. Once you’ve submitted your password, you should see that Wireshark has captured something already.

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

Now with SSL.

  1. Change your URL to be https:
  2. You will not find anything with your password on Wireshark

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.

Reference

  1. Wireshark tutorial
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.

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
27
28
29
30

[
    {
        "category": "machine-gun",
        "id": 0,
        "name": "D408CF"
    },
    {
        "category": "machine-gun",
        "id": 1,
        "name": "C0BAD7"
    },
    {
        "category": "rocket-man",
        "id": 2,
        "name": "04B5E4"
    },
    {
        "category": "rocket-man",
        "id": 3,
        "name": "22F3CF"
    },
    {
        "category": "machine-gun",
        "id": 4,
        "name": "811E8A"
    }
    ,
    ...
]

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

1
2
3
4
5
6
7
8
9
10
11
12
class Soldier(object):
    def __init__(self, id, name, category):
        self.id = id
        self.name = name
        self.category = category

number_of_soldier = 10000

soldiers = []
for i in range(0, number_of_soldier):
    name = str(uuid.uuid4().get_hex().upper()[0:6])
    soldiers.append(Soldier(i, name, random.choice(categories)))

Then let’s rearrange them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import json
import uuid
import random
import time

categories = ['infantry', 'machine-gun', 'rocket-man']

start = time.time()
result = []
for c in categories:
    s_list = []
    for s in soldiers:
        if s.category == c:
            s_list.append(s)

    result.extend(s_list)
    s_list = []

end = time.time()
print(end - start)

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?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from collections import defaultdict

start = time.time()
map_of_soldiers = defaultdict(list)

for s in soldiers:
    map_of_soldiers[s.category].append(s)

result = []
for c in categories:
    result.extend(map_of_soldiers.get(c))

end = time.time()
print(end - start)

This is the time difference of those two algorithms.

1
2
0.00743103027344
0.00331783294678

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

Octopress on Crack

I believe you will find a ton of blogs writing about makeing Octopress faster. I believe nearly everyone who migrated their blog to Octopress, the first post would be the migration and the next would be performance tuning. I want to be the cool kid so here you go.

Once you got out of WordPress now there’s much more you can do about your performance. But before you start, nothing can be done before you have the baseline numbers

Before

Here’s my before performance from Google PageSpeed.

And from webpagetest.org

In a nutshell, my page starts to render in 2.4s and finishes in 4s. Yikes! I wouldn’t even want to wait for my site to load. Let’s see where’s the lowest hanging fruit.

What about images?

A picture is worth a thousand words. Who doesn’t like image right? Also, I tend to have a lot of screenshots and they’re all PNGs. And they tend to be big. As they’re all screenshots so I don’t really care about losing some of the quality so I convert them to be jpg. If you’re using OSX, there’s a command that you can run.

1
sips -s format jpeg your_png.png --out your_pic.jpg

Now what can we do to reduce the size? There’s lots of tools out there that you can just throw your image in and it will compress the image for you. I use compressor.io. It’s really good. Just try throwing your image in there and see what happens. Compressor.io can reduce my images up to 60% and that saves a lot of bandwidth.

Minify CSS/JS

Fortunetely, I use Cloudflare and they have the feature to minify that for you. So, I just flipped the switch and it works like magic.

Browser caching

Going back to what Google PageSpeed tells us again. It complaints about Leverage browser caching. I’m lucky again because in Cloudflare you can set the cache to be 30 days and that seems to be ok for Google.

Inline CSS

I use Slash theme and when I look at the CSS, it’s only 22K. So why not just inline it and save one more request for the browser. So, in _includes/head.html you can change the line that includes your stylesheet to be.

html
1
2
3
<style>
		{\% include screen.css %} # delete '\' in front of % before you paste this snippet
	</style>

This might be different from theme to theme but it shouldn’t be difficult to find that out.

After

Now, let’s have a quick look at the after performance.

Here’s my after performance from Google PageSpeed.

It’s a lot better now but there’s one tiny problem with mobile which I’ll write another blog post about that.

Let’s have a look at webpagetest now.

A lot better! It’s still not the best but now my page loads within 0.5s and finishes in 1.9s. However, there’s still a lot to work on mobile.

I could shead about 200ms by not using SSL but I’m willing to compromise that with a little bit of security.

What’s next

I’d like to try hosting the images on S3 to see if that would speed up the load time. And I want to make the images responsive for mobile.

Oct 7th, 2015