Shape Shed

Setting up node.js and npm on Mac OSX

2010-08-30T00:00:00+01:00

Install Homebrew

Homebrew is the package manager that Apple forgot. Written in Ruby it allows you to quickly and easily compile software on your Mac. Instructions for installing Homebrew are in the README so I won't repeat them here. You will need to install Developer Tools for Mac which you are installed as part of Xcode. Xcode is available for free - it is a pretty hefty download but you'll need it.

Install node.js via homebrew

Once Homebrew is installed you can go ahead and install node.js

brew install node

Easy! Now create a file called server.js and paste in the example server code

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Save the file and from the console run

node server.js

Now you can visit http://127.0.0.1:8124/ with your favourite browser and you are up and running with server side JavaScript.

At this point it is probably a good idea to consult the excellent node.js documentation. This will help you understand what node.js is and what it can do.

Installing npm

node.js is pretty low level so lots of people have created modules for node. Thankfully there is already a package manager for node in npm to help you manage these.

You can install it using Homebrew

brew install npm

The install will spit out some advice about paths. I found on my setup everything worked other than having to set NODE_PATH.

NODE_PATH tells node.js where to look for modules. This means you can do things like

var client = require 'redis-client'

instead of specifying the full path.

To make sure my shell knows where to find node modules I added

export NODE_PATH="/usr/local/lib/node"

to my .bash_profile file. As some modules have executables you will also need to add /usr/local/share/npm/bin to your PATH. Here's how mine looks

export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:/usr/local/share/npm/bin:$PATH"

Make sure you reload your shell with

source ~/.bash_profile

so the changes are applied.

Installing modules

Now we are set up we can install node modules using npm. Express is a good place to start - it is a node framework inspired by Sinatra.

npm install express

This provides a solid base to start developing with node.js including jade the haml inspired node tempting engine. There is more excellent documentation available for express too.

That's it - go create!

Developing subdomain Rails sites locally

2010-07-29T00:00:00+01:00

The problem

If you are developing a Rails site locally with subdomains and you boot your application from WEBrick then you'll get a URL like http://0.0.0.0:3000. The DNS for this resolves to your local machine so you'll be able to see the site straight away with zero configuration.

The problem arises if you are developing an application that relies on subdomains. So a user can create an account and access the application at something like http://myaccount.example.com/. To get this working we need to a bit of work.

Solution 1 - WEBrick

To test subdomains you can just add a record to your hosts file. On Unix style systems you can generally find this at /etc/hosts

127.0.0.1   theateam.example.com

This will resolve the domain to the application running on your localhost, but you'll still need to apply the port number. So accessing http://theateam.example.com:3000 will serve the site. You'll need to do the logic as to what to show based on the subdomain in your application of course.

This solution is quicker to setup but has the disadvantage of having to add a new record to your hosts file each time you create a subdomain.

Solution 2 - Passenger

A much better way is to serve your site locally from Passenger. If you deploy using Passenger you have the added advantage of developing on the same platform that you'll be deploying to.

First you'll need to install Passenger. This is reasonably straightforward:

gem install passenger

Followed by

passenger-install-apache2-module

There will be some instructions after the second command that you'll need to add passenger.conf file. Once that's done you need to set up the virtual host.

I've covered serving sites locally on OSX before so if you need a brush up consult that article.

Tim Pope recognised the problem of subdomains and registered the domain smackaho.st and pointed it to 127.0.0.1. This means it will resolve to your local machine without any configuration. This means that we can set up a virtual host based on this domain and use a wildcard to also serve subdomains on that domain. Here's how my virtual host setup looks:

<VirtualHost *:80>
        <Directory /Users/george/Sites/mysite>
        Options +FollowSymlinks +SymLinksIfOwnerMatch
        AllowOverride All
        </Directory>
        DocumentRoot /Users/george/Sites/mysite/public 
        ServerName smackaho.st
        ServerAlias *.smackahost.st
        RackEnv development 
        # RailsEnv development # for Rails 2.x.x apps
</VirtualHost>

Restart Apache and you should be good to go

sudo apachectl restart

