Simple CI with git hooks for your rails projects

In the past I have used jenkins for CI in my projects with little success. I think it was mainly because of my own sloppy setup.

However this time I wanted to do CI in the most simple way. I did some research and found this good post http://blog.javabien.net/2009/12/01/serverless-ci-with-git/. The following setup is different that the one in the above blog post, but the idea is the same, have your CI run on your local machine rather than have a server for it.

I have used pre-commit hooks in the past. It sounds nice till you want to do a quick commit and you use --no-verify and once you do that you start doing the same for subsequent commits.

For this I use a post-commit hook which triggers our CI build in the background logging all the info to /tmp/ci.log. This avoids unnecessary friction. So, when I commit it doesn’t take forever, it happens instantly. The commit gets recorded. And then, in a background process my railsci script runs all the tests.

This is the post-commit hook. I tried to keep it minimal so as to make the setup easy and maintainable across different projects.

1
2
3
4
5
6
7
#!/bin/bash
#.git/hooks/post-commit
#Author: Khaja Minhajuddin

#run our ci script with the right info
railsci "$(git log -1 HEAD --format=%H)" "$(pwd)" 1>> /tmp/ci.log 2>&1 &
echo "TRIGGERED ci build in the background, check /tmp/ci.log"

The railsci script too is pretty straightforward,

  1. It tags your commit as processing-#{buildid}, where buildid is a random hex id.
  2. Creates a folder called /tmp/#{buildid}, and clones your git repo there.
  3. Creates a new unique test database with a name app_name_test_#{buildid}.
  4. Runs all your tests and tags your commit as failed-#{buildid} if the tests fail.
  5. Removes the processing.. tag
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
#!/usr/bin/env ruby
#Author: Khaja Minhajuddin
#Date: 2012 Dec 24
#Script to run a ci build on the local computer after a commit is made


require 'securerandom'
require 'fileutils'

CommitHash = ARGV.shift
Repodir = ARGV.shift
Buildid = SecureRandom.hex
DbConfig = "config/database.yml"
Tmpdir = File.join('/tmp', Buildid)

FileUtils.mkdir(Tmpdir)

puts "started build for repo:#{Repodir} commit:#{CommitHash} buildid:#{Buildid}"
#helper functions
def run(arg)
puts "RUNNING #{arg}"
system("#{arg} 2>&1")
end

def untag(tag)
Dir.chdir Repodir
run("git tag -d '#{tag}'")
Dir.chdir Tmpdir
end
def tag(tag, msg)
Dir.chdir Repodir
run("git tag -a '#{tag}' -m '#{msg}'")
Dir.chdir Tmpdir
end
#checkout a shallow version in a tmp directory
tag "processing-#{Buildid}", "Running tests for build"
run("git clone #{Repodir} #{Tmpdir}")
#cd to this directory
Dir.chdir(Tmpdir)
#trust rvmrc
run("rvm rvmrc trust #{Tmpdir}")
#checkout the right commit
run("git checkout #{CommitHash} -b #{Buildid}")
run("bundle install")
#tweak database.yml
File.write(DbConfig, File.readlines(DbConfig).map {|x| x =~ /database:/ ? x.gsub('test', "test_#{Buildid}") :x }.join)
#migrate db
run("RAILS_ENV=test bundle exec rake db:create db:migrate")
#run specs
puts "Running tests"
if run("RAILS_ENV=test bundle exec rspec spec")
system("notify-send --urgency=low -i 'terminal' 'Tests passed for the commit - #{CommitHash}'")

else
#tag the commit as a failure
tag "failed-#{Buildid}" , "Failed build"
system("notify-send --urgency=low -i 'error' 'Tests failed for - #{CommitHash}'")
end
untag "processing-#{Buildid}"
#drop database
run("RAILS_ENV=test bundle exec rake db:drop")
#add a pass fail tag to the original repo
puts "Finished build for repo:#{Repodir} commit:#{CommitHash} buildid:#{Buildid}"

All of this runs behind the scenes without you even noticing it, if everything is good. You would find a failed-#{buildid} tag only if the tests fail. It’s working great for me. Hope it helps you guys :)

Update: Fixed redirection in git hook and added a way to notify when the tests are executed

The island of barefooters

