Search_spinner Cross_grey Magnifier

Search syntax

  • Search for repeating cards with repeats:yes
  • Search for unfinished cards with unfinished:yes
  • Search for cards in a certain topic with topic:"name"
  • Search for phrases with "a phrase"
  • Exclude a word from search: -word
  • Exclude a phrase from search: -"a phrase"
  • Exclude a topic from search: -topic:"name"

Waiting for page loads and AJAX requests to finish with Capybara

If you're using the Capybara webdriver, steps sometimes fail because the browser hasn't finished loading the next page yet, or it still has a pending AJAX request. You'll often see workarounds like

When I wait for the page to load
Then ...

Workarounds like this do not work reliably, will result in flickering tests and should be avoided. There is no known reliable way to detect if the browser has finished loading the page.


Instead you should wait until you can observe the result of a page load. E.g. if yo…

A case for Redactor

Redactor is yet another WYSIWYG editor. It definitely has its weak points, but I want to point out that it has clear strengths, too.


  • Simple and beautiful interface.
  • Outstandingly organized source code. Have never seen a JS library that was this structured.
  • Clear, comprehensive and searchable API documentation. Filled with code examples.
  • Easily customizable: specify toolbar buttons, pass various callbacks, etc.
  • Features a collection of great [plugins](ht…

Heads up: Ruby implicitly destructures an Array for multiple assignment

Similar to hashes, Ruby automatically destructures an Array on some occasions. However, this happens more reasonably only on multiple assignment:

o ='O')
def o.to_a; [1,2,3]; end

a, b, c = o # Implicit call to #to_a here
a # => 1
b # => 2
c # => 3

# Method calls are not affected
def m(x = 'x', y = 'y')
  puts x + y

m(o) # => 'Oy'

This has never been an issue to us in the wild, but it's good to know that it's there.

Auto-destruct in 55 days

Updated: Improving browser rendering performance

Cards is now significantly longer and gives an overview over different aspects of frontend performance.

Heads up: Ruby implicitly converts a hash to keyword arguments

When a method has keyword arguments, Ruby offers implicit conversion of a Hash argument into keyword arguments. This conversion is performed by calling to_hash on the last argument to that method, before assigning optional arguments. If to_hash returns an instance of Hash, the hash is taken as keyword arguments to that method.



How to solve Selenium focus issues

Selenium cannot reliably control a browser when its window is not in focus, or when you accidentally interact with the browser frame. This will result in flickering tests, which are "randomly" red and green. In fact, this behavior is not random at all and completely depends on whether or not the browser window had focus at the time.

This card will give you a better understanding of Selenium focus issues, and what you can do to get your test suite stable again.

Preventing accidental interaction with the Selenium window ——————–…


Stretch an HTML document's body to full height

Note: The information in this card seems to no longer be accurate.

To make it at least 100%, but more if the content grows higher than one screen height:

  height: 100%

  min-height: 100%

To make it exactly 100%, regardless of the content:

html, body
  height: 100%

PostgreSQL: How to add/remove/modify array values (and how to replace 1 value with multiple values)

PostgreSQL's array data type is pretty useful, but manipulating values of arrays can be awkward because of its syntax.

Consider the following users table which each example below will start from:

name topics
Alice {cats,dogs}
Bob {llamas}

(PostgreSQL uses curly braces to represent arrays, true story.)

Adding values

Use the array_cat function, or the || operator.

These calls will add the values "cats" and "mice" to users.topics:

UPDATE users SET topics = array_cat(topics...
External content

Web Fonts Performance // Speaker Deck

Web fonts are great. They are also be really bad for front-end performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank page is no fun, especially when the content has already loaded.

This talk explores why browser have placed fonts on the critical path, and how we can work around this while still delivering a good user experience. It also takes a look at what the future will bring to web font performance: preloading hints, the font-display property, and HTTP/2.

Keeping web applications fast

Our applications not only need to be functional, they need to be fast.

But, to quote Donald Knuth,

premature optimization is the root of all evil (or at least most of it) in programming

The reasoning is that you should not waste your time optimizing code where is does not even matter. However, I believe there are some kinds of optimizations you should do right away, because

  • they are either obvious and easy
  • or they are very hard to do optimize later

This is an attempt to list some of those things:

On the server


Ruby: Do not mix optional and keyword arguments

Writing ruby methods that accept both optional and keyword arguments is dangerous and should be avoided.

Consider the following method

def colored_p(object = nil, color: 'red')
  puts object.inspect

colored_p(['an array'])                   # ['an array'] (in red)
colored_p({ a: 'hash' }, color: 'blue')   # {:a=>'hash'} (in blue)
colored_p({ a: 'hash' })                  # ArgumentError: unknown keyword: a

What happened?

Ruby does not know whether to interpret this as

colored_p({ a: 'hash' }, c...

Git: Improve your commits by reviewing changes one-by-one

Git commits should be very deliberate, and only contain changes that you really want to be in there. In order to reduce the chance to accidentally commit something you didn't intend, review your changes before committing.

My preferred way of doing this is

git add -N . # Add all paths, but not their contents
git add -p

Git will now show you all your changes in small chunks and ask you in an interactive mode whether you really want to add them.

The most helpful commands are

  • y: yes (add the change)
  • n: no (discard t…

How to disable Rails raising errors on pending migrations in development

Rails 4 introduced raising an error on pending migrations. This is most annoying when you are crafting a migration but need to play with your application to figure out how to do it.

To disable this behavior, just set the corresponding config option to false:

# in config/environments/development.rb

# Raise an error on page load if there are pending migrations.
config.active_record.migration_error = false # was :page_load

Regex editors

Developing complex regular expressions quickly blows my mind. Here are some online regex editors that help:

  • Ruby: Rubular
  • Javascript: ScriptularCaution! Scriptular will not match newlines, even when using [\s\S] and similar workarounds.

Beware: Many browsers define window.event

Some browsers define window.event, which will return a copy of the "current" event. However, this is not defined by the W3C. Most importantly, Firefox does not support it, neither do recent versions of IE.

You should completely avoid accessing the global event and instead pass the event object around that the event handler receives. The easiest protection against accidentally accessing window.event is just never naming the event event, but e or evnt or so.

function brokenInFirefox() {
event.preventDefault(); // Break…

Enhanced error messages when hash keys are missing

Hash#fetch is a great way to ensure that a hash key is present. The error message when a key is missing though is rather useless if you don't have immediate access to the object and want to debug why keys are missing, e.g. in the parsed JSON response of an external API. If you'd like a more detailed error message, you can do a Hash#decent_fetch (with the attached code).

# => KeyError: key not found: "missing_key"

# => KeyError: Key "missing_key" not found in {"id…


Recommended git workflow for feature branches

This is a guide on how to effectively use git when working on a feature branch. It is designed to get out of your way as much as possible while you work, and ensure you end up with clean commits in the end.

We assume you are the only person working on this branch. We also assume the branch has never been "partially" merged into master.

You want to start a feature branch

git checkout master
git checkout -b my-feature-branch
git push -u

You've added code that works independently of your other …

2925 cards