The Problem

For a fanforum I’m hosting I had to think of new features for which people would be willing to donate. And we came up with one of the most used things on a forum, signatures.

The Solution

However, we wanted to make it extra special, so how were we going to deal with that? So we came up with the idea to make them dynamic, interactive. When a signature is for example hovered on, it would show additional information about that user. Which in turn, if the user decides to use his signature on multiple forums would also give us free advertisement.

The Approach

Then we started discussing which method we would be using, one would be pure PHP, generated with raw images and text using GD (ImageMagick wasn’t supported on our hosting environment). We would try two methods, and see which one is liked the most. One using Flash, and one using HTML5 and canvas.

The Battle

Personally, I never really liked Flash, so I stuck with HTML5/Canvas, and tried it with pure canvas, but then got into trouble when I drew Gif images, they didn’t move. So I looked around the web browsing for a solution. Then stumbled upon a sweet library named Raphaël. Which gave me a much easier DSL than pure canvas, but used SVG instead. And also supplied a nice fallback method if SVG wasn’t supported. Which in turn would mean I didn’t have to go look for polyfills on older browsers.

The Result

Personally I’m fairly happy with how this all turned out, after heavily refactoring the draw methods.

Example

The Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  (function(){
    // Initialize the SVG canvas
    var paper    = Raphael(document.getElementById('signature_kazuya')),
        // Initialize a black box, setting dimensions and offsets
        black_box = paper.rect(0, 0, 420, 200),
        piece_of_text = paper.text(200, 100, "Hover me");

    paper.setSize(420, 200);

    // Setting attributes on black_box, filling it with color
    black_box.attr({
      fill: 'rgba(0,0,0,1)'
    });

    piece_of_text.attr({
      'font-family': 'Helvetica, sans-serif',
      'font-size': 22,
      fill: 'rgba(255, 255, 255, 1)'
    });

    piece_of_text.hover(function(){
      piece_of_text.attr({ text: "Ouch!", fill: 'rgba(255, 0, 0, 1)'});
    }, function(){
      piece_of_text.attr({ text: "Hover me", fill: 'rgba(255, 255, 255, 1)'});
    });

    // Make it appear above everything else
    piece_of_text.toFront();

  })();

Conclusion

TODO: Write conclusion

After playing around with a lot of Ruby related tools I’ve finally settled with a couple that I enjoy using the most.

Base

• RVM Ruby Version Manager
• MRI Ruby 1.9.3-p194 Captain obvious?
• Ruby on Rails 3.2 for back-end coding
• Git for Version control

Layout/styling

• HAML for HTML markup
• SCSS (Sass) for styling
• CoffeeScript for front-end coding
• jQuery Preferred JavaScript framework

Database

• ActiveRecord (PostgreSQL) for Database or
• Mongoid (MongoDB) for Database

Testing

• RSpec for Unit testing
• Capybara for Acceptance testing
• Cucumber (Optional) for Behavior testing
• Guard Handles reloading RSpec test suite after modifying specs
• Spork Prevents Rails from having to reload everytime you test

Deploying

• Capistrano
• Debian 6.0 “Squeeze”
• Nginx

Would make an attempt at TDD (Test Driven Development) when I read some more and know how to utilize it properly.

In my next project, SCRUM sounds like a good approach to agile project management.

Generators setup:

1
2
3
4
5
6
7

  config.generators do |g|
    g.orm             :active_record
    g.test_framework  :rspec
    g.template_engine :haml
  end

  config.sass.preferred_syntax = :sass

If you have any other recommendations, let me know! I’ll be happy to check it out.

This is my second post containing a bit of text.

This is my first post using Octopress! It should look decent, at least somewhat readable.

A small snippet of RSpec code for the fun of it.

1
2
3
4

it "is alive!" do
   post = Post.all.first
   post.include?(:heartbeat).should == true
end