Boldr

Undesign

Nicolas Mérouze — Sat, 31 Dec 2011 16:00:00 PST

I wanted to reopen this blog for a few weeks now and I didn't know what type of design I wanted to make. I decided a few days ago to undesign it and keep only what's really necessary. So no textures, no images and no colors (except for code highlighting).

The design and the development was fast and I can finally write. I like the result and now I can focus on the experience you'll have on the blog, from reading to interacting (no interactions yet, but comments are coming soon).

The past, the present and the future of Boldr

Nicolas Mérouze — Sat, 31 Dec 2011 16:00:00 PST

I stopped blogging about 18 months ago. I've been very busy with my startup. This has been great but ultimately I realized that spending so much time and energy and stressing all day wasn't what I wanted for my life. So a few months ago I had the opportunity to become a freelance again and I took it.

Now that I work less I'm happier, the stress has vanished, I got married and I can save money for later. I also have more time to blog again and to focus on new side projects. 2011 has globally been a great year for me and I perfected my skills in other areas than programming, so expect to have articles about more things than HTML5/CSS3, Ruby and Javascript.

Boldr is now the name of my company which is also why I decided to write again in order to prepare the company for future clients. I'm almost full for 2012 but I would be happy to work on small projects.

Rails 3 + Mongoid + HAML + RSpec 2 template

Nicolas Mérouze — Sat, 17 Jul 2010 17:00:00 PDT

Quick app template based on the one from Les Hill :

rails new my_app -OJT -m http://gist.github.com/raw/473676/ca54399b18bd1f35587ef0a3891aa6b427508da7/app.rb

It gives you Mongoid + HAML + RSpec 2 + jQuery. This is my standard stack when I'm creating a new application nowadays.

Getting started with Duby and MongoDB

Nicolas Mérouze — Thu, 18 Feb 2010 16:00:00 PST

I first talked about Duby back in November. The project has since evolved, there's now more features and it's more usable. I'm able to run MongoDB so I decided to share it. If you know nothing about Duby, read the README.

NOTE: The following example is based on the java example from the mongo-java-driver repo.

Setup

We first need to download the MongoDB jar and add its path to CLASSPATH:

$ export CLASSPATH=.:/my/path/to/mongo-1.2.jar

Then we create our Duby file we name MongoTest.duby.

Connection to MongoDB

We start by importing all we need:

import com.mongodb.Mongo
import com.mongodb.DBCollection
import com.mongodb.BasicDBObject
import com.mongodb.DBObject
import com.mongodb.DBCursor
import com.mongodb.DB

import java.util.Set
import java.util.List

Then get the DB connection:

begin
  m = Mongo.new
  db = m.getDB "mydb"
  # the rest of the code will go here
rescue Exception
end

Cool new feature: Iterators

One reason I love Ruby is because iterators are nice! This feature landed in Duby a while ago and it's just a pleasure to use it (here to display collection names):

colls = db.getCollectionNames

colls.each do |coll|
  puts coll
end

Inserting a new document

To insert a new document, we must get a collection:

testColl = db.getCollection "testCollection"
testColl.drop # drop the data from previous test

To build a new document we need to use BasicDBObject as a container and there's a BasicDBObject#put(key, value) to add information:

doc = BasicDBObject.new
doc.put "name", "MongoDB"
doc.put "type", "database"
doc.put "count", 1

info = BasicDBObject.new
info.put "x", 203
info.put "y", 102

doc.put "info", info

Of course we can put a BasicDBObject inside another BasicDBObject. And here's how to insert the document we've just build:

testColl.insert(doc)

Getting an existing document

Nothing really to say about how to get the document we've just inserted:

myDoc = testColl.findOne
puts myDoc

Executing the file

I hasn't been able to run the file via duby MongoTest.duby I had to compile it then call it with Java dubyc -java MongoTest.duby && javac MongoTest.java && java MongoTest

Thoughts about Duby

dubyc -java converts Duby code to Java code. So you don't have to worry about performance.
Duby code really feels like Ruby. And this feeling's getting more and more true.
You can create a Duby class and use it in your Java code (unlike JRuby). It's because "Duby is Java with Ruby syntax". And it's wonderful.
The true awesomeness is that you can create Android applications with Duby! Check out this example.

Are you excited now? You should be and try Duby right now!

Store Rails sessions in MongoDB

Nicolas Mérouze — Wed, 17 Feb 2010 16:00:00 PST

There are a few built-in session stores in Rails but if you want to store them in MongoDB (or anything not using ActiveRecord) there's nothing. Not anymore with mongo_session_store!

NOTE: The project was initially created by Chris Brickley with MongoMapper support but without Mongoid support and it was not in a gem.

Usage with MongoMapper

First we load the gem:

config.gem "mongoid"
config.gem "mongo_session_store"

Don't forget to create an initializer to add the connection to the database. Then configure Rails to use MongoMapper for sessions (in the session store initializer):

