Fast & Efficient Development Environment + Remote Build Server on the Cheap

I’ve recently started working on some mobile web development ideas and decided it would be easiest for testing to have a continuously integrated public development site which I can hit directly from my Android smartphone for testing without the hassle of an emulator. The chrome-to-phone browser/device extensions out there make switching back and forth between testing locally in full-scale chrome as well as on my device a breeze.

Plan established, the only real unsolved angle of this for me was finding a way to get a public copy of my source online that would be updated instantly when I commit to my repository. I have been using Dreamhost for some time because of their awesome rates and unlimited SVN hosting that comes with my web-hosting package. As I have now discovered, setting up post-commit scripts on Dreamhost’s servers to perform CI tasks is not very difficult and can really maximize productivity once established.

Installed on my local dev environemnt

• OSX
• MacVim
• Chrome
  • use chrome-to-phone plugin for easy android based testing
  • or for iphone try http://tomlerendu.com/chrometoiphone/
• SCPlugin
  • Pretty basic but free SVN client for mac
• EasyFind
  • One shortfall of VIM is the lack of global project searches. This great little app takes care of that quite well.

Remote hosting, source control & build server

• Dreamhost is the way to go
  • unlimited SVN hosting
  • unlimited domains and subdomains
  • SSH access

Setting up continuous integration w/ Dreamhost

1. create your SVN repository from the http://panel.dreamhost.com admin site.
   • usually somthing like… svn.mydomain.com
2. create a domain or subdomain on which to host the dev version of your web project
   • usually somthing like… dev.mydomain.com
3. checkout the trunk of your svn repo locally on your mac using SCPlugin
4. ssh into your dreamhost account via mac terminal
5. checkout the trunk of your svn repository into you new dev project sub-domain

   cd /home/dreamhost_user/dev.mydomain.com
   svn co --username your_svn_user --password your_svn_pass http://svn.mydomain.com/trunk ./

6. create a cgi-bin folder under your new CI dev domain

   mkdir /home/dreamhost_user/dev.mydomain.com/cgi-bin

7. add the following .htaccess file to your new cgi-bin

   AuthName "Dialog prompt"
   AuthType Basic
   AuthUserFile /home/dreamhost_user/dev.mydomain.com/cgi-bin/.htpasswd
   Require valid-user

8. create a htpasswd file

   cd /home/dreamhost_user/dev.mydomain.com/cgi-bin
   htpasswd -bc .htpasswd username password

9. add the following file called “do_update.cgi” to your cgi-bin folder
   note: this is where all your other fun CI stuff can go. For example maybe you want to rake db:migrate if you are working in rails. In this example we’re simply doing an svn update.

   #!/bin/sh
   set -f
   echo "Content-type: text/plain; charset=iso-8859-1"
   echo
   svn update /home/dreamhost_user/dev.mydomain.com

10. set permissions on your shiny new cgi-bin setup

    chmod 755 -R /home/dreamhost_user/dev.mydomain.com/cgi-bin

11. create a file called “post-commit” at the location /home/dreamhost_user/svn/repo_id/hooks/post-commit
12. add the folowing to the “post-commit” file
    note: you’ll be using the username and password you setup in step # 8

    #!/bin/sh
    wget --http-user=user --http-passwd=pass -qO - http://dev.mydomain.com/cgi-bin/do_update.cgi

13. make post-commit file executable

    chmod 755 post-commit

Mac Screen Capture

My screen capture needs are generally well served with SmithTech’s Jing, however, sometimes I just want to do a quick screen grab without pushing it out to the cloud. Here’s the shortcuts in mac to capture images…

Full screenshot

CMD+SHIFT+3

Select screenshot region

CMD+SHIFT+4

Modifying System PATH on Mac OSX

To add a directory to your global terminal path in OSX you simply need to add the desired directory to the /etc/paths file and you’re all set. To do this from the terminal type the following command:

sudo vim /etc/paths

Thank you Apple for making this so simple.

Regular Expression to Strip HTML from String

I used this in a simple reguar expression to strip html

/<(?:.|\s)*?>/g

An example of using this in a javascript function is as such…

function stripHtml(html)
{
    return html.replace(/<(?:.|\s)*?>/g, "");
}

Javascript options hash

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sample(options){
    var settings = $.extend({
        option1: null,
	option2: null,
	option3: null,
	option4: null
    },options||{}); //If no options, pass empty object
 
    // using settings within function
    console.log(settings.option1);
};
 
// calling the function
sample({option1: 'some value'});