Ternary Labs

Millisecond Precision Timestamp in Rails with MySQL

2011-09-26T08:21:52-07:00

You may be surprised to hear that MySQL datetime column type only store timestamps with second accuracy. Even tho Ruby Time class supports microsecond representation, this is lost when persisting as timestamp.

If you need greater precision for your timestamp, you can't rely on the automated Rails support. Fortunately, there is an easy workaround. You can store time representation in the database as seconds, with decimal support, and convert back and worth.

Here is an example of how to store milliseconds precision. First, define a column in your schema:

class CreateLogEntries < ActiveRecord::Migration
  def change
    create_table :log_entries do |t|
      ...
      t.decimal :occured_at_in_seconds, :precision => 17, :scale => 3 
      ...
    end
  end
end

The occured_at_in_seconds column can now contain decimal representation of time in seconds, with 3 decimal precision which is needed for milliseconds. If you need to go down to the microseconds level, you can increase this to 6.

Now all we need is to map this field in our model. We could override attribute accessors, but there is a much more elegant way to deal with this in Rails. We're going to use composed_of macro.

class LogEntry < ActiveRecord::Base
  composed_of :occured_at,
              :class_name => "Time",
              :mapping => %w(occured_at_in_seconds to_r),
              :constructor => Proc.new { |t| Time.at(t) },
              :converter => Proc.new { |t| t.is_a?(Time) ? t : Time.at(t/1000.0) }

  ...
end

Because Time.at(...) supports fractional seconds, we can simply retrieve the value from the database and create a Time object from it.

Conversely, we can assign a time object or map some other value. In my case, I wanted to be able to assign milliseconds time directly. So the following will be supported:

# Milliseconds since Epoch as returned by new Date().getTime() in Javascript
log_entry = LogEntry.new({:occured_at => 1317052347588})         

# Time object with millisecond precision
log_entry = LogEntry.new({:occured_at => Time.now})

That's all there is to it.

Secure Cross Domain iFrame Communication

2011-03-27T00:00:00-07:00

The world of web development is full of limitations and workarounds to overcome those limitations.

IFrames are commonly used as a secure way to embed content from another site. Unfortunately it’s often not enough to have the content live within the frame. A common use case is the display of so called rich media ads. In these kind of ads, the creative within the ad is meant to expand beyond the boundary of the iFrame rectangle. In order to do so, it needs the cooperation of its parent page.

The "state of the art" method to achieve this is via a mechanism known as iFrame busting. Unfortunately, this technique greatly compromises the security offered by iFrames because it enables the content in the iFrame to have access to every objects in the parent page context. As such, any ad content can have access to everything the parent page has access to (reading cookies, form fields, etc.), bypassing the same origin security policy. This overkill solution is being accepted as the de facto standard by everyone in the online ad industry. This needs to stop.

For the most part, the communication between parent and iFrame can be narrowed down to a few messages (maximize me, shrink me, color me pink, etc.). By enabling a post/subscribe message type of system between the parent and the iFrame, most of the needs can be covered without having to give the iFrame carte blanche to everything in the parent DOM.

With HTML 5, a safe mechanism to post messages between windows was introduced ( window.postMessage). Until the adoption of HTML 5 compliant browsers is wide enough, we're left using other techniques to achieve similar results.

Such communication techniques have been well described by Michael Mahemoff in his post about Cross-Domain Communication with IFrames. It even has been further enhanced by Piers Lawson in his post about Another Cross Domain iFrame Communication Technique.

These posts have inspired the creation of Porthole, a small Javascript library that makes it easy to incorporate this method into existing pages.

Porthole relies on hidden iFrames (later referred to a as proxy) to exchange information. The caller sets a url fragment with the message to pass. The proxy by virtue of being served from the same origin as the callee, invokes a callback method with an event object that contains the message read from the url fragment. The message signaling mechanism is based on a resize event.

Simplified view of iFrame content and iFrame proxies.

A proxy iFrame is needed for each direction of message passing (e.g. from Parent to iFrame and/or iFrame to Parent).

Calling sequence for sending and receiving a message.

Usage

Include the Javascript.

<script type="text/javascript" src="porthole.js"></script>

Create your content iFrame. This is where the guest content lives. Make sure to give it a name.

<iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
</iframe>

Define an event handler if you want to receive messages.

function onMessage(messageEvent) {  
    /*
    messageEvent.origin: Protocol and domain origin of the message
    messageEvent.data: Message itself
    messageEvent.source: Window proxy object, useful to post a response 
    */
}

Create a window proxy object on the main page.

var windowProxy;
window.onload=function(){ 
    // Create a proxy window to send to and receive 
    // messages from the iFrame
    windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/proxy.html', 'guestFrame');

    // Register an event handler to receive messages;
    windowProxy.addEventListener(onMessage);
};

Create a window proxy object in the iFrame.

var windowProxy;
window.onload=function(){ 
    // Create a proxy window to send to and receive 
    // messages from the parent
    windowProxy = new Porthole.WindowProxy(
        'http://parent-domain.com/proxy.html');

    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(event) { 
        // handle event
    });
};

Send a message.

windowProxy.postMessage('supersizeme');

Note that if you have multiple iFrames, you can create as many WindowProxy objects as needed.

Compatibility

The library has been tested with IE 7-8, Safari 5, Firefox 3.6 and Google Chrome 6.0

Demo

See it in action at http://sandbox.ternarylabs.com/porthole/

Source

Download or fork from Github: https://github.com/ternarylabs/porthole/

Control Your Facebook Friends with Geppetto

2011-03-26T13:56:28-07:00

When you're doing any significant development against the Facebook api, testing your application can be challenging. Because of the nature of social networks, the content generated by the users is highly unpredictable. If you're expecting any kind of repeatability, you need to control your users and their behavior.

Fortunately, Facebook introduced not too long ago test users. Those users can easily be created, befriend each others and generate all sort of content on demand. The api to do so is straight forward and can be incorporated in unit tests.

Geppetto is a command line utility that exposes most of what's available in the api in an easy to use application. It's built on top of the excellent Koala ruby library to interface with Facebook api. Let's take a look at what you can do with it.

Usage

First let's start by creating a network of 5 friends.

$ geppetto create 5 --networked

For each user, you will get a login_url, id and access_token. The login_url is useful to view this user on the facebook.com site. Otherwise, you can simply use the access_token to authenticate them within your own application.

A new test user. Test users seem to always be female.

To list all your test users, simply type:

$ geppetto list

Now it's time to create some content by having all the users in the network update their status.

$ geppetto generate_status

A new status update.

Let's engage in some social interactions. Each user will comment and like each other's posts.

$ geppetto generate_comments
$ geppetto generate_likes

Liking and commenting.

You can also create and upload "photos".

$ geppetto generate_images

A photo is posted.

Geppetto provides a couple of shortcuts to populate content.

$ geppetto build

Will build a network of test users and generate posts, likes, comments and images.

$ geppetto frenzy

Frenzy mode will continuously generate random content until you terminate the application.

Installation

Via Ruby gems.

$ gem install geppetto

or head over to Github and fork Geppetto.

https://github.com/ternarylabs/geppetto

Automatically Add Slugs To Pivotal Tracker Story

2011-02-28T00:00:00-08:00

Sluglug is a service that automagically adds human readable identifiers to stories from Pivotal Tracker, a widely used Agile project management tool.

Tracker identifies stories with a global number shared by all projects. As of this writing, newly generated story ids are in the ten million range. An 8-digit number is very impractical to refer to verbally. Sluglug lessens the pain of communicating the reference to a specific story to another human being by assigning name prefixes ("The Slug") to each story.

Slugs are derived from the names of US cities. They are lower cased and blank spaces replaced with hyphens. They are enclosed in square brackets and added at the front of the story title. For example a slugged story title could look like:

[hilton-village] As a user I should be able to login.

If you're using Tracker and need to refer to stories verbally, head over to http://sluglug.com/ and start slugging your project now.

Skype: Essential Ingredient for Distributed Agile Teams

2011-02-17T00:00:00-08:00

As most Agile practices are centered around human interactions, I often get asked the question: “How do you do Agile development with a distributed team?”. My answer usually involves a standard lecture on how you should really try to get all your team members together in the same location, at least initially. The reality is that it’s not always possible. Whether your team is working from home because you are a bootstrapped startup without office, or because you have hired specific talents wherever they happened to be located, it’s very likely that one or more member of your development team is going to be remote.

