3651 cards
View

A short summary of external tools used in Refactoring UI Videos

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

Icon sets

Adding makandra-rubocop to an existing code base

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 …

Checking database size by row count

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.

Rails: Invoking a view helper from the console

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
Repeats

Rails routing: Using constraints to avoid "Missing template" errors

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.

Repeats

Capistrano: How to find out which version of your application is currently live

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…

How to: Specify size of Selenium browser window

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…

Repeats

Touch devices don't have mouseover events

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.

Linked contentAuto-destruct in 49 days

Updated: request_store: Per-request global storage for your Rails app

Note that RequestStore just uses Thread.current under the hood and injects a Rack middleware that calls RequestStore.clear! after each request.
If you use RequestStore in a non-request context where (like background jobs), you must clear the store yourself or your cached data will stay in Thread.current.

Linked contentAuto-destruct in 47 days

Updated: Don't use the || operator to set defaults

Added shortcuts to set defaults when you are using Babel or CoffeeScript:

ES-next with Babel

There is a stage 3 proposal for the "nullish coalscing" syntax:

x = x ?? 'default-value'

If you are using Babel, you can transpile this syntax into ES5 using the @babel/plugin-proposal-nullish-coalescing-operator package.

With CoffeeScript

CoffeeScript lets you write:

```
x ?= 'default-value' …

Repeats

JavaScript: Testing the type of a value

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…
Repeats

Understanding race conditions with duplicate unique keys in Rails/MySQL

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…
Repeats

Don't use the || operator to set defaults

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…

Linked content

Fix error: rails console No such file to load -- irb/encoding_aliases.rb (LoadError)

I got this error after upgrading Ruby from 2.4.5 to 2.6.4 when I opened the Rails console - rails server still worked.

```
Running via Spring preloader in process 14679
Loading development environment (Rails 5.2.2.1)
Traceback (most recent call last): …/lib/ruby/gems/2.6.0/gems/spring-2.1.0/lib/spring/application.rb:175:in 'fork': No such file to load – irb/encoding_aliases.rb (LoadError) …/lib/ruby/gems/2.6.0/gems/spring-2.1.0/lib/spring/application.rb:175:in 'fork': undefined method 'reject!' for nil:NilClass (NoMethodError) …/li…

Repeats

Linux: Shell script to easily update chromedriver

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

Linked contentAuto-destruct in 45 days

Rails State Machine 2.0.0 released

Version 2 includes support for multiple state machines within the same model. States and events must still be named uniquely.

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…

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