Setting SASS variables as value for CSS custom properties

When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable in your SASS environment. A pratical example would be a list of color variables that you've defined in colors.sass and that you would like to refer to in your stylesheets. However, simply assigning a variable will not work:

$my-great-blue: blue

:root
  --my-color: $my-great-blue

.sky
  background-color: var(--my-color)

The property value will not be valid and if you open the browser's inspection window, yo...

Headless Chrome: Changing the Accept-Language header is not possible

It seems like changing the HTTP_ACCEPT_LANGUAGE is not possible for a headless chrome.

  • On Ubuntu the headless Chrome derives the Accept-Language from the operation system
  • Adding the option options.add_argument('--lang=de') to the Capybara::Selenium::Driver has no effect
  • Adding the preference options.add_preference('intl.accept_languages', 'de') to the Capybara::Selenium::Driver has only effects if the --headless option is skipped (see bug ticket #775911)
  • Cha...

Selenium: Network throttling via Chromedriver

You can throttle the network in your headless chrome via Selenium. This might be useful for debugging issues with flaky integration tests or slow page simulations.

page.driver.browser.network_conditions = {offline: false, latency: 5, download_throughput: 2 * 1024, upload_throughput: 2 * 1024}

The settings will match to the following UI component in Chrome:

Image

Were the values for the default profiles might match the values from this post:

**S...

Use the Git stash without shooting yourself in the foot

The Git stash does not work like a one-slot clipboard and you might shoot yourself in the foot if you pretend otherwise.

In particular git stash apply does not remove the stashed changes from the stash. That means you will probably apply the wrong stash when you do git stash apply after a future stashing.

To keep your stash clean, you can use

git stash pop

instead.

Another way to look at it:

git stash pop 

is the same as

git stash apply && git stash drop

Notice: In case of a conflict git will not pop th...

Gatekeeping: Guide for developer

Note: This process is tailored to our specific needs and tools at makandra. While it will certainly not apply to all (especially larger teams), we think it is a helpful starting point. Compare also the Gatekeeping: Guide for gatekeeper card.


In order to reduce the number of rejects we get from clients, we want to review all code written before it goes to the staging server.

If your project manager wants to do gatekeeping o...

Yarn: if integrity check won't let you start rails console

I ran into a situation in which I received the yarn integrity check warning when starting the rails console even though everything was up to date and correct versions in use.

TLDR: run spring stop

I tried starting the rails console without switching to the correct node version first and received the yarn integrity warning.

warning Integrity check: System parameters don't match                                                                                     
error Integrity check failed                                         ...

Ruby: required keyword arguments in the pre-2.1 era

Starting with Ruby 2.0 you can define methods with keyword arguments.

In 2.1+ required keyword arguments can be defined by using a colon without default value:

def match(value, ignore:)
  # ...
end

To accomplish something similar in ruby 1.8, use:

def match(value, options = {})
  ignore = options.fetch(:ignore)
  # ...
end

How to avoid raising RestClient exceptions for 4xx or 5xx results

When using RestClient to make an HTTP request, it will raise an exception when receiving a non-successful response.
HTTP status codes like 422 or 403 might be totally expected when talking to APIs, so plastering your code with rescue RestClient::Exception or similar can feel annoying.

It may not be intuitive, but the readme says you can also pass a block to methods like RestClient.get or RestClient::Request.execute. In that case, RestClient will not raise ...

Capybara: Easiest way to get the parent of an element

If you already selected an element and want to get its parent, you can call find(:xpath, '..') on it.
To get the parents parent, call find(:xpath, '../..').

Example

Find a link which contains a twitter icon and check that it links to the correct page:

<a href="http://twitter.com/">
  <i class="icon is-twitter"></i>
</a>
link = page.find("a .icon.is-twitter").find(:xpath, '..')
link[:href].should == "http://twitter.com/"

There is a good overview on xpath syntax on [w3schools](https://www.w3schools.com...

Don't use migrations to seed default data

Don't insert table rows in a Rails database migration. This will break tests that expect that database to be empty and cause you all sorts of pain.

If you need a place for default application data, use db/seed.rb or put a script into lib/scripts. It won't run automatically, so add a chore story to Pivotal Tracker as a reminder.

GitHub Actions: Manually running a workflow

To start a workflow manually it must have a trigger called workflow_dispatch:

---
name: Tests
on:
  push:
    branches:
    - master
  pull_request:
    branches:
    - master
  workflow_dispatch:
    branches:
    - master  

In the Actions tab of your repo you can now select a workflow and press "Run Workflow".

See GitHub documentation for details.

GitHub Actions: Retrying a failing step

If you have a flaky command you can use the nick-invision/retry to re-try a failing command, optionally with a timeout:

---
...
jobs:
  test:
    ...
    steps:
    - name: Run tests
      uses: nick-invision/retry@v2
      with:
        timeout_seconds: 30
        max_attempts: 3
        command: bundle exec rake spec

How to: Ensure proper iconfont rendering with Webpack

Background

After switching a project from Sprockets to Webpack, I started observing a bug that was hard to debug: Our custom icon font could sometimes not be displayed until a full page reload.

Digging deeper the only difference before and after the page load was the encoding interpretation of the iconfont stylesheet:

Correct representation (UTF-8):

.icon:before {
    content: ""
}

Broken representation (other charset):
`...

Custom error pages in Rails

Basic error pages

To add a few basic styles to the default error pages in Rails, just edit the default templates in public, e.g. public/404.html.

A limitation to these default templates is that they're just static files. You cannot use Haml, Rails helpers or your application layout here. If you need Rails to render your error pages, you need the approach below.

Advanced error pages

  1. Register your own app as the applicatio...

Find an ActiveRecord by any column (useful for Cucumber steps)

The attached patch lets you find a record by a string or number in any column:

User.find_by_anything('carla')
User.find_by_anything('email@domain.de')
User.find_by_anything(10023)

There's also a bang variant that raises ActiveRecord::NotFound if no record matches the given value:

User.find_by_anything!('carla')

Boolean and binary columns are excluded from the search because that would be crazy.

I recommend copying the attachment to features/support/find_by_anything.rb, since it is most useful in Cucumber step def...

How to checkout submodules in Gitlab CI

Accessing other repositories in Gitlab CI is not straight forward, since the access rights of the current pipeline might not be sufficient enough.

One approach is to use project access tokens and clone the repositories via HTTPS.

  • Create a project access token for all submodules you want to have access to with the setting read_repository
  • Add the secrets as environment variable to the main project you want to have access to submodules:
    • Protected false ...

Git: Show commits that have touched specific text in a file

If you want to find the commits that touched a specific text in a file, use

git log -S 'text in the code' -- path/to/file

If you use tig you may run a similar command to get a navigatable list of affected files:

tig -S'text in the code'

Example

Here is an example, where the move of the convert_number_column_value(value) method in active record is traced (simplified output):

git log -n 1 --pretty=oneline -S 'convert_number_column_value(value)' -- activerecord/lib/active_record/base.rb
ceb33f84933639d3b6...

Undefined method log for Selenium::WebDriver::Remote::W3C::Bridge

In case your integration tests crash with a message like below, try to upgrade Capybara to a newer version (3.35.3 was good enough). You might encounter this issue when you enabled the w3c option in Selenium.

undefined method `log' for #<Selenium::WebDriver::Remote::W3C::Bridge:0x000055995647ded0>

Your affected code might look similar to this call below and will work after the upgrade again.

Upgrading Capybara with deprecated Integer selectors

Capybara added a deprecation warning in version 3.35.3 (version from 2019) that shows up if your selector is not of type String or Symbol.

Example:

click_link(10) # bad
click_link("10") # good

You might encounter this error e.g. in a pagination step or similar where you want to click on numbers. To figure out where this deprecation warning comes from try to run the tests with a step output.

bundle exec parallel_cucumber --test-options "--format=pretty" feature

The deprecation message looks like following:

Locator In...