RubyConfBR

Evento realizado pela Locaweb desde 2008 em SP. Estive presente em quase todas edições, já que trabalho em casa desde 2006, vem sendo uma boa forma de encontrar colegas pessoalmente, além de fazer novos contatos. E de bônus assisto palestras. Falando em palestras, a seleção deste ano foi a melhor das edições, com destaque para: “Por amor ao código” por Bruce William e “Vamos falar sobre concorrência” por José Valim. Por fim, os livros mais recomendados pelos palestrantes: The Pragmatic Programmer: From Journeyman to Master e Growing Object-Oriented Software, Guided by Tests.

SINFORM

Evento que ocorre todo ano na UESC, onde graduei em Ciência da Computação. Quatro dias de palestras, mostra de trabalhos e workshops, abordando diferentes áreas, este ano com Robotótica Móvel, Blender, Android, Scrum, Bioinformática, Propriedade Intelectual, entre tantos outros. Tive a oportunidade de realizar um workshop de Ruby, além de passar um tempo num ambiente acadêmico, conversando com docentes e discentes. Realmente inspirador, tanto que planejo fazer um mestrado dentro de alguns anos, mas primeiro tenho que parar de mudar de cidade.

Rock’n Rails

Segunda edição do evento realizado pela Giran no ES, reunindo curiosos e profissionais em Ruby e Rails. Dentre as palestras, destaco a de Tiago Motta, tanto pelo conteúdo, Otimizando seu projeto Rails, quanto pela forma de apresentação, uma narrativa despretensiosa. E o melhor foi rever o pessoal da Giran e Rodrigo Rosenfeld, com quem estava trabalhando na época pela e-Core.

2013

Além de tentar continuar batendo o ponto nos eventos que fui em 2012, estou de olho na QCon SP e no FISL em 2013, eventos que ainda não participei.

Confreaks

You couldn’t make it to that great conference, maybe you can find it on Confreaks. There are 54 events at the time I am writing this post, most of them Ruby related covering a great variety of topics.

As RubyConf Brasil is the only big conference that I used to go, for everything else there’s Confreaks, videos are available for free.

PeepCode

“Get the newest and hottest development resources from PeepCode, well before they’re covered in books” described well their one-hour tutorials, $12 each.

Besides the tutorials, there is the exceptional Play by Play series where you can watch experts working in some task given by Geoffrey Grosenbach.

Destroy All Software

Screencasts covering Unix, Testing, OO Design, Git, Vim and dynamic languages (with a Ruby focus), $9/month.

Gary Bernhardt was the first invited expert to the Play by Play series and I think he liked, since he has already produced more than 70 screencasts after that.

Watching his screencasts is like having another developer in the team giving you some great tips and advices.

RailsCasts

Screencasts about Rails and related projects and techniques. There are free, revised and pro episodes. The last two are only available for RailsCast Pro subscribers, $9/month. There is a transcription and a github repository for each episode.

Ryan Bates has been doing a great work covering a lot of projects, some of them I’ve heard about first from his screencasts.

Extras

• InfoQ: Presentations about Ruby
• Code School

• Initial Setup
• Bootstrap Themes
• Form Builders
• Navigation Bar DSL
• Flash Messages
• Pagination
• Avoiding dependency

Initial Setup

Instead of downloading Twitter Bootstrap from its project page and adapting it to Rails, there are several gems to get you going fast and as bonus, CSS extensions with LESS or Sass.

As Sass is default in Rails, I prefer to use bootstrap-sass. less-rails-bootstrap is an option If you want to use LESS.

Bootstrap Themes

Twitter Bootstrap is easly customizable through its variables and mixins using LESS. It can also be done with bootstrap-sass using the same names for variables and mixins.

But if there isn’t time or the need to customizing colors, fonts, etc, you can use a free theme from Bootswatch. There some good options and bootswatch-rails which makes it even easier if you are using Sass.

Form Builders

Some options: formtastic-bootstrap for formtastic, a builtin generator for simple_form and a specified form builder called bootstrap_form. I use simple_form, installing it with bootstrap option:

1

rails generate simple_form:install --bootstrap

Navigation Bar DSL

The reason why I use Rails-Bootstrap-Navbar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

+<%= nav_bar fixed: :top, brand: "Lentlist", responsive: true %>
-<div class="navbar navbar-fixed-top">
-  <div class="navbar-inner">
-    <div class="container">
-      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </a>
-      <%= link_to "Lentlist", root_path, class: "brand" %>
-      <div class="nav-collapse">
-        <ul class="nav">
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>