config.gem "mongo_mapper"
config.gem "mongo_session_store", :lib => "mongo_session_store/mongo_mapper"

Usage with Mongoid

It's almost the same with Mongoid. First setup the environment correctly:

require "mongo_session_store/mongoid"
ActionController::Base.session_store = :mongoid_store

Then the session store initializer:

ActionController::Base.session_store = :mongo_mapper_store

NOTE: Mongoid acts a bit differently than MongoMapper but I havn't had the time to fix the issue.

I'm gonna add some tests, try to have the same usage for Mongoid and MongoMapper and add Rails 3 support. But if you want some other things please fork it.

MVC with Node.js - Which modules?

Nicolas Mérouze — Mon, 15 Feb 2010 16:00:00 PST

When you start a new technology you may be lost. Node.js is young (1 year today) but there's already a bunch of frameworks (express seems to be the most advanced) and a lot of modules. The best way to begin is to explore the ecosystem. To do that, let's create our own Model-View-Controller stack.

NOTE: The whole example is available on GitHub and not all the code is in the article, so be sure to check it out.

Models

There's a lot of modules for databases and some of them have ORMs. We can use Redis, MongoDB, CouchDB, Tokyo Cabinet, Postgres, Sqlite 3, Riak... For this example we're going to use node-dirty which do not require any database installation. node-dirty is a fast JSON store and it's easy to use, have a look at the following code:

/* Requirements */
require.paths.unshift("./vendor/node-dirty/lib");

var sys = require("sys"),
    Dirty = require("dirty").Dirty;

/* Model */
var posts = new Dirty("posts.dirty", { flushInterval: 10 });

/* Persistence */
var post  = { title: "Awesome post" };
posts.add(post);

/* Querying */
sys.puts(posts.get(post._id).title);

Views

Now we have data we will need views to display them. I've already written something about Mustache.js and for this example I'm gonna use it too but there are other modules available for templating. You can use EJS, HAML, Sass (for css only)...

To use Mustache.js, don't forget to use the one from the commonjs branch (master will not work with Node.js). There's another implementation faster and with built-in async named Mu.

Controllers

The important part here is not the controller itself because it's just a function which will be called by the router. There are some routers but the most interesting is Scylla mainly because it uses EJSGI (an async Rack-like interface for Javascript).

With Scylla we're defining the route with a string containing the HTTP verb and the pattern. Then we bind a function to it.

/* Requirements */
require.paths.unshift("./vendor/ejsgi/lib");
require.paths.unshift("./vendor/node-scylla/lib");

var scylla = require("scylla"),
    ejsgi = require("ejsgi");

/* Controller */
var HomeController = {
  index: function(req) {
    var body = "Hello World!";

    var res = {
      body: new req.jsgi.stream(),
      status: 200,
      headers: {
        "content-type": "text/html",
        "content-length": body.length
      }
    };
    res.body.write(body);
    res.body.close();

    return res;
  }
};

/* Router */
function Router() { scylla.Base.call(this); }
Router.prototype = Object.create(scylla.Base.prototype);
process.mixin(Router.prototype, { "GET /": HomeController.index });

/* Server */
ejsgi.Server(new Router().adapter("ejsgi"), "localhost", 8000).start();

NOTE: I included the router stuff in the controller part because most of the code is in the controller.

Conclusion

As we've seen there are a lot of modules for each part of the MVC stack. It's kinda difficult to choose but it's mainly about what you like (which database you want to use, which templating engine you like and which is the most powerful router).

Most frameworks for Node.js are not fully agnostic (nor fully opiniated) yet so it can be a dealbreaker if you like things that ain't in a framework you want to use. If you're like this you can comment the article and write about your preferences. It will maybe ease the choice for newcomers in the Node.s world.

Design refresh thanks to CSS3

Nicolas Mérouze — Tue, 09 Feb 2010 16:00:00 PST

I have talked about it on my twitter account it's now there. Here's a small design refresh for Boldr. The HTML code has not changed it's just a new CSS. I was using HTML5 since the beginning. Meanwhile, I was not using CSS3 at all. I decided to do something and now I'm using @font-face for the titles, @font-face and rounded corners for the logo and CSS Animations for the links. There will be more details in a series of CSS3 articles I'll be writing soon.

And the browser compatibility is pretty large:

@font-face and rounded corners should be OK with the majority of the browsers (including IE6, 7 and 8).
CSS Animations should be OK with Safari/Chrome/WebKit and Firefox nightlies.

It's awesome to see that you can do a bit of CSS3 even with Internet Explorer and I will do more and more CSS3 in the next iterations.

I added Intense Debate to the articles, so if you have any suggestions or comments about the design you can tell me this here.

How to upgrade plugins to Rails 3.0

Nicolas Mérouze — Thu, 04 Feb 2010 16:00:00 PST

