1.) Setup Hostgator

Make sure you have SSH access. Shared hosting accounts with Hostgator do not come with SSH access by default. You will to go to the support chat and ask for SSH access, this will only take minutes and is effective immediately.  Once they give you access, make sure you can login. SSH port for hostgator is 2222. Here is how you would SSH into your account with your Hostgator username and password.

ssh USER_NAME@your-domain.com -p 2222
...
Enter your password: *********

Get your public key into Hostgator.Your public key is located at ~/.ssh/id_rsa.pub, copy the contents and paste it in a file on Hostgator: ~/.ssh/authorized_keys. If ~/.ssh/authorized_keys does not exist on Hostgator, then create it with touch ~/.ssh/authorized_keys. Incase you don’t have ~/.ssh/id_rsa.pub, run ssh-keygen in your console and hit enter all the way through. At the end of that, you will have the ~/.ssh/id_rsa.pub file on your computer.

Configure your repo on hostgator. First, you need to set a config option in your hostgator repo to accept pushes into this working directory. SSH into hostgator, navigate to your repo directory and run this command:

git config receive.denyCurrentBranch ignore

Finally, you need to set a git hook that will refresh your working directory after the push has been accepted. Save the following content in: PATH_TO_REPO/.git/hooks/post-receive.

#!/bin/sh
# Save this in: PATH_TO_REPO/.git/hooks/post-receive
GIT_WORK_TREE=../ git checkout -f

Then, make it executable with chmod +x PATH_TO_REPO/.git/hooks/post-receive

2.) Setup Your SSH Config Locally

Automate SSH connection for Hostgator. In order to add hostgator as a git remote, you need to automate the fact that you will be connecting to hostgator via port 2222 and you will not be using your password for authentication. Your need to edit/create the file ~/.ssh/config on your computer. Then add this content.

Host your-domain.com
  Port 2222
  PreferredAuthentications publickey

Now, you should be able to login with ssh user_name@your-domain.com without needing to type your password. If this is not the case, start over at step 1.

3.) Setup Hostgator as a Remote

Add your domain as a remote. On your computer, navigate to your git repo and run this command:

git remote add hostgator-live user_name@your-domain.com:www/site-directory

Now, you can make you changes to your repo and when you are ready to push your changes:

git push hostgator-live

Something to think about

With this setup it is now easy to have a “dev” site on your hostgator account too. SSH into hostgator and replicate your repo into a different folder (~/www/dev). Locally, setup a new remote:

git remote add hostgator-dev user_name@your-domain.com:www/dev

So, from now on you can git push hostgator-dev to test out your new changes. When you are ready to make your changes live: git push hostgator-live

Pre and Code Tags In Github

Not sure when/where I found that you could use <pre> and <code> tags, but I liked the idea. The only problem was syntax highlighting, but recently I decided to inspect their markup to see how they convert they fenced option into HTML. In doing so, I found out what attributes you need.

<pre lang="javascript"><code>
if(foo==true)
  alert('yes sir');
else
  alert('boo scenario');
</code></pre>

This method is my favored one thus far. Not buggy and you know what to expect. Here is an example of a huge block of C# code that ONLY worked with these <pre> and <code> tags, all documented methods bugged out.

Documented Markdown For Code

There are 2 documented ways to do code blocks in Github’s markdown.

1.) 4 Space Indent

In my case, this is awkward. Especially when pasting in a block of code.

    if(foo==true)
      alert('yes sir');
    else
      alert('boo scenario');

2.) Fenced code block with `

This is the format I’ve used the most, seems easier than the 4 space indent. You need to start with 3 ```language and end the fence with another 3 ```. This method has proven to be buggy.

```javascript
if(foo==true)
  alert('yes sir');
else
  alert('boo scenario');
