Resque: Clearance authentication for dashboard

Resque comes with its own dashboard (Resque server) that you can mount inside your Rails 3 application with


require 'resque/server'

My::Application.routes.draw do
  # ...

  mount Resque::Server => '/resque'

Unfortunately, since this bypasses the filters in your ApplicationController, everyone can access this dashboard now (unless you have some Rack-based authentication in place, like Devise).

If you're using ...

Linked content

Disable text selection on iOS and Android devices

When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.

Use the Javascript hack below to disable text selection on mobile devices:

// Deactivating distracting Text Selection:
// from:
  disableSelection : function() {
    this.each(function() {
      this.onselectstart = function() {
        return false;

Check whether an element is visible or hidden with Javascript


You can say:




jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation :

element.offsetWidth > 0 && element.offsetHeight > 0;


Don't use Element#visible(), it just checks if a CSS attribute display: none ex...

Test that a string of text is (not) linked in Webrat or Capybara

The step definition below allows you to write:

Then I should see a link labeled "Foo"
But I should not see a link labeled "Bar"


Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
  response.send(expectation, have_selector("a", :content => label))


Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
Linked content

Matching elements on complex web pages with Webrat

XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default value in its input elements. This can be the case in web applications in which data should be edited easily without additional clicks.

Using StaticMatic for static pages

Update: Staticmatic will not be further developed. They suggest to switch to middleman.

If you need to make a static web page and find yourself missing all your Rails comforts, take a look at StaticMatic.

This works like an extremely stripped down version of Rails, giving you

  • HAML
  • SASS
  • helpers
  • partials

When done, everything is simply compiled to s...

Playing audio in a browser

If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.


  • Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
  • Requires you to embed a Flash component into your page which will later play the audio for you.
  • Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
  • Cannot reliably seek to a given position when playing VBR-enco...
Linked content

Print-Friendly Images and Logos with CSS

The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.

Use CSS attribute selectors with Capybara

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"description\"][content=\"#{description}\"]")

Note that you need to always quote attribute values or you will get a Nokogiri parsing error like this:

unexpected 'foo' after 'equal' (Nokogiri::CSS::SyntaxError)

Different CSS for IE using Sass

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change y...

Linked content

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a minimalistic headless WebKit.

It has fast and native support for various web standards:

DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headless testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter and many other usages.

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/;


Speed up response time in development after a Sass change

When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. Th...

Linked contentDeprecated

Prevent floating sibling elements from wrapping in CSS

When you style multiple adjacent block elements with float: left, they will be rendered next to each other similar to inline elements. Also like inline elements, they will wrap at the horizontal end of the parent container.

If you want to keep floating elements from wrapping, nest them in a really wide container:

<div class="tabs">
  <div class="really_wide_container">
    <div class="tab">...</div>
    <div class="tab">...</div>
    <div class="tab">...</div>

This is the [Sass](http://sass-la...

Remove quotes from Sass mixin arguments

When calling a Sass mixins, you usually don't need to quote arguments:


However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:

+box_shadow(0 1px 2px #000) // this will blow up

The solution is to quote the argument like this:

+box_shadow('0 1px 2px #000')

As the author of the box-shadow mixin you now need to unquote this string, so the quotes don't appear in the resulting CSS. E.g. the following version of the box-shadow mixin will...

Linked content

Styling and scaling for mobile devices

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

Define a stylesheet for mobile devices

Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers:

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'mobile', :media => 'only screen and (max-device-width: 1024px)' %>

Here I chose 1024 pixels as the maximum device width to include the iPad. If you want to target only mobile phones, pick 960 to include high-end Android d...

Linked content

Creating Liquid Layouts with Negative Margins

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

Proper cross-browser CSS styling for buttons

Styling button tags across all major browsers is not easy.

Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside them as assigning a background to both button and span) it will look different on each browser.

Use this Sass snippet as a base style:

  border: 0
  padding: 0
  cursor: pointer
  overflow: visible // removes padding in IE
This website uses cookies to improve usability and analyze traffic.
Accept or learn more