Using local fonts with Webpack / Webpacker

When we want to use our own (or bought) fonts in an application with Webpack(er), we have two options. We can

  • put the fonts directly into your Webpack's assets folder or
  • write an npm package with an own sass file that can be imported from the Webpack manifest.

Load fonts from your assets folder

The first option turns out to be straightforward: Import the stylesheets in the index.js of the pack you're using:

// webpack_source_path/application/index.js

import './stylesheets/reset'


Careful when using database locks in transactions

We tend to use database transactions as a magic bullet to get rid of all our concurrency problems. When things get really bad, we might even throw in some locking mechanism, but then are usually done with it.

Unfortunately, transactions semantics in databases are actually very complicated, and chances are, your making some incorrect assumptions.

The MySQL innodb engine actually has [four different modes](ht…

Bootstrap 4 skin for the Rome datepicker

Here is how to make Rome datepicker look like the rest of your Bootstrap 4 application.

Rome comes with very little basic styling. While we could redefine its classes, we can configure the classes Rome applies to its elements to make it look like this:

Example Image

Since Bootstrap 4 comes with several helpful utility classes, and requires fewer markup/containers, we can achieve Bootstrap 4 experience by applying a few classes via the styles setting.

You still need to include `ro…


Rails: Passing array values to tag helpers like link_to

From at least Rails 4, the ActionView tag helper turns Array values of HTML options into a single space-separated string.
This means you can pass an array to :class options:

extra_classes = %w[one two]

= link_to 'Dashboard', root_path, class: ['btn', 'btn-primary', *extra_classes]
=> Dashboad

= content_tag 'div', 'Hello World', class: %w[alert alert-info]
=> <div class="alert alert-info">Hello World</div>

= …

Linked contentRepeats

Debugging AJAX requests with better_errors

better_errors is an awesome gem for enhanced error pages in development, featuring a live-REPL for some light debugging.

To debug the exception you got on an AJAX-Request, visit /__better_errors on your app's root path (e.g. http://localhost:3000/__better_errors). It shows the error page for the last exception that occurred, even when it has been triggered by an AJAX request.

Upgrade guide for moving a Rails app from Webpack 3 to Webpack 4

Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us to use Webpack 4.

I successfully upgraded an existing real-world Webpack 3 application. Below are notes on everything that I encountered.
Note that we prefer not using the Rails asset pipeline at all and serving all assets through Webpack for the sake of consistency.


  • Remove version locks in Gemfile for webpacker
  • Remove version locks in package.json for webpack and webpack-dev-server
  • Install by ca…

Guide to localizing a Rails application

Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many components that are affected.

When you are asked to give an estimate for the effort involved, go through the list below and check which points are covered by your requirements. Work with a developer who has done a full-app localization before and assign an hour estimate to each of these points.

Static text

  • Static strings and template text in app must be translated: Screens, mailer templates, PDF templates, helpe…

Rails: How to get URL params without routing parameters (or vice versa)

Rails' params hash contains any request parameters (URL parameters or request payload) as well as routing parameters like :controller, :action, or :id.

To access only URL parameters, use request.query_parameters. Routing params are available through request.path_parameters.

# On /users?query=Bob&page=2

=> {"page"=>"2", "query"=>"Bob", "controller"=>"users", "action"=>"index"}

=> {"page"=>"2", "query"=>"Bob"}

=> {:controller=>"users", :action=>"i…

Linked contentAuto-destruct in 34 days

Updated: Updated: Rails routes: Extracting collection actions into their own controllers

Added some examples to point out different behaviours of nested resources compared to namespaced resources.


How to iterate over an Enumerable, returning the first truthy result of a block ("map-find")

Ruby has Enumerable.find(&block), which returns the first item in the collection for which the block evaluates to true.

first_post_with_image = posts.find do |post|

However, sometimes it's not the item you're interested in, but some value depening on it – e.g. the value the block evaluated to. You could first map the collection and then take the first truthy value, but this way you need to process the whole collection twice:

first_image_url =

If the mapping …


Simple database lock for MySQL

Note: For PostgreSQL you should use an alternative that doesn't require a database table. For MySQL we still recommend the solution in this card.

If you need to synchronize multiple rails processes, you need some shared resource that can be used as a mutex. One option is to simply use your existing (MySQL) database.

The attached code provides a database-based mutex for MySQL. You use it by simply calling

Linked contentAuto-destruct in 34 days

Updated: Rails routes: Extracting collection actions into their own controllers

In modern Rails versions we can define nested resources in a collection { ... } block to namespace them into an existing resource:

resources :projects, only: :show do
  collection do
    resource :report, only: :show, controller: 'projects/report'
    resources :members, only: [:index, :show]

This generates the following routes:

GET /projects/:id => ProjectsController#show
GET /projects/report => Projects::ReportsController#show
GET /projects/members => MembersController#index

JavaScript without jQuery (presentation from 2019-01-21)


  • We want to move away from jQuery in future projects
  • Motivations are performance, bundle size and general trends for the web platform.
  • The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
  • Unpoly 0.60.0 works with or without jQuery

Is jQuery slow?

From: Sven
Subject: performance on smartphones and tablets


I just used your framework in one project and must say,
I am really pleased with it – but only on a desktop computer.

Have you benchm…

Linked contentAuto-destruct in 2 days

Unpoly 0.60.0 released: No jQuery required

You may browse a formatted and hyperlinked version of this file at


This is a major update with some breaking changes.


  • jQuery is no longer required! Unpoly now has zero dependencies.
  • New up.element helpers to complement native Element methods. You might not even miss jQuery anymore.
  • Vastly improved performance on slow devices.
  • Utility functions that work with arrays and array-like values have been greatly improved.

How to use Rails URL helpers in any Ruby class

In Rails 3+, you can use:

class Project
  delegate :url_helpers, to: 'Rails.application.routes'

  def project_path

For Rails 2, use the attached Modularity trait. It will give any Ruby class a method #url_writer, on which you can call URL helpers:

class Foo
  does 'write_urls'
  def self.class_method
  def instance_method

RubyGems can't find bundle executable although Bundler is installed

I had this error:

> gem install bundler
Successfully installed bundler-2.0.1
1 gem installed

> bundle install
Traceback (most recent call last):
	2: from /home/henning/.rbenv/versions/2.5.1/bin/bundle:23:in `<main>'
	1: from /home/henning/.rbenv/versions/2.5.1/lib/ruby/2.5.0/rubygems.rb:308:in `activate_bin_path'
/home/henning/.rbenv/versions/2.5.1/lib/ruby/2.5.0/rubygems.rb:289:in `find_spec_for_exe': can't find gem bundler (>= 0.a) with executable bundle (Gem::GemNotFoundException)

The cause was that Bundler 2 requires RubyG…


Merging two arbitrary ActiveRecord scopes

Rails 3+ allows you to join two scopes from arbitrary sources by calling the merge method:

scope1 = User.where(:email => '')
scope2 = User.where(:first_name => 'hans')
merged_scope = scope1.merge(scope2)

merged_scope.to_a will now trigger a query for the combined scope chain:

SELECT `users`.* FROM `users` WHERE `users`.`email` = '' AND `users`.`first_name` = 'hans'

If you are joining two models, you can also [merge scopes for different models](…


Using ES6 without a transpiler

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

  • fat arrow functions (() => { expr })
  • let / const
  • class
  • async / await
  • Promises
  • Generators
  • Symbols
  • Rest arguments (...args)
  • Destructuring

You won't be able to use import and export, or use npm modules.

See this [ES6 compatibility mat…

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