How to fix guard crashing your tmux server

Guard is an awesome rubygem which allows livereload among other things. However, when I run guard in tmux it was crashing all my tmux sessions. I guess that is because I am using Tmux 2.2 and Guard tries to use Tmux notifications for notifying about stuff. So, an easy way to fix this problem is to use libnotify for notifications. Just add this line to your Guardfile and you should be good.

1
notification :libnotify

Stop using Heroku to host static sites

I see many posts on the internet about running static sites using the development server on heroku.

This is a bad practice, This goes completely opposite to what static site generators are. Static site generators are meant to spit out the required HTML to run it from any basic webserver/webhost. Also, there is Github Pages which is an excellent host which provides hosting for static content. Heck, it even supports building of websites automatically using the Jekyll static site generator.

The servers which come bundled with the static site generators are a conveneince to test your site locally and not something to be hosted on a production server.

If you are a figure with a big following, please don’t propagate bad practices. It may seem like a fun/clever exercise for you, but it in the end it sends the wrong message.

P.S: I am building an Automatic Deployment Solution which can build and deploy websites to Github Pages, it supports Hugo, Jekyll, Middleman, Octopress and Hexo. I would love to hear your feedback on it.

Removing duplication in ERB views using content_for

While writing code to show themes in Zammu, I had to show the same button in two places on the same page. The easy way is to duplicate the code. But that causes problems with maintainability.

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%= content_for :secondary_nav do %>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<< FIRST COPY -->
<%= form_tag("/") do %>
<button class='btn btn-lg btn-primary push-top-10'>Looks good, let's clone this</button>
<% end %>
<% end %>

<div class="row">

<div class="col-md-4">
<div class="thumbnail">
...
</div>
</div>

<div class="col-md-8">
<dl>....</dl>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<< SECOND COPY -->
<%= form_tag("/") do %>
<button class='btn btn-lg btn-primary push-top-10'>Looks good, let's clone this</button>
<% end %>
</div>

</div>

To remove duplication I just used a content_for and captured the code that had to be duplicated and used yield to spit it out in the two places. The changed code is:

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

<%= content_for :clone_btn do %>
<%= form_tag("/") do %>
<button class='btn btn-lg btn-primary push-top-10'>Looks good, let's clone this</button>
<% end %>
<% end %>

<%= content_for :secondary_nav do %>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<< FIRST COPY -->
<%= yield(:clone_btn) %>
<% end %>

<div class="row">

<div class="col-md-4">
<div class="thumbnail">
...
</div>
</div>

<div class="col-md-8">
<dl>....</dl>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<< SECOND COPY -->
<%= yield(:clone_btn) %>
</div>

</div>

Now if I have to change the button, I have to do it only in one place. Our code is DRY as a bone :)

Lets build a dumb static site generator

Static Site Generators are awesome because of their speed and robustness.

There are many static site generators.

However, understanding how to use them is not very straightforward to new users. Let us try to build a simple static site generator to better understand the problem.

The problems with managing websites are the issues of publishing, duplication and maintenance. If your website has multiple web pages, then more than 70% of the structure between the pages is the same. This includes the styling, header, footer, navigation. If you write the html for your pages manually, things become difficult when you need to make changes. That is why we have static generators to make things more maintainable.

The simplest way to build our generator would be to put the common stuff in one file and the changing content in other files.

For our example we’ll put the common markup in a file called layout.html and the page specific content in their own pages in a pages folder.

So we are looking for something like below:

1
2
3
4
5
.
├── layout.html
└── pages
├── about.html
└── index.html

Now with the structure out of the way, we need to decide how we are going to notate the ‘changeable area’ or ‘placeholders’ in the layout. I am using a dumb way to notate placeholder, we’ll use _PAGE_TITLE for the title and _PAGE_CONTENT for the page’s content. So our layout looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
# layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>_PAGE_TITLE</title>
</head>
<body>
_PAGE_CONTENT
</body>
</html>

We can now replace these placeholders with the custom content from pages.

Our index page from our example site looks like below:

1
2
3
4
# pages/index.html
<h1>Welcome to our home</h1>

<p>This is an awesome site</p>

Now, to finally build the website, we need to do the following:

  1. Read the layout.html file.
  2. Read all the individual pages from the pages folder
  3. For every page replace the placeholders in the layout page and write it out to public/page-title.html