Far and Away

When dealing with remote engineers, physical location and time difference are important factors. As such, you need a tool that will provide rich remote presence and also allow for asynchronous communication. For example, the phone is a decent way to bring people in a live conversation but voicemail is terrible as an asynchronous tool. Conversely, e-mail is a great way to communicate asynchronously but lacks fidelity and context.

It should be obvious by now that teams benefit greatly from daily use of collaboration tools such as instant messenger, chat, audio conference calls and video. Throughout the years, I’ve used countless combination of free and commercial voice conference, instant messengers, chat rooms and screen sharing services. They typically got the job done. Skype potency is that everything is available in a single application.

Disclaimer: I’m currently consulting for Skype, so my views are somewhat biased. However, Skype employees excel at eating their proverbial own dog food. There are no phones in the office, teams are distributed and the majority of communication is done via Skype. Software development is organized around small agile teams following the SCRUM methodology. In that environment, I’ve seen first hand what this tool is capable of. It’s been battle field tested for you.

Remote Participant in an Agile Poker Planning Game. Note the creative use of on screen display to communicate point estimate.

Features: Check, Check, Check

Here is a list of Skype important features and how they can impact your team's ability to communicate on a daily basis.

Presence

This is an obvious one. We’ve all experienced a team getting together only to ask the question “Anyone seen Paul? Where is he?”.

Mood Messages

Custom status messages are not new. They can be used to convey the current mood of the person. They can also be a powerful tool to signal a status. For instance set your mood to the story title you’re working on or update it with your upcoming travel plans so everyone on the team knows your whereabouts.

Persistent Chats

In Skype, chats (one-to-one and multiparty) are persisted by default and messages are queued for offline delivery. This provides an easy way to pick up conversation asynchronously, or synchronously if the other party happens to be on-line.

Multi-person Chat, Audio and Video Calls

One of my favorite feature for SCRUM teams is the multi-person chat room. If you’ve been on a private IRC or similar chat room you know how it works. With Skype you can easily create and name chat rooms on the fly. You can invite people to participate via text, voice or video. They can be on a computer, mobile device or a regular phone. A typical usage scenario might look like that. It’s Monday morning, Bob, the remote SCRUM master initiates a chat with Paul, one of the engineer on the team.

Bob: “Hey is this time for our daily Scrum?”

Paul: “Yep, let me bring my laptop in the room and gather the troops”

Bob: “Ok”

Paul: “Ok, we’re all here. Let’s switch to video call”

Bob: “Ok”

Bob clicks the call button and the video and audio starts up.

Paul (talking): “Hi Bob. Can you add Greg to the call he’s working from home today.”

Bob (talking): “Sure no problems.”

Bob click on the add participant button and search for Greg. He adds him to the call. Since there are multiple parties now in the chat, Bob also renames the conversation with a more relevant title: “Sprint 42 Daily Scrum”. The chat room will be persisted at the end of the call and all the invited participants will remain, so it will be easy to initiate another call with the same group for the rest of the week.

Greg (talking): “Hi guys, thanks for patching me in.”

Bob (talking): “Ok, let’s start with Greg and then go around the room.”

At one point, the team realize that they need some information from Serge, the night owl sysadmin. Serge just woke up an hour ago and now he’s on his way to the office. He’s driving and only has his cell with him.

Bob (talking): “Hey, what’s Serge’s mobile number?”

Greg (typing into the chat room): “Here you go: +16505551212”

Bob clicks on “add people to the conversation” and paste the number to dial Serge’s mobile directly. Serge is now called into the conference call and can answer questions from the team. This is simple example of what you can do with that. There are many more usage scenario. Whenever your team does not neatly fit together in the same room. You can create as many “rooms” as needed. For instance you could have a standing room for daily scrum, one for release going live, one for general team discussion, etc. In every instances, once you’ve invited the relevant people, they are automatically able to participate and read historical messages.

File Sharing

Once you’ve approved a person in your contact list, you can easily exchange files. No more attachments clogging emails. You can also send a file to multiple participant in a chat room.

Bridge to PSTN

