Git Shots, Chronicles of Coding – Short Film

How it started

Late last year I was browsing around on Coderwall and came across a cool idea to take a picture of yourself using your webcam everytime you commit some code to git. For the non-technical person, this means that every time you make some changes to a project you are working on, you get to take a shameless seflie! What better way to connect the programmatic world to visual arts than this?

Six months and 302 commits later, after “filming” non-stop all over the world, and by all over the world I mean at work, on the BART, at home and other random places in the San Francisco Bay Area since August of 2013, I am proud to present you my short film, “Git Shots, Chronicles of Coding”.

Git Shots, Chronicles of Coding from Petar Bojinov

Interested in remembering every one of your commits?

Setting it up was a challenge due to the fragmented information scattered among many different sources, so I ended up writing a blog post on how to set it up yourself.

Enjoy and please help spread the word by sharing.

MongoDB Authentication Process: Locking Up The Database


This is my second MongoDB post of many planned, so I’ve decided to start the Mini Mongo Series, catchy right?

The first problem I faced when setting up my own MongoDB instance on AWS was figuring out how to do simple authentication. If there are no users configured in myDatabase.system.users, anyone can access the database without authenticating. E.g. to prevent anyone from simply going to and accessing the data.

There are a lot of great tutorials on how to add security and authenticate using drivers but they come as many separate small tutorials. So here it is in one unified place and my experiences setting it up. If you you have any questions or comments feel free to comment below.

1. Add a user to the database

We are going to add a user to our database and  allow them to use credentials to authenticate later.

First make sure mongod is running without the auth flag.

Then run mongo in another command line to access the interactive MongoDB shell. Lets add a user to our pets database.

$ mongod 
$ mongo
> use pets 
> db.addUser('petar','myPassword');

Now that we have a user created an account, lets allow them to authenticate. Documentation here

> db.auth('petar', 'myPassword');

You can confirm this user was added by running the following.

> db.system.users.find()

2. Confirm that authentication works

A simple test case to ensure our authentication works is to run mongod --auth and try to connect from the mongo command line with and without the user credentials we previously created.

With credentials we expect to see the list of databases

$ mongod --auth 
$ mongo -u petar -p myPassword 
> show dbs
admin 0.203125GB
pets  0.203125GB

Without credentials we expect to see an error saying we are unauthorized

$ mongod --auth 
$ mongo
> show dbs
failed:{ "ok" : 0, "errmsg" : "unauthorized" }

You’ll see that since we didn’t provide our user credentials, we get an error.

Connect MongoDB to Node.js

Using the MongoDB driver from 10gen and some boilerplate code, we can connect and authenticate to the database using the user we just setup.

Run the Node.js app with environment variables

In order not to hard code the env variables in your app, which is generally a bad practice, we can pass in the credentials from the command line and have them available under process.env

$ \
node app.js


We’ve managed to create a user, enable authentication, put that authentication to use, and confirm that it is working. Our Node.js app is now connected to our MongoDB instance using an authenticated user, preventing unauthorized access.

$ successfully auth to open AWS MongoDB:  true

In-depth Resources

MongoDB Lesson Learned: Remeber To Use Indexes

After launching my first node.js + MongoDB API in production, I was religiously monitoring it like parents watching over their first born child.

As traffic started to roll in, the API server began to quietly cry. The average response in milliseconds increased as more and more concurrent queries were happening in the DB. But this wasn’t happening on my local development environment when I was running three times more traffic in my stress tests. Of course localhost beats the production environment any day of the week right?

Long story short, I forgot to enable indexes on the production environment. After adding db.collection.ensureIndex({"items": 1}) to the most important key that I was querying, the beams of sun broke through the cloudy sky.

Lets look at the difference in our famous before and after example:

> GET /sites/?… 200 2691ms – 128b

> GET /sites/?… 200 91ms – 128b

And a chart for giggles

API response time

Thanks to the awesome folks that make these amazing tools

Update: 2/11/13

On a side note, this small instance was able to handle over 1.5k requests per minute without ever breaking a sweat. Big ups OpenShift.

Take a Picture Of Yourself On Every Git Commit – The Git Commit Movie


