HTML data attributes removed in Refinery CMS

Refinery CMS removes HTML data attributes if the value is undefined or blank. This behavior causes Foundation examples to not work. For example, to use tooltips, Foundation suggests:

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

This won’t work in Refinery CMS. Upon saving the code, the @data-tooltip@ attribute will be stripped from the record. The solution is to explicitly set @data-tooltip@ to a value:

<span data-tooltip="1" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Refinery CMS and Zurb Foundation 5

I’ve dabbled with RefineryCMS over the past few days in order to quickly setup a site. I thought it would be a good opportunity to play with Foundation as well.

Since Foundation 5 was just released, I didn’t find much documentation on how to integrate the two. Therefore, I’ve decided to share a small part of my findings.

In specific, the GitHub repository refinery-foundation demonstrates how to implement a Refinery drop-down menu with a Foundation front-end.

It seemed like a partially answered question on StackOverflow. The Flatiron School blog post was helpful but not complete either. So checkout the repository and see the commit-by-commit process or continue reading for a summary.

  1. Install the refinerycms gem:

    cd ~/Sites
    gem install refinerycms
  2. Create the Rails app:

    refinerycms refinery-foundation
    cd refinery-foundation
  3. Add the foundation-rails gem to the Gemfile:

    group :assets do
      gem 'foundation-rails'
  4. Install the gem and run the foundation generator:

    bundle install
    rails g foundation:install
  5. Note: If your web server was already running, you should restart for the changes to take effect.

  6. Add the Zurb menu presenter and helper:

  7. Override the key Refinery files:

    rake refinery:override view=layouts/application
    rake refinery:override view=refinery/_head
  8. Tweak the overrides:

  9. Tweak the CSS:

    // RefineryCMS Customization
    header {
    #page {
      @include grid-row();
      #body {
        @include grid-column(9);
      .no_side_body #body {
        @include grid-column(12);
      #side_body {
        @include grid-column(3);
    footer {
    .top-bar {
      .title-area { z-index: 2; }

The result as shown in the image below doesn’t look like much, but it’s there: Zurb Foundation 5 running on Refinery CMS.

Best Free PSDs of 2013 | Freebies

Shortcut to load/dump mysql in a Rails project

I find myself searching for database credentials and mysql command syntax each time I need to dump or load data into my Rails apps. As a gift to the future me, I spent a little time writing a Thor task.

Using the gist’s raw url, I installed this task on development servers using the following command:

$ thor install --as mysql.thor

Thereafter, I can run the thor tasks such as:

$ thor mysql:dump
$ thor mysql:load tmp/titleleaf.sql.gz

Now let’s hope the future me remembers…

Determine If Two Date Ranges Overlap

A quick example that utilizes De Morgan’s law:

select * from contracts where start_date <= "2013-12-31" and end_date >= "2013-01-01"

This returns all contracts that are active in the year 2013.

Stop annoying MacVim tooltips from appearing

MacVim has an acknowledged bug wherein tooltips appear on mouseover in Ruby code.

Normally, one could remedy the problem by setting noballooneval in their ~/.vimrc file:

set noballooneval

Unfortunately, that setting is being overwritten. To determine what file is overwriting the vimrc setting, run the following command in a Vim window:

:verbose set ballooneval?
> Last set from /Applications/

The offending file is a part of MacVim itself. This really requires a patch to MacVim. Until then, edit the offending file:

vi /Applications/

To do so, I commented out every line with set beval. Fyi: I’m running MacVim snapshot 61. I altered lines 317 and 2609.


set beval


" set beval


Prototype UJS Character Counter

This following javascript provides Twitter-like feedback to users as to how many characters remain before the input field text limit is exceeded. The script will optionally truncate the input field if the character count exceeds the limit. It utilizes Prototype and is unobtrusive. An extra present: It supports multiple field/counter pairs on a page.

To deploy in a Rails app, place the counter.js script in your javascripts directory. Then include the script at the top of the form view:

<% content_for :head do -%>
  <%= javascript_include_tag('counter') %>
<% end -%>

The form itself should be generated by something like this:

<%= form_for(:product) do |f| -%>
  <%= f.label :description %>
  <%= f.text_area :description %>
  <%= label_tag :product_description_count, "Characters remaining:" %>
  <%= text_field_tag :product_description_count, 255, :class => 'text-count', :disabled => true %>
  <%= f.submit %>
<% end -%>


Open current Safari URL in Google Chrome

I added a boolean to the TUAW script so the user can choose to either open the URL in the current tab or a new tab.
property theURL : ""
property createNewTab : true

-- Primary method to set theURL
tell application "Safari"
	set theURL to URL of current tab of window 1
end tell

-- Alternative to set theURL if encountering errors
--tell application "System Events"
--	keystroke "lc" using command down
--end tell
--delay 0.2 -- to make sure keystroke will hit cmd+l & cmd+c
--set theURL to the clipboard

if theURL is not "" then
	tell application "/Applications/Google"
		if createNewTab then
			-- Open url in new tab of front window
			--tell front window to make new tab with properties {URL:theURL}
			open location theURL
			-- Open url in active tab of front window
			set URL of active tab of front window to theURL
		end if
	end tell
end if

Uninstalling Fink

Just to be safe, zip the sw directory. Keep it for a few days.

cd /
sudo zip -r sw
sudo rm -rf /sw

Eventually, trash it.

sudo mv / ~/.Trash/

If you installed Fink’s version of X11, remove it and link back to Apple’s install.

sudo rm -rf /usr/X11R6
sudo ln -s X11 X11R6

Installing RMagick on OS X 10.6

Install zlib:

curl -O -xzvf ./zlib-* && cd zlib-*
./configure --shared
sudo make install
cd ..

Install freetype:

curl -O
tar xzvf freetype-* && cd freetype-*
./configure --prefix=/usr/local
sudo make install
cd ..

Install libpng:

curl -O xzvf libpng-* && cd libpng-*
./configure --prefix=/usr/local
sudo make install
cd ..

Install libjpeg:

curl -O
tar xzvf jpegsrc* && cd jpeg*
ln -s `which glibtool` ./libtool
./configure --enable-shared --prefix=/usr/local
sudo make install
cd ..

Install libtiff:

curl -O
tar xzvf tiff-* && cd tiff-*
./configure --prefix=/usr/local
sudo make install
cd ..

Install lcms:

curl -O
tar xzvf lcms* && cd lcms*
./configure --prefix=/usr/local
sudo make install
cd ..

Install ghostscript:

curl -O
tar xvzf ghostscript* && cd ghostscript*
./configure --prefix=/usr/local
sudo make install
cd ..

Install ghostscript fonts:

curl -O
tar xvzf ghostscript-fonts-std-8.11.tar.gz
mv fonts /usr/local/share/ghostscript/

Install imagemagick:

curl -O
tar xvzf ImageMagick* && cd ImageMagick*
export CPPFLAGS=-I/usr/local/include; export LDFLAGS=-L/usr/local/lib
./configure --prefix=/usr/local
sudo make install
cd ..


convert -version
convert logo: logo.gifconvert logo: logo.jpg
convert logo: logo.pngconvert logo: logo.tiff


rm -iv logo.*
rm -iv zlib*
rm -iv freetype*
rm -iv libpng*
rm -iv libjpeg*
rm -iv libtiff*
rm -iv lcms*
rm -iv ghostscript*
rm -iv ImageMagick*

Install rmagick:

gem install rmagick