I started a freelancing/consulting business about 4 years ago. And over the last 4 years I have built a small company which provides software development services in ASP.NET MVC and Ruby on Rails. I consider myself a good developer (who doesn’t :) ). However, I think I have created a cocoon around myself, where I am comfortable doing stuff which I understand.

About a month ago, I saw this thought shared by @dcurtis

Moderate success is the worst place for a startup. It’s worse than failure. There’s some validation, but no growth. Endless paralysis.

It hit me like a ton of bricks. I have been moderately successful, I make more money than my colleagues who work for the big companies. I have a nice office I have a few guys working with me. And this has made me comfortable. The last exciting/dangerous/risky thing I have done was quitting my job to start freelancing/consulting with just 2 years of experience. Since then, I haven’t done anything major. This is definitely not a good place to be. Mind you, I am very comfortable, but career wise / growth wise, this is not a good place to be.

In the past while discussing software products, I always used to say that India doesn’t have any takers for software products. I used to say that the general public isn’t aware of the latest technologies and don’t want to use them, which is true even today. I have talked to a few schools and their interest in technology is non-existent. However, this reminded me of a story my uncle used to say (I am not sure where he heard it):

There were two salesmen who worked for a footwear company. They were asked to go to a specific island and analyse the market for footwear.

One of them reported that the people on the Island did not know about footwear. So, there was zero potential for the company. He said that the company could not sell any of their products.

The other guy came to a different conclusion He said that this Island was full of people who didn’t have any footwear! And that there was a huge market for them to sell footwear and make money. They could get 100% of the market.

Obviously, it’s not a black and white situation. There is truth in both their conclusions. Since the Islanders didn’t know what footwear was, they wouldn’t really buy them (Why fix something which is not broken). But, if people were shown how comfortable footwear makes your life, there would be a huge market for footwear. And that is difficult, creating awareness among people, changing their perceptions is difficult.

For software products, India is like the island of barefooters. There is a huge opportunity for people like us, but it’s not easy! Awareness has to be created among customers about the benefits of technology. It is a challenging job.

Hopefully this time I will get out of my cocoon and actually build and sell a software product.

Automatically start a local godoc web server

Godoc is awesome, It allows you to browse all the documentation on your local machine by running the following command

1
godoc -http=:8090

Once you do this you can happily browse through all the documentation offline. However, you can start this process as an upstart daemon and let it run in the background. All you have to do is create a file called /etc/init/godoc.conf with the following content

1
2
3
4
5
6
7
8
9
10
11
12
13
#Upstart script to start godoc server
#Author: Khaja Minhajuddin
#*This obviously works on machines with upstart*
start on runlevel [2345]
stop on runlevel [06]

script
export HOME=/home/minhajuddin
export GOROOT=$HOME/go
export GOBIN=$GOROOT/bin
export GOPATH=$HOME/gocode
$GOBIN/godoc -http=:8090 -index=true
end script

You just need to make sure that the env vars are adjusted to your setup. Also, using -index=true runs a full text search on all your documentation (which is simply awesome). Now, you will have your godoc server at http://localhost:8090/ all the time.

On a related note, godoc can be used from the command line like:

1
2
#godoc <pkg name> Type/Func
godoc net Listener

Using inotify to speedup your learning and experimenting

Recently I have started learning go. It is fun to learn something new, However this time just to make the feedback loop faster, I wrote a small bash script (by collecting fragments from all over the internet) using inotify. Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/bash
#Author: Khaja Minhajuddin
#Wait for go files to be modified and then execute them
#Dependency: inotify-tools
#Install on ubuntu using: apt-get install inotify-tools


#the command before the pipe is a blocking command, i.e. it doesn't end
inotifywait -mrq --format '%f' -e close_write $1 | while read file
do
#here we filter any changes to files other than go files
if (echo $file | grep -E '^.*\.go$')
then
#once we know that a go file has been written to we run it
clear
echo "executing 'go run $file'"
go run $file
fi
done

The script itself is pretty self explanatory, We run inotifywait in monitor mode so that it blocks the current process, after that we pipe whatever output comes out of inotifywait which is just the filename to the while loop which doesn’t end because of the previous stream. Now, we just filter it to go source files and execute them.

This can be used with any other programming language too, you just have to change the filter and the execute command.

