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'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…

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

CSS: Emulate borders with inset box shadows

When is this useful?

  • When both parent and child elements have borders, with this technique you don't get two borders (which looks ugly). This is because child elements are rendered over inset box shadows, not inside inset box shadows.
  • You want more than one border on the same element. You can have as many inset box shadows on the same element as you like, e.g. allowing you to make a picture-frame-like border.


Remember the attribute list of box-shadow is x-offset, y-offset, blur radius, shadow r…

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

Automatically strip all string fields of an ActiveRecord

If your application has forms to edit string fields, you probably want to strip the entered values (remove whitespace from beginning and end). The reason is that your users will copy + paste values from unholy places (websites, Microsoft Office) and end up having trailing whitespace in most of their records.

Because browsers ignore whitespace, no one will usually notice this until you get the weirdest bug reports (e.g. two seemingly equal records are not, or multiple records for "unique" values).

Use the attached trait in your model to hav…

3271 cards