Switching the package manager from yarn to npm

We recently migrated a Rails application from yarn to npm. We decided to go this step instead of upgrading to > Yarn 2.0 to reduce the number of dependencies in our project.

Migration

  • Remove the yarn.lock file
  • Remove the node_modules folder
  • Run npm install
  • Replace all occurrences of yarn with npm in your project

Notes

  • With npm vendored packages with dependencies create their own node_modules folder within the vendor path. We fixed this by replacing the vendored packages and removing them.
  • It might be ...

How to eager load a single directory with Zeitwerk

Zeitwerk is the new autoloader of Rails. It is mandatory from Rails 7.0.

Sometimes, a model needs to know all its descendants. They might be organized in a subdirectory:

# Example
app/models/design.rb
app/models/design/light.rb
app/models/design/dark.rb
...

Now imagine the Design class needs to iterate all designs.

To eager load all designs, use this line:

Rails.autoloaders.main.eager_load_dir("#{Rails.root}/app/models/design")

Make sure that app/models/design.rb is not required manually before instructing Rails to ...

jeremyevans/ruby-warning: Add custom processing for warnings

ruby-warning adds custom processing for warnings, including the ability to ignore specific warning messages, ignore warnings in specific files/directories, include backtraces with warnings, treat warnings as errors, deduplicate warnings, and add custom handling for all warnings in specific files/directories.

CSS: Matching against attributes and their values (or parts of them)

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" */ }

But there is more: You do not need to match against "full" attribute values but can match against parts of them.

They work in all somewhat modern browsers, and IE9 or later.

Exact match (CSS2)