###Update: I started playing with go web apps recently, and the following script has been helping me with recompile and reload. Hope it helps you guys too:

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
#!/bin/bash
#Author: Khaja Minhajuddin
#Script to restart the go webserver by building and restarting the binary whenever html or go files change

function __restart_goserver(){
binary="$(basename $(pwd))"
echo "building $binary"
if go build
then
echo "killing old process"
kill -9 $(pidof "$binary") > /dev/null 2>&1
echo "starting '$binary'"
./$binary & #run it in background
echo "started with pid: $!"
else
echo "server restart failed"
fi
}

#cd to the right directory
cd $1
__restart_goserver
#the command before the pipe is a blocking command, i.e. it doesn't end
inotifywait -mrq --exclude="$(basename $(pwd))" --format '%f' -e close_write $1 | while read file
do
if (echo $file | grep -E '^(.*\.go)|(.*\.html)$')
then
echo "--------------------"
#once we know that a go file has been written to we run it
__restart_goserver
fi
done

Screenshot: screenshot

###Update 2 You need inotify-tools to get this to work. You can install it on ubuntu by running sudo apt-get install inotify-tools

How to run rails console as an authenticated devise user without knowing the password

I maintain a few rails apps for my clients (running in production). And sometimes certain bugs occur only for specific users. There are two ways to debug these issues:

  1. Get the user to show you how the bug occurs
  2. Try it out by signing into the site as that user

Now option 2 isn’t practical as your users don’t want to share their passwords with you. What I do to get around this fact is test the user interface through rails console in production. Now, we use devise for authentication so it wasn’t so hard to sign in as the desired user. All you need to run in your production rails console is:

1
2
3
4
5
class User
def validate_password?(pwd)
true
end
end

where User is your devise model. Now to signin as the desired user (foo@mailinator.com) from the console you run

1
2
3
4
5
#to sign in
app.post '/users/sign_in', user: {email: 'foo@mailinator.com', password: "<doesn't matter>"}
#to test it out
app.get '/desired-url'
puts app.response

Hope that helps

Nifty script to keep your local git repositories up to date

A lot of times when I try to hack on my code, I find that my git repository doesn’t have the latest commits. And in a lot of these instances I don’t have an internet connection (either because I am at a client’s location or because there is a power cut). Here is a little script which I use to keep all my local repos up to date automatically.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/bash
#Author: Khaja Minhajuddin
#location: $HOME/.scripts/git-update
ROOT_DIR="$HOME/r"

for repo in $(ls $ROOT_DIR)
do
cd "$ROOT_DIR/$repo"
for remote in $(git remote)
do
echo "fetching $repo $remote"
git fetch $remote
done
done
1
2
#crontab entry
@reboot /bin/bash -l -c 'cd /home/minhajuddin/ && $HOME/.scripts/git-update'

The git-update script should be pretty self explantory. I am looking at all the dirs under my “repos root dir” and for each of those I am finding the remotes and fetching them one at a time. The crontab entry on the other hand makes sure that every time I start my computer this script is executed. Also, I can run git update whenever I am online to get fetch all the new commits for my repos.

A better compare view for products in web applications

We, software developers use diffs all the time, to check how the code has changed over time. However, there are a lot of popular web applications which would benefit from a simple diff but don’t use them. Whenever I try to compare two products on ecommerce sites they give me a nice table showing the differences, but to actually see what is different I have to read each cell to compare them.

A popular indian ecommerce site

As you can see from the above screenshot most of the things being compared are the same. However there is no easy signal to the user (The yellow highlight was added by me)

Here is a diff of two versions of a readme from one of my projects

Code diff

You can see that there are 66 + 27 lines which are hidden from the view because they are the exact same. They don’t matter to me because nothing has changed in those lines. However, in the product comparison, I have to read each and every feature to find the differences. It would be great to have these kind of diffs for product comparison. Just hide the features which are the same or show some kind of color coding which convey that two products have the same feature.

A few simple hacks to get up feeling less groggy

I’ve been trying to get up early for almost 6 years now, I have had bits of success in the past. I learnt about the Stages of sleep, about REM Sleep and everything I could get my hands on. From Wikipedia

Many animals and some people tend to wake, or experience a period of very light sleep, for a short time immediately after a bout of REM.

