Lead Thinking The Business of Software Development

YMockup – UI Mockups in CSS and HTML

Yesterday I was looking for way to create UI mockups, but nothing I found was quite what I wanted. I needed a way of quickly creating mockups that looked realistic, and could be reused in the actual implementation of the design.

CSS has advanced so far recently, that I believe it can go some way to replacing Photoshop in the design process. With that in mind, I present YMockup – UI mockups using HTML and CSS.

With YMockup, you can code up a general theme for your site – and then drag/edit/resize elements to your hearts content! It’s really flexible, and you can create any kind of element that your site needs.

The best part of it, is that you can reuse all the CSS and HTML in your actual site – no need to cut up the designs in Photoshop.

Try out the demo here (only supports WebKit based browsers, such as Chrome or Safari).

YMockup Features:

• Customisable for any HTML/CSS
• Edit elements in place
• Drag and drop
• Snap to grid dragging
• z-index control
• Move elements with the arrow keys (hold ctrl)

If you want to use your own themes/elements, clone the repository and follow the README – it’s designed to be used locally, so you can edit the HTML and CSS in your preferred editor.

As you can see, I’ve include the aristo theme – since I’m primarily using this to build Bowline applications.

Of course this won’t be everybody’s cup of tea, and does require a good knowledge of HTML/CSS. However, I believe it’s perfect for design minded hackers, like myself.

Bowline updates and more!

A lot of work has been going into Bowline recently. Here are the latest features:

• New desktop app framework using wxWidgets, WebKit and Ruby 1.9.
• Improved and faster binding API
• New API for asynchronous Ruby/JS callbacks
• Bundler support
• Background updating
• Loads of fixes and optimizations

There’s also a new JavaScript framework for Bowline which will be released soon. It’s designed to be fairly de-coupled from Bowline – so you can use it for web applications. The idea is that you can share a lot of code between your desktop apps and your web applications.

Additionally I’ve been working on a project for in-memory models called SuperModel.
SuperModel works particularly well inside Bowline apps. Here are the main features:

• Serialisation
• Validations
• Callbacks
• Observers
• Dirty (Changes)
• Ruby Marshaling to disk
• Redis support

I’ve also re-written SuperModel in JavaScript – it’ll be integral to the next Bowline release.

Syncro is another recent project – it’s like Juggernaut on steroids! Syncro let’s you easily synchronise Ruby classes and state between remote clients. It’s also has some fancy features like offline support. You can now make Bowline apps, that function fully offline, and then can synchronize up to your servers (and any other clients) when they come back online.

All that work has made Taskforce possible. Taskforce is a collaborative work manager. Think of it as a cross between Things.app and Google Wave. Here’s a recent screenshot of Taskforce working on top of Bowline on OSX.

If you’re interested, sign up.

Sending or receiving email with Rails? Easy

Sending emails from Rails can be a pain, receiving them even more so. You have to set up queues, pollers, smtp servers etc – it’s a hassle.

There is another way though. Remail is a project I’ve just released that brings REST to email.

Remail proxies emails through Google App Engine:

• To send an email – just send a POST request to your Remail Google App Engine.
• To receive an email – Remail will send a POST request to a callback URL.

It’s that simple. App Engine gives you 2000 free emails a day, and if you need more – the prices are very reasonable.
It’s worth mentioning, that at the moment, Remail only works with Rails 3.

Step 1 – App Engine

So, firstly create a App Engine project:

Next, install the Python developer SDK.

Clone the remail-engine git repository:

git clone git://github.com/maccman/remail-engine.git

Configure the remail-engine application.yaml file, by adding the name of your App Engine project (the yaml key is called application).
Then, you’ll need to configure the settings.yaml file. Specify the public url of your site as outbound_url, and a random string as api_key (you can generate one using uuidgen).

Add the remail-engine to the App Engine SDK and deploy.

Step 2 – ActionMailer

Install the remail gem:

sudo gem install remail

Add add it to your Gemfile:

gem "remail"

Now configure Remail, either in application.rb, or in the environment files:

  config.action_mailer.delivery_method = :remail
  config.action_mailer.remail_settings = {
    :app_id  => "remit-yourappname",
    :api_key => "changeme"
  }

Right, so now we can send email. How about receiving them? We need to specify a callback controller like this:

class EmailsController < ApplicationController
  skip_before_filter :verify_authenticity_token

  def create
    if request.headers["Authorization"] != "yourapikey"
      return head(:unauthorized)
    end
    UserMailer.receive(params[:email][:raw])
    head :ok
  end
end

Remail will send a POST request to that controller when it receives any emails.
If your Rails app isn’t available – Remail will try again and again – backing off as time goes by.

Right, so those are the two steps to using Remail in your application. You can now generate mailers as usual – everything should just work.

There’s a good Railscast on using ActionMailer with Rails 3, and a good Rails Guide on the subject.