Rails 3.0 beta is out and it's now time to upgrade all the plugins available. To show you how to do it I've decided to create a small plugin compatible with Rails 2.x and Rails 3.0. It's a wrapper around Rack::Cache to insert it automatically in a Rails application.

It's a gem

First things first we create the gem we will name rails-cache. Thanks to Jeweler it's dead easy. Just a few lines of code in a Rakefile and it's done:

require "rake"

begin
  require "jeweler"
  Jeweler::Tasks.new do |gem|
    gem.name = "rails-cache"
    gem.summary = "Add Rack::Cache to your Rails app"
    gem.email = "nicolas.merouze@gmail.com"
    gem.homepage = "http://github.com/nmerouze/rails-cache"
    gem.authors = ["Nicolas MÃÂ©rouze"]
    gem.files = Dir["*", "{lib}/**/*"]
    gem.add_dependency("rack-cache", "~> 0.5.2")
  end

  Jeweler::GemcutterTasks.new
rescue LoadError
  puts "Jeweler (or a dependency) not available. Install it with: sudo gem install jeweler"
end

To create the VERSION file a echo "1.0.0" > VERSION is enough.

Rails 2.x way

The code of the gem will be in lib/rails/cache.rb and it's just the insertion of the Rack::Cache middleware:

require "rack/cache"

Rails.configuration.middleware.use Rack::Cache, 
  :metastore   => "file:#{Rails.root + "cache/rack/meta"}",
  :entitystore => "file:#{Rails.root + "cache/rack/body"}",
  :verbose     => true

We build the gem with rake build and we install it with gem install --local pkg/rails-cache-1.0.0.gem. Then we need to load it in our environment.rb:

RAILS_GEM_VERSION = '2.3.5' unless defined? RAILS_GEM_VERSION
require File.join(File.dirname(__FILE__), 'boot')

Rails::Initializer.run do |config|
  config.gem "rails-cache", :lib => "rails/cache"
end

Rack::Cache is now plugged with the Rails application!

The new way

Rails 3.0 comes with Bundler. A cool thing with Bundler is that you can load a gem which have a custom path:

gem "rails-cache", :require => "rails/cache", :path => "../rails-cache"

The :path option is the path to our gem. We have a lot of solution to do the same in Rails 2.x, with a plugin instead of a gem for example, but it is not as elegant as with Bundler (Bundler is usable with Rails 2.x).

To create a plugin for Rails there's an object for that now, Rails::Railtie. So we just need to write an object which inherit from Rails::Railtie in lib/rails/cache.rb:

require "rack/cache"

module Cache
  class Railtie < Rails::Railtie
    railtie_name :rails_cache

    initializer "rails_cache.insert_rack_cache" do |app|
      app.config.middleware.use Rack::Cache,
        :metastore   => "file:#{Rails.root + "cache/rack/meta"}",
        :entitystore => "file:#{Rails.root + "cache/rack/body"}",
        :verbose     => true
    end
  end
end

The gem has been upgraded to Rails 3.0!

Rails 2.x and 3.0 in a gem

This is just an example here, but it's possible there's a better solution:

require "rack/cache"

if Rails::VERSION::MAJOR == 2
  Rails.configuration.middleware.use Rack::Cache, 
    :metastore   => "file:#{Rails.root + "cache/rack/meta"}",
    :entitystore => "file:#{Rails.root + "cache/rack/body"}",
    :verbose     => true
else
  module Cache
    class Railtie < Rails::Railtie
      railtie_name :rails_cache

      initializer "rails_cache.insert_rack_cache" do |app|
        app.config.middleware.use Rack::Cache,
          :metastore   => "file:#{Rails.root + "cache/rack/meta"}",
          :entitystore => "file:#{Rails.root + "cache/rack/body"}",
          :verbose     => true
      end
    end
  end
end

And you can find the whole code on GitHub.

More about Plugins/Engines

José Valim has written a draft documentation about Rails::Railtie, Rails::Engine and Rails::Application.
Yehuda Katz has made a blog post about it.
rails3_datamapper is a good example to see how to write a Rails 3.0 plugin.
The latest commits for CarrierWave have been made to upgrade it to Rails 3.0.

Real World Node.js - Redis and streaming

Nicolas Mérouze — Tue, 02 Feb 2010 16:00:00 PST

Non-blocking async I/O frameworks are the new hotness, I've already said it. But aside the buzzwords, what can we do with these frameworks? Here's a few examples using Node.js.

Track users with Redis

Rick Olson has developed a library to track what users are on which pages using Redis to store the data.

Now you can track users in real-time! It's a neat feature to know who is editing a wiki page at the same time as you but real-time generates a lot of requests. If your server blocks the process for each request your server is gonna be stuck quickly.

Thanks to Node.js and the async Redis client your server will be in better shape.

Streaming

Remember my article about Twitter Stream with Websockets? There's the same here but with Node.js. As you can see the RabbitMQ part is not present because it is not really necessary with a non-blocking framework. But having a queue is recommended at some point (generally when you use more than one process).