Here is our final script:

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
#!/usr/bin/env ruby

require 'fileutils'

# this generates a static site into a public folder for the current directory

# create the folder
FileUtils.mkdir_p "public"

# read the layout
layout = File.read("layout.html")


# read the pages
Dir["pages/*html"].each do |page_filepath|
page = File.read(page_filepath)
# replace the page title and page content
title = File.basename(page_filepath) # we'll use the filename as the title
rendered_page = layout.gsub("_PAGE_TITLE", title)
rendered_page = rendered_page.gsub("_PAGE_CONTENT", page)

# write it out
File.write("public/#{title}", rendered_page)
puts "generated #{title}"
end

puts "DONE"

By, the way I am building an Automatic Deployment solution which can build and deploy Hugo, Hexo, Middleman and Octopress sites to Github pages

I created a small asciicast too, you can watch it below:

A bash script to replace gtimelog for the terminal

I have been using this script to log my time for a long time, thought I would share it.

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
# Usage:
# log time
# $ gl browsing redding again
# $ gl finished Hugo recipe for zammu.in
#
# check log
# $ gl
#
# check last 2 logs
# $ gl t -n2
#
# edit the timelog file
# $ gl e

function gl() {
gtimelog=~/timelog.txt

[ $# -eq 0 ] && tail $gtimelog $2 && return

case $1 in
t|c) tail $gtimelog $2
;;
a) echo "$(date "+%Y-%m-%d %H:%M"): $(tail -1 $gtimelog | sed -e 's/^[0-9 :-]*//g')" >> $gtimelog
;;
e) vi $gtimelog
;;
*) echo "$(date "+%Y-%m-%d %H:%M"): ${@/jj/**}" >> $gtimelog
;;
esac
}

If you have an API make it curlable

These days APIs are everythere which is a good thing. However, many APIs are very tedious. You can tell if your API is easy to use by looking at how simple it is to curl it.

Take an example of the below API call, it is from a stripe blog post demonstrating their use of ACH payments. See how easy it is to read and understand the call? Why can’t all APIs be like this?

1
2
3
4
5
6
7
curl https://api.stripe.com/v1/charges \
-u sk_test_BQokikJOvBiI2HlWgH4olfQ2: \
-d amount=250000 \
-d currency=usd \
-d description="Corp Site License 2016" \
-d customer=cus_7hyNnNEjxYuJOE \
-d source=ba_17SYQs2eZvKYlo2CcV8BfFGz

Anyway, if you are trying to design an API, Please, for the love of all that is holy make it curlable

How to get a git archive including submodules

Here is a small script I wrote to get a git archive of your repository containing all the submodules with the root repository.

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
#!/bin/bash
#
# Author Khaja Minhajuddin
# File name: git-archive-all
# cd root-git-repo; git-archive-all

set -e
set -C # noclobber

echo "> creating root archive"
export ROOT_ARCHIVE_DIR="$(pwd)"
# create root archive
git archive --verbose --prefix "repo/" --format "tar" --output "$ROOT_ARCHIVE_DIR/repo-output.tar" "master"

echo "> appending submodule archives"
# for each of git submodules append to the root archive
git submodule foreach --recursive 'git archive --verbose --prefix=repo/$path/ --format tar master --output $ROOT_ARCHIVE_DIR/repo-output-sub-$sha1.tar'

if [[ $(ls repo-output-sub*.tar | wc -l) != 0 ]]; then
# combine all archives into one tar
echo "> combining all tars"
tar --concatenate --file repo-output.tar repo-output-sub*.tar

# remove sub tars
echo "> removing all sub tars"
rm -rf repo-output-sub*.tar
fi

# gzip the tar
echo "> gzipping final tar"
gzip --force --verbose repo-output.tar

echo "> moving output file to $OUTPUT_FILE"
mv repo-output.tar.gz $OUTPUT_FILE

echo "> git-archive-all done"

Elastic objects in ruby

Here is an example of an elastic object wrapper in ruby

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
class ElasticObject

attr_reader :object
alias_method :value, :object
def initialize(object)
@object = object
end

def method_missing(method, *args, &block)
return ElasticObject.new(object.send(method, *args, &block)) if object.respond_to?(method)