One of the most undiscovered feature of Skype is that you can use it to make call to regular phones. This is a great way to bring in “legacy” participant into a conference call.

Ubiquity of Platforms

Windows, OS X, Linux, iPhone, Android are supported.

Low cost

For the most part, the Skype service is free. Calls to phone are charged at a ridiculously low rate and some advanced feature like group video calls require a premium subscription.

Enterprise Management Tool

One of the biggest drawback of using a consumer tool in a corporate environment is the lack of user management. You might be a small team now, but sooner or later the team will grow, some people will leave the company and you might have to deal with access control to revoke someone's access. Skype has introduced a new user management system that allows an administrator to manage accounts, create a directory of users and allocated credits to be used by individual for paid features.

Screen Sharing

This is probably Skype's weakest feature at this point. Screen sharing is only available during one-to-on calls, which means you can't share your screen with a group. The feature is essentially using your desktop as a source for video call. The resulting image quality and frame rate is adequate but not great. As long as your other tools for planning (bug tracking, wiki, etc.) are available to everyone, it's not necessarily a problem as each participant can follow along on their own instance. If screen sharing is a big part of your activity, you might want to look for one of the many free option available (Google "free screen sharing").

Try It Out for Yourself

I hope this list has inspired you to try it out for yourself. Download Skype and get started.

Confirmation Dialog Bug for Rails 3 + jQuery 1.4.3 UJS

2010-10-20T00:00:00-07:00

Rails 3 has introduced Unobtrusive JavaScript (UJS), which means that the html generated for certain elements no longer contains JavaScript for various client side actions. It relies instead on a declarative markup and runtime binding.

A common use for this is to pop up a dialog to confirm a delete action.

<a rel="nofollow" data-method="delete" data-confirm="Are you sure?" 
 class="delete" href="/user/1">Delete</a>

This way you can choose which JavaScript framework fits you best. In order to use it, you need to install a Rails JavaScript driver for your framework of choice. For instance, you can install the jQuery one from GitHub http://github.com/rails/jquery-ujs

Unfortunately, the latest version of jquery-ujs has a bug that can have severe consequences. The confirmation dialog pops up but the user selection is ignored, resulting in the action always being performed.

There is tentative patch waiting to be reviewed.

http://github.com/alexcrichton/jquery-ujs/commit/2b0e408559f9c7b29c1c5590e4bf6520311df35c

I've applied it and it seems to fix the problem.

Kanban and Whiteboard to Track Agile Projects

2010-09-16T00:00:00-07:00

Whenever I first introduce a team to Agile development, I start with a physical board and cards to track and plan iterations. Engineers not familiar with the process often see this as a very archaic practice and sometime deride it. They miss the point entirely. This is the best way for the team to figure out how to interact with each other and get a sense of how the process is going to work. This allows everyone to focus on the task at hand versus getting lost in the distraction and complexity of a software tool. There is something intangible and satisfying about handling physical objects and interacting with them.

I was pleased to learn that the team at Vodafone (formely Zyb) that recently launched the version 2.0 of their 360.com service has been using Agile development for a while.

They’ve published a time lapse video of their Kanban that tracks progress from start to finish.

It’s great to see that such a nimble development process can exist in a large carrier organization.

Automatically Configure Hostname for New EC2 Instances

2010-09-15T00:00:00-07:00

When working with Amazon EC2 instances, you've probably experienced the need to change the default hostname to something more meaningful than "ip-10-205-14-33" for instance. While simply issuing a hostname command will do the trick, it requires login into the machine. If you also need to properly define the fqdn (fully qualified domain name) of the machine, it requires a modification of the /etc/hosts file as well or more if you've setup a DNS server.

Setting the desired hostname and fqdn for the instance can be critical if you're automating deployment with Chef and expect to retrieve those values later on. A simple approach is to pass user data when creating the instance and use a script to read it and populate the hostname.

Create a new instance from your favorite AMI. Save this script as /usr/local/ec2/ec2-hostname.sh

#!/bin/bash

# Replace this with your domain
DOMAIN=your-domain.com

USER_DATA=`/usr/bin/curl -s http://169.254.169.254/latest/user-data`
HOSTNAME=`echo $USER_DATA`
IPV4=`/usr/bin/curl -s http://169.254.169.254/latest/meta-data/public-ipv4`