Streaming with a classic web framework is hard to code (= to avoid blocking the process). With Node.js you almost don't realize that you stream data!

Here's some useful code about streaming with Node.js:

In addition to the tracker with Redis, Rick Olson has also developed a Twitter Stream library for Node.js.
You can stream file uploads.
In fact New Bamboo has a long article about different streaming techniques with Node.js.
If you want to use Comet with less than 10 lines of code, Faye is for you.

There's more

Don't forget to check out the Node.js wiki to have a longer list of applications.

Links of link lists about Rails 3

Nicolas Mérouze — Mon, 01 Feb 2010 16:00:00 PST

There's a lot of articles about Rails 3 out there and it's difficult to keep the list up to date. But here's 3 pages full of links about the Rails 3 :

Rails 3 reading material by Medium Exposure
On the way to Rails 3 - a link list by Rails Love
Rails 3 release notes. There's a bunch of links with the very useful release notes.

These lists are already obsolete because José Valim has just published another article about Rails 3 I18n changes.

Rails 3 beta/RC? should be out today or tomorrow but you have a lot to read now ;)

Twitter/HTML5 Websockets with Cramp

Nicolas Mérouze — Mon, 18 Jan 2010 16:00:00 PST

After HTML5 Web Storage, I'm gonna show a use case of HTML5 Websockets. It's quickly becoming a hype solution for bidirectional communication between client and server (think TCP for browsers). Hype but not really usable in production because of the compatibility with the browsers.

Compatibility of Websockets (as of January 2010) : nightly builds of WebKit and Chrome.

Because I'm lazy and there are some examples out there I decided to convert an existing Twitter Stream example to Cramp (a new Ruby async framework by @lifo from the Rails Core team). So first read the article from the author of the initial example. Finish? Now we can convert it to Cramp.

Cramp for Websockets

Lifo introduced it on his blog. A few lines later we have the application configured for Cramp instead of EventMachine in socket.rb:

require 'vendor/gems/environment'
require 'cramp/controller'
require 'uuid'
require 'mq'

Cramp::Controller::Websocket.backend = :thin

class TweetsController < Cramp::Controller::Websocket
end

Rack::Handler::Thin.run TweetsController, :Port => 3000

on_start

Now we want to convert the open event to Cramp. For that, Cramp has a on_start method to call the method executed for this event. So the open event will be like that:

require 'vendor/gems/environment'
require 'cramp/controller'
require 'uuid'
require 'mq'

Cramp::Controller::Websocket.backend = :thin

class TweetsController < Cramp::Controller::Websocket
  @@uuid = UUID.new

  on_start :display

  def display
    puts "WebSocket opened"

    twitter = MQ.new
    twitter.queue(@@uuid.generate).bind(twitter.fanout('twitter')).subscribe do |t|
      render t
    end
  end
end

Rack::Handler::Thin.run TweetsController, :Port => 3000

To send a message to the user, Cramp has a render method.

on_finish

When the user ends the execution of the socket, there's a close event. When this event is fired, the method passed to on_finish will be executed.

require 'vendor/gems/environment'
require 'cramp/controller'
require 'uuid'
require 'mq'

Cramp::Controller::Websocket.backend = :thin

class TweetsController < Cramp::Controller::Websocket
  @@uuid = UUID.new

  on_start :display
  on_finish :close

  def display
    puts "WebSocket opened"

    twitter = MQ.new
    twitter.queue(@@uuid.generate).bind(twitter.fanout('twitter')).subscribe do |t|
      render t
    end
  end

  def close
    puts "WebSocket closed"
  end
end

Rack::Handler::Thin.run TweetsController, :Port => 3000

We just have to start the server and test with client.html to see the tweets.

Conclusion

If you read the code you'll see that Websockets make more sense to a developer than Comet. And it's the same for a lot of HTML5 features. Having more logical things and less hacks will may finally be a reality soon. You can see the whole code of this example in my fork of the original one.

Speed up Ajax with HTML5 Web Storage

Nicolas Mérouze — Thu, 14 Jan 2010 16:00:00 PST

I'm beginning a series of articles about the modern features of Web browsers. This article will be about HTML5 Web Storage and particularly localStorage. And because I like it, another twitter example folks!

What is localStorage?

Compatibility of localStorage (as of January 2010) : IE8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.50

Basically it's like cookies but restricted to the client (the server cannot get data from localStorage), it can store more data (the limit depends of the browser but it's generally 5MB) and it doesn't have a time expiration. It's time for the example!

WARNING: You must test the above example with a real URL (not file://). Otherwise it won't work in IE and Firefox (but seems to be fine in Safari and Chrome)

The slow way

First we get the tweets and display them. It is slow because each time we access the page the Javascript will request Twitter. And it's ugly because we have a loading message before displaying the tweets.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function displayTweets(data) {
      $("#loading").remove();
      $.each(data.results, function(i, item) {
        $("#tweets").append($("<li/>").text(item.text));
      });
    }

    $(function() {
      $("#tweets").before($("<div id='loading'/>").text("Loading..."));
      $.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&rpp=5&callback=?", function(data) {
        displayTweets(data);
      });
    });
  </script>
