Archive for September, 2012

Photoshop v. Fireworks

If you build apps, or work with people that build apps, I recommend you start using Fireworks instead of Photoshop. Like right now. Fireworks is an integral part of my design / development workflow, and I wouldn’t have it any other way. Why? There are several reasons Fireworks trumps Photoshop for designing apps and websites:

1. Fireworks deals with objects, not layers. In fireworks, you create interface elements using primitive shapes and then add gradients, drop shadows, etc… They have great tools for selecting objects, and it’s easy to grab them and move them around. You could use Photoshop shape layers, but once you’ve tried the Fireworks approach I think you’ll find that shape layers are an awkward extension of the layer concept and not a true solution for interface design.

2. The properties of objects in Fireworks mirror what is possible in CSS3 and also in iOS / Android while remaining flexible enough to make anything. I’ve gotten too many Photoshop designs where beautiful assets were static images. The Fireworks object / properties model encourages designers to create things out of object primitives and downplays images wonderfully.

3. PNG is the native file format of Fireworks. PNG is also the native file format of iOS and Android, meaning you don’t have to “export” the images without layers as assets. You just use the actual source images in the app. When something needs to be tweaked, you right click it in the sidebar of Xcode, say “Open in External Editor” and bam. Fixed.

4. Fireworks is vector based, but it is intended for bitmap output. This combination means it’s easy to @2x things and create two sets of images, because the objects in the design are vector based anyway.

Just my 2c! I use Fireworks for everything and I’ve always been impressed when people go through all the effort of creating mockups in Photoshop. You might think I’m crazy, but just check out what happened when Adobe asked about improving Photoshop for iPhone designers on their official blog:
John Nack on Adobe: How could we improve Photoshop for iPhone Developers?

Connecting to a Socket.io server from Node.js Unit Tests

If you’re looking for a more expansive tutorial, check out Liam Kaufman’s intro to Socket.io, Mocha, and Node.js. It’s by far the best tutorial I’ve found so far.

I just spent the last three hours trying to create unit tests for my Node.js + Socket.io server with Mocha. I was following all the instructions, but creating a new Socket.io client connection with socket.io-client did nothing. A connection was never established and the node script would finish executing, in spite of my best efforts to attach listeners to the socket. The problem, it turns out, was that I had forgotten to include two critical configuration options when creating the Socket.io client connection. In case anyone is trying to set up unit tests for a socket.io server, here’s a boilerplate test coffeescript file that works:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
io = require('socket.io-client')
assert = require("assert")
should = require('should')
 
socketURL = 'http://localhost:9292'
<strong>socketOptions = 
  transports: ['websocket']
  'force new connection': true
</strong>
describe 'Array', () ->
 
  beforeEach (done) ->
    this.socket = io.connect(socketURL, socketOptions)
    this.socket.on 'connect', ()->
      console.log('connected')
      done()
 
  describe '#indexOf()', () ->
    it 'should return -1 when the value is not present', () ->
      assert.equal(-1, [1,2,3].indexOf(5))
      assert.equal(-1, [1,2,3].indexOf(0))

To run this test, place it in a new folder called ‘test’ in your Node.js project. Run the following commands to get the modules you need:

1
2
3
npm install socket.io-client
npm install should
sudo npm install -g mocha

Then, on the command line run:

mocha --compilers coffee:coffee-script