When I decided to port my blog away from WordPress I found myself torn between two great static site generators — Middleman and Jekyll

Feature Envy

One of the features that I’ve grown quite fond in Middleman is their LiveReload Extension. All one needs to do is add activate :livereload to the config.rb file and Middleman will automatically reload the browser when a file change is detected – it’s really slick!

Unfortunately, LiveReload is not available as an out-of-the-box feature for Jekyll. However, the good news is that the same feature can be implemented by using the guard-livereload gem in combination with some simple configuration.

Implementation

Bundler & Gemfile Setup

We start out by ensuring that a Gemfile exists in the Jekyll project’s root directory. Run bundle init to create the Gemfile, open it in an editor, and then add the following gems…

gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

Install the gems via Bundler and try building your site using the commands below…

$ bundler install
$ jekyll build

It’s very possible that an error will occur after running these commands – don’t worry!

  • The last line of the error should look like this: Missing dependency: xxxxxxxxx.
  • Add the missing dependency to the Gemfile and repeat the last two commands.
  • Continue these steps until your site builds successfully.

Guardfile Configuration

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

Browser Extension

Lastly you’ll need to download and install the Live Reload Extension for your browser – Chrome, Firefox and Safari are supported. This extension automatically refreshes your browser when a change is detected.

Workflow

With :serve => true specified in the jekyll-plus guard options we can now start the Jekyll Web Server + LiveReload by using one simple command…

$ guard

After the guard is executed some output will appear that looks something like this…

Configuration file: _config.yml
22:46:55 - INFO - Guard is using to send notifications.
22:46:55 - INFO - Jekyll building...
    Server address: http://0.0.0.0:4000
  Server running... press ctrl-c to stop.
22:46:56 - INFO - Jekyll build complete ./ → _site
22:46:56 - INFO - Jekyll watching and serving at 0.0.0.0:4000/
22:46:56 - INFO - LiveReload is waiting for a browser to connect.
22:46:56 - INFO - Guard is now watching at '/Users/daniel/projects/my-blog'
[1] guard(main)>

Now, switch to the browser, make sure the LiveReload extension is turned on, and navigate to a blog post. If everything is configured correctly the line below will appear in the terminal…

22:46:58 - INFO - Browser connected.

Open up the blog post in an editor, modify it and save the changes. When you switch back to the browser you should find that the page has automatically reloaded.

Environment

This post was written for, and tested under, the following technologies…

  • Jekyll (1.4.3)
  • Guard (1.8.3)
  • Guard-Jekyll-Plus (1.4.10)
  • Guard-LiveReload (1.4.0)
  • Bundler (1.3.5)
  • Ruby (1.9.3)

Summary

Since implementing Guard-LiveReload in Jekyll I’ve found the process of writing and editing blog posts to be a much more enjoyable experience.

If you’ve found the post useful, or run into any unexpected issues, please feel free to contact me or leave a comment below.

The Terminal application has been steadily improving with every major release of Mac OS X. A new feature called Window Groups was recently added which saves the state, tabs, and locations of all terminal windows at a set point in time. I’ve personally found this to be a very helpful feature with just one caveat: It requires frequent upkeep when working with multiple projects.

The Window Group Upkeep Problem

I currently work on nine Ruby on Rails applications that are all tied together via a single sign-on server and signed API requests – think of it like an ecosystem of decoupled apps. When I’m developing within this ecosystem the task of trying to keep track of all the activity going on between these apps is a major pain point.

Before this post I had originally tried to solve this control and monitoring problem by running three Terminal.app Windows, each dedicated to running a tab (per application) for …

  1. $ rails console
  2. $ tail -f -n 100 log/development.log
  3. and a Shell for running rake tasks, tests, and other commands.

This solution started out simply enough but quickly ballooned as more apps were added to the ecosystem.

The pain of this solution was just too much to ignore after the addition of the 9th app resulted in 27 tabs spread across 3 terminal windows. It was clear that the simple solution I has come up with would no longer scale – I reached out for some advice.

Consolidating The Mess Of Windows & Tabs