There are devices like the Sleep tracker, which track your sleep cycles, They are a bit expensive.

In the last few days I’ve been doing these which I have helped me:

  1. Read a book for a few minutes in the bed.
  2. Set the alarm 6 hours 15 minutes from the time I sleep. The average sleep cycle for a person is 90 minutes long, so 4 cycles ~ 6 hours. However, the sleep cycle is not exactly 90 minutes for everyone, I’ve found that 6 hours 15 minutes works for me. You may have to experiment a little for this.
  3. This, I think has contributed most to my less groggy awakenings: Set the volume of the alarm to a very low setting. What I think this does is wake me up only if I am in light sleep. Having a loud alarm which can ‘penetrate’ through your deep cycles is not a good thing!

You guys can let me know if these work for you.

Github is not really free for your public/open source projects

I use Github a lot, it’s a really nice way to get your git repository online in a jiffy. However, don’t be fooled into thinking that Github is free. When you host a repository on Github, you are giving them a lot of traffic for hosting your repository. I for one hesitate to share the traffic generated by my content in return for free git hosting. I don’t have the exact numbers as they have removed the traffic graphs recently. Fortunately the announcement for the traffic graphs ( which was released 4 years ago ) has some numbers:

github-traffic 200K views in 3 months

As you can see, a popular project like rails is giving them 200K pageviews in 3 months, that is a lot of eyeballs in return for hosting a git repository for free. And these numbers are from 4 years ago, I bet they have only grown since then. Also not every project is as popular as rails, But, with the Law of averages on their side, I am sure Github is being paid handsomely for their free hosting. As they say There ain’t no such thing as a free lunch.

I need the traffic from my repos more than github does, so I am looking for alternatives.

Implementation of a fraction of jQuery to learn javascript

Today, I took a small session for a few of our trainees on javascript. And they wanted me to show the use of jQuery. One of them asked how jQuery is different than javascript. I demonstrated it by implementing a tiny fraction of jQuery. Hope it helps others understand javascript and jQuery better.

Here are the different versions of a calcuator.

###Version 1. Using jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
var result = +$('#first-operand').val() + +$('#second-operand').val()
$('#op').html(result);
})
})
</script>
<input type="text" id="first-operand" />
<input type="text" id="second-operand" />
<button id='add'>Add</button>
<div id="op">
Result
</div>

###Version 2. Using plain javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
window.onload = function(){
document.getElementById('add').onclick = function(){
var result = +document.getElementById('first-operand').value + +document.getElementById('second-operand').value;
document.getElementById('op').innerHTML = result;
}
}
</script>
<input type="text" id="first-operand" />
<input type="text" id="second-operand" />
<button id='add'>Add</button>
<div id="op">
</div>

###Version 3. Using our simple jQuery like code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
//Our tiny fraction of jQuery
window.$ = function(id){
var selectedElement = document.getElementById(id);
return selectedElement;
}
</script>
<script type="text/javascript">
window.onload = function(){
$('add').onclick = function(){
var result = +$('first-operand').value + +$('second-operand').value;
$('op').innerHTML = result;
}
}
</script>
<h2>Initial version using jQuery</h2>
<input type="text" id="first-operand" />
<input type="text" id="second-operand" />
<button id='add'>Add</button>
<div id="op">
</div>

###Version 4. Using a bit more jQueryesque 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
<script type="text/javascript">
//Our tiny fraction of jQuery
function JqueryElement(el){
this.el = el;
this.val = function(){
return el.value;
}
this.click = function(callback){
el.onclick = callback;
}
this.html = function(html){
el.innerHTML = html;
}
}
window.$ = function(id){
var selectedElement = document.getElementById(id);
return new JqueryElement(selectedElement);
}
</script>

<script type="text/javascript">
window.onload = function(){
$('add').click(function(){
var result = +$('first-operand').val() + +$('second-operand').val();
$('op').html(result);
})
}
</script>
<h2>Initial version using jQuery</h2>
<input type="text" id="first-operand" />
<input type="text" id="second-operand" />
<button id='add'>Add</button>
<div id="op">
</div>

