Beside the content of the "Refactoring UI" book the author Steve Schoger also published a few videos on Youtube. These include some useful hints for external resources that help you to accomplish different design relevant tasks.

Drawing tools

• Sketch
• Figma

Icon sets

• Fontawesome
• [Heroicons](https:…

Introduction

Most of the time it is a tedious task to apply a code style guide to an existing code base as there are likely to be a lot of conflicts. At makandra we are using makandra-rubocop to have code style checks. Here is some advice on how to add makandra-rubocop efficiently.

Apply Cops separately

If you want to review each correction, it is easier to run each Cop separately. This way you know what kind of change to expect and don't have to find …

To get a quick overview of database table sizes, you can view the row count like this:

# PostgreSQL
SELECT schemaname,relname,n_live_tup 
FROM pg_stat_user_tables 
ORDER BY n_live_tup DESC;

# MySQL
SELECT table_name, table_rows
FROM information_schema.tables
WHERE table_schema = (SELECT database());

Note that this is not the same as checking table sizes by disk usage.

There are a few ways to access view helpers from the Rails console. The easiest way is the helper shortcut:

helper.translate 'i18n.string'
helper.your_helper_method

If the desired helper renders a view template, you need this setup:

view_paths = Rails::Application::Configuration.new(Rails.root).paths["app/views"]
av_helper = ActionView::Base.new(view_paths).extend YourHelperModule

av_helper.your_helper_method

You can use constraints in your routes.rb to avoid getting errors when wrong routes are called. Instead, the user will see a 404.

If you want multiple routes to use the same constraint you can use the block syntax:

constraints(format: 'html') do
  resources :pages
  resources :images
end

If you want constraints only on certain routes, you can do:

get '/users/account' => 'users#account', constraints: { format: 'html' }

Note: You can also avoid this error through format constraints in your controllers.

When deploying, Capistrano puts a REVISION file into your application's release directory. It contains the hash of the commit which was deployed.

If you want to know the currently deployed release, simply SSH to a server and view that file.

$ cat /var/www/my-project/current/REVISION
cf8734ece3938fc67262ad5e0d4336f820689307

Capistrano task

When your application is deployed to multiple servers, you probably want to see a result for all of them.
Here is a Capistrano task that checks all servers with the :app role.

```rub…

Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specific size for your tests' browser windows.

Using WebDriver options / Chrome device metrics

For Google Chrome, the preferred way is setting "device metrics". This allows you to configure dimensions larger than your display and enable/disable touch behavior.

Simply use register_driver to set up…

It might sound trivial, but there is no such thing as a "hover" or "mouseover" state on touch devices. If your application is supposed to work on iPads, smartphones, etc., don't hide information behind a tooltip, and don't make controls appear when hovering over another element.

Generally, things that happen/appear when you hover an element should do the same when you click the element.

Checking if a JavaScript value is of a given type can be very confusing:

• There are two operators typeof and instanceof which work very differently.
• JavaScript has some primitive types, like string literals, that are not objects (as opposed to Ruby, where every value is an object).
• Some values are sometimes a primitive value (e.g. "foo") and sometimes an object (new String("foo")) and each form requires different checks
• There are three different types for null (null, undefined and NaN) and each has different rules for…

validates_uniqueness_of is not sufficient to ensure the uniqueness of a value. The reason for this is that in production, multiple worker processes can cause race conditions:

1. Two concurrent requests try to create a user with the same name (and we want user names to be unique)
2. The requests are accepted on the server by two worker processes who will now process them in parallel
3. Both requests scan the users table and see that the name is available
4. Both requests pass validation and create a user with the seemingly available name…

I often see the use of || to set a default value for a variable that might be nil, null or undefined.

x = x || 'default-value'

This pattern should be avoided in all languages.

While using || works as intended when x is null or an actual object, it also sets the default value for other falsy values, such as false. false is a non-blank value that you never want to override with a default.

To make it worse, languages like JavaScript or Perl have [many more fal…

Updating Chromedriver is often a hassle: If you use chromium-chromedriver from the Ubuntu sources, it usually won't be updated when a new Chrome version is released. Manually downloading it from the official page is a very manual process. And I don't really want to use remote code like the "webdrives" gem because of paranoia.

Cry no more, for here is a tiny bash script that will download the latest chromedriver version and place it inside ~/bin. (If you use a different location, adjust accordingly).

```
#!/bin/bash

VERSION_URL="https:…

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…