</head>
<body>
  <ul id="tweets"></ul>
</body>
</html>

To display the tweets instantly we're gonna store them.

Setter

After each request to Twitter we store the whole JSON response to localStorage. It is just one line:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function displayTweets(data) {
      $("#loading").remove();
      $.each(data.results, function(i, item) {
        $("#tweets").append($("<li/>").text(item.text));
      });
    }

    $(function() {
      $.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&rpp=5&callback=?", function(data) {
        displayTweets(data);
        localStorage.setItem("tweets", JSON.stringify(data));
      });
    });
  </script>
</head>
<body>
  <ul id="tweets"></ul>
</body>
</html>

localStorage.setItem(key, value) take a key for the first argument ("tweets" here) and the value for the second argument (the Twitter JSON response here). WARNING: The value must be a string so if we want to store an object, we stringify it with JSON.stringify(data).

Getter

Then we write the code to get the tweets from localStorage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function displayTweets(data) {
      $("#loading").remove();
      $("#tweets").children().remove();
      $.each(data.results, function(i, item) {
        $("#tweets").append($("<li/>").text(item.text));
      });
    }

    $(function() {
      $("#tweets").before($("<div id='loading'/>").text("Loading..."));
      var tweets = localStorage.getItem("tweets");
      if (tweets != null) displayTweets(JSON.parse(tweets));
      $.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&rpp=5&callback=?", function(data) {
        displayTweets(data);
        localStorage.setItem("tweets", JSON.stringify(data));
      });
    });
  </script>
</head>
<body>
  <ul id="tweets"></ul>
  <button onclick="javascript:localStorage.clear();">Clear localStorage</button>
</body>
</html>

To get the data it's localStorage.getItem(key). If there's something in it we display them. The first time we access the page there won't be anything in localStorage so the process will be the same as "The slow way". The other times the tweets will be displayed instantly. The Twitter request is running too, so it will refresh the list a little bit after the first display in case there's any new tweets. The rendering will be way prettier than the loading message! You can see the example here.

If we want to clear the localStorage it's as simple as localStorage.clear().

Old browsers compatibility (progressive enhancement)

If you do that in production, the Javascript will fail for the users who have old browsers. To be safe, we will download Modernizr (I will write an article about Modernizr soon) and check if the browser has a localStorage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="modernizr.js" type="text/javascript"></script>
  <script type="text/javascript">
    function displayTweets(data) {
      $("#loading").remove();
      $("#tweets").children().remove();
      $.each(data.results, function(i, item) {
        $("#tweets").append($("<li/>").text(item.text));
      });
    }

    $(function() {
      $("#tweets").before($("<div id='loading'/>").text("Loading..."));
      if (Modernizr.localstorage) {
        var tweets = localStorage.getItem("tweets");
        if (tweets != null) displayTweets(JSON.parse(tweets));
      }
      $.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&rpp=5&callback=?", function(data) {
        displayTweets(data);
        if (Modernizr.localstorage) localStorage.setItem("tweets", JSON.stringify(data));
      });
    });
  </script>
</head>
<body>
  <ul id="tweets"></ul>
</body>
</html>

Result

As a result I made a fork of jQuery tweet with localStorage support, so check it out! You won't see a difference with a server-side rendering.

Easy Testing MongoMapper models

Nicolas Mérouze — Tue, 12 Jan 2010 16:00:00 PST

There's a bunch of libraries to write tests easily for your app. factory_girl and Machinist for the fixtures. Remarkable for the macros.

There's no core support for MongoMapper in any of these solutions but Machinist and Remarkable are agnostic so it's easy to add a MongoMapper support. That's what I did a few months ago with machinist_mongo and remarkable_mongo.

I'm refactoring them to add Mongoid support in a near future and I think it's time to have a bit of docs on these 2 gems. Let's see how to use them in a Rails project with RSpec.

Machinist for MongoMapper

First we load the gem:

config.gem "machinist_mongo", :lib => "machinist/mongo_mapper"

Then it's like any other Machinist adapter. We create the blueprint:

Post.blueprint do
  title "I like MongoDB!"
  body "I have a ton of reasons for that."
end

We require the blueprints.rb file into spec_helper.rb:

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path(File.join(File.dirname(__FILE__),'..','config','environment'))
require 'spec/autorun'
require 'spec/rails'
require 'spec/blueprints'

Spec::Runner.configure do |config|
end

We write the specs:

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')

describe Post do
  before(:all) do
    @post = Post.make
  end

  it "should have a title" do
    @post.title.should == "I like MongoDB!"
  end
end

And finally the related model:

class Post
  include MongoMapper::Document

  key :title, String
  key :body, String
end

Like Machinist for ActiveRecord you have the 3 following methods: Model.make, Model.make_unsaved, Model.plan. And there's a preliminary support for embedded documents.

Remarkable for MongoMapper

The first step is the same that Machinist, requiring the gems:

config.gem "remarkable_rails", :lib => "remarkable_rails"
config.gem "remarkable_mongo", :lib => "remarkable/mongo_mapper"

Let's add the specs. Say we want to check the existence of title and body keys and the title presence validation:

require File.expand_path(File.dirname(__FILE__) + '/../spec_helper')

describe Post do
  it { should have_keys(:title, :body, String) }
  it { should validate_presence_of(:title) }
  # ...
end

Finally we modify the model to pass the specs:

class Post
  # ...
  validates_presence_of :title
end

Remarkable for MongoMapper is not feature complete (as of v0.1.2). Here's the list of macros but they don't support all the options of the related MongoMapper methods.

belong_to
have_many
have_key/have_keys
validate_presence_of
validate_confirmation_of
validate_length_of (bugged)
allow_values_for

If you want to add features, fork the repo.

Conclusion

If you've already used Machinist and/or Remarkable you won't have problems. For the other ones it is an easy solution to write your tests quickly.

iPhone app in 5 minutes with Titanium Mobile

Nicolas Mérouze — Mon, 04 Jan 2010 16:00:00 PST

Do you want to build native iPhone/Android apps with HTML/Javascript? And I mean real native not native but web like Rhodes and PhoneGap. If this is what you want you may give Titanium Mobile a try.

To convince you I have an example to show you. Let's take a twitter viewer (how original it is!). To be simple, we will get the JSON from a search and create a table view with the 10 last tweets.

Bootstrap

After downloading and installing Titanium Mobile we create a mobile application. To test it with the iPhone XCode and the iPhone SDK must be installed. For Android, the Android SDK must be installed.

The first step is to edit the main view (index.html). We add all the JS we'll need: jQuery and Underscore.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/underscore.js"></script>
  <script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>

Javascript

Titanium Mobile is a bit like Sproutcore. The biggest part of the code will be JS. To begin with it we need to get the tweets extracting text and profile image URLs:

$(function() {
  $.getJSON("http://search.twitter.com/search.json?&q=appcelerator&rpp=10&callback=?", function(json) {
    var data = _.map(json.results, function(item) {
      return { text:item.text, image:item.profile_image_url };
    });
  });
});

Then we want a column layout with 2 things: text and image. So we apply the style for it:

$(function() {
  $.getJSON("http://search.twitter.com/search.json?&q=appcelerator&rpp=10&callback=?", function(json) {
    var data = _.map(json.results, function(item) {
      return { text:item.text, image:item.profile_image_url };
    });

    var template = {
      selectedBackgroundColor:"#111",
      rowHeight:50,
      layout:[
        { type:"text", name:"text", fontSize:10, fontWeight:"normal", color:"#999", top:5, left:50 },
        { type:"image", name:"image", width:40, height:40, top:5, left:5 }
      ]
    };
  });
});

And we initialize the table view:

$(function() {
  $.getJSON("http://search.twitter.com/search.json?&q=appcelerator&rpp=10&callback=?", function(json) {
    var data = _.map(json.results, function(item) {
      return { text:item.text, image:item.profile_image_url };
    });

    var template = {
      selectedBackgroundColor:"#111",
      rowHeight:50,
      layout:[
        { type:"text", name:"text", fontSize:10, fontWeight:"normal", color:"#999", top:5, left:50 },
        { type:"image", name:"image", width:40, height:40, top:5, left:5 }
      ]
    };

    var tableView = Titanium.UI.createTableView({
      backgroundColor:"transparent",
      borderColor:"#333",
      template:template,
      data:data
    }, function(eventObject) {});
  });
});

Finally we show it in the current window:

$(function() {
  $.getJSON("http://search.twitter.com/search.json?&q=appcelerator&rpp=10&callback=?", function(json) {
    var data = _.map(json.results, function(item) {
      return { text:item.text, image:item.profile_image_url };
    });

    var template = {
      selectedBackgroundColor:"#111",
      rowHeight:50,
      layout:[
        { type:"text", name:"text", fontSize:10, fontWeight:"normal", color:"#999", top:5, left:50 },
        { type:"image", name:"image", width:40, height:40, top:5, left:5 }
      ]
    };

    var tableView = Titanium.UI.createTableView({
      backgroundColor:"transparent",
      borderColor:"#333",
      template:template,
      data:data
    }, function(eventObject) {});

    Titanium.UI.currentWindow.addView(tableView);
    Titanium.UI.currentWindow.showView(tableView);
  });
});

26 lines of Javascript to create a twitter viewer! People who have already develop for iPhone will see how easier Titanium Mobile is.