# Set the host name
hostname $HOSTNAME
echo $HOSTNAME > /etc/hostname

# Add fqdn to hosts file
cat<<EOF > /etc/hosts
# This file is automatically genreated by ec2-hostname script
127.0.0.1 localhost
$IPV4 $HOSTNAME.$DOMAIN $HOSTNAME

# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts
EOF

Mark it as executable

$ chmod o+x ec2-hostanmes.sh

and add the following line to /etc/rc.local so that it runs every time the instance restart

/usr/local/ec2/ec2-hostname.sh

Save this instance as a new AMI (easiest to do from the AWS console).

Next time you want to create a new instance, pass the desired hostname in the user-data option.

ec2-run-instances ami-99f510f1 --user-data "YOUR-HOSTNAME" \
  --instance-type t1.micro --group default --region us-east-1 \
  --key YOUR-KEY

This technique was adapted from a more comprehensive example published by Marius Ducea.

Ubuntu won't Restart on Amazon EC2 Micro Instance

2010-09-14T00:00:00-07:00

Amazon recently introduced a micro size instance for their popular EC2 service, making it very affordable to run infrequently used web applications.

We've been running tests to benchmark this type of instances against Slicehost 256 offering. Before you go down the path of setting up an instance for your own use, there is one big problem to be aware of. If you're using an Ubuntu image, the instance won't come back properly after a reboot or restart.

Because micro instance have no ephemeral storage at all, after a restart mountall will wait indefinitely for /dev/sda2, which is never going to be present. You can follow this bug for more details.

As a workaround, make sure to login into your instance right after it's been created and edit the /etc/fstab file as follow to add the nobootwait parameter.

/dev/sda2    /mnt    auto  defaults,comment=cloudconfig,nobootwait

Migrating to Rails 3.0 Gotchas: as_json bug

2010-09-07T00:00:00-07:00

Since Rails 2.3.3, the best practice to take control over what attributes are exposed during a JSON serialization was to override the as_json method as opposed to the to_json method as it was done previously. The idea is that as_json should return the object structure of the JSON (most likely a Hash) and to_json encode that object into a JSON string. Jonathan Julian wrote a good reference post on that subject.

The as_json method takes an options hash that you can use to include/exclude certain attributes.

So let say you have a Product model with id, name, created_at, updated_at and account_id as attributes. You don't want to expose the relationship to account and only include id, name and created_at. You would override as_json in your model as follows:

def as_json(options=nil)
  super( {:only => ["id", "name", "created_at"]} )
end

You can verify that it works in the Rails console:

irb(main):003:0> Product.create(:name=>"Test").as_json
=> {"name"=>"Test", "created_at"=>Mon, 06 Sep 2010 21:38:29 PDT -07:00, "id"=>2}
irb(main):004:0> Product.create(:name=>"Test").to_json
=> "{\"name\":\"Test\",\"created_at\":\"2010-09-06T21:39:11-07:00\",\"id\":3}"

Unfortunately, Rails 3.0 introduced a bug, where the as_json method in the super class (ActiveRecord::Base) will just return the object and ignore the options passed. As a result in this case to_json will output all the attributes contained in your model.

In the Rails 3.0.0 console, you get:

irb(main):001:0> Product.create(:name=>"Test").as_json
=> #<Product id: 4, name: "Test", account_id: nil, created_at: "2010-09-07 04:40:44", 
   updated_at: "2010-09-07 04:40:44">
irb(main):002:0> Product.create(:name=>"Test").to_json
=> "{\"name\":\"Test\",\"created_at\":\"2010-09-06T21:40:49-07:00\",\"updated_at\":
   \"2010-09-06T21:40:49-07:00\",\"account_id\":null,\"id\":5}"

Whoops, account_id is being included.

As a workaround, you can either hand-craft the attributes your want to return or use the following to simply output a hash:

def as_json(options=nil)
  serializable_hash({:only => ["id", "name", "created_at"] })
end

Note that in these examples, the ActiveRecord::Base.include_root_in_json setting was set to false so that the root object class name is not included.

Migrating to Rails 3.0 Gotchas: lib folder