Version 5. With chaining and jquery like onload syntax

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
<script type="text/javascript">
//Our tiny fraction of jQuery
function JqueryElement(el) {
this.el = el;
this.val = function(newValue) {
if (arguments.length > 0) {
el.value = newValue;
return this;
}
return el.value;
}
this.click = function(callback) {
el.onclick = callback;
return this;
}
this.html = function(html) {
if (arguments.length > 0) {
el.innerHTML = html;
return this;
}
return el.innerHTML;
}
}
window.$ = function(id) {
if(typeof id == 'function'){
//input argument is a callback function to be called on window.onload
window.onload = id;
return;
}
var selectedElement = document.getElementById(id);
return new JqueryElement(selectedElement);
}

</script>

<script type="text/javascript">
$(function(){
$('add').click(function(){
var result = +$('first-operand').val() + +$('second-operand').val();
$('op').html(result);
})
})
</script>
<h2>Initial version using jQuery</h2>
<input type="text" id="first-operand" />
<input type="text" id="second-operand" />
<button id='add'>Add</button>
<div id="op">
</div>

This was just for demonstration purpose for our trainees. As they say nothing in programming is magic.

xclip in a few lines of ruby

Update: I happened to check the source code of the ‘clipboard’ gem and it turns out that it depends on xclip. So the code below is just nonsense.

An xclip in a few lines of ruby

1
2
3
4
5
6
7
8
9
#!/usr/bin/env ruby

require 'clipboard'

if ARGV.empty?
Clipboard.copy ARGF.readlines.join("\n")
else
Clipboard.copy ARGV.join(' ')
end

###Use cases

1
2
3
4
5
#copy the html source of cosmicvent.com to clipboard
curl -s http://cosmicvent.com | xc

#copy date to clipboard
xc $(date)

An easy way to automate your browser

I build web applications, and use the browser a lot. And there are a few things which I do all the time. For instance, all my web applications have a login page and while developing them, I have to login every time before I start testing them. To make this pain free, I’ve added a bookmarklet in my bookmark with the following code:

1
2
3
4
5
6
//Devise login
javascript: (function() {
document.getElementById("user_email").value = "user@mailinator.com";
document.getElementById("user_password").value = "please";
document.getElementById("new_user").submit();
})()

If you know javascript, you’ll know that all this code is doing is filling the username and password and posting the form. This saves me a lot of keystrokes. Another bookmarklet which I use is to remove NSFW videos from youtube’s recommendations list

1
2
javascript:var e = document.getElementById('watch-sidebar');
e.parentNode.removeChild(e);

This code just removes the div containing the recommendation videos. These are just a few examples, if you know a little bit of javascript. You can easily create bookmarklets to make your repetitive jobs easy.

A small hack to know how long it's been

I’ve recently started ‘Going out of the the building for business’ and have to wait at a lot of places, and I have this urge to know How long it’s been since I started waiting for some one, or how long It took me to finish something. One the desktop I use the awesome gtimelog. However, I had no way to do the same when I was not using my computer. Until I noticed that my phone had a call register with timestamps. All I had to do, to log my time on an ordinary phone was call my own number, to store the call timestamps whenever I started something. Now, I know how much time I spend on different things and I can optimize it. Hope you find it helpful.

Why pen and paper Todo lists work

I have used a lot of tools to manage my TODO lists, I even wrote one (Taskr - Simple command line utility to manage your tasks). However, I keep coming back to pen and paper. I think I get it now, The biggest drawback of the Todo list apps I’ve used was that they made managing my Todo lists easy. As a result of which my lists started growing. When I use pen and paper, I have to copy everything to a new page every single day, and THAT is NOT easy. It makes me think which task is worth copying. At the end of the day, this is what makes my todo lists sane. I think I am going to stick to pen and paper for my Todo lists for a long time.

My Substance Template