Flash Messages

There are 4 kind of alerts in Twitter Bootstrap: alert-success, alert-error, alert-block and alert-info. So you’ll need to set the right CSS class for each flash message type. A solution is to create a helper like this one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module ApplicationHelper

  def bootstrap_class_for flash_type
    case flash_type
      when :success
        "alert-success"
      when :error
        "alert-error"
      when :alert
        "alert-block"
      when :notice
        "alert-info"
      else
        flash_type.to_s
    end
  end
end

For the rest of this solution: Rails flash messages using Twitter Bootstrap.

Pagination

The most popular pagination libraries with support for Ruby on Rails are will_paginate and kaminari and it’s easy to find some projects to style them with Twitter Bootstrap, but you can do this on your own.

An option for kaminari is to download the views from twitter-bootstrap-kaminari-views and put in your project. For will_paginate, it’s just to install bootstrap-will_paginate.

Avoiding dependency

Independently of the way you choose to use Twitter Bootstrap, avoid embedding Bootstrap classes in your HTML, use inheritance and mixins to create your own classes using bootstrap classes. For instance:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body class="container">
  <%= render partial: 'shared/nav' %>
  <div class="row">
    <div class="span7">
      <%= render partial: 'shared/flash_messages', flash: flash %> 
      <%= yield %>
    </div>
    <div class="span3 offset2">
      <%= render partial: 'shared/sidebar' %>
    </div>
  </div>
  <hr/>
  <footer>Footer</footer>
</body>

Instead of span*, row, offset* and container, use semantic classes:

1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
  <%= render partial: 'shared/nav' %>
  <div class="content">
    <div class="main">
      <%= render partial: 'shared/flash_messages', flash: flash %>
      <%= yield %>
    </div>
    <div class="sidebar">
      <%= render partial: 'shared/sidebar' %>
    </div>
  </div>
  <hr/>
  <footer>Footer</footer>

And use Sass or LESS to define your classes. A Sass example:

1
2
3
4
5
6
7
8
9
10
11

body
  @extend .container

.content
  @include makeRow()

.content .main
  @include makeColumn(8)

.content .sidebar
  @include makeColumn(4, 2)

This way the CSS classes are easier to understand and it will be easier to change the CSS Framework or upgrade Twitter Bootstrap when needed.

For more information

• RailsApps Project: Twitter Bootstrap and Rails
• RailsCasts: Twitter Bootstrap Basics
• Please stop embedding Bootstrap classes in your HTML!
• Lentlist: example application

Specs, Expectations, Matchers, Setup and Teardown

After I read a few paragraphs of the well styled documentation, I got everything that I needed to start writing some specs. As I’m used to RSpec DSL, it was even easier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

describe("foo", function() {
  var foo;

  beforeEach(function() {
    foo = 0;
    foo += 1;
  });

  afterEach(function() {
    foo = 0;
  });

  it("should be equal 1", function() {
    expect(foo).toEqual(1);
  });
});

Spies

But the first thing that I really liked were the spies. They can stub functions and track calls and their arguments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

describe("foo.setBar", function() {
  var foo;

  beforeEach(function() {
    foo = { setBar: function() {} };

    // 1. setting up the spy
    spyOn(foo, 'setBar');
  });

  it("should call setBar passing 456 and any String", function() {
    // 2. call being tested
    foo.setBar(456, 'another param');

    //3. checking the spy with a matcher
    expect(foo.setBar).toHaveBeenCalledWith(456, jasmine.any(String));
  });
});

The default behavior is to just track calls and arguments, accessible by calling foo.setBar.mostRecentCall.args[0] and foo.setBar.calls[0].args[0] for instance. In addition, there are some functions that may be used to change its behavior and to call the actual implementation, return a specific value or call a custom implementation.

Some Recipes

Executing JavaScript Files

I’ve used requireJS to mock the content script injection, JavaScript files triggered by Chrome in specified pages according to manifest.json file.