I knew there had to be a better way to manage these growing number of applications – surely others experienced this problem?! I switched over to the Indy.rb Meetup Group’s IRC channel and asked the open question of how everyone had been going about their terminal management. Soon thereafter many people were coming to the table with various suggestions, techniques, and solutions to how they’ve address the issue.

The majority of opinions fell on the solution that involved using just a single Terminal.app window with one tab per application; each tab would then be running a tmux session that would group the application’s operations and information together.

Being juuuuust a little bit late to the tmux party (it was released in 2009) I finally decided to “get my tmux on” and dove right in. After spending a couple of hours looking at documentation and messing around with config files I ended up consolidating my original setup of “3 windows + (3 tabs * App)” into “1 window + (1 tmux tab * App)” – finally some sanity!

Note: I’ll discuss my tmux setup and configuration in another post soon!

Scriptable Terminal.app Tabs

With all of the aforementioned advancements to the Max OX Terminal.app I still found controlling it from the command line to be quite a hassle. I had a great new solution for consolidating my development environment but it still required me to do some manual setup. I wanted to find a way to launch all of my applications’ tmux sessions from one Terminal.app window into separate tabs.

I needed a way to script…

  • Creation of a new tab within the same Terminal window.
  • Changing the title of each new tab to reflect the application’s name.
  • Executing arbitrary commands after each tab was created.

After using some serious black-belt level Google-Fu, and sifting through many StackOverflow articles, I managed to hack together a handy little shell function that allowed me to do just that.

Below is a sample launch_dev.sh executable shell script that contains a new_tab() function, and some examples of its usage…

#!/bin/bash
# File: ~/launch_dev.sh

function new_tab() {
  TAB_NAME=$1
  COMMAND=$2
  osascript \
    -e "tell application \"Terminal\"" \
    -e "tell application \"System Events\" to keystroke \"t\" using {command down}" \
    -e "do script \"printf '\\\e]1;$TAB_NAME\\\a'; $COMMAND\" in front window" \
    -e "end tell" > /dev/null
}

# Let's make a new tab called "My Projects", change to the
# projects directory, and list the contents.
new_tab "My Projects" "cd ~/projects; ls -l"

# Let's also open up our deployment scripts directory
# too -- that would also be handy!
new_tab "Deployment Scripts" "cd ~/scripts/deployment"

What Is The new_tab() Function Doing?

Basically, it’s utilizing a ton of wrapping. Let’s start from the top down…

  • I’m creating a new_tab(tab_name, command) shell function which primarily uses the osascript command to execute custom AppleScript code.
  • Apple scripting instructs the Terminal application to open, or become focused.
  • Apple scripting simulates a key press of ⌘+T – the shortcut for opening a new tab in Terminal.app
  • Apple scripting continues by executing a do script command, which in-turn executes the \e]1;$TAB_NAME\ashell command – setting the newly created tab’s title.
    • Side Note: The \e]1; and \a snippets are interesting aspects of the shell that I knew nothing about prior to embarking on this endeavor. I originally found the technique in a StackOverflow article, but no explanation was given on why it worked to set the title. I would encourage you to check out the “Dude, what’s up with your prompt?” blog post by Vince Aggrippino to find out the answer.
  • The previous \e]1;$TAB_NAME\a command is chained with a semi-colon, and then followed by a $COMMAND variable that gets evaluated and executed in the new tab as well.
  • Lastly, any output from the original call to osascript is redirected to /dev/null.

Cool huh?

Summary

This ability to open, name, and command new terminal tabs through a simple shell function has vastly changed the way I operate in my current multi-application ecosystem. When I want to setup my development environment I can simply run my ~/.launch_dev.sh shell script and have multiple tabs open, name themselves properly, and attach themselves to tmux sessions.

It’s important to keep in mind that when it comes to the topic of Development Environments it really is a case of to each their own. With this shell function one can now easily configure and launch their development environment’s tabs all from a simple script. This in turn opens up countless possibilities for anyone looking to gain better control over their Terminal.

This function is not “The Solution” to building and managing development environments. Rather, it’s simply a tool to help create solutions.

If you do end up using this code for anything please come back and comment on your successes – I’d love to hear them :)

Enjoy!

Environment

The environment and tools used at the time of this post are as follows:

  • Max OS X Lion (Version 10.7.5)
  • Terminal.app (Version 2.2.3)

