Taming icon fonts for use in Rails views

Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.

However, icon fonts can be very awkward to use compared to raster icons. Elements are given icons by giving them a special class like icon-plus or icon-home:

<span class="icon-plus">Create</span>

The icon font's stylesheet will then recognize this class and insert the icon as the element's :before style.

In practice, this pattern will give you a lot of hea…

Rails 2.3.x sometimes renders localized views with the wrong content type

Under certain (unknown) circumstances, Rails will give localized files an invalid content-type in the Response header. For me, after requesting corporate_information and rendering, Rails sent a content-type of de.html instead of the expected text/html.

There are some discussions on this topic that offer workarounds, but no…

External content

IcoMoon icons

Huge set of 315 free vector icons. You can choose which one you'd like, add your own SVGs, then download everything as an icon font or series of PNGs.

You can get up to 925 icons once you pay $59.

Ruby: Extract the hostname from a URL

url = ''
# =>

Note that this will raise an error if the given argument is not a URL.

If you need the host's full URL without path, query, fragment etc., use URI.join with a clever twist:

url = ''
URI.join url, '/'
# =>

Advice: Reduce scopes with joins to simple IN-queries

In theory you can take any scope and extend it with additional joins or conditions. We call this chaining scopes.

In practice chaining becomes problematic when scope chains grow more complex. In particular having JOINs in your scope will reduce the scope's ability to be chained with additional JOINs without crashes or side effects. This is because ActiveRecord doesn't really "understand" your scope chain, it only mashes together strings that mostly happen to look like a MySQL query in the end.

**I don't generally advice against u…

Manually requiring your application's models will lead to trouble

In a nutshell:

If you require your Rails models manually, pay attention to the path you use. Unless you have to, don't do it at all.


Consider these classes:

# app/models/user.rb

class User < ActiveRecord::Base
  validate :magic

  def magic
    errors.add_to_base('failed') if bad_things?
# app/models/foo.rb

require 'user'

class Foo
  # something happens here

Now, when your environment is booted, Rails will automatically load your models, like User

External content

Internet Explorer will download CSS files twice, if referenced via scheme-less URLs

You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS) when loading content referenced with such an URL.

A protocol relative URL doesn’t contain a protocol. For example, becomes //

Browsers substitute the protocol of the page itself for the resource’s missing protocol. Problem solved!


Internet Explorer 7 & 8 will download st…

Cucumber: Wait for any requests to finish before moving on to the next scenario


Generally, Selenium tests use the browser to interact with the page. If it's unavailable, a timeout error is thrown.

Now, consider a scenario like this:

Scenario: Receive an e-mail after clicking the fancy link
  When I follow "fancy link"
  Then I should have an e-mail with the subject "Hello"

When the last step in the scenario passes, you are done. Right? Wrong.

Why it's not enough

What if clicking our "fancy link" above sends the e-mail that we expect, but it also does stuff on the server…

Regex pattern to validate email addresses

Our most recent pattern is

EMAIL = /\A[a-z0-9\+\-_\.]+@[a-z\d\-.]+\.[a-z]+\z/i


  • Don't replace [a-z0-9\+\-_\.] with \w ! Otherwise the pattern would allow ßs and many other invalid characters.
  • The email address standard allows more patterns of emails than those which work in practice (e.g. a@a is valid). In result our pattern is more strictly.

Git: Show current branch name only

While git branch will show you all branches and highlight the current one with an asterisk, it can be too cumbersome when working with lots of branches.

To show only the branch you are currently on, use:

git rev-parse --abbrev-ref HEAD

ActiveModel::Errors inherits from hash and behaves unexpectedly

ActiveModel::Errors is used to handle validation errors on Rails objects. If you inspect an instance, it feels like a hash (to be more precise, it inherits from Hash):

errors =
=> {}
?> errors.add(:base, "foo")
=> ["foo"]
>> errors.add(:base, "bar")
=> ["foo", "bar"]
?> errors
=> {:base=>["foo", "bar"]}

If you need to hack anything with these errors, beware that it behaves in a special way. If you iterate over the errors it will decompose arrays.
For …

External content


Show failing specs instantly. Show passing spec as green dots as usual.


# spec/spec.opts (.rspec for rspec 2)
--require rspec/instafail
--format RSpec::Instafail

Firefox: Inspecting mixed content warnings (and how to enable them)

Having your site run on SSL is worthless when you include content over an unsafe connection (HTTP).

Here is how to hunt down mixed content with Firefox.

How to enable mixed content alerts

If your Firefox does not warn you about mixed content on pages (mine did not), you can enable it again:

Visit about:config and search for security.warn_viewing_mixed. If it's set to false, set it back to true again.

Seeing which URLs are fetched from unsecured connections

Firefox 16+ will show you mixed content in its "Web Co…

External content

CSS3 Animated Loading Bar

Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.

Fixed elements and large CSS box shadows can bring browsers to a crawl

Browser rendinger engines very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Some advice:

  • Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other ele…

Haml: Fix problem with HTML-escaped single quotes in text fields

Haml 3.1.2 displays single quotes in FormBuilder#text_ field html escaped. You may see something like that:

David&#x27;s Chapter

Looking at the page's HTML, your field's values will be doubly escaped:

<input ... value="David&amp;#x27;s Chapter" />

Updating Haml to 3.1.5 or newer will fix it.

External content

Making Little Classes out of Big Ones

Hashrocket Lunch n' Learn #1 with Avdi Grimm: Making Little Classes out of Big Ones

A look at the pros and cons of four different techniques for breaking a too-big class into smaller pieces.

CSS: Emulate linear gradients with inset box shadows

Why is this useful?

  • You can have a background image on the same element, overlaying it with a transparent gradient.
  • Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows work much better for this. This is because linear gradients always stretch to the full size of the element (which can grow with user input), while a natural shine or shadow only highlights a fixed size on the top or bottom.
  • Browser support for linear gradients is a mess. I avoid using them. In part…
3222 cards