To set it up using SpecRunner.html add require.js to the header and put its config just before Jasmine setup in the script tag.

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
  (function() {
    require = require.config({
      baseUrl: "../"
    });

    var jasmineEnv = jasmine.getEnv();
    //(...)
</script>

Next step, require the JavaScript file to be executed using Jasmine Async Support.

1
2
3
4
5
6
7
8
9

runs(function(){
  require(['content_script']);
});

waits(100);

runs(function(){
  expect(chrome.extension.sendMessage).toHaveBeenCalledWith('io', jasmine.any(Function));
});

I’ve tried other solutions, but this one was the cleanest and simplest I found.

Mocking Chrome Extension API

A hash and few spies are enough to get it done.

1
2
3
4
5
6
7
8
9
10
11
12
13

// chrome.pageAction.show
// chrome.pageAction.onClicked.addListener
chrome = {
  pageAction: {
    show: function(){},
    onClicked: {
      addListener: function(){}
    }
  }
}

spyOn(chrome.pageAction.onClicked, 'addListener');
spyOn(chrome.pageAction, 'show');

Testing inline functions passed as parameters

Let’s say I want to test if the following inline function is really calling alert("response").

1
2
3

chrome.extension.sendMessage("message", function(response) {
  alert("response");
});

I can get it using mostRecentCall as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 1. setting up the spies
spyOn(window, 'alert');
spyOn(chrome.extension, 'sendMessage');

// 2. the real deal
chrome.extension.sendMessage("message", function(response) {
  alert("response");
});

// 3. catching and calling the inline function
chrome.extension.sendMessage.mostRecentCall.args[1].call();

// 4. checking behavior 
expect(alert).toHaveBeenCalledWith("response");

That is useful to test callbacks (e.g.: listeners/events in Chrome Extension API), but in most cases inline functions make code harder to read, test and reuse.

So, refactoring last example:

1
2
3
4
5
6
7

alertResponse = function(){
  alert("response");
}

spyOn(window, 'alert');
alertResponse();
expect(window.alert).toHaveBeenCalledWith("response");

1
2
3

spyOn(chrome.extension, 'sendMessage');
chrome.extension.sendMessage("message", alertResponse);
expect(chrome.extension.sendMessage).toHaveBeenCalledWith("message", alertResponse);

Summary

Jasmine is powerful in its flexibility and simplicity. It’s easy to use, extend and read. The only thing that I miss is: beforeAll, but I didn’t need it to test my Gist.IO extension. Checkout its tests within Jasmine: gist-io-chrome/spec.

Machine/OS

Mac Mini as my main work machine and a macbook pro when I need mobility.

It’s a pleasure to work with Mac OS X and the main reason: it doesn’t bother me with many issues that I used to deal with other operating systems. After 5 years using it, I feel at home.

Editor

SublimeText could be seen only as a good editor just for being a Textmate on steroids and great for many developers, but not for me. However, its vintage mode really got me, since I’ve been a Vim user for years, plus its customization and look and feel are superb.

Terminal

Bash + Terminal.app. In addition, currently I’m trying iTerm2, so far, so good.

Browser

Chrome with the following extensions: Delicious Bookmarks, MeasureIt!, Screen Capture, Send to Kindle, feedly, 1Password and Gist.IO Page Switcher.

Tools

• Propane: Campfire client to work and have fun with human beings.
• iTunes: Best podcast manager that I’ve used so far. It’s a music player as well.
• Alfred: It isn’t just an application launcher, it’s my personal jack of all trades. I just type Cmd+Space (my custom hotkey for it) and with a few strokes I’m able to navigate through folders and files, send email messages, play songs and much more.
• Homebrew: package manager to make life easier for developers.

Source Code

Git + Github/Bitbucket. Besides git command line tools, I use GitX to browse through history log and review commits. Just a note: I don’t miss SVN and CVS at all.

Music

I listen to some random album from my iTunes library usually, but when things got serious I listen to emancipator, that helps me to focus more.

Your turn

So, about you? What are your 7 items?

• @brupm
• @danteregis
• @daviscabral
• @ozeias

Hmm… ok… so, what is Octopress?

Imagine a CMS with an yml file instead of a dashboard, posts and pages being written in plain text format stored in folders/files that allows you to maintain all of it in any version control system, as Git, and deploying so easy as transfering some files to a folder. Sounds good? If “yes”, Octopress is for you.

Easy to install/setup

If you are a software developer, it’s gonna be easy, if a ruby developer, trivial and if non-developer it’ll be… like a puzzle. The documentation is really helpful, covering installation, customization, deploying… pretty much everything.

As I chose Nginx, I used an extra help from Bigdinosaur Blog to setup it correctly.

What about the old blog?

I didn’t migrate the posts because I’m gonna update them before reposting. And the old domain will be redirecting to this one temporally.

So, bye bye Wordpress!