License

This code is released under the New-BSD License.

Here’s a quick and easy way to sort a Ruby hash by its keys. The ability to sort recursively and provide a custom sort block are also available features.

The Method

I took the approach of monkey patching a sort_by_key method into the Ruby Hash class itself. The method can be easily modified and placed into a utility class if you’d prefer to take more procedural approach.

class Hash
  def sort_by_key(recursive = false, &block)
    self.keys.sort(&block).reduce({}) do |seed, key|
      seed[key] = self[key]
      if recursive && seed[key].is_a?(Hash)
        seed[key] = seed[key].sort_by_key(true, &block)
      end
      seed
    end
  end
end

Basic Usage

Below is a very disorganized nested hash and an example of using the recursive sort option to get it back into line using Hash.sort_by_key(true).

h = {
  "b" => 2, "c" => 3, "a" => 1, "d" => {
    "b" => 2, "c" => 3, "a" => 1, "d" => {
      "b" => 2, "c" => 3, "a" => 1
    }
  }
}
h.sort_by_key(true) # =>
{
  "a" => 1, "b" => 2, "c" => 3, "d" => {
    "a" => 1, "b" => 2, "c" => 3, "d" => {
      "a" => 1, "b" => 2, "c" => 3
    }
  }
}

What About Mixed Type Hash Keys!?

If we continued the example from above by executing h[:a] = "one", and then calling h.sort_by_key, we would be slapped in the face with an exception of …

  • ArgumentError: comparison of String with :a failed

Looking at the backtrace it appears the call to self.keys.sort is the culprit.

So What’s The Solution?

There are a couple of solutions depending on your coding style and opinion on Ruby convention.

Option 1: Don’t do that!

Many coders in the Ruby community will argue that it’s not the job of Ruby to undo a user’s mistakes. While “Don’t do that!” that can sound like a copout, it’s also really good advice – keep things simple.

Generally, it’s not a good idea to mix the types of Hash keys. If you find that you’re getting this exception it’s probably an indication that “You’re doing it the wrong way.”

Option 2: Passing a custom sort block, and casting key values…

Coming from PHP I’ve grown accustomed to certain… luxuries, in that if you ask PHP to ksort() an array it will do its very best to get you something reasonable back. By passing a custom sort block to Hash.sort_by_keys we can mimic PHP’s robustness.

Let’s change how Hash.sort_by_keys is called by passing it a custom sort block that casts each key to a string before the comparison.

h.sort_by_key(true) {|x, y| x.to_s <=> y.to_s} # =>
{
  :a => "one", "a" => 1, "b" => 2, "c" => 3, "d" => {
    "a" => 1, "b" => 2, "c" => 3, "d" => {
      "a" => 1, "b" => 2, "c" => 3
    }
  }
}

It’s a very simplistic technique that should be capable of accommodating almost all of the off-the-beaten-path situations out there in the wild.

Summary

I ended up needing a variant of this solution to address a situation where http parameter ordering had to be alphabetical in order to create and validate signed requests to OAuth based APIs. So far things are working well and my code is a lot cleaner.

In my search for an existing sorting solution I also stumble upon this StackOverflow.com Question that shed some light on other hash key sorting techniques.

License

This code is released under the New-BSD License.

If you’ve found an issue, improvement, or bug with this technique please Contact Me, or comment below.

I’ve been loving the Twitter Bootstrap buttons so I came up with a quick technique that turns them into actual working form input elements.

HTML

Just like a normal Bootstrap Button Group, but with a few added attributes.

<div class="btn-group" data-toggle-name="is_private" data-toggle="buttons-radio">
  <button type="button" value="0" class="btn" data-toggle="button">Public</button>
  <button type="button" value="1" class="btn" data-toggle="button">Private</button>
</div>
<input type="hidden" name="is_private" value="0" />

Note: Yes, nested names like bookmark[is_private] work just fine.

JavaScript

On document load we apply the button logic and state based on the hidden input’s value.