return ElasticObject.new(nil) if !object.is_a?(Hash)

result = [method] if key?(method)
result = [method.to_s] if key?(method.to_s)
return ElasticObject.new(result)
end

end

emp = ElasticObject.new({"name" => "Mujju", "age" => 1})


puts emp.dob.month # => nil
puts emp.name # => "Mujju"

Recursive/Deep open struct for hashes in ruby

So, I had to convert a hash into an open struct to make accessing things easy. Here is the code.

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

require 'ostruct'

module DeepStruct

def to_ostruct

case self
when Hash
root = OpenStruct.new(self)
self.each_with_object(root) do |(k,v), o|
o.send("#{k}=", v.to_ostruct)
end
root
when Array
self.map do |v|
v.to_ostruct
end
else
self
end

end

end

Object.send(:include, DeepStruct)

Default user for coreos on Digital Ocean

I just started playing with Coreos to run my docker containers. However, when I spun up an instance on Digital Ocean with my private key, I wasn’t able to login using the root account. It turns out that Digital Ocean sets up the private key for an account with the name core. So, the next time you are stuck doing this just try logging in with the core account.

1
ssh core@<your-ip>

Show Rails Flash messages in jquery ajax requests

In the past I struggled with having a consistent strategy for showing error messages in javascript. In rails we usually put the error/success messages in the flash, However if the request is an ajax request the flash doesn’t get used and the message shows up on the next page load.

The following code shows error/success messages using the flash properly

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#app/classes/ajax_flash.rb
#include this module in your Applicationcontroller
module AjaxFlash
extend ActiveSupport::Concern

included do
after_filter :add_flash_to_header
end

private
def add_flash_to_header
# only run this in case it's an Ajax request.
return unless request.xhr?
# add flash to header
response.headers['X-Flash'] = flash.to_h.to_json
# make sure flash does not appear on the next page
flash.discard
end

end

Include this javascript code

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
(function(){
var notifiers, showErrorsInResponse, showFlashMessages;

notifiers = {
notice: 'success',
alert: 'error',
info: 'info'
};

showFlashMessages = function(jqXHR) {
var flash;
if (!jqXHR || !jqXHR.getResponseHeader) return;
flash = jqXHR.getResponseHeader('X-Flash');
flash = JSON.parse(flash);
return _.each(flash, function(message, key) {
return toastr[notifiers[key]](message);
});
};

showErrorsInResponse = function(jqXHR) {
var error, response;
if (!jqXHR || !jqXHR.responseJSON || !jqXHR.responseJSON.errors) return;
response = jqXHR.responseJSON;
error = _.map(response.errors, function(messages, property) {
return _.map(messages, function(x) {
return "" + property + " " + x;
}).join("<br />");
});
return toastr.error(error, "ERROR");
};

$(function() {
return $(document).ajaxComplete(function(event, xhr, settings) {
showFlashMessages(xhr);
showErrorsInResponse(xhr);
return xhr.responseJSON.errors;
});
});
})(this)

To use this you just need to use your normal code with respond_to

1
2
3
4
5
def create
@user = User.new(params[:user])
flash[:notice] = 'User was successfully created.' if @user.save
respond_with(@user)
end

The impact of shiny looking design on user uptake

Today I saw a submission on HN about formspree.com which allows you to setup a form on your site similar to google forms / wufoo but without an iframe, so you can tweak it as much as you like. A quick whois lookup shows that this domain was created on 17 Feb 2014 which is just a few days ago. I had launched a similar service called http://getsimpleform.com/ almost 2 years ago. It differs with formspree in a few aspects though. When I was thinking about creating simpleform, I didn’t want to expose the users email to the public by putting it in a form as formspree does, it is just a design choice I made. getsimpleform also has spam prevention using akismet and allows you to create forms with file uploads. So, it is a bit more feature rich then formspree.

However, the point I am trying to make here is about the impact of a good looking visual design on how users perceive your product. Formspree has 209 upvotes (at the time of this post) and getsimpleform.com posts (5 submissions all of which were made by me) have a sum of 7 upvotes. Look at the difference in their screenshots.

Formspree Simple Form