There's a lot of cool things like composite views, scrollable views, coverflow, maps, facebook connect... And it's as easy as this example. If you don't want to bother with a language you don't know or/and you are tight on your schedule, Titanium Mobile is for you.

If you're convinced and want to learn more about it the developers maintain a really useful example app.

Create a Web App with Node.js

Nicolas Mérouze — Mon, 21 Dec 2009 16:00:00 PST

Node.js is the new hype for server-side webish things. It's evented, non-blocking, fast and in javascript (not another language to learn, yay!). Real-Time Web is around the corner.

Javascript means you can use existing JS librairies. In this example I will use Mustache.js and Underscore to create the core of a minimal web application.

Let's begin

I have 4 files: main.js, mustache.js, underscore.js, templates/index.html

We will put our code in main.js. First we require the things we'll need:

var sys = require('sys'), http = require('http'), posix = require('posix')
require('./underscore')
var Mustache = require('./mustache')

Note that Underscore is CommonJS compliant so you don't have to do anything for it. Then we add our actions which are composed by 3 things: URI, template name and the view.

var actions = [];

actions.push({
  path: "/",
  template: "index.html",
  view: {
    title: "Joe",
    calc: function() { return 2 + 4; }
  }
})

We can create as many actions as we want. Now let's create the server:

http.createServer(function (req, res) {}).listen(8000);

The server will be running but will not know how not handle actions. Let's add a request listener:

http.createServer(function (req, res) {
  req.addListener('complete', function() {})
}).listen(8000);

The req variable contains the URI, so we will select the action corresponding to the request:

http.createServer(function (req, res) {
  req.addListener('complete', function() {
    var action = _(actions).chain().select(function(a) { return req.uri.path == a.path }).first().value()
  })
}).listen(8000);

If the request doesn't match an action, we will send an error:

http.createServer(function (req, res) {
  req.addListener('complete', function() {
    var action = _(actions).chain().select(function(a) { return req.uri.path == a.path }).first().value()

    if (_.isEmpty(action)) {
      res.sendHeader(404, {'Content-Type': 'text/plain'})
      res.sendBody("Error")
      res.finish()
    } else {}
  })
}).listen(8000);

In the other case we render the action:

http.createServer(function (req, res) {
  req.addListener('complete', function() {
    var action = _(actions).chain().select(function(a) { return req.uri.path == a.path }).first().value()

    if (_.isEmpty(action)) {
      res.sendHeader(404, {'Content-Type': 'text/plain'})
      res.sendBody("Error")
      res.finish()
    } else {
      posix.cat("./templates/" + action.template).addCallback(function(template) {
        res.sendHeader(200, {'Content-Type': 'text/html'})
        res.sendBody(Mustache.to_html(template, action.view))
        res.finish()
      })
    }
  })
}).listen(8000);

We get the template content then renders it when the I/O process is complete. Here's the template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>My Framework</title>
</head>

<body>
  {{title}} spends {{calc}}
</body>
</html>

And that's all! It's running and you can create your blog with it for example.

There's already a lot of Node.js frameworks that you can find on GitHub if you search for "node". But there's nothing really mature at this time.

Update (10 Feb 2010)

I forgot to mention that the mustache.js I've used was tweaked. We just have to add this following code at the end of the mustache.js file:

for (var name in Mustache)
    if (Object.prototype.hasOwnProperty.call(Mustache, name))
        exports[name] = Mustache[name];

This will be merge into the main library in the near future and you can find the whole file here

Bookmarks #2

Nicolas Mérouze — Sat, 19 Dec 2009 16:00:00 PST

The rest of my bookmarks. I finally finish to read all my tech & design bookmarks, yay!

Ruby

Javascript

HTML & CSS

Design

iPhone

Useful to do wireframes for an iPhone app

Bookmarks #1

Nicolas Mérouze — Wed, 16 Dec 2009 16:00:00 PST

I'm currently reading my long list of bookmarks I hadn't time to read before. I thought it could be a good idea to share with you some of them. There will be other posts like that this week.

Ruby

Javascript

iPhone

Git

Some git tools

Design

How to make minimalist designs

Convert HTML presentations to PDF

Nicolas Mérouze — Thu, 03 Dec 2009 16:00:00 PST

You're maybe familiar with slideshow (aka S9) to have your presentation in HTML and to modify it very easily in Textile. For my presentations I now use slidedown which is very cool too. But my ultimate goal was to convert them to PDF.

WARNING: My solution is build with MacRuby. So install it before trying.

I finally find a way to do it, thanks to the work of Tom Ward with Snapper and Matt Aimonetti with his recent MacRuby sample. Here's the script which is very easy to use:

./to_pdf -n 27 http://nmerouze.github.com/blockcampparis09

This will convert the presentation to PDF! You can see the result here. The generated PDF is named slides.pdf but you can name it yourself in the command line:

./to_pdf -n 27 http://nmerouze.github.com/blockcampparis09 myfilename.pdf