[foo="bar"] (matches <div foo="bar" />, but not `<...

JavaScript: Calling a function with a variable number of arguments

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

Rails: Using normalizes without copying code

Rails 7.1 added the normalizes method which can be used to normalize user input.

It let's you define the fields you want to normalize and how to normalize them.

class Movie < ApplicationRecord
  normalizes :title, with: -> {  _1.strip }
end

If you wanted to apply the same normalization to a field in another model you could just repeat yourself and copy the same lambda.

class Actor < ApplicationRecord
  normalizes :name, with: -> {  _1.strip }
end

If however you would prefer to reuse code then one option is to ...

Carrierwave: How to remove container directories when deleting a record

When deleting a record in your Rails app, Carrierwave automatically takes care of removing all associated files.
However, the file's container directory will not be removed automatically. If you delete records regularly, this may be an annoyance.

Here is a solution which was adapted from the Carrierwave GitHub wiki and cleans up any empty parent directories it can find.

class ExampleUploader < CarrierWave...

SameSite cookies

TL;DR Most web applications do not require action on this. SameSite=None (old browser default) will continue to work, and SameSite=Lax (new Chrome default, gradually rolled out) is an even better default for cookies. Set SameSite=Strict only for extra security in special cases (see below). If your application is rendered in an iframe (e.g. a video player or some news stream), you need to configure its relevant cookies as SameSite=None.


The SameSite cookie attribute targets **c...

How to update the bundler version in a Gemfile.lock

  1. Install the latest bundler version:

    gem install bundler
    Fetching bundler-2.3.5.gem
    Successfully installed bundler-2.3.5
    1 gem installed
    
  2. Update the bundler version in Gemfile.lock:

    bundle update --bundler  
    
  3. Confirm it worked:

    $ tail -n2 Gemfile.lock 
    BUNDLED WITH
      2.3.5
    

Notes:

  • Bundler should automatically detect the latest installed version. If it does not, you can specify your preferred version like so:

    b...
    

Designing HTML emails

The 90s are calling: they want their tables back. Unfortunately, you need them all for laying out your HTML emails.

Email client HTML rendering is way more scattered than browser HTML. While you might have a pretty good understanding of what features and patterns you can use to support all major browsers, I doubt anyone masters this craft for HTML email clients.

The only way to ensure your email looks good (acceptable, at least) in all mail clients, is to check it. Litmus is your go-to solution for this (see below). W...

Project management best practices: Working with clients in person

When working on a bigger project, the easiest way to improve your work relation with a client or an external product manager, is to make sure you see them in person once in a while.

It makes sense to meet each other when you start working together to establish a relationship and find out what makes them tick.

If you need to discuss a larger package of work, use the opportunity and meet up and discuss it in person.

When you have to discuss something in your daily work, prefer talking to writing, and consider using a webcam.

It's OK to put block elements inside an <a> tag

In general, you should not put a block element inside an inline element. So don't do this:

<span>
  <div>text</div>
</span>

The browser will think you wrote invalid HTML by accident, and will sometimes reorder elements silently.

There is one notable exception: It's OK to wrap block elements in a <a> tag in HTML5 (not 4). The spec says:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long ...

tig: install a more recent version

I noticed that tig 2.5.1 that is provided by Ubuntu 22.04 repositories has inferior bash completion than older versions after a complete rewrite. Newer versions, however, received some fixes. This inspired me to upgrade tig.

The official debian repositories have more recent versions of tig than Ubuntu does.

Capistrano task to edit staging / production credentials

When using Rails credentials, you will edit the encrypted credentials for staging or production environments from time to time. To do that you need the secret key which should only live on the servers.

Do not download these key files to your local dev environment. They are sensitive and must not be stored on your machine.

Instead, put the attached capistrano task into lib/capistrano/tasks/ of your application. It expects environment specific keys to live in :shared_path/config/credentials/:stage.key. If you have a single master.key...

Ruby / Rails: clone vs. dup vs. deep_dup

Ruby and Rails have several methods for creating a new object that looks like another: clone, dup, deep_dup. When using them you should be aware of their differences so that you can select the method you really need.

clone

  • Shallow copy: references to other objects/values are copied (instead of cloning those objects/values)
  • Clones the object and all its "special object attributes" like frozen, tainted and modules that the object has been extended with
  • [Ruby 2.6 documentation for clone](https://devdocs.io/ruby~2.6/obj...

Dealing with I18n::InvalidPluralizationData errors

When localizing model attributes via I18n you may run into errors like this:

I18n::InvalidPluralizationData: translation data { ... } can not be used with :count => 1. key 'one' is missing.

They seem to appear out of the blue and the error message is more confusing than helpful.

TL;DR A model (e.g. Post) is lacking an attribute (e.g. thread) translation.
Fix it by adding a translation for that model's attribute (attributes.post.thread). The error message reveals the (wrongly) located I18n data (from `attributes.thread...

Unpoly 3.9.1, 3.9.2 and 3.9.3 released

3.9.3

  • Fix an error being thrown when a caching request is tracking an existing request to the same URL, and that existing request responds with an error status (issue #676).
  • Fix a bug where a modal overlay could not be closed when a child popup would be open below the screen fold.
  • Focus is no longer trapped in popup overlays. Focus remains trapped in all other overlay modes, but this can be disabled by setting up.layer.config.overlay.trapFocus = false.
  • The dismiss button in overlays now...

A different testing approach with Minitest and Fixtures

Slow test suites are a major pain point in projects, often due to RSpec and FactoryBot. Although minitest and fixtures are sometimes viewed as outdated, they can greatly improve test speed.

We adopted a project using minitest and fixtures, and while it required some initial refactoring and establishing good practices, the faster test suite was well worth it! Stick with me to explore how these tools might actually be a good practice.

So, why is this setup faster? Partially, it's because minitest is more lightweight than RSpec, which...

Running Cucumber deletes my whole app!

If a Cucumber run deletes your application directory, an integration fail between Capybara and Capybara Screenshot may be the cause. Capybara Screenshot defaults to storing screenshots in ., and tidying up screenshots happens to "tidy up" the application as well. Seen with Capybara 2.18 and Capybara Screenshot 1.0.4.

Upgrading Capybara Screenshot to 1.0.26 fixes the issue. Consider also setting Capybara.save_path = 'tmp/capybara' in an initializer.

Updated: Ruby: Debugging a method's source location and code

Newer Rails projects come with a gem that allows you to access .method(:foo).source. Added a corresponding section to a fitting card

Timeouts for long-running SQL queries

While the main goal always is to prevent long-running queries in the first place, automatic timeouts can serve as a safety net to terminate problematic queries automatically if a set time limit is exceeded. This prevents single queries from taking up all of your database’s resources and reduces the need for manual intervention that might destabilize or even crash the application.

As Rails does not set a timeout on database statements by default, the following query will run for an entire day:

ActiveRecord::Base.connection.execute("S...

Ruby: Replacing Unicode characters with a 7-bit transliteration

Sometimes you need to remove high Unicode characters from a string, so all characters have a code point between 0 and 127. The remaining 7-bit-encoded characters ("Low-ASCII") can be transported in most strings where escaping is impossible or would be visually jarrring.

Note that transliteration this will change the string. If you need to preserve the exact string content, you need to use escaping.

Using ActiveSupport

ActiveSupport comes with a `#tran...

Be careful when copy & pasting code from the web to your terminal

What you copy may not be what you see in the browser.

Here is an online tool to determine the exact code points of your Unicode string: https://devina.io/unicode-analyser