2010-09-06T00:00:00-07:00

The lib folder is not included by default in Rails 3.0. This is usually the place where you'll find miscellaneous Ruby code that does not neatly belong to other better defined placed such as model, view, controller or helper directories.

A quick fix is to include the following line

config.autoload_paths += %W( #{Rails.root}/lib )

in the config/application.rb file.

A better approach is to use the pattern described in this post about "Where to put the 'other' files".

Migrating to Rails 3.0 Gotchas: concat

2010-09-03T00:00:00-07:00

Concat in View Helpers

A common technique to simplify logic in views is to use helpers to define blocks that conditionally include content. For instance a helper to only include a block if the user is logged in could look like:

module ApplicationHelper
  def logged_in_block(&block)
    if logged_in?
      concat content_tag(:div, capture(&block))
    end
  end
end

and would be used like this in a view

<% logged_in_block do %>
  <div id="user-bar-greeting">Logged in as ... </div>
<% end %>

In Rails 3.0, this results in the block being included twice. The new convention is that if a Ruby code block in an erb is going to output something, if should be coded as <%= %>. In this case the concat method is no longer necessary. The content_tag method can directly take a block as a parameter as well.

This can be simplified to

def logged_in_block(&block)
  content_tag(:div, &block) if logged_in?
end

and used

<%= logged_in_block do %>
  <div id="user-bar-greeting">Logged in as ... </div>
<% end %>

Migrating Existing Applications to Rails 3.0

2010-09-03T00:00:00-07:00

This week Rails 3.0 reached final. The are many interesting new features such as Active Record Query Interface and lots of improvements (Routing, Action Mailer, Gem dependencies with Bundler, XSS protection, configuration cleanup, etc.) in this major upgrade.

Like with any major platform upgrade, many developers will be confronted with the dilemma of either staying on the 2.x branch — which will eventually be obsolete — or put in a lot of effort to migrate an otherwise perfectly good working application.

To make matter worse, the entire Rails eco-system of gems and plugin is in the process of upgrading to take advantage of new functionality. So even if you don't think you need any of the new features, you better get on the three-oh ~~bandwagon~~ bullet train soon.

To ease the pain of migration, Jeremy McAnally created a very useful plugin. It analyzes your current Rails application and generates a pre-flight checklist, highlighting areas that use deprecated api and will likely cause problems with Rails 3.0. The plugin also create a Gemfile used by Bundler, extracting all the gems dependencies from environment.rb. Lastly, it will rejigger routes.rb to use the new routing syntax.

Jeremy also wrote an extensive guide book on migrating to Rails 3.0. Although it's a paid publication, it is very affordable, comprehensive and well written.

Pratik Naik has also a good post describing the changes in Active Record.

With those tools in hands we've migrated an existing Rails 2.3.8 application to 3.0 and got it to boot in a couple of hours.

Hope you'll hop on the train too.

Real World Agile Development Practices

2010-08-12T00:00:00-07:00

I often get asked about Agile development and what it means for a team to be agile. Of course nowadays every self-respecting engineering organization claims to espouse at least some level of agility, but few are able to describe in details what their development process consists of.

There is a gap between the theory of what "should be done" and what is really going on in the real hectic world of engineering, especially as it exists in startups. There is a lack of information about how development is really being done in software companies around the world. Often for good reasons; they don't want you to know.

I thought I'd share a series of blog post I wrote about the development process we created when I was leading the engineering team at Songbird, the popular media player. This is by no means the only or best approach, but something that was tailored to our needs, capabilities and constraints.

The inherent complexity of building, testing and releasing an open-source desktop software platform supporting hundreds of devices, integrated with dozens of services and running on multiple operating systems drove a lot of the decisions we made to find our optimum release process.

I hope you'll enjoy reading these and perhaps learn something you can use.

Introduction of Agile Practices

A three part series view of a team embarking on an agile development process.

Tracking

An overview of a tool I developed to improve tracking visibility of a release.

Dashboard for Agile Project Tracking

Planning

An analysis on how Agile data can be used for long term planning purpose.

Make Long Term Planning Possible in an Agile Environment

Cappuccino Tag Editor Control in Action

2010-08-11T00:00:00-07:00

As promised, a live demo of TLTagControl — a tag editor control implemented in Cappuccino — is now available. Head over to the sandbox and give it a spin.

Fancy Tag Editor with Cappuccino

2010-08-05T00:00:00-07:00

Tags are present in many applications as a powerful way for users to organize content. For the most part, web applications provide adequate level of tagging, but often fall short on the editing side of things, especially compared to desktop applications.

To remedy this, we've build a tag editor control using Cappuccino that attempts to provide a richer and more natural tag editing experience.

You can see it in action in the screencast below.

Once you click on the edit field, most of the editing can be done via the keyboard. It features an autosuggest box that filters itself automatically as you type and inserts the selected tag upon hitting enter. Tagging can be performed very fast this way.

The control also supports drag and drop, to reorder the list for instance. What's more it's 100% pure HTML + CSS + Javascript.

A live demo will be available soon. Stay tuned.

Tag Editor in Cappuccino

Customize Objective-J objects output to debug console

2010-06-17T00:00:00-07:00

If you've experimented with printing out Objective-J objects to the console, you've seen output such as

<SomeClass 0x004d90>

Knowing the object class is nice, but not super useful. In Javascript, the toString() method is normally invoked when an object is requested to dump it's content into a string. With Objective-J, the selector to override is called description(). The default implementation is as follow:

Override it to return information that is more specific to your object. It will help when debugging.

Adding arbitrary controls to CPToolbar

2010-06-04T00:00:00-07:00

The CPToolbar class allows for easy setup of button controls. In order to add other type of controls, those need to be sub-classes of CPView. Here is an example of how to add a slider control to a toolbar.

The following class implements a volume control and inherits from CPView:

As the slider value changes, a notification is posted to the default notification center and the slider object is being sent along. Let's look at how the slider can be added to a toolbar.

If you've created a toolbar already, this code should look very familiar. On line 31, an instance of the volume object is simply set as a view on the CPToobarItem.

Now we're almost done. In order to be notified of volume changes, we need to register a method to listen to the notification. Here is how it's done

and then the following method will read the value of the slider and can act accordingly.

That's all there is to it.

Unit testing Objective-J apps with OJUnit

2010-06-03T00:00:00-07:00

For a new framework/language to rapidly be adopted is has to provide an easy way for developers to add and run tests. Not only unit tests are the cornerstone of maintainable code, but they can also help you learn a new language by writing tests to figure out behaviors.

OJTest is the latest test framework from 280North. It contains OJUnit - an xUnit framework and OJMoq - a mocking framework as well a couple of tools (OJAutotest - a tool to automatically test your Cappuccino application when you make changes and OJCov - a coverage tool to help you identify code not covered by tests).

We're going to focus on OJUnit first. OJUnit is a simple unit test tool written in and for Objective-J. It's based on theÂ xUnit design. If you used JUnit, you should feel right at home.

Installing

Assuming that you have Cappuccino 0.8 or later installed, you should be able to install OJUnit with the following command:

$ tusk install ojunit

Writing tests

Like any other xUnit framework, test classes must respect a few conventions:

Test class names should follow the pattern ClassNameTest.
Test classes must subclass OJTestCase.
Test case methods name must start with test.
Tests should be placed in a Test folder at the root level of your project.

Here is a skeleton test for testing SomeClass.j class

Here is a list of assertions methods available:

And here are the methods to fail a test:

For more details, look at the source code for the OJTestCase class.

Running tests

OJUnit tests can be run using the ojtest command. At the top-level directory of your project simply run

$ ojtest SomeClassTest.j

with the filenames of all your tests. It is important that you are at your project's top-level directory, or Objective-J may not be able to locate your files correctly.

Alternatively, you can run all your tests using wildcards, like:

$ ojtest Test/*Test.j

This will run all the tests with filenames that end in Test.j located in the directory Test/.

To simplify test execution, you can add a task to your jakefile

task("test", function()
{
    var tests = new FileList('Test/*Test.j');
    var cmd = ["ojtest"].concat(tests.items());
    var cmdString = cmd.map(OS.enquote).join(" ");

    var code = OS.system(cmdString);
    if (code !== 0)
        OS.exit(code);
});

and then invoke it with

$ jake test

Happy testing!