I had made the design simple just to convey the ‘Simple’ theme, but it seems to have backfired on the impression it makes on users. I will spend time and make the interface a bit more shiny. I hadn’t expected the HN crowd to go by appearances. Good to learn new lessons.

My best wishes to the formspree folks

Script to cleanup your music one song at a time

I have a big library of music with a lot of songs I don’t like anymore or songs which were a part of an album from which there was one song which I liked. And whenever my music player starts playing these songs, I hit a keyboard combo which goes to the next song. But these songs would be in my library just waiting to annoy me again. Here is a little ruby script which I wrote from an idea by my friend Abdul Sattar.

1
2
3
4
5
6
7
8
9
10
11
12
13
#!/home/minhajuddin/.rvm/rubies/ruby-1.9.3-p194/bin/ruby
require 'uri'
require 'fileutils'

song = `banshee --query-uri`.chomp
song = song.gsub(/uri:.*file:\/\//,'')
song = URI.decode(song)

FileUtils.mv(song, '/home/minhajuddin/badmusic/')
system("/usr/bin/banshee --next")
puts "Moved song '#{song}'"

#mv "$(ruby -e 'require "uri"; puts URI.decode(ARGV.join.gsub(/uri:file:\/\//,""))' $(banshee --query-uri))" /home/minhajuddin/badmusic/

I also have a keyboard shortcut bound to it which triggers it.

1
, ((modMask, xK_x     ), spawn "/home/minhajuddin/Dropbox/private/scripts/remove-current-song &> /tmp/log") -- %! Remove music from library

Now whenever banshee plays a song which I don’t like I can remove it from my library forever by just hitting ‘Windowx+x’

Cloud Computing / Virtualization

Cloud computing is mostly a buzzword. In the old days when people wanted a server to put run their software on it (like a website), they used to order a dedicated (also called bare metal) server with a hosting company (like rackspace.com), these companies would setup a server with your configuration and then give you access to it so that you could put your software and use it anyway you want. This usually would take days and the server companies needed upfront payments for setup and monthly fees for server costs. So, if you wanted to put a website for a week for a small conference you would have to pay for the setup and the fee for the minimum rent duration (which would typically be a month).

With this kind of setup it used to be hard for website developers/maintainers to scale their website. Scaling usually means adding more servers to your setup or adding more resources (CPUs/RAM etc,.) to your existing servers, to be able to handle an increase in traffic to your website or software.

With the advancement of technologies, and with the inception of virtualization, hosting providers have become more flexible. Virtualization technologies allow you to have any number of ‘virtual servers’ running on any number of ‘real/physical servers’. So, you can have one real computer running two ‘virtual servers’, one might be a linux operating system and another a windows operating system simultaneously. Virtualization is useful because not all servers run at their full capacity all the time. So, if there are two ‘virtual servers’ running on one physical server, they share their resources (CPU, RAM etc,.) and since they are not using all their resources all the time, the resources can be shared. The important thing about virtualization is that you can create as many virtual servers as you want (as long as your hardware can handle the load) very easily. So, this has allowed hosting providers to setup huge clusters of hardware running virtualized servers on top of them. So, now if you want a virtual server, it will be ready at the click of a button. You can even create a virtual server, increase its RAM size by running a simple command. This allows web developers and administrators to automatically increase the number of servers when their is an increase in traffic and shutdown servers when there is less traffic. And since you only pay for the amount of time your servers are running and not by months, you can have efficient setups without wasting your money. If you had a supermarket wouldn’t it be awesome if you had 100 checkout lanes when you had a huge amount of customers (on weekends) and only 1 when there are no customers? Virtualization/Cloud computing allows web administrators to do this.

More information can be found here:

HTTP

HTTP is a protocol used by computers to communicate with each other. A protocol is just a series of rules/steps which need to be followed for communication. e.g. If you want to buy a chocolate from the mall, you can go to the mall, find the chocolate put it in a shopping cart, go to the checkout counter and pay the bill. This can be thought of as a protocol, In this example, the steps are not very strict, but in computer protocols there is no scope for ambiguity.

HTTP is used whenever you visit a website. HTTP lays out the rules the communication between your browser and the web server. Here is an example of what happens when you open enter cosmicvent.com in your browser and hit enter:

1) The browser finds the IP address of cosmicvent.com (which at the moment is 176.9.113.5). 2) It sends it a text message using another protocol called TCP/IP. The message looks something like this:

GET / HTTP/1.1
Host: cosmicvent.com
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,hi;q=0.6,te;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: __utma=223412489.1036637458.1339923857.1366442947.1368767056.19; __utmz=223412489.1339923857.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

This is called an HTTP ‘Request’, It says that the browser is ‘making’ a ‘GET’ request using the ‘HTTP/1.1’ protocol and that the browser is looking for a ‘document’ called ‘/‘ of type ‘html’ or ‘xhtml’. The ‘User-Agent’ has information about the version of the browser.

3) Now, the webserver which is the software running on google sends an HTTP ‘Response’ which looks like the following:

HTTP/1.1 200 OK
Server: nginx/1.0.11
Content-Type: text/html; charset=utf-8
Keep-Alive: timeout=20
Status: 200 OK
Cache-Control: max-age=60, private
X-UA-Compatible: IE=Edge,chrome=1
ETag: "39a5d8d65c963b21615df87157699c2e"
X-Request-Id: 8a9bce4126abb10ca9fdd1e76a1ea520
X-Runtime: 0.059963
X-Rack-Cache: miss
Transfer-Encoding: chunked
Date: Sun, 19 May 2013 17:38:22 GMT
X-Varnish: 2087699445
Age: 0
Via: 1.1 varnish
Connection: keep-alive

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
  <!--[if IE 7 ]>    <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
      <!--[if IE 9 ]>    <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
        <!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
            <title>
              Home - Cosmicvent Software
            </title>

Now this text is understood by the browser, the browser reads the header which is the part above the empty line (above <!doctype html>). The response says that the server is also using the ‘HTTP/1.1’ protocol, the 200 and OK mean that the response was ‘successful’ and it didn’t fail (The 200 is a status code, and HTTP has many status codes with different meanings, you might have seen 404 Not found in a browser, that means the document requested by the browser could not be found by the webserver). It also tells us when this document was sent, and some more information which is understood by the server. Another important Header is the ‘Content-Type’ which tells the browser what type of document the response is. In this example it says the content type is an html document. So, the browser renders it as an html page. If the content type was an image, the response would have something like: ‘Content-Type: image/png’, which would tell the browser to render it as an image. What follows after the empty line (the <!doctype html>…) is the actual content.

An analogy for an HTTP Response is a mail package. The cover of the mail package has information about the package like the weight of the package, the address to which it is to be delivered, its contents. And when you open the package it contains the actual items. An HTTP response is similar but it has different information in the ‘Header’ (the package wrapping). This information is sometimes also called meta data. And, the actual document comes after an empty line after the header.

You can read more about HTTP here: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Angularjs templates and rails with eager loading

Angularjs loads the templates used through the [ng-include] (http://docs.angularjs.org/api/ng.directive:ngInclude) directive on the fly. This might cause a lot of requests to be made to your server which is not a good thing.

This solution allows you to load all your templates in one go and it will actually shove all your templates into your final application.js file.

GOTCHA: If you use this approach you will have to change this file whenever a template changes in development, if you don’t it won’t recompile this file which will cause your app to use old templates. This happens only in development and it’s a pain, I don’t know how to solve it yet. Anyone who knows can help me out here :)

Update: Steven Harman has shared a solution which uses depend_on, I have amended my script to use it.

1
2
3
4
5
6
7
8
//app/assets/javascripts/ngapp/templates.js.erb
<% environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper } %>
angular.module('templates', []).run(function($templateCache) {
<% Dir.glob(Rails.root.join('app','assets','templates', '*.haml')).each do |f| %>
<% depend_on(f) %>
$templateCache.put("<%= File.basename(f).gsub(/\.haml$/, '') %>", <%= Haml::Engine.new(File.read(f)).render.to_json %>);
<% end %>
});

This loads all the templates from your /app/assets/templates directories which have an extension .haml. And you can use templates just using their filename without the haml extension. e.g. a template called app/assets/templates/filter.html.haml can be included using

1
%div(ng-include="'filter.html'")

Make sure you have //= require ./templates in your application.js and that you include 'templates' as a dependency in your angular module

1
AA.root = angular.module('root', [.., 'templates',..])