jQuery(function($) {
  $('div.btn-group[data-toggle-name=*]').each(function() {
    var group   = $(this);
    var form    = group.parents('form').eq(0);
    var name    = group.attr('data-toggle-name');
    var hidden  = $('input[name="' + name + '"]', form);
    $('button', group).each(function(){
      var button = $(this);
      button.on('click', function(){
        hidden.val($(this).val());
      });
      if(button.val() == hidden.val()) {
        button.addClass('active');
      }
    });
  });
});

The Result

Twitter Bootstrap Radio Button Form Inputs Result

Notes & Considerations

  • This solution requires JavaScript in order to work properly so use judgement when implementing it.
  • The type="button" is required to prevent the form getting submitted when the toggle buttons are clicked.
  • You may also need to do some styling to get the buttons to look right in some contexts. Thankfully I’ve found this to be a relatively painless experience.

Summary

Please comment or contact me if you find any issues. I’ve tested this technique and so far I’ve been very happy with it.

I had just finished the standard installation of ActiveAdmin when I noticed that authentication was implemented using the fantastic Devise Gem. I had already been planning on using Devise for authentication within my application so I initially thought integration would be a snap. However, as development progressed it became clear that all of the pieces were not quite fitting together.

Realization

After exploring the idea of using one login for ActiveAdmin and the application I ran into a rather large road block. By default ActiveAdmin uses an AdminUser Devise model to manage user authentication. Why is that such a big problem you ask?

Well, I really wanted to avoid having…

  • the application users login via the ActiveAdmin interface
  • a model named AdminUser representing an application user
  • two models that contained much of the same code and functionality
  • to maintain two separate user management systems (Admin vs Application)

In most cases ActiveAdmin would be used by… well, administrators. However, that was not my situation. I had a slew of qualified people that needed access to both ActiveAdmin and the Application; having two sets of credentials was just not the optimal solution.

The Optimal Solution

What I really wanted was for both the ActiveAdmin and Application users to be…

  • able to sign in/out via a single set of Devise controller/actions routes
  • managed by single, Devise configured, User model
  • distinguished by a boolean flag — such as user.superadmin?
  • restricted from accessing ActiveAdmin based on the above flag.

After chewing on the problem for a while, reading through ActiveAdmin documentation, and talking to a couple of colleagues I managed to come up with a way of implementing a solution that provided exactly what I was looking for.

Setting Up the ActiveAdmin/Application User Model

For the purposes of making this walkthrough more adaptable to other projects I’ve chosen to explain the entire process starting from scratch using a brand new Rails 3.1 project.

Step 0: Preparation

We start off by creating the classic Rails “blog” application…

$ rails new blog

Next, we open the project’s Gemfile and add the required ActiveAdmin and Devise gems…

# ==> File: /Gemfile

# Active Admin + Required Gems
gem 'activeadmin'
gem 'sass-rails'
gem "meta_search", '>= 1.1.0.pre'

# Devise
gem "devise", "~> 2.0.0"

We then install the gems with bundler and run the ActiveAdmin installation generator …

$ bundle install
  ... bundler output ...

$ rails generate active_admin:install
  invoke    active_record
  create      db/migrate/20120205064942_devise_create_admin_users.rb
  create      app/models/admin_user.rb
  invoke      test_unit
  create        test/unit/admin_user_test.rb
  create        test/fixtures/admin_users.yml
  insert      app/models/admin_user.rb
   route    devise_for :admin_users
    gsub    app/models/admin_user.rb
    gsub    config/routes.rb
  insert    db/migrate/20120205064942_devise_create_admin_users.rb
  create  config/initializers/active_admin.rb
  create  app/admin
  create  app/admin/dashboards.rb
   route  ActiveAdmin.routes(self)
generate  active_admin:assets
  create  app/assets/javascripts/active_admin.js
  create  app/assets/stylesheets/active_admin.css.scss
  create  db/migrate/20120205014944_create_admin_notes.rb
  create  db/migrate/20120205014945_move_admin_notes_to_comments.rb

Note: You may see some Devise specific errors at this point, ignore them for now.

At this point the ActiveAdmin gem has been installed and its files and routes have been generated using the steps outlined in the official installation instructions. This is where we leave those instructions behind…

Step 1: Creating a new Devise User model

First thing’s first, let’s run the Devise 2.0 installation generator.

Note: Enter “Y” (yes) if you are prompted to overwrite the devise initializer file.

