HOWTOs for Ruby on Rails and JavaScript

Cucumber: How to find unused step definitions

Cucumber has an output format that prints step definitions only. You can use this to find unused ones:

Temporarily add require_relative 'env' to the top of the first file in features/support. --dry-run makes Cucumber skip loading env.rb.
Open a really wide terminal window.
bundle exec cucumber --dry-run --format stepdefs | grep -B1 'NOT MATCHED' --no-group-separator | grep features/step_definitions

This will print all unused step definitions from your project – however, the result will include false positives. Step...

Edit

How to upgrade Rails: Workflow advice

When upgrading Rails versions -- especially major versions -- you will run into a lot of unique issues, depending on the exact version, and depending on your app.

However, it is still possible to give some generic advice on how you want to tackle the update in principle.

If you are not really confident about upgrading Rails, have a look at Rails LTS.

How many update steps?

Besides the Rails upgrade itself, you might also want to upgrade your other gems and upgrade your Ruby version.
First decide in how many st...

test.txt

Edit

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

For Webpack 3+

Integrate as described in the documentation. For example load ace Editor like this:

  function loadAceEditor() {
    return import(/* webpackChunkName: "ace" */ 'ace-builds/src-noconflict/ace').then(() => {
      return import(/* webpackChunkName: "ace" */ 'ace-builds/webpack-r...

Edit

Rubymine FileType mismatch

If your Rubymine does not recognize a file type correctly although you have entered the unmistakeable file extension like material_orders_controller.rb, this may help you:

Causing the Problem

Sometimes you create a new file and forget to enter the ending like material_orders_controller
Rubymine handles such files per default as simple txt files.
You delete this file and create a new one with correct ending: material_orders_controller.rb. But still Rubymine treats this file as text file, no highlighting is available.

What happene...

Edit

ActiveJob Inline can break the autoloading in development

We figured out, that ActiveJob Inline might lead to autoloading problems in development. The result was an exception when running an import script, which delivers async mails.

A copy of XXX has been removed from the module tree but is still active! (ArgumentError)

Our fix was to use .deliver_now and not .deliver_later (this is not a general fix, but it was okey for us). Below there are some debug hints which helped us to locate the problem:

We placed a pry debugger in [ActiveSupport#clear](https://github.com/rails/rails/blob...

Edit

How to: expand an element's cover area beyond its container

Occasionally, your designer will hand you designs where elements break the layout's horizontal container width, like navigation buttons of a slider that should be at the left/right of the browser window, or simply by applying a background color that reaches until the left and right of the browser window.

In the past, we've done some horrible things to achieve that. Like margin: 0 -10000px plus overflow-x: hidden.
There is a much saner approach.

Consider the following markup:

<body>
  <div class="container">
    <div class="sec...

codepen.io

Edit

How to access before/after pseudo element styles with JavaScript

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery

Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements.

let style = window.getComputedStyle(element, '::before')
let color = style.getPropertyValue('background-color...

Edit

Devise: Don't forget to lock users with soft delete

There are two ways to lock a user in devise.

Using the lockable module
Customizing the user account status validation when logging in.

It depends on your requirements which methods works best.

Locking a user on soft delete

We recommend to use option 2 when you want to couple the lock to the m...

github.com

Edit

jQuery: How to remove classes from elements using a regular expression

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that.

For example, consider a DOM node for the following HTML. We'll reference it by $element below.

<div class="example is-amazing is-wonderful"></div>

Option A: Selecting classes, then removing them

You can iterate over existing classes, and select matching ones. The example below is ES6, on ES5 could write something similar using jQuery.grep.

let classes ...

api.jquery.com

Edit

RSpec 3 allows chaining multiple expectations

When you are using lambdas in RSpec to assert certain changes of a call, you know this syntax:

expect { playlist.destroy }.to change { Playlist.count }.by(-1)

While you can define multiple assertions through multiple specs, you may not want to do so, e.g. for performance or for the sake of mental overhead.

Multiple expectations on the same subject

RSpec allows chaining expectations simply by using and.

expect { playlist.destroy }
  .to change { Playlist.count }.by(-1)
  .and not_change { Video.count }

...

relishapp.com

Edit

Ruby's percent notation can do more than strings

Percent Notation

We already know that that we can create strings using the percent notation:

%(<foo="bar's ton">) is perfectly fine Ruby.

Modifier

But there is more. The curly brackets ({}) are interchangable with most unicode characters (e.g. square brackets[]).
Furthermore, you can add a "modifier" to the percent notation to control the return type of th...

docs.ruby-lang.org

Edit

JavaScript: Sharing content with the native share dialog

Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an Android or iOS phone. Some desktop OSs like Windows or MacOS also support native share dialogs. See Can I Use for a detailed support matrix.

When clicking a share button using this API, the browser will automatically show all installed applications that support content sharing, such as Whatsapp, Facebook, Twitter, e-mail etc.

The API is extremely simple to use:

if ...

developers.google.com

Edit

How to: Run geordi in a single proccess with parallel test setup

Geordi uses parallel_tests if available for running the test suite. To debug an application it is very unhandy to have multiple processes as your terminal I/O will not work as expected once a breakpoint is hit.

Even parallel_tests support an option to enable a single process run, it is not possible to pass this option through geordi. But you can set the number of processes via ENV variable manually:

PARALLEL_TEST_PROCESSORS=1 bundle exec geordi cucu...

Edit

Accessing Rails config in webpack(er)

It is possible to access Rails config (for example secrets) from within your webpack bundles, thanks to rails-erb-loader. When using webpacker, the setup is like this:

Install rails-erb-loader:
```
yarn add rails-erb-loader
```

Add this to your config/webpacker/environment.js:

environment.loaders.prepend('erb', {
  test: /\.erb$/,
  enforce: 'pre',
  use: [{
    loader: 'rails-erb-loader',
  }]
})

Start using erb. For examp...

Edit

How to examine an unknown Ruby object

When debugging your application, you will come across objects created by some gem or framework. You don't have the source code at hand, still need to inspect this object. Here are some tools to do so:

Relevant methods

@object.methods - Object.instance_methods returns a list of methods excluding methods inherited from Object. This makes the methods list drastically more relevant. You can also try subtracting other base classes like ActiveRecord::Base.methods etc.
To further narrow it down you can also just look at public methods...

Edit

Minify Font Awesome fonts with webpack

Font Awesome 5 is a comprehensive solution for vector icons on your website.

Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline <svg> tags), or even as SVG sprites.

All solutions have their pros and cons:

Icon font:

little CPU load (no JavaScript)
fonts are relatively large
1 extra HTTP request

Javascript + inline SVG:

higher CPU load (needs to watch the DOM via mutation observers to ad...

Edit

How to: Use different configurations for S3cmd

S3cmd is a free command line tool and client for uploading, retrieving and managing data in Amazon S3. S3cmd reads its configuration by default from ~/.s3cfg, which is created once you run s3cmd --configure.

If you have many configurations, we recommend to always specify the configuration you want to use. This prevents applying actions to the wrong bucket.

Examples:

s3cmd -c ~/.s3cfg-github-staging ls
s3cmd -c ~/.s3cfg-github-development ...

Edit

RSpec: How to check if a string contains terms in a desired order

There seems to be no built-in matcher in RSpec to check if a string contains terms in the desired order. A simple workaround is to use a regular expression that also matches newlines (m-modifier).

Cons:

The readability when terms need to be escaped is bad
A failed spec has an error which needs manually action to be understood (Search if terms appear and in which order)

Example:

expect(ActionMailer::Base.last.to_s).to match(/Dear customer.*Account canceled.*You Awesome Company/m)

Edit

An incomplete guide to migrate a Rails application from paperclip to carrierwave

In this example we assume that not only the storage gem changes but also the file structure on disc.

A general approach

Part A: Create a commit which includes a script that allows you to copy the existing file to the new file structure.

Part B: Create a commit which removes all paperclip logic and replace it with the same code you used in the first commit

Part A

Here are some implementation details you might want to reuse:

Use the existing models to read the files from
Use your own carrierwave models to write t...

Edit

Colcade is a lightweight Masonry alternative

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:...

github.com

Edit

Heads up: Sidekiq per default silently fails when retries are exhausted!

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 time...

github.com

Edit

A quick introduction to CORS

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...

Edit

Raising JavaScript errors in Ruby E2E tests (RSpec, Cucumber)

A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you to miss errors in your frontend code.

Using the BrowserConsole helper below you can check your browser's error console from your E2E tests.

The following will raise BrowserConsole::ErrorsPresent if there is an error on the browser console:

BrowserConsole.assert_no_errors!

Ignoring errors

You can ignore errors by their exact message:

BrowserConsole.ignore('Browser is burning')

You can ignore errors with me...

Edit

Pretty commit messages via geordi

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

geordi commit

Geordi reads from a .geordi.yml file inside your repo and connects to Linear to list started and finished stories with their title. Choosing one of them generates a commit message including id and title from Linear app and a link to the original issue. For example:

[VW-1337] CRUD Users

Issue: https://linear.app/makandra/issue/VW-1337/crud-user...

Edit