The -n option is to know how many slides you have in the presentation.

jQuery Underscore together

Nicolas Mérouze — Mon, 30 Nov 2009 16:00:00 PST

I like jQuery, but sometimes I miss utility functions from Prototype.js. But with Underscore, this is over! You can use invoke, first, last, compact... and it's only 2kb packed and gzipped.

Example

I find it very useful when I get JSON with jQuery. Let's take a Twitter example:

$.getJSON("http://search.twitter.com/search.json?&q=from:nmerouze&callback=?", function(data) {
});

To get the results with jQuery you will be very limited: $.each, $.map and that's pretty much all. With Underscore it's easy to build an array of tweets from the results:

$.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&callback=?", function(data) {
  var tweets = _.pluck(data.results, "text");
});

In addition, if you're a Ruby developer you're addicted to first and last on arrays:

$.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&callback=?", function(data) {
  var tweets = _.pluck(data.results, "text");
  alert(_.first(tweets)); // or alert(_.last(tweets));
});

And you have an OOP style too:

$.getJSON("http://search.twitter.com/search.json?q=from:nmerouze&callback=?", function(data) {
  var tweets = _(data.results).pluck("text");
  alert(_(tweets).first()); // or alert(_(tweets).last());
});

There's a lot of functions (not just for arrays), so take a look at the documentation which is great!

A final library

Now I have my utility functions, I want to use classes. I found a little Javascript lib from June to do that in a way I like. It's very small and there's just what I need: modules, classes, methods and mixins.

module("Boldr", function(c) { with(c) {
  module("Hello", function() {
    def("hello", function() {
      alert("hello " + this.name);
    });
  });

  constructor("MyClass", function() {
    include(Boldr.Hello);

    def("initialize", function(name) {
      this.name = name;
    });
  });
}});

var myClass = new Boldr.MyClass("world");
myClass.hello();

I'm in a more familiar world here. There's JS.Class to do that too but I don't need all the core functions.

Conclusion

Now I have a fast and small way to write my Javascript and it's perfect (for now anyway).

My JRuby talk at BlockCampParis

Nicolas Mérouze — Fri, 27 Nov 2009 16:00:00 PST

I was at BlockCampParis today and I gave a talk about JRuby. I'm not a JRuby expert so it was not very technical but the thing I wanted to demonstrate was that JRuby is a viable Ruby implementation with the possibility to use a lot of great librairies from Java.

I hope everyone enjoyed the talk and I'll probably complete it for a next time. You can see the presentation here and play with the examples.

BlockCampParis

Nicolas Mérouze — Sat, 21 Nov 2009 16:00:00 PST

There's gonna be a Smalltalk and Ruby Barcamp named BlockCampParis on November 28th. I will talk about JRuby and the (many) things you can do with it.

Some links:

BarCamp page
Subscriptions
More details on RubyFrance and ESUG websites

Relaunch again

Nicolas Mérouze — Sat, 14 Nov 2009 16:00:00 PST

I'm relauching Boldr... again.

I have not much to say on the subject except that I will write about more things than just Ruby/Rails, because I'm trying many things not related to Ruby so it would be a waste not to write about these things.

And if you are wondering why the post is in english it's because Boldr is no longer in french.

Boldr

Undesign

The past, the present and the future of Boldr

Rails 3 + Mongoid + HAML + RSpec 2 template

Getting started with Duby and MongoDB

Setup

Connection to MongoDB

Cool new feature: Iterators

Inserting a new document

Getting an existing document

Executing the file

Thoughts about Duby

Store Rails sessions in MongoDB

Usage with MongoMapper

Usage with Mongoid

Next

MVC with Node.js - Which modules?

Models

Views

Controllers

Conclusion

Design refresh thanks to CSS3

How to upgrade plugins to Rails 3.0

It's a gem

Rails 2.x way

The new way

Rails 2.x and 3.0 in a gem

More about Plugins/Engines

Real World Node.js - Redis and streaming

Track users with Redis

Streaming

There's more

Links of link lists about Rails 3

Twitter/HTML5 Websockets with Cramp

Cramp for Websockets

on_start

on_finish

Conclusion

Speed up Ajax with HTML5 Web Storage

What is localStorage?

The slow way

Setter

Getter

Old browsers compatibility (progressive enhancement)

Result

Links

Easy Testing MongoMapper models

Machinist for MongoMapper

Remarkable for MongoMapper

Conclusion

iPhone app in 5 minutes with Titanium Mobile

Bootstrap

Javascript

Create a Web App with Node.js

Let's begin

Update (10 Feb 2010)

Bookmarks #2

Ruby

Javascript

HTML & CSS

Design

iPhone

Bookmarks #1

Ruby

Javascript

iPhone

Git

Design

Convert HTML presentations to PDF

jQuery Underscore together

Example

A final library

Conclusion

My JRuby talk at BlockCampParis

BlockCampParis

Relaunch again