$ rails generate devise:install
   conflict  config/initializers/devise.rb
Overwrite blog/config/initializers/devise.rb? (enter "h" for help) [Ynaqdh] Y
      force  config/initializers/devise.rb
  identical  config/locales/devise.en.yml

Now, at this point one might ask: “Can’t I just simply rename the AdminUser model?” – Nope! Unfortunately there are no migrations, routes, or tests in place to support a model named User yet.

To fix that let’s go ahead and create them using the Devise model generator.

$ rails generate devise User
  invoke  active_record
  create    db/migrate/20120120053416_devise_create_users.rb
  create    app/models/user.rb
  invoke    test_unit
  create      test/unit/user_test.rb
  create      test/fixtures/users.yml
  insert    app/models/user.rb
  route  devise_for :users

Now that the User model has been created a superuser? boolean flag must be added. Additionally we need to insert an initial Superamin User record so that we may login and access ActiveAdmin later on. These two steps can be accomplished with a simple rails migration…

$ rails generate migration AddSuperadminToUser
invoke  active_record
create    db/migrate/20120122062203_add_superadmin_to_user.rb
# ==> File: /db/migrate/20120122062203_add_superadmin_to_user.rb

class AddSuperadminToUser < ActiveRecord::Migration
  def up
    add_column :users, :superadmin, :boolean, :null => false, :default => false

    User.create! do |r|
      r.email      = 'default@example.com'
      r.password   = 'password'
      r.superadmin = true
    end
  end

  def down
    remove_column :users, :superadmin
    User.find_by_email('default@example.com').try(:delete)
  end
end

Note: These temporary user credentials will be used later on in Step 4.

Finally, open up the User model and replace its content with the example code below – modify to taste.

# ==> File: /app/models/user.rb

class User < ActiveRecord::Base
  devise :database_authenticatable, :recoverable,
         :rememberable, :trackable, :validatable
  attr_accessible :email, :password, :password_confirmation,
                  :remember_me
end

Great, you’ve just configured what will be the unified User model!

Step 2: Reconfiguring ActiveAdmin

As it turns out ActiveAdmin has some nifty configuration settings that allow for its authentication behavior to be modified. Open up the ActiveAdmin initializer file and update it to reflect the configuration settings below…

# ==> File: config/initializers/active_admin.rb

config.authentication_method = :authenticate_active_admin_user!
config.current_user_method   = :current_user
config.logout_link_path      = :destroy_user_session_path
config.logout_link_method    = :delete

There is a lot here so let’s quickly go over whats happening.

  • The ActiveAdmin current_user_method and authentication_method configuration settings specify which methods to call when retrieving and authenticating a user, respectively.
  • When someone attempts to access any of the ActiveAdmin actions a call is made to both methods which are scoped to the Rails ApplicationController instance.

We’ve instructed ActiveAdmin to use a new custom authentication method: authenticate_active_admin_user! It doesn’t exist yet so we must define it in the ApplicationController

class ApplicationController < ActionController::Base
  protect_from_forgery

  def authenticate_active_admin_user!
    authenticate_user!
    unless current_user.superadmin?
      flash[:alert] = "Unauthorized Access!"
      redirect_to root_path
    end
  end
end

Perfect, ActiveAdmin is now properly configured to take advantage of the superadmin? user flag.

Step 3: Cleaning up the code left behind by ActiveAdmin

Now that the new Devise User model is setup we can start to cleanup the code and files leftover from the ActiveAdmin install generator. We start by deleting the AdminUser model and its associated migration file…

$ cd /path/to/your/rails/project

$ rails destroy model AdminUser
  invoke  active_record
  remove    migration.rb
  remove    app/models/admin_user.rb
  invoke    test_unit
  remove      test/unit/admin_user_test.rb
  remove      test/fixtures/admin_users.yml