Now any subdomain you visit on smackahost.st will be served from your Rails application. No need to keep adding subdomains to your hosts file.

There is also another domain that serves the same purpose if you prefer it - lvh.me.

Nifty Unix Tools - tr

2010-07-23T00:00:00+01:00

tr - a simple translation tool

I'm an unashamed command line ~~kid~~ old git. For getting things done quickly and efficiently there are a wealth of tools at your fingertips. tr is just one of those tools. It lets you quickly and simply translate characters in a string.

It doesn't have the power of other tools like sed or awk but for basic string manipulation it is pretty good. One example would be that we want to change uppercase text to lower case

echo 'HI THERE' |  tr '[:upper:]' '[:lower:]'
hi there

Or we might have a comma separated list that we want to strip the commas out of and to replace them with a new line

cat file.csv | tr ',' '\n' > new.txt

This translates each comma to a new line so 'dog, cat, horse' becomes

dog
cat
horse

Deleting characters

tr also lets you delete characters. So if you need to quickly clean up a string you can do:

echo 'clean$ me$ $up$ please$' | tr -d '$'
clean me up please

Because Unix lets you pipe the output we can write this to a file easily

echo 'clean$ me$ $up$ please$' | tr -d '$' > file.txt

We could also read in a big file, pipe it to the tr command and then send the output to another file

cat big_file.txt | tr -d '$' > clean_file.txt

More complex uses

You can pipe replacements together for more complex translations. Let's say someone sends you a file with spaces in it. You want to remove the spaces and whilst you are at it make the filename lowercase.

mv Crap\ File\ nAme.txt `echo Crap\ File\ nAme.txt | tr -d '\' | tr ' ' '_' | tr '[:upper:]' '[:lower:]'`

This will rename 'Crap File nAme.txt' to 'crap_file_name.txt'

These little commands are really useful. If you find yourself doing the same thing over and over again you can save it to an executable script. I regularly get clients sending me documents for the web with spaces in. So I use this script to quickly lowercase the filenames and clean up. This lets me run clean_filenames.sh in any directory and the filenames will be cleaned up. If you put your scripts in your bin folder and make them executable they'll be available via tab completion too. So you can just type 'clean_' hit tab, then return and you are done.

tr is a simple tool that can't compete with the power of sed or awk but there are times when using a more heavyweight is unnecessary.

For more run 'man tr' from the command line.

Smile You're on Video

2010-05-20T00:00:00+01:00

An attempt to solve the video issue

The video tag is now well established in HTML5 specification. I've written previously about cross-browser problems, namely the complete lack of support in Internet Explorer and that different codecs are used by different browser vendors. To use HTML5 to serve video and access all users web authors face using two different methods (flash and the video tag). On top of that authors are currently required to export two different video formats to support differing codecs.

When I created this demo I it was great that I could now use a browser API, rather than a third party plugin. But the fact I was doing more work to use this method and duplicating videos seemed a bit counter intuitive. What happened to don't repeat yourself?

From a developer perspective anyone that has worked with ffmpeg soon realises the complexity of different video formats, frame rates, video sizes and codecs. But from an end user perspective (and that is always the most important) creating a video for use on the web is still a bewildering prospect. Of course you can use a service like Vimeo or YouTube but video is such an integral part of the web that it should be possible to easily create content for the web, and it should be open.

Enter Google on a white horse

It would seem Google agrees that video should be open. Earlier this year Google purchased On2 Technologies, a video compression business and with it the VP8 video codec. In the week that Microsoft launched a patent suit against Salesforce and Adobe and Apple continue to squabble about who is really open Google did something incredible. They open sourced the VP8 codec. That's the VP8 codec they acquired for $124.6 million. Opera and Mozilla are also on board with this effort which leaves just Apple, who are championing the H.264 format. Even Microsoft will be supporting VP8 in IE9.

It will be interesting to see how Apple respond. They have invested heavily in the H.264 codec for both their desktop and browser products. With Google Chrome being based on Webkit and covered by a BSD license, Apple could presumably leverage the work that Google has already done for their Safari browser. If Apple hold out it looks probable that web authors would continue to have to publish two video formats to ensure cross-browser compatibility leaving us in much the same boat.