I am always trying to connect programming to film & media in any way I can, so what better way than to take a picture of myself with my laptop’s webcam every time I commit some code.

Using a couple commands in terminal and a basic script,  you can automate the process, so all you have to do is sit back, commit some code and be photogenic.

In this tutorial, I have compiled the best of other tutorials, gotchas, and related content I have come across on the web. At the end of this, you can even star you in your own git commit movie.

Getting Started

Just a heads up, this is geared towards OSX users… for everyone else, I will add more details when I come across Linux, Windows info🙂

Step 1: Install imagesnap

brew install imagesnap

Step 2: Create post-commit hook

Add the following code from the gist below to a file called  post-commit in your repo’s ~/.git/hooks/ folder.

Step 3: Enable permissions

Lets give the file some permission (making it executable by everyone).

sudo chmod +x ~/.git/hooks/post-commit

Step 4: Start committing and smiling 

On first run, the script will create a folder called commit_images in your repo’s root. Then every time you commit code, a photo is added to the folder and to .gitignore automatically so you don’t have to.

Current Downfall

The only downfall to this solution is you have to add it to each of your git repos manually. So if you have a lot of repos it might be a pain, but then again thats what writing a script is for, right? So behold…the global solution (for new repos)!

Global Solution

1. Enable git templates. This will copy everything in the .git-templates folder to any new git repositories when you git init

 git config --global init.templatedir '~/.git-templates'

2. Create our hooks folder for the post-commit template.

mkdir -p ~/.git-templates/hooks

3. Add the post-commit file in ~/.git-templates/hooks/. We can use the same script from above in step 2.

4. Make our post-commit executable. We are giving it executable permission to all users in this case.

sudo chmod +x ~/.git-templates/hooks/post-commit

5. Start committing and smiling. Every time we  git init, we now have the post-commit hook in all of our new repos.

Nice to Have

Here are some things I am looking into:

  • Store pictures from all repos into one folder instead of in each individual repo. eg. in ~/.commit_images
  • More to come…

Stitching It All Together (Movie Time)

More details in the link, but we can essentially use ffmpeg to create a short stop motion video of our commit images.

Final Product (The Movie)

I am planning on adding my own video when I amass some pictures, but in the mean time here is a short video sample.


Special Thanks

  • Víctor Martínez – (original idea)
  • Damon Davison – (bash script)
  • Matt Venables – (global solution)
  • Lolcommits –

CORS, Internet Explorer 8, and XDomainRequest


I recently built a recipe app using a third-party API that supports CORS. Things were going along well, it was working well on all of the latest browsers (Chrome 28, Firefox 23, IE10). But when I started testing on Internet Explorer 8/9, I wasn’t getting any sort of response from the back-end. I immediately panicked, added a console.log fix and started placing breakpoints on my ajax statements to see what sort of request I was getting back.

The Problem

I came across a “No Transport” error being thrown by jQuery’s ajax. I had never heard of it, so after some searching on msdn and stackoverflow I came across a few suggestions to “quickly” fix this. Such as for jQuery 1.5+: = true;

After a couple other attempts, I accepted the fact that I will have to use IE’s XDomainRequest. To my astoundment, jQuery doesn’t natively support XDomainRequest.

Extending jQuery ajax to support XDomainRequest

Before I started implementing it, I came across a couple library’s on github and gists, but my journey to find the solution eventually lead me to @MoonScript’s jQuery-ajaxTransport-XDomainRequest repo on github. The examples provided worked like a charm on IE8, 9 and it looked like a reputable project, so I added a couple more tests to my outgoing ajax requests, then dropped in MoonScript’s library to my project. Problem solved. No need to reinvent the wheel here.

I couldn’t help myself so I’ll leave you with this:

Debug IE


Good news everybody, IE10 supports CORS using XMLHttpRequest. No more extending jQuery to support XDomainRequest.

XDomainRequest Gotchas

Some other things I came across that will save you a headache.

  1. The server protocol must be the same as the calling page protocol.
    1. This means you can’t make requests from file:// to http ://, http to https, or https to http (don’t ever do the latter)
    2. I found this the hard way by trying to run my code locally without first spinning up my localhost server.
  2. Only “text/plain” is supported for the request’s “Content Type header
  3. No custom headers can be added to the request