Linked content

Using Firebug Lite to inspect HTML in Internet Explorer and other browsers

You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.

Though all major browsers offer inspection tools you may like the Firebug style. Also, for me this is a lot better than the IE8 developer tools – and it works in older versions of IE, too.

Get the bookmarklet over at It usually loads the JavaScript code from a remote server but you can also download it to have it run locally. If adding the bookmarklet does not work in IE, add a new book…

Always show the page if there is an error in Cucumber

Are you adding a "Then show me the page" and re-run Cucumber whenever there is a failing scenario? Don't be that guy!

Save time with the shiny new version of our cucumber_spinner gem. It comes with a Cucumber formatter that not only displays an awesome progress bar, and shows failing scenarios immediately, it will also open the current page in your browser whenever a scenario step fails.

After you installed the gem, use the formatter like this:

cucumber --format CucumberSpinner::Curiou...
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

Computational cost of SSL connections

In January this year (2010), Gmail switched to using HTTPS for everything by default. Previously it had been introduced as an option, but now all of our users use HTTPS to secure their email between their browsers and Google, all the time. In order to do this we had to deploy no additional machines and no special hardware. On our production frontend machines, SSL/TLS accounts for less than 1% of the CPU load, less than 10KB of memory per connection and less than 2% of network overhead. Many people believe that SSL takes a lot of CPU time and…

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.

Linked content

Rails for Zombies

Learning Rails for the first time should be fun, and Rails for Zombies allows you to get your feet wet without having to worry about configuration. You'll watch five videos, each followed by exercises where you'll be programming Rails in your browser.

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

Check if a field or button is disabled with Cucumber

Using this step definition you can check if any form field (text field, checkbox, etc) or button is disabled:

Then the "Name" field should be disabled
  And the "Save" button should be disabled
But the "Locked" field should not be disabled


This step part of Spreewald.


Then /^"([^\"]*)" should( not)? be disabled$/ do |label, negate|
  attributes = field_labeled(label).element.attributes.keys
  attributes.send(negate ? :should_not : :should...

Open a page in the default browser

Use the Launchy gem:'')
Linked content

Prototype 1.7 is out

jQuery's selector engine, live()-like event handlers, pixel-perfect layout measuring.

Use the back button in Cucumber

In order to go back one page in your Cucumber tests, you can use the following step definition for Capybara:

When(/^I go back$/) do
  visit page.driver.request.env['HTTP_REFERER']

If you're on Webrat, this should work:

When(/^I go back$/) do
  visit request.env["HTTP_REFERER"])

An improved version of this step is now part of our gem spreewald on Github.

Linked content

Test that a select option is selected with Cucumber

This step tests whether a given select option comes preselected in the HTML. There is another step to test that an option is available at all.


Then /^"([^"]*)" should be selected for "([^"]*)"(?: within "([^\"]*)")?$/ do |value, field, selector|
  with_scope(selector) do
    field_labeled(field).find(:xpath, ".//option[@selected = 'selected'][text() = '#{value}']").should be_present

Webrat …

Useful collection of Sass mixins

This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) with less lines of code.

This enables PIE for IE up to version 8 only (the first part is not possible in Haml, so use ERB):

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--[if lte IE 8]>
  <%= stylesheet_link_tag 'screen_with_pie', :media => 'screen' %>

These would be your two screen Sasses:

# screen_with_pie.sass ...

Trigger an event with Javascript

This is non-trivial because you need to fake event objects and require different code for different browsers. Luckily, there is tool support for most types of events.

In jQuery you can say:


In Prototype you can use event.simulate.js from the Protolicious library to say:


To trigger custom events with Prototype, you can use the [built-in](…

Cross-browser height and line-height

When using an odd value for line-height in CSS the result will vary across all major browsers.\
Use an even line-height whenever possible.

When you are styling block elements you often apply both height and line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:

  height: $height
  line-height: floor($height / 2) * 2

So when you call +height(19px) in Sass this will be the resulting CSS:

height: 19px
Linked content

scribd's flash_heed at master - GitHub

Fixes all Flash elements on a page so that they heed DOM stacking order

Test that a CSS selector is present with Cucumber

This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:

Then I should see an element "#sign_in"
But I should not see an element "#sign_out"

Here is the step definition for Capybara:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate, selector|
  expectation = negate ? :should_not : :should
  page.send(expectation, have_css(selector))

Here is the step definition for Webrat:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate...
Linked content

Bash Cheat Sheet (standard Emacs mode)

  • Ctrl + R Search commands you entered previously. Press Ctrl + R again to search further back, Ctrl + Shift + R searches forward again.

  • Ctrl + W Deletes from the cursor position to the left.

  • Ctrl + _ Undo. Yes, this also works with a German keyboard layout.

  • Ctrl + L Clear screen.

  • Ctrl + D _Close shell. (EOT, just like in many other shells.) Note: if you dove into another shell (e.g. with sudo su username) you will close it and return to …

This website uses cookies to improve usability and analyze traffic.
Accept or learn more