3674 cards

How to enable Chromedriver logging

When using Chrome for Selenium tests, the chromedriver binary will be used to control Chrome. To debug problems that stem from Selenium's Chrome and/or Chromedriver, you might want to enable logging for the chromedriver itself. Here is how.

Option 1: Use Selenium::WebDriver::Service

In your test setup, you may already have something like Capybara::Selenium::Driver.new(@app, browser: :chrome, options: ...), especially when passing options like device emulation.

Similar to options, simply add an extra key service and pass an ins…


Organize large I18n dictionary files in Rails 3+

If you're suffering from a huge de.yml or similiar file, cry no more. Rails lets you freely organize your dictionary files in config/locales.

My organization works like this:

  • config/locales/rails.de.yml modified Rails boilerplate
  • config/locales/faker.de.yml modified Faker boilerplate
  • config/locales/models.de.yml model names, attribute names, assignable_value labels
  • `config/locales/views.de.y…

Your database tables should always have timestamps

Whenever you create a table from a database migration, remember to add updated_at and created_at timestamps to that table. Without those timestamps, investigating future bug reports will be hell. Always have timestamps.

Adding timestamps to new tables

When you create a table using create_table, you can add timestamps by using the timestamps shortcut:

class CreateEpisode < ActiveRecord::Migration
def change
create_table :episodes do |t|
t.string :name


Cancelling event propagation

Within an event handler, there are multiple methods to cancel event propagation, each with different semantics.

  • event.preventDefault()

    Only prevents the default browser behavior for the click, i.e. going to a different url or submitting a form.

  • event.stopPropagation()

    Prevents the event from bubbling up the DOM. Note this effectively also cancels any event handlers attached through jQuery's live method, since those depend on bubbling.

  • event.stopImmediatePropagation()

    Prevents the event from triggering any remaining…

Linked content

palkan/isolator: Detect non-atomic interactions within DB transactions

With this gem your transaction blocks raise an error when they have side effects that cannot be rolled back.

By default it checks whether you're connecting with HTTP, queuing a Sidekiq job or sending an e-mail within a transaction. You can add custom checks, too.

Found in this RubyGuides article.

Linked content

The nitty-gritty of compile and link functions inside AngularJS 1 directives

Use the compile function to change the original DOM (template element) before AngularJS creates an instance of it and before a scope is created.

Use the pre-link function to implement logic that runs when AngularJS has already compiled the child elements, but before any of the child element's post-link functions have been called.

Use the post-link function to execute logic, knowing that all child elements have been compiled and all pre-link and post-link functions of child elements have been executed.

Bash script to list commits by Pivotal Tracker ID

The main benefit of our convention to prefix commits by their corresponding Pivotal Tracker ID is that we can easily detect commits that belong to the same story. You can either do that manually or use the bash script below by copying it somewhere to your .bashrc.

# Usage: ptcommits '#123456'
function ptcommits {
if test "$1"
git log –oneline | grep "$1" | grep "^[a-z0-9]*" -o | xargs –no-run-i…

Linked contentRepeats

A community-curated list of flexbox issues and cross-browser workarounds for them

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.

As the spec continues to evolve and vendors nail down their implementations, this repo will be updated with newly discovered issues and remove old issues as they're fixed or become obsolete. If you discover a bug that's not listed here, please report it so everyone else can benefit.


PSA: Umlauts are not always what they seem to be

When you have a string containing umlauts which don't behave as expected (are not matched with a regexp, can't be found with an SQL query, do not print correctly on LaTeX documents, etc), you may be encountering umlauts which are not actually umlaut characters.

They look, depending on the font, like their "real" umlaut counterpart:

  • ä ↔ ä
  • ö ↔ ö
  • ü ↔ ü

However, they are not the same:

>> 'ä' == 'ä'
=> false
>> 'ä'.size
=> 1
>> 'ä'.size
=> 2

Looking at how those strings are constructed reveals what is going…


An auto-mapper for ARIA labels and BEM classes in Cucumber selectors

Spreewald comes with a selector_for helper that matches an English term like the user's profile into a CSS selector. This is useful for steps that refer to a particular section of the page, like the following:

Then I should see "Bruce" within the user's profile

If you're too lazy to manually translate English to a CSS selector by adding a line to features/env/selectors.rb, we already have an [auto-mapper to translate English into …


Rails: namespacing models with table_name_prefix instead of table_name

When you want to group rails models of a logical context, namespaces are your friend. However, if you have a lot of classes in the same namespace it might be tedious to specify the table name for each class seperately:

class Accounting::Invoice < ApplicationRecord
  self.table_name = 'accounting_invoices'

class Accounting::Payment < ApplicationRecord
  self.table_name = 'accounting_payments'

A replacement for the self.table_name-assignment is the table_name_prefix in the module definition:

module Accou…

Convert SCSS to SASS

The ruby sass gem also installs a command line tool to convert to and from SCSS. Use it for a directory of .scss-files like

sass-convert -R assets/stylesheets --from scss --to sass

Using CSS transitions

CSS transitions are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers.

Basic usage

Transitions are used to animate the path between to property values. For example, to let the text color fade from red to green on hover, the following SASS is used (shorthand syntax):

  color: red
  transition: color .1s
    color: green

This tells the browser "whenever the color of an .element changes…

Linked contentDeprecated


Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're using BEM instead of SMACSS, here's my favorites.

Do not use ID's in CSS Selectors

It is never safe to assume there will only ever be one of something on a page so do not use ID's for CSS. Id's are much better used as javascript hooks so use them for this instead.

.list {…} instead of #list {…}

Animate an interface using classes not inline styles

Inline styles added by javascript are h…

Linked content

Powerful favicon generator

This favicon generator will guide you to a perfect set of favicon files, suitable for all devices and situations (browser, homescreen icon for iOS/Android/Windows, MacBook Touch Bar etc.)

How to

Open the Favicon generator and upload a square image:

  • either an SVG
  • or a PNG/JPG/… with more than 260px size

Then follow the steps it guides you. In the result window, stick to the HTML5 tab. It is just fine.


Haml: Prevent whitespace from being stripped in production


This is not an issue in newer versions of HAML (starting with 5.0.0), as the ugly-option was removed so that in development everything is rendered ugly, too.


When HTML is rendered from HAML in production or staging environment, whitespace is removed to reduce the download size of the resulting pages. Therefore it might happen that whitespace you see in development is missing in production or staging.

Here is an example of two inlined bootstrap buttons in a t…

How to mount a legacy database to migrate data

There are many approaches out there how you can import data from a legacy application to a new application. Here is an approach which opens two database connections and uses active record for the legacy system, too:

1. Add you database information to you config/database.yml.

  database: your_application_data_migration

2. Create a separate application record for the data migration, e.g. in app/data_migration/migration_record.rb. You will need to create an app/data_migration.rb class first.

class DataMig…


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 ——————–…

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