$ rm ./db/migrate/*_devise_create_admin_users.rb

Next, we need to make the comments within ActiveAdmin work properly again. Open up the following migration files, do a simple Find & Replace for :admin_user to :user, then save.

  • 20120212124753_create_admin_notes.rb
  • 20120212124754_move_admin_notes_to_comments.rb

Note: The timestamps of your migration filenames will be different.

The Devise routes that AdminAdmin generated for the AdminUser model still exist and must be removed. Open up the Rails routes.rb file and delete the following line of code…

devise_for :admin_users, ActiveAdmin::Devise.config

Great, the project has been clean of any left over files and all the features within ActiveAdmin will now work properly.

Step 4: Managing the Devise User model with ActiveAdmin

The User model is much more complex than your average ActiveRecord::Base class. It’s configured with Devise authentication options and now has a superadmin? flag that is responsible for controlling access to ActiveAdmin. As a result of this complexity we need to add some custom configuration.

The first thing we need to do is make ActiveAdmin aware of the User model by creating a corresponding registration file, like so…

$ cd /path/to/your/rails/project
$ touch ./app/admin/user.rb

Open the /app/admin/user.rb file with an editor of your choice and copy/paste the ActiveAdmin model registration code below.

Note: This is the absolute bare minimum configuration that is required to manage users from within ActiveAdmin. Feel free to modify this registration file to suit your needs. Keep in mind that as the User model gains more complexity, the ActiveAdimin registration file will need to grow along with it.
# ==> File: app/admin/user.rb

ActiveAdmin.register User do

  form do |f|
    f.inputs "User Details" do
      f.input :email
      f.input :password
      f.input :password_confirmation
      f.input :superadmin, :label => "Super Administrator"
    end
    f.buttons
  end

  create_or_edit = Proc.new {
    @user            = User.find_or_create_by_id(params[:id])
    @user.superadmin = params[:user][:superadmin]
    @user.attributes = params[:user].delete_if do |k, v|
      (k == "superadmin") ||
      (["password", "password_confirmation"].include?(k) && v.empty? && !@user.new_record?)
    end
    if @user.save
      redirect_to :action => :show, :id => @user.id
    else
      render active_admin_template((@user.new_record? ? 'new' : 'edit') + '.html.erb')
    end
  }
  member_action :create, :method => :post, &create_or_edit
  member_action :update, :method => :put, &create_or_edit

end

Step 5: Wrapping It All Up

Now that everything has been created and configured we can finally pull the trigger on the migration files. So let’s go ahead and run them like so…

$ cd /path/to/your/rails/project
$ rake db:migrate

It’s a good idea to setup some real user credentials so let’s start up the local rails server, by executing $ rails server and opening the browser to http://localhost:3000/users/sign_in.

Note:  If page layout looks completely broken don’t worry! It just means that you need to style or replace the Devise sign in page.

Sign in using the temporary email and password that was added via the migration created back in Step 1.

After you’ve logged in navigate to http://localhost:3000/admin, click on the Users tab, create a new super administrator user using the credentials of your choice and click save.

Lastly, sign out of ActiveAdmin, then sign in again with your new credentials and delete the temporary user.

That’s it, you’re done!

But! But! What About…

Some may be wondering why I did not use the optional user model parameter in ActiveAdmin install generator script.

Well, I didn’t use it in this post for a few of reasons. Mainly I wanted to make sure this walkthrough was applicable to the widest set of projects and situations. Thus, I wrote this post so that it could be followed by someone who was either starting a new Rails project or just needed to cherry pick some of the steps for their existing application.

I also found that running the ActiveAdmin installation generator over top of a pre-existing User model will cause code to be injected into that User model class file and migrations will be built that change the users table structure.

Lastly, the generator solution alone does not cover all of my other requirements that I listed above. ActiveAdmin would still use it’s own views for the authentication routes, and the superadmin? flag, configuration setting, and authentication method would still need be modified/created by hand.

Thus, I would recommend using it only if you’re aware of the pitfalls in doing so.

Environment

This walk through was tested and implemented using the following technologies…

  • Rails 3.1
  • Ruby 1.9.3
  • ActiveAdmin 0.4.0
  • Devise 2.0

Summary

This solution was made possible thanks to the work that Greg Bell and the ActiveAdmin Contributors put into making sure the flexibility of ActiveAdmin stayed a top priority. ActiveAdmin is a truly fantastic (and beautiful looking) gem that spares developers from spending extensive hours and resources building back-end administrative tools – I highly recommend using it.

If you have any suggestion on how to make this process better in anyway please contact me and I’ll make the appropriate updates.