Here is the substance template I use for my blog. You can get a blog with the same style just by copying this content to your substance template.

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<!DOCTYPE html>
<html>
<head>
<link href="https://substancehq.s3.amazonaws.com/assets/themes/basic-ad984f7b012b0c32734a2fe824329238.css" rel="stylesheet" />
<link href="https://substancehq.s3.amazonaws.com/assets/pygments-18ba01c79ccfbe022848bccbb4413b59.css" rel="stylesheet" />
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="/atom.xml"/>
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
<meta name="author" content="Khaja Minhajuddin" />
{{^page.indexed}}
<meta name="robots" content="noindex" />
{{/page.indexed}}
<style>
#posts-list{ margin-top: 20px; margin-bottom: 10px; }
#posts-list td.post-date{ margin: 0; text-align: center;padding-right:0; padding-left:0;}
#posts-list td.post-link{ padding-left: 10px; }
#posts-list td.post-date{width: 10%;}
#posts-list td.post-tags{width: 30%;}
#posts-list td{padding-bottom: 20px; }
#post-tags {margin-bottom: 10px;}
</style>
<title>
{{ page.title }} - {{ site.title }}
</title>
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/shiny-stuff" />
<link rel="canonical" href="{{ page.absolute_url }}/"/>
<link rel="shortcut icon" type="image/x-icon" href="http://minhajuddin.com/favicon.ico">
{{{google_analytics_script}}}
</head>
<body>
<nav>
<div class="centered">
<div class="brand">
<a href='/'>{{ site.title }} »</a>
</div>
<ul>
<li><a href="/" title="In search of the next shiny thing">Home</a></li>
<li><a href="/hire-me" title="Hire Me">Hire Me</a> </li>
<li><a href="/about" title="About Me">About</a> </li>
<li><a href="http://feeds.feedburner.com/shiny-stuff" title="Subscribe to the rss feed">Subscribe</a> </li>
</ul>
<div style="clear:both;"></div>

</div>
</nav>

<div id="wrapper">

<div class='content'>

