Masonry is a famous library to dynamically arrange a grid of items that have different aspect ratio, like horizontal and vertical images. Colcade is an alternative masonry-layouting library, developed by the same developer, but with a more modern approach.

It is said to have better performance while being smaller and having no dependencies. It automagically detects jQuery and defines a jQuery initializer, if present.
However, it offers [a few less features](https:…

This card describes how to pass an array with multiple element to a JavaScript function, so that the first array element becomes the first function argument, the second element becomes the second argument, etc.

Note how this is different from passing the entire array as the first argument. Compare these two different ways of calling fun() in Ruby:

# Ruby
array = [1, 2, 3]
fun(array)  # same as fun([1, 2, 3]) (1 argument)
fun(*array) # same as fun(1, 2, 3)   (3 arguments)

Depending on your culture the spreading of array e…

Raising JavaScript errors in Cucumber

With selenium JavaScript errors do not cause any failture in your cucumber scenarios. To archive a failture we can use the the Ruby bindings to Selenium Webdriver expose the Webdriver logging API introduced in version 2.38 .

The following step can be used:

```
Then /^there should be no JavaScript errors$/ do
if alert_present?
# Chrome 54 and/or Chromedriver 2.24 introduced a breaking change on how
# accessing browser logs work.
#
# Apparently, while an alert/confirm is open, Chro…

calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:

width: calc(100% - (20px * 2));

When using Sass, you need to interpolate Sass expressions:

width: calc(100% - #{$margin})

Supported by all modern browsers and IE9+.

When writing a story description in Pivotal Tracker, there is now a tiny button at the bottom of the description field where you can paste a template.

You can define your own templates by following "More" at the top, then "Templates".
We recommend you define a template following our suggested story description.

Note that the three default templates currently can not be removed or changed.

Background

Cross-Site Request Forgery (CSRF) is an attack pattern for websites. A CSRF attack is usually relevant in a browser context, where state is kept for multiple domains (as opposed to independent requests made e.g. with curl). The most common example is authentication via cookies. If a script on https://example.com made requests to https://docs.google.com, the browser would send all cookies for docs.google.com along, effectively given the script access to anythin…

Geordi provides a pretty neat way to generate beautiful commit messages according to your stories in Pivotal Tracker:

geordi commit

Geordi reads from a .pt_project_id file inside your repo and connects to Pivotal Tracker to list started and finished stories with their title. Choosing one of them generates a commit message including id and title from pivotal tracker. For example:

[#1234567] CRUD Users

Trouble shooting

If you encounter a bug like …

Never ever declare your associations with a string, especially when doing metaprogramming. A common mistake is something like

# WRONG
class Page < ActiveRecord::Base
  %w[main sub].each do |type|
    belongs_to "#{type}_title"
  end
end

   
# RIGHT
class Page < ActiveRecord::Base
  %w[main sub].each do |type|
    belongs_to "#{type}_title".to_sym
  end
end

Always append a to_sym, otherwise you'll have [all](/makandra/4177-bugfix-rails-does-not-find-an-association-when-it-is-nam…

If you use transactional_fixtures or the database_cleaner gem with strategy :transaction, after_commit callbacks will not be fired in your tests.

Rails 5

Rails 5 has a fix for this issue and no further action is needed.

Rails 3+

Add the gem test_after_commit to your test group in the Gemfile and you are done. You don't need to change the database strategy to deletion (which might…

For Sidekiq to be able to retry your jobs it has to be able to catch errors that occur while a job is executed.

Per default, Sidekiq will not raise / notify you if the retry count is exhausted. It will only copy the job to the dead queue (see wiki).

If you want to get notified, you have to implement it in your worker explicitly with a sidekiq_retries_exhausted-block, e.g. like this:

```
class DownloadWorker
include Sidekiq::Worker

# Import jobs are retried a few times wi…

PostgreSQL, unlike MySQL, treats strings as case sensitive in all circumstances.

This includes

• comparison with = and LIKE
• collision detection in unique indexes

Usually this is fine, but some strings (like emails and usernames) should typically be treated as case insensitive.

There are a few workarounds available:

• use the citext extension
• use ILIKE instead of LIKE
• use Postgres' lower() function
• add an index on lower(email)

Probably the best approach is…

There is no CSS selector for matching elements that contains a given string ¹. Luckily, Capybara offers the :text option to go along with your selector:

page.find('div', text: 'Expected content')

You can also pass a regular expression!

page.find('div', text: /Expected contents?/i)

Note that if your CSS selector is as generic as div, you might get a lot more results than you expect. E.g. a <div class="container"> that surrounds your entire layout will probably also contain that text (in a descendant) and Capybara wil…

Cucumber will save a file tmp/parallel_cucumber_failures.log will the filenames and line number of the failed scenarios after a full test run.

Normally you can say cucumber -p rerun (rerun is a profile defined by default in config/cucumber.yml) to rerun all failed scenarios. Unfortunately this does not work with geordi yet.

Here is a list of possible workarounds:

```
geordi firefox bundle exec cucumber -p rerun
cat tmp/parallel_cucucmber_failures.log | xargs geordi cucumber
geordi cucumber `cat…

HTML's <input type="file"> accepts a single file. You can allow multiple files via <input type="file" multiple>.
But sometimes, selecting multiple files is not enough and can be cumbersome for the user. Enter webkitdirectory:

<input type="file" webkitdirectory multiple>

Using webkitdirectory switches the browser's file picker to select a directory. All files inside that directory, and inside any nested subdirectories, will be selected for the file input.

This can be useful when users want to upload all files from a nested dire…

Ruby's __FILE__ keyword returns the path to the current file. On popular for this are Ruby binaries:

#!/usr/bin/env ruby
$LOAD_PATH << File.expand_path('../../lib', __FILE__)
require 'my_cli'
MyCli.run!

However, if you create a symlink to this file, this will no longer work. __FILE__ will resolve to the path of the symlink, not to its target.

One solution is to use File.realpath(__FILE__).

In Ruby 2+ you can also use this:

$LOAD_PATH << File.expand_path('../lib', __dir__)

__dir__ is simply a shortcut for `Fi…