```

Gtalk Adapter

If you are interested in using this adapter in your private Hubot and do not want to upgrade Hubot to v1.1.9, you can download the adapter at my repo.

The beauty of the Gtalk adapter is that is only depends the node-xmpp node package, which is already part of hubot. You can literally drop in that adapter and you are good to go.

Environment Variables

Even though the official Hubot wiki has a page about this adapter, here are the two environment variables you need:

export HUBOT_GTALK_USERNAME="example@domain.com"
export HUBOT_GTALK_PASSWORD="account password"

Enjoy

If you have any issues with the Gtalk adapter or wish to submit a feature request, feel free to create an issue on Hubot’s main repo and mention @mexitek in the description or the comments. In mentioning my name I will be notified and Github staff will bug me to support the adapter.

Incase you have no idea what Hubot is, and you are genuinely interested, you can read Github developers talk about him here and here.

Have you deployed to no.de before? Familiar enough with Hubot? Skip this tutorial and see exactly what you need from my gist.

1.) Before we start

• Create an account on no.de
• Fire up a node.js smartmachine.
• Add ssh config options to your ~/.ssh/config file. Instructions on your machine’s dashboard.
• Add you public ssh key to your account. Instructions here.

Make sure you can ssh into your node machine.

ssh useraccount.no.de

2.) Adding environment variables

A hubot adapter is basically the type of chat environment you want Hubot to connect to: Campfire, IRC, Gtalk, Email, XMPP, hipchat, etc. Every adapter has it’s own environment variables that need to be added to your server.

You can see some examples on Hubot’s Wiki on adapters. Here is the page for Campfire’s Adapter.

The user that will be running node.js applications on your no.de server is “node-service”. In order to add environment variables for this user we must ssh into your machine with the admin account.

ssh admin@username.no.de

Once you have logged in, you need to edit the following file: /home/node/node-service/profile and paste in your environment variables.

sudo vim /home/node/node-service/profile

In the vim editor, press “i” to insert. Type in (or paste on Mac) your environment variables. When finished press “esc”, “:w!”+enter to save and finally “:q”.

# Hubot stuff
export HUBOT_CAMPFIRE_TOKEN="token here"
export HUBOT_CAMPFIRE_ROOMS="roomID,roomID,roomID"
export HUBOT_CAMPFIRE_ACCOUNT="campfire subdomain"

3.) Download Hubot

You can get the latest version of Hubot from the repo’s download page. Unzip the package.

4.) Prepare Hubot for No.de

No.de looks for a file named server.js that will kick start your app upon a git push. Hubot has no such file and is written in coffeescript rather than plain Javascript. We must add a line to package.json that will tell No.de how to launch our application. Also, we need to add a file called config.json that will tell No.de which nodejs version to use.

Create config.json

It only need to contain the following.

{"version": "v0.4.11"}

Edit package.json

Add the following line to the bottom of the file. This will launch Hubot’s Campfire adapter.

,"scripts": { "start": "./bin/hubot --adapter campfire" }

5.) Push Hubot to No.de

You need to step into that folder to create a new git repo, create a git remote for no.de and finally push your repo to No.de.

git init
git remote add no.de username.no.de:repo
git push no.de master
... lots of output should end with:
win!

That’s it.

Now go to your Campfire chatroom and mess with Hubot.

Postgre Function

After abandoning the quest for a huge dataset, I figured I would create my own Postgre function. Half an hour of troubleshooting/trial and error resulted in the following.

How To Use It

1.) Your Table

The function looks to insert records into a table called points with 2 column location and name_of_place, the name of the place being a string and the location a geo_point.

2.) Create a Function

I created a function in my postgre database and named it fillPoints. Copy and paste the above code as your function’s structure and save.

If you would like to use this function to fill your own data table with predefined columns. Simply edit the INSERT statement to match your structure.

3.) Use The Function

Now that everything is in place, lets fill that table. All you need to do is execute a select statement that call the function and pass the number of records you want to create as a parameter. I used an Amazon EC2 micro instance for this test so filling my table with 1 million records took about 9 minutes.

SELECT fillPoints(1000000);

Benchmark: 1 Million Records

-- This will search 1/4 of the overall region.
-- My Result: 249,881 points found in ~800ms
SELECT count(*)
FROM points
WHERE ST_Within( location, 'POLYGON((0 0, 0 180, 180 180, 180 0, 0 0))' );

-- This will search 1/8 of the overall region.
-- My Result: 62,420 points found in ~200ms
SELECT count(*)
FROM points
WHERE ST_Within( location, 'POLYGON((0 0, 0 90, 90 90, 90 0, 0 0))' );

Conclusion

To say the least I was totally surprised by the benchmark. The latter is so amazing! 64,000 records in 200ms is an incredible speed for a spatial querying app/api. This experiment with PostGIS was sparked by the idea of a mobile listings application. I will need a speedy spatial database engine behind my application. I am happy with the performance I’ve seen thus far in PostGIS. Perfect opensource solution for a small one-man project like mine.

This would also be a great alternative for REALTOR websites. Where an MLS can have 60,000 listings at any one time. Searching 60,000 records using spatial data (search homes inside polygon) would be a simple task that could be done in much less than 100ms.

Scenario

We’ll be working with the following scenario. You have a php website that has 2 external repos in the root; jQuery and an S3 PHP class.

Git Submodules

First off, a git repo inside another is called a submodule. Essentially, submodules are links to the external repos. Also, submodules’ content are ignored when creating a SHA1 out of the working directory’s content. That’s why submodule folders are empty when you first clone a repo with a submodule.

Adding a submodule

To add a submodule all you have to do is use the submodule command: git submodule add. Let’s play pretend with our examples.

git submodule add git://github.com/jquery/jquery.git
git submodule add git://github.com/tpyo/amazon-s3-php-class.git s3-class
git add .
git commit -m "Added two new submodules."

Adding submodules into your existing repo will create a new file .gitmodules which contains the directories and URLs to these external repos.

Cloning a Repo with Submodules

Like I mentioned earlier the content inside a submodule is not calculated in your commit’s SHA1s. With this said keep in mind that after cloning a project with submodule, those submodule directories are completely empty. In order to copy down the content of your submodules you need to do a git submodule init.

git clone git@github.com:mexitek/fake-repo-whatevs.git
...some output about the cloning ...
cd fake-repo-whatevs/
git submodule init
... some output on initializing ALL the submodules ...
git submodule update
... some output on downloading submodule contents ...

Updating Submodules For Your Parent Repo

Updating submodules is not exactly that straight forward and is more involved. We actually have to tell our parent repo we want to use a new version of a submodule, so a commit is required to acknowledge this change.

cd PATH_TO_SUBMODULE/
git pull origin master # <-- don't forget master!!
cd PATH_TO_PARENT_REPO/
git commit -am "Upgrading our Submodules"
git push origin

It is important to remember to go to the submodule directory to pull updates for your submodule. Then also to navigate back to the parent repo directory and make your commit. This will tell all other clones of your parent repo that we have upgraded our submodule.

Pulling Submodule Updates From Parent Repo

All other clones of your parent repo will have to execute the following.

git pull origin
git submodule update

The initial pull detects a change and pulls a reference down to the latest state of the submodule, then the git submodule update actually pulls down the new content for the submodule.

Github is your friend

I like how this information is represented in Github.com’s UI. They give you a different icon to represent a submodule, link the name to the original submodule profile and they provide the last commit you have in your repo.

If you don’t know how to tag in git you can read this brief description on git tags. This post is about going back to your commit history and accurately placing your tags for future rollbacks.

Finding where to place your tags

All you need for a git tag is the SHA1 of the commit for which you wish to tag. The trick is: How do I get a list of my commits and how tedious is it to copy the SHA1 for every tag? I know of two ways to get a list of your commits and their SHA1s.

A.) Use the log command to show a list of all commits

This command will render a side by side of SHA1 and commit message. Note that for git tags you ONLY need the first 7 characters of the SHA1. No need to copy more than that manually.

git log --pretty=oneline

B.) Github is your friend

My method of choice is to use Github.com‘s interface to copy the SHA1s I need. Not only can I copy the SHA1 to my clipboard but I can easy see exactly where in my commit history I want to place my tag. Github.com‘s UI is slick and easy to use.

Placing your tags

The hard part is done. Whether you are using Github.com to copy your SHA1s to your clipboard or using the log command to write down the first 7 characters of the SHA1 you are good to go. Let’s suppose you want to create a tag named “v1.0″ at commit ec32d32.

git tag v1.0 ec32d32

Deleting tags

Sometimes you make a mistake or you prematurely release a “stable” tag then realize it is far from stable. Let’s delete tag “v1.0″.

git tag -d v1.0

Pushing tags to a remote server

Tags do not get pushed by default to a remote. Also, if you created a lot of tags for your commit history you can easily push them all to a remote server.

git push origin --tags

You can easily place a handful of tags into the proper place in your commit history. If you have a nice method you use please share in the comments below.

The answer to your problems is:

echo "FILE_NAME" >> .gitignore
git rm --cached FILE_NAME

Scenario

Your Git repo is in full play. Developers have it in their workstations and the initial pull is now on production and development servers. Everyone has changed setting in their config file to match their local machine, same on production and development, but no one wants to push those changes. AHH! We need to untrack this file(s).

Don’t Delete

What you DON’T want to do is delete the file git rm FILE_NAME. Doing so will have a ripple affect on everyone’s next pull from the git server.

Solution

1. Add the filename to your .gitignore file (if you don’t have one, create it). This will make sure git ignores changes to this file(s) for all future commits.
2. Remove the HISTORY of the config file(s) not the file itself. This causes git to have amnesia about the existence of your config file(s)

echo "FILE_NAME" >> .gitignore
git rm --cached FILE_NAME

Resources

Feel free to download the diagrams: Google Docs Drawing
Below is a code snippet I used. Given that all your config files end in “.config”, this could work for you too. You can also use this technique to untrack unit tests, SQL or other files.

Shortcuts Don’t Cut It

Shortcuts are actual files (.lnk on windows) that perform the task of opening the original file or folder, via a mouse click. The problem with shortcuts is that you cannot use a shortcut like you would the original file [or folder]. For example, if you place a shortcut of a picture into your dropbox folder the actual shortcut (.lnk) file would be uploaded to dropbox instead of the original picture. Duh!

Symbolic Links

Unlike shortcuts, symbolic links are actual representations of the file or folder being linked to. The greatest part of symbolic links is that the link is not a duplicate copy of it’s linked source. For example, if you create a symbolic link of your pictures directory (30GB) onto your Desktop the link will NOT take up another 30GB. To learn more about symbolic links try out the wiki page.

Unix, Linux and Mac OSX

ln -s source_file link_name

Windows 7

For files.

mklink link_name path_to_source

For folders/directories.

mklink /D link_name path_to_source

Programming Workflow

Recently I have been working on drupal modules and various drupal installs on my local machine. In one instance I have a custom module installed on more than one drupal site (localhost). At first I would copy paste the files into each drupal site after each module update, HELLOW!

I then decided to keep all 3rd party modules, themes or plugins in one directory called “repos” on my C:\ drive, C:\repos\. By creating symbolic links from the “repos” directory to each drupal site I now had ONE original code source. With one command git pull origin I update any module for ALL it’s occurrences in my local sites.

Other Uses

I also use symbolic links at home with dropbox. I create a link inside my dropbox folder for my pictures from iPhoto and Photo Booth. This allows my wife to mindlessly transfer pictures from her SD card to our laptop and capture moments of our kids with photo booth. All the while, dropbox noticing the changes in the original folders and backing-up the pictures into our dropbox account immediately.

I do not use iTunes, but in theory you could also keep a backup of your music.

Conclusion

Use symbolic links to save time and centralize your source code or other replicated data. If you know of other cool ways to use symbolic links let me know in the comments!

Redmine offers a lot more than just Git integration, issue tracking and wikis. It is also open source! Visit the website for more information.

In Action

The Conflict

I had just finished adding some new styles to our company style.ui.css file. These new classes are to be used to create certain Web UI Components with ease. I started to document the use of these new UI components for my coworkers and took advantage of the textile formatting available in Redmine wikis, especially the syntax highlighting.

At the end, there was only one thing I REALLY wanted for this documentation, a demo (HTML/CSS). Now, I know I could have made a separate HTML file, host it on our server and then link to it from the wiki. That approach just seemed to lame and I really wanted this “demo” habit to stick with my fellow coworkers, so I needed something easy to use. Not being to familiar with wiki textiles I quickly abandoned my googling and started to create my own wiki macros. Here is what I came up with

The Plugin

The plugin can be found or cloned from my Github Repo. Let’s continue with how you would use the plugin.

Plugin Installation

Go to your Redmine plugin directory, for the bitnami Redmine VM it would be:

~$ cd /opt/bitnami/apps/redmine/vendors/plugins/

Then use git to down load the plugin into a folder.

~$ sudo git clone git://github.com/mexitek/redmine_wiki_html_util.git

Now, simply reset Redmine and you are done!

~$ sudo /etc/init.d/bitnami restart

Exposed Macros

Wiki HTML Utility exposes several macros to your Redmine Wikis:

• css_url() : allows you to “inject” an external stylesheet into the current wiki page
• js_url() : allows you to “inject” an external javascript file into the current wiki page
• html() : allows you to “inject” RAW HTML into the Wiki page

HTML()

Embeds RAW HTML.

{{html(
<ul>
   <li>option 1</li>
   <li>option 2</li>
   <li>option 3</li>
</ul>
)}}

If you use HTML like the example above, the wiki will convert all newlines with <br>. If you know of a way to access the unfiltered text let me know.

CSS_URL()

This injects an external CSS file into the DOM (current wiki page). Notice the single quotes around the URL, this is very important.

{{css_url('http://www.domain.com/css/styles.ui.css')}}

JS_URL()

This injects an external JS file into the DOM (current wiki page). Notice the single quotes around the URL, this is very important.

{{js_url('http://www.domain.com/js/widget.js')}}

Conclusion

At the end of the day, you can inject JQuery and your CSS file into a wiki page and show off your awesome widgets! Live demos on a freaking wiki page! The possibilities are endless, kinda.

See the code on Github.com