3977 cards

Capybara can find fields by their [aria-label]

Sometimes an input field has no visible label. E.g. a text field with a magnifying glass icon 🔎 and a "Search" button does not really need a visible label "Query".

For accessibility Archive reasons it is good practice to give such a field an [aria-label] attribute:

<input type="search" aria-label="Search contacts">

This way, when a visually impaired user focuses the field, the screen reader will speak the label text ("Search contacts").


Without an [aria-label]...

Disable built-in dragging of text and images

Most browsers have built-in drag and drop support for different page elements like text and images. While this may be useful in most situations, it may become annoying in others. If you e.g. want to allow the user to scroll/move horizontally within a container by grabbing an item and moving the mouse, you will notice that nothing will move and you'll instead start dragging that element.

To disable this, add the following CSS to your content:

-webkit-user-drag: none
user-drag: none

-webkit-user-drag is only fully supported in ...


Git shortcut to fixup a recent commit

git --fixup is very handy to amend a change to a previous commit. You can then autosquash your commits with git rebase -i --autosquash and git will do the magic for you and bring them in the right order. However, as git --fixup wants a ref to another commit, it is quite annoying to use since you always have to look up the sha of the commit you want to amend first.

Inspired by the [shortcut to checkout recent branches with fzf](https://makandracards.com/makandra/505126-g...


Ruby: You can nest regular expressions

Ruby lets you re-use existing RegExp objects by interpolating it into new patterns:

locales_pattern = /de|en|fr|es/i

html_tag_pattern = /<html lang="#{locales_pattern}">/

Any modifiers like /i or /x will be preserved within the interpolated region, which is pretty cool. So in the example above only the interpolated locales are case-insensitive, while the pattern around it (/<html .../) remains case-sensitive.


RSpec matcher to compare two HTML fragments

The RSpec matcher tests if two HTML fragments are equivalent. Equivalency means:

  • Whitespace is ignored
  • Types of attribute quotes are irrelevant
  • Attribute order is irrelevant
  • Comments are ignored

You use it like this:

html = ...
expect(html).to match_html(<<~HTML)
    Expected content

You may override options from CompareXML Archive by passing keyword arguments after the HTML string:

html = ...
expect(html).to match_html(<<~HTML, ignore_text_nodes: true)

Enumerators in Ruby

Starting with Ruby 1.9, most #each methods can be called without a block, and will return an enumerator. This is what allows you to do things like

['foo', 'bar', 'baz'].each.with_index.collect { |name, index| name * index }
# -> ["", "bar", "bazbaz"]

If you write your own each method, it is useful to follow the same practice, i.e. write a method that

  • calls a given block for all entries
  • returns an enumerator, if no block is given

How to write a canonical each method

To write a metho...


Building web applications: Beyond the happy path

When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.

Different screen sizes and browsers

Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?

  • Choose which browsers to support. Make sure the page looks OK, is usable and working in these browsers.
  • Use @media queries to build a responsive design
    • If you do not suppo...

Webpack(er): A primer

webpack Archive is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets for consumption in browsers.

Webpacker Archive is a wrapper around webpack that handles integration with Rails.

This is a short introduction.


If you haven't already, you need to install node.js and Yarn.

Then, put

gem 'webpacker', '~> 4.x' # check if 4.x is still cu...
Linked content

Git shortcut to checkout recent branches

If you have fzf Archive installed, you may add an alias such as this to your ~/.bashrc:

alias recent-branch="git for-each-ref --sort=-committerdate --format='%(refname:short)' refs/heads/ |  fzf | sed 's/\* //g' | xargs -I '{}' git checkout {}"

Now whenever you want to switch back and forth between your most recent branches, type recent-branch, select one and press enter.

Linked contentRepeats

Databases don't order rows unless you tell them so

There is no such thing as a "default order" of rows in database tables.

For instance, when you paginate a result set: When using LIMIT, it is important to use an ORDER BY clause that constrains the result rows into a unique order. Otherwise you will get an unpredictable subset of the query's rows. You might be asking for the tenth through twentieth rows, but tenth through twentieth in what ordering? The ordering is unknown, unless you specified ORDER BY.

In Rails, if you use Record.first or Record.last, it will default to orderin...


ActiveRecord: validate_uniqueness_of is case sensitive by default

By default, Rails' validates_uniqueness_of does not consider "username" and "USERNAME" to be a collision. If you use MySQL this will lead to issues, since string comparisons are case-insensitive in MySQL.

(If you use PostgreSQL, read this instead.)

Say you have a user model

class User < ActiveRecord::Base
  validates_uniqueness_of :name

with a unique index in the database.

If you try to create the users "user" and "USER", this will not trigger a validation error, but may fail with an SQL error due to d...


Large CSS box shadows can bring browsers to a crawl

Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Some advice:

  • Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other...

Rails: Removing the cucumber-rails warning when setting cache_classes to false without Spring enabled

We are using Spring in our tests for sequential test execution but not for parallel test execution. And Rails requires you to set the config.cache_classes = false if you are using Spring in tests.

With our setup, this would raise the following error in cucumber-rails Archive for parallel test executions due to some legacy database cleaner issue.

WARNING: You have set Rails' config.cache_classes to false
    (Spring needs cache_classes set to false). This is known to cause probl...

Working on the Linux command line: How to use bookmarks for directories

Bookmarks for directories will be most helpful if you are forced to work in deeply nested projects. Then it's really helpful!

This makes use of the CDPATH variable. Similar to the PATH variable, which holds the list of directories which are searched for executables, CDPATH contains the list of directories that are available for cd. Besides the current directory (.), you can add others to that.

The trick is to add a directory for bookmarks to CDPATH.

First, create the directory with: mkdir ~/.bookmarks.

Then add the followin...


Working on the Linux command line: How to efficiently navigate up

With cd .. you can navigate one directory up from the one you are at now. If you use that a lot, consider some handy aliases.

Add the following lines to your ~/.bashrc:

alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
alias .....="cd ../../../.."
alias ......="cd ../../../../.."

you can add even more aliases, but I usually loose track after too many levels and just jump to the directly directly, e.g. using its absolute path or its bookmark (see [this card](https://makandracards.com/makandra/504947-working-on-the-li...


Working on the Linux command line: Use the `tree` command instead of repeated `cd` and `ls`

The tree command will show you the contents of a directory and all it's sub directories as a tree:

├── a
│   ├── file_1.txt
│   └── file_2.txt
└── b
    ├── c
    │   └── even_more.txt
    └── more.txt

3 directories, 4 files

If you have deeply nested directories, the output will be quite long though. To avoid that, you can limit the depth, e.g. tree -L 2 will only go 2 directories deep.

If you use that regularly, consider adding aliases for that to your ~/.bashrc:

alias tree2='tree -L 2'
alias tree3='tree -L 3'...

Working on the Linux command line: How to bash `cd` with autocorrect

There is an option you can set so that when using the cd command, small typos are automatically corrected. Add the following to your ~/.bashrc:

# cd: autocorrect small typos and use best guess
shopt -s cdspell 


>cd Porjects

Also, I recommend adding aliases for your most common typos of commands you regularly use to your ~/bashrc. Which ones that are is highly personal, for me it's e.g. tig:

alias tog='tig'
alias tug='tig'

The many gotchas of Ruby class variables

TLDR: Ruby class variables (@@foo) are dangerous in many ways. You should avoid them at all cost. See bottom of this card for alternatives.

Class variables are shared between a class hierarchy

When you declare a class variable, it is shared between this and all descending (inheriting) classes. This is rarely what you want.

Class variables are bound at compile-time

Like unqualified constants, class variables are bound to your current scope *whe...

This website uses short-lived cookies to improve usability.
Accept or learn more