A good day for the open web

This announcement should be celebrated as a step forward for the open web. Google have shared a commercial product under a BSD license that they paid over millions of dollars for in the interests of the web as a whole. At a time when other companies are arguing about how open they really are Google can have their moment in the sun.

Basics of Objective-C

2010-04-30T00:00:00+01:00

Objective-C 101

The second Stanford iPhone development course assignment focusses on understanding more Objective-C. At the time of writing the PDF is still available from the Stanford CS193P website.

A simple command line script

The assignment is to create a simple command line script to make an introduction to Objective-C.

The first thing that was a little bit different for me was understanding main which basically functions a bit like a constructor class in PHP (excuse my Objective-C ignorance if this is totally wrong). Objective C is also upside down from what I'm used to so main comes at the end.

#import <Foundation/Foundation.h>
- void PrintPathInfo() {
  // Code from path info section here
}
int main (int argc, const char * argv[]) { 
  NSAutoreleasepool * pool = [[NSAutoreleasePool alloc] init];
  PrintPathInfo(); 
  PrintProcessInfo(); 
  PrintBookmarkInfo(); 
  PrintIntrospectionInfo();

Syntax is more verbose from say Ruby so declaring a string is

NSString *path = @"~";

instead of

path = "~"

The whole NS thing relates to NeXTSTEP, an operating system that Apple bought back in the day. The NS prefix has stuck around (I'm not really sure why) so pretty NS is everywhere in Objective C - NSLog, NSAutoreleasepool etc.

Creating the project

I'm on the iPhone 4.0 SDK and the menus had moved around a bit. To create a Foundation Command Line Tool go to Mac OSX > Application > Command Line tool and then select Foundation from the Type dropdown.

When you run the application you want the console up so you can see what's happening. You can access this via Run > Console

Working through the tasks

There are four tasks in the assignment which relate to the functions in the code above. I found the following documentation really useful in understanding the requirements:

NSString documentation, especially stringByExpandingTildeInPath for the first task.
NSProcessInfo documentation for the second task
NSMutableDictionary for the third task
NSObject Protocol Reference for the final task especially isMemberOfClass, isKindOfClass, respondsToSelector and conformToProtocol

Outputting to the console

The task isn't sexy but helped me to understand Objective-C a lot more

Source code

I've made the source code for my working through the examples available on Github. Bear in mind I'm starting out so I'm not suggesting this is best practice code.

Adding a vignette to a video using Photoshop and Abobe Premier

2010-04-30T00:00:00+01:00

Background

My brother Sam Ornbo is a freelance television Producer and Director and has recently been doing some work for a Scooter company. He shot a short promotional film for them and wanted to recreate the vignette effect that is used heavily in Top Gear. He uses Adobe Premier to edit videos which allows you to import PSD files, so asked me for some help in creating the vignette.

Creating the vignette

To create the vignette first select the Ellipse Tool and draw an Ellipse like this

Then in the layers menu (F7) select the shape you have just drawn by holding the ⌘ key (Ctrl on windows I think) and click the layer thumbnail. You should then see the ant trail (a black and white line around the ellipse you have just drawn.

Then go to Select > Inverse. Create a new layer by going to Layer > New... > Layer and fill the selection with Black.

Turn off the original ellipse layer you created and you'll be left with the inverse:

Then go to Select > Deselect to remove the marching ants.

Next convert the layer to a Smart Object so we can apply filters non-destructively (this makes it easier to change things). To do this go to Filter > Convert for Smart Filters.

Then we apply a Gaussian Blur - Filters > Blur > Gaussian Blur. You should end up with something like this:

Save your file as a PSD and it is ready to use in Adobe Premier. Drag the file into your bin it will be available for you to use in your project.

The finished effect

Applied over the video the Vignette gives us the effect we are looking for:

Learning iPhone Development - Interface Builder

2010-04-27T00:00:00+01:00

Assigment 1A

Assigment 1A at the time of writing is still available to download from the Stanford Site. It is very simple - to create a view with some text and an image in it.

The assignment doesn't even need any code and can be created just using Interface Builder.

Creating the project

I'm just starting out so I'm going to list the steps for creating the project.

So we need to create a new project in Xcode. Launch Xcode and you'll see this screen and we want 'Create a new Xcode Project'.

Then we need to chose the type of Project. In this case an iPhone OS application and a 'Window Based Application'. I'm going to be creating a view with my favorite comedian Les Dawson on so I called the application LesDawson.

Working in Xcode

I'm a long term TextMate user so Xcode wasn't entirely unfamiliar. I chose to change the theme to Dusk by going to Preferences > Fonts & Colors.

In terms of this assignment the file we want to edit is the MainWindow.xib file. If you double click it Interface Builder will launch. This will bring up some windows, but you'll want to make sure that you can see 'Window' and 'Library'. If you can't see the 'Library' window go go to Tools > Library.

Now select the Library window. At the bottom is a settings icon. I found changing the option to View Icons and Labels was more helpful to me. Then you can just start to drag elements into the main window. I dragged a label into the window and changed the text.

In the attributes window you can style the text. I added a shadow to the text.

Adding a resource

I need to add an image so to do this you simply drag the image from your network or filesystem into the resources folder. Make sure you check 'Copy items into destination group's folder'. Now back in Interface Builder you can drag an Image View into the window. Once you've done that you can edit the UIImageView's properties and select the Image from the Image dropdown. You might need to set the image size - you can do this under Image View Size. So you should be done with Interface Builder, but don't forget to save by going to File > Save.

Now back in Xcode you can hit the 'Build and Run' button and you should see your view launch in the Simulator.

Source code

I've created a Github repository for these examples if it is useful to anyone.

Beginning iPhone Development

2010-04-26T00:00:00+01:00

Textmate to Xcode

I've been developing web applications for 7 years, so I should be an experienced web developer by now. I write PHP, Perl and Ruby as well as having a good understanding of *nix systems. I'm comfortable with interface design and front end technologies.

I'm a Mac user and I have had an iPhone since it came out. I've decided to learn how to develop for the iPhone and iPad. I'm starting from scratch and I have no prior experience of the platform, frameworks or Objective-C. In short I'm a noob.

Starting out

Firstly I enrolled in the iPhone developer program. Frankly it was a good decision. The resources available for new developers are first class and it is clear that Apple want to make it easy for new developers to come to the platform.

I started out by working through the Getting Started videos (itunes link) which are a high level introduction to concepts and the frameworks and technologies available on the platform. After watching the videos I wasn't able to start programming but I had a good understanding of the concepts and ideas behind the platform.

Installing Xcode

If you are not enrolled in the iPhone developer program you can download the iPhone SDK for free right on the home page. If you are enrolled you get access to the latest versions and beta of upcoming software.

Installing the SDK is pretty straightforward so I'm not going to cover that.

Hello World

Next I worked through the Hello World example. In pretty much no time I had an iPhone application running on my simulator. Instant gratification!

Delving deeper

I'm very much in the early stages of learning but the iPhone OS Reference Library is first class.

I've also been taking the Stanford University iPhone Application Development class (iTunes link).

Code examples

Apple also provide example code and applications which I have found really useful in picking through and understanding how things work.

I'll blog here about my progress. If anyone has any good resources for beginners please feel free to leave a comment.

Setting up Git for multiple developers

2010-03-31T00:00:00+01:00

The problem

You have a git repository that you want to allow other developers to access and may wish to specify read or read/write access.

Solution 1

You could choose to use *nix user accounts to allow access to the git repository. I tried this route and found it didn't work very well. You need to move all users to have the same primary group and change the default umask on the server to allow everyone in that group to read and write. If you are interested in this technique there is a pretty good write up on Serverfault.

In my usage of this I encountered problems where the git cache wasn't respecting the default umask so users were then unable to write to the repository. It meant that whenever anyone wanted to push I would have to reset the permissions on the repository. Not ideal.

The other thing I don't like about this technique is that users need to have an account, which seems a bit like overkill for accessing a repository.

Solution 2

The solution I tried next and which has been working really well for around two weeks now is gitosis. Gitosis has been around for a while but if you are a Github user you'll be familiar with the approach. Instead of creating a user for each developer you want to access the repository there is a single git user. Access is then assigned on the basis of shared keys. So you don't need to create accounts and all you need to give a developer access is a shared key.

Installation

This walkthrough is for Ubuntu and the usual stuff applies. You travel at your own risk, take backups etc..

Install gitosis as detailed here. You need to create a git user (the command is on the link).

If you've got this far you should have installed gitosis ok and have set up the git user.

Gitosis allows access using public keys so (assuming you are on OSX or Linux) you need to generate one if you don't have one

ssh-keygen -t rsa

This generates a public key on your local machine that you'll find in ./.ssh/id_rsa.pub

Then you need to copy this file to the remote server (where you installed gitosis). The gitosis documentation recommends copying it to the /tmp folder so lets do that. Replace 'myuser@7123.456.789.0' with your server details.

scp ~/.ssh/id_rsa.pub myuser@7123.456.789.0:~/tmp

Once copied over on the remote machine import the key for the git user

sudo -H -u git gitosis-init < /tmp/id_rsa.pub

Finally the documentation advises use to make sure the post-update hook is executable

sudo chmod 755 /home/git/repositories/gitosis-admin.git/hooks/post-update

Administration

So far we've set up gitosis, added a git user and added our public key to the git user. So now on our local machine we can clone the repository that defines access to other git repositories.

git clone git@YOUR_SERVER_HOSTNAME:gitosis-admin.git

If everything has gone to plan this will pull down a git repository.

Look inside this and you'll see the a gitosis.conf file and a 'keydir' folder. The 'keydir' folder houses the public keys that give access to repositories and the gitosis.conf file defines what users can do. Simple.

Your gitosis.conf file might look something like this

[gitosis]

[group gitosis-admin]
writable = gitosis-admin
members = george_ornbo an_other_developer

[group myproject]
writable = myproject
members = george_ornbo an_other_developer third_developer

The first group defines who can edit the gitosis-admin repository. This means anyone in this group can grant access to repositories. The second group 'myproject' defines who can acess the myproject repository. The members refers to the names of keys in the the 'keydir' directory. So 'george_ornbo.pub' becomes 'george_ornbo'. Repositories need to sit inside /home/git/repositories. You can change the home directory of the git user if you wish to something like /var/git/. This would mean repositories would sit in /var/git/repositories.

So now if a new developer comes on board we can just add the key to the 'keydir' directory, update the group members, push the git repository and it is done.

In the above example the 'myproject' repo would be available at git@YOUR_SERVER_HOSTNAME:myproject.git

Limited documentation

I found that documentation was a little patchy - the best place for documentation is here.

A great solution

Gitosis is so much better than using *nix accounts to provide access to a repository. With a shared key a developer can easily be given access to one or more repositories, be locked to just read access or given full permissions. It is working really well for me. Highly recommended!

Easing Rails development with Hirb

2010-03-10T00:00:00+00:00

Rails Console

When developing in Rails I spend a lot of time in the console. If you are a Rails developer you know you can fire it up in rails 2.3.x with

script/console

Once in the console you can do lots of things like run ActiveRecord queries

>> User.find_by_last_name('Ornbo')
=> #<User id: 17283, login: "gornbo", email: "george@shapeshed.com", crypted_password: "05b80fd4308e8590d2892aeb774bb3a993053e26357a1a8938b...", password_salt: "rDRzbrh-YmgpTTTDGhQC", persistence_token: "109b4284438cd9c0238ebf1ffc6aea8091c8ad756c345677c2d...", single_access_token: "hqP7auU76mHQkpLxhqVI", perishable_token: "pwUKq8id1PhgCOhPkxIU", login_count: 4, failed_login_count: 0, last_request_at: "2010-03-09 18:09:35", current_login_at: "2010-03-08 11:17:13", last_login_at: "2010-03-08 10:52:05", current_login_ip: "127.0.0.1", last_login_ip: "127.0.0.1", deleted: nil, created_at: "2010-03-04 12:37:38", updated_at: "2010-03-09 18:09:35", first_name: "George", last_name: "Ornbo", photo_file_name: "avatar.jpg", photo_content_type: "image/jpeg", photo_file_size: 4268, photo_updated_at: "2010-03-04 18:15:30">

Ick. That's not hugely readable.

Hirb to the rescue

Hirb is a gem that makes the console more user friendly. In hirb's words is is

A mini view framework for console/irb that's easy to use, even while under its influence. Console goodies include a no-wrap table, auto-pager, tree and menu.

Returning to our previous version hirb makes the output useful

>> User.find_by_last_name('Ornbo')
  User Load (40.2ms)   SELECT * FROM `users` WHERE (`users`.`last_name` = 'Ornbo') LIMIT 1
+-------+------------+-----------+
| id    | first_name | last_name |
+-------+------------+-----------+
| 17283 | George     | Ornbo     |
+-------+------------+-----------+
1 row in set

Nice. We've got the query and a concise, readable view.

So how do we get it to work? Documentation is available round the web but takes a little piecing together so here it is in one place.

Installing Hirb

This is easy enough. Just run

sudo gem install hirb

To use hirb in Rails when you are using the console add a few lines to .ircbc.

vi ~/.irbrc

Then the following to the file

if ENV['RAILS_ENV']
  require 'rubygems'
  require 'hirb'
  require 'active_record'
  Hirb.enable
  ActiveRecord::Base.logger = Logger.new(STDOUT)
end

Save and quit.

Now go into the console and run a query. You'll see that the output should be changed to use hirb. If your records have lots of columns you'll likely see

** Error: Too many fields for the current width. Configure your width and/or fields to avoid this error. Defaulting to a vertical table. **

So you'll need to customise it..

Customising Hirb

You can set which columns are shown in the console and other options in a hirb.yml file. In the /config folder of your rails app create a file called hirb.yml. A feature that I really like is that you can specify which columns show for models. So for this example I can specify what shows for the User model using

:output:
  User:
    :options:
      :fields:
        - id
        - first_name
        - last_name

Now when I run the query only those fields will show in the console as we saw earlier.

>> User.find_by_last_name('Ornbo')
  User Load (40.2ms)   SELECT * FROM `users` WHERE (`users`.`last_name` = 'Ornbo') LIMIT 1
+-------+------------+-----------+
| id    | first_name | last_name |
+-------+------------+-----------+
| 17283 | George     | Ornbo     |
+-------+------------+-----------+
1 row in set

In the project I'm working on I've created a configuration for each model so I only see what I need to see when working in the console.

There are lots more options available - refer to the Rdocs for more good stuff. I've found hirb really useful so encourage you to give it a go.

Shape Shed

Setting up node.js and npm on Mac OSX

Install Homebrew

Install node.js via homebrew

Installing npm

Installing modules

Developing subdomain Rails sites locally

The problem

Solution 1 - WEBrick

Solution 2 - Passenger

Further reading

Nifty Unix Tools - tr

tr - a simple translation tool

Deleting characters

More complex uses

Smile You're on Video

An attempt to solve the video issue

Enter Google on a white horse

A good day for the open web

Related links

Basics of Objective-C

Objective-C 101

A simple command line script

Creating the project

Working through the tasks

Outputting to the console

Source code

Adding a vignette to a video using Photoshop and Abobe Premier

Background

Creating the vignette

The finished effect

Learning iPhone Development - Interface Builder

Assigment 1A

Creating the project

Working in Xcode

Adding a resource

Source code

Beginning iPhone Development

Textmate to Xcode

Starting out

Installing Xcode

Hello World

Delving deeper

Code examples

Related links

Setting up Git for multiple developers

The problem

Solution 1

Solution 2

Installation

Administration

Limited documentation

A great solution

Related links

Easing Rails development with Hirb

Rails Console

Hirb to the rescue

Installing Hirb

Customising Hirb

Related links