Hide the last bottom margin in a container

When you create e.g. a sidebar box that contains headlines and paragraphs, the final paragraph's margin in that box will create an undesired 'bottom padding' inside that box.

Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom margin disappear:

    margin-bottom: 0

Use it like this:

  p, table, ul
    margin-bottom: 1em

Internet Explorer (fix)

Does not work in versions of <IE8

Your best bet is to expli…

Linked content

Get rid of US keyboard layout

> Keyboard layout reverting to US on (every) reboot

> I found the same problem, but only on my wife's account. I'd set her keyboard layout to UK through Gnome preferences and every time the US layout would reappear and be selected frustratingly.\
> It turned out that on the gdm login screen her choice of keyboard layout in the discreet option bar at the bottom of the screen was set to US. That was then overriding the Gnome layout preference.

> Selecting the appropriate keyboard layout on the next login solved the…

Change the color of a <hr> in all browsers

The following Sass will do it:

  color: #ddd
  background-color: #ddd
  border: none
  height: 1px
Linked content

mezzoblue's PaintbrushJS at master - GitHub

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

Autofocus a form field with HTML5 or jQuery

In Webkit you can use the HTML5-attribute autofocus:

= form.text_field :title, :autofocus => 'autofocus'

Here is a jQuery fallback for browsers that don't speak HTML5:

var Autofocus = {

  supported: function() {
    return 'autofocus' in document.createElement('input');

  fake: function() {

  extend: function() {
    Autofocus.supported() || Autofocus.fake();



Common Screen Resolutions

Optimize for

  • Notebook: 1280x800 (many consumer notebooks)
  • Netbook: 1024x600
  • Desktop: 1440x900 / 1680x1050 (19"- und 22"-Widescreen-TFTs)
  • iPad: 768x1024


  • 1280x800 (13.3"-15.4", 16:10)
  • 1440x900 (15.4", 16:10)
  • 1680x1050 (15.4"+, 16:10)
  • older notebooks cf. Desktops (1024, 1280, …)


  • 1440x900 (19", 16:10)
  • 1680x1050 (22", 16:10)
  • 1920x1080 (23", 16:9)
  • 1920x1200 (24", 16:10)
  • 1024x768 (17", 4:3)
  • 1280x1024 (19", 5:4)
  • 1600x1200 (21", 4:3)


  • 720x480 (7")
  • 1024x600 (8.9")

Cucumber Webrat steps

Most of these will not work in newer projects because these use the Capybara/Rack::Test combo in lieu of Webrat.

Find input fields

Then /^there should be a "([^"]+)" field$/ do |name|
  lambda { webrat.current_scope.send(:locate_field, name) }.should_not raise_error(Webrat::NotFoundError)

Then /^there should be no "([^"]+)" field$/ do |name|
  lambda { webrat.current_scope.send(:locate_field, name) }.should raise_error(Webrat::NotFoundError)

Find html content

Then /^I should see "([^\"]*)...

Reprocess only missing images with Paperclip

When a paperclip attachment gains a new style and you have many attachments, reprocessing can take ages. This is because all styles are being recomputed.

To create only missing images, patch Paperclip like this in your script that does the reprocessing:

Paperclip <2.3.2

class Paperclip::Attachment

  def post_process_styles_with_extreme_lazyness
    @old_styles = @styles

    @styles = @styles.reject do |name, _|


Convert colorspace of images attached with Paperclip

  :styles => { :large => "300x300", :small => "100x100" },
  :convert_options => { all => "-colorspace RGB" }
Linked content

Better output for Cucumber

We built cucumber_spinner to have a progress bar for Cucumber features, which also outputs failing scenarios as soon as they fail.

gem install cucumber_spinner
cucumber --format CucumberSpinner::ProgressBarFormatter

If you use CucumberSpinner::CuriousProgressBarFormatter and a feature fails, the according page will show up in your browser.

Note that if you run your Cucumber tests using the [cuc](…

Parse XML or HTML with Nokogiri

To parse XML-documents, I recommend the gem nokogiri.

A few hints:

  • xml = Nokogiri::XML("<list><item>foo</item><item>bar</item></list>") parses an xml string. You can also call Nokogiri::HTML to be more liberal about accepting invalid XML.
  • xml / 'list item' returns all matching nodes; list item is used like a CSS selector
  • xml / './/list/item' also returns all matching nodes, but .//list/item is now an XPath selector
    • XPath seems to be triggered by a leading .

Automatically build sprites with Lemonade

How it works

See the lemonade descriptions.

Unfortunately, the gem has a few problems:

  • it does not work with Sass2
  • it always generates all sprites when the sass file changes, which is too slow for big projects
  • it expects a folder structure quite different to our usual

All these problems are solved for us, in our own lemonade fork. This fork has since been merged to the original gem, maybe we can use t…

Basic styles for flash notifications

.warning {
    font-weight: bold;

.notice {
    color: #11bb00;

.error {
    color: #F53A31;

.information {
    color: #557;

.warning {
    color: #d07d2d;

Typical .gitignore


Force absolute URLs in views throughout a response

This is more tricky than it should be because url_for, asset_path, etc. all rely on different mechanisms.

Anyway, you can use the attached trait like this:

class ExampleController < ApplicationController
  does 'host_enforcement', :for => 'some_action'

Short explanation:

  • asset_host is used for links to stylesheets and javascripts
  • asset_host belongs to ActionController::Base – changes are persistent and will not be reset after a request
  • rewrite_options is used by the ..._path methods in the views
Linked content

mynyml's holygrail at master - GitHub

The Holy Grail of testing for front-end development; execute browser-less, console-based, javascript + DOM code right from within your Rails test suite.

Linked content

pivotalexperimental's jazz_money at master - GitHub

Run your Jasmine specs without a browser

Linked content

When can I use...

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

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