{{#if_page}}
{{>content}}
{{/if_page}}



{{#if_post}}
<div id="post">
<h1><a href="{{ page.url }}" title='{{ page.title }}' class='post-title'>
{{ page.title }}
</a></h1>
<span class='post-date'>{{page.formatted_published_at}}</span>
{{{ page.markdownified_content }}}
</div>

<div id='post-tags'>

{{#page.tags}}
<a href='/tagged/{{.}}'>#{{.}}</a>
{{/page.tags}}
</div>


<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="minhajuddin">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<g:plusone size="medium"></g:plusone>
<hr />


<div id='comments'>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_identifier = '{{page.url}}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://minhajuddin.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
{{/if_post}}
</div>
<footer>
<div style="float:left;">
<a href="/" title="In search of the next shiny thing">home</a> ·
<a href="http://feeds.feedburner.com/shiny-stuff" title="Subscribe to the rss feed">rss</a> ·
<a href="/archives" title="Archives">archives</a> ·
<a href="/hire-me" title="hire me">hire me</a> ·
<a href="/about" title="about me">about</a> ·
<a href="/about#disclaimer" title="legal">legal</a> ·
<a href="http://github.com/minhajuddin" title="me on github">on github</a> ·
<a href="http://twitter.com/minhajuddin" title="me on twitter">on twitter</a> ·
<a href="mailto:minhajuddin.k@gmail.com" title="email">email</a> ·
<a href="http://cosmicvent.com" title="Cosmicvent Software">my company</a>
</div>
<div style="float:right;">
Powered by <a href='http://substancehq.com' title='Substance - The simple blog engine' >Substance</a>
</div>
<div style="clear:both;">
<div id="footer-sites">
<span style="color:#0074CC;font-size:140%"></span>&nbsp;<a href="http://substancehq.com" title='The simple blog engine - Substance'>substancehq.com</a>&nbsp;
<span style="color:#000;font-size:140%"></span>&nbsp;<a href="http://getsimpleform.com/" title='Simple Form - Build simple web forms'>getsimpleform.com</a>&nbsp;
<span style="color:#607848;font-size:140%"></span>&nbsp;<a href="http://redirectapp.com" title='Easy url redirection for your websites - Redirect App'>redirectapp.com</a>&nbsp;
<span style="color:#222;font-size:140%"></span>&nbsp;<a href="http://logb.in" title='Save your cherished private moments for posterity - Logbin'>logb.in</a>&nbsp;
</div>

</div>
</footer>
</div>
</div>
</body>
</html>

How to integrate a simple contact form on your blog or website

Here is a simple tool which I built, which allows you to setup a simple contact form in a jiffy. Well, you may ask: How is it different than the popular solutions like wufoo and google document forms?

Flexible

It’s flexible and It gets out of your way!

It doesn’t force you to use styles from some generic templates, Using Simple Form you can hand craft your html form without the annoying iframes. Simple Form just needs the correct form action and method. The rest of the html is in your control.

Simple Form allows you to setup forms with any kind of data (other than file uploads) in 2 easy steps:

Setup your form using the following code:

1
2
3
4
5
6
7
8
9
10
<form action="http://getsimpleform.com/messages?form_api_token=<form_api_token>" method="post">

<!-- the redirect_to is optional, the form will redirect to the referrer on submission -->
<input type='hidden' name='redirect_to' value='<the complete return url e.g. http://fooey.com/thank-you.html>' />

<!-- all your input fields here.... -->
<input type='text' name='test' />

<input type='submit' value='Test form' />
</form>

Start tracking your form submissions from this url: http://getsimpleform.com/messages?api_token=< api_token> You will also get an email whenever a new form entry is made

Here is an example form: http://minhajuddin.com/hire-me ,Hope you find it useful

markdown viewer script for your markdown documents

Update

Made the script more awesome by adding code highlighting using pygments. Download the pygments file from https://substancehq.s3.amazonaws.com/assets/pygments-18ba01c79ccfbe022848bccbb4413b59.css , and the markdown stylesheet from https://substancehq.s3.amazonaws.com/static_asset/4fbd972603b04d30730006da/markdown.css


Here is a script which I use for reading my markdown documents in the browser. It uses css from https://github.com/clownfart/Markdown-CSS. Here is a sample page with that css http://planetzxy.com/markdown/. And here is the 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
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

#~/.scripts/markdown-viewer

#!/usr/bin/env ruby
require 'rubygems'
require 'redcarpet'
require 'erb'
require 'pygments'

class CustomHtmlRenderer < Redcarpet::Render::HTML
def block_code(code, lang)
Pygments.highlight code, :lexer => lang
end
end

#@markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, :autolink => true)
@markdown = Redcarpet::Markdown.new(CustomHtmlRenderer, autolink: true, fenced_code_blocks: true, tables: true, no_intra_emphasis: true, strikethrough: true, superscript: true)


@template = ERB.new(<<EOF
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link href="https://raw.github.com/clownfart/Markdown-CSS/master/markdown.css" rel="stylesheet"></link>
</head>
<body>
<%= body %>
</body>
</html>
EOF
)

def view_markdown(filename)

if !File.exists?(filename)
puts "#{filename} does not exist."
end

opfilename = "/home/minhajuddin/tmp/mdrendered/#{File.basename(filename)}.html"
File.open(opfilename, 'w') do |f|
file_content = File.read(filename)
title = file_content.lines.first.chomp
body = @markdown.render(file_content)
f.write @template.result(binding)
end

system("gnome-open #{opfilename}")

end

ARGV.each do |arg|
view_markdown(arg)
end

how to convert html or erb to haml in vim

I use HAML a lot, it’s a very nice templating language. And I copy a lot of html/erb snippets to my haml views. Here is how you can configure vim to convert your html to haml.

1) Install the html2haml gem. If you are using rvm, generate a wrapper using the code below.

1
2
3

rvm wrapper ruby-1.9.2-p290 vim html2haml

2) Add the following mapping to your ~/.vimrc

1
2
3
4

" html2haml
:vmap <leader>h :!/home/minhajuddin/.rvm/bin/vim_html2haml<cr>

That’s it, now you can select a block of text and hit the <leader>h command to convert your html/erb to haml. You need to make sure that the paths and the rvm strings correspond to your machine settings to get this working, also html2haml needs a few more gems. Check html2haml for more info

login to your remote server using cd and rvmrc

Here is a fun trick which you can use, to simulate that a remote server is on one of your directories.

Create a folder call ~/m/example.com and in that folder create a file called .rvmrc with the following command

1
2
3
4

ssh awesomeuser@example.com -p 2302 -i ~/.ssh/awesomekey_rsa
#or whatever ssh command you use

Now whenever you run cd ~/m/example.com you will automagically be logged into your remote computer.

Obviously, this is a fun trick. All this can be done in a much nicer way using the ~/.ssh/config file.

Here are a few resources to make your ssh config more useful, allowing you to login to servers using a command like ssh myserver

I wonder what other stuff could be done using rvmrc.