Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery

Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements.

let style = window.getComputedStyle(element, '::before')
let color = style.getPropertyValue('background-color...

There are two ways to lock a user in devise.

1. Using the lockable module
2. Customizing the user account status validation when logging in.

It depends on your requirements which methods works best.

Locking a user on soft delete

We recommend to use option 2 when you want to couple the lock to the m...

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that.

For example, consider a DOM node for the following HTML. We'll reference it by $element below.

<div class="example is-amazing is-wonderful"></div>

Option A: Selecting classes, then removing them

You can iterate over existing classes, and select matching ones. The example below is ES6, on ES5 could write something similar using jQuery.grep.

let classes ...

When you are using lambdas in RSpec to assert certain changes of a call, you know this syntax:

expect { playlist.destroy }.to change { Playlist.count }.by(-1)

While you can define multiple assertions through multiple specs, you may not want to do so, e.g. for performance or for the sake of mental overhead.

Multiple expectations on the same subject

RSpec allows chaining expectations simply by using and.

expect { playlist.destroy }
  .to change { Playlist.count }.by(-1)
  .and not_change { Video.count }

...

Percent Notation

We already know that that we can create strings using the percent notation:

%(<foo="bar's ton">) is perfectly fine Ruby.

Modifier

But there is more. The curly brackets ({}) are interchangable with most unicode characters (e.g. square brackets[]).
Furthermore, you can add a "modifier" to the percent notation to control the return type of th...

Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an Android or iOS phone. Some desktop OSs like Windows or MacOS also support native share dialogs. See Can I Use for a detailed support matrix.

When clicking a share button using this API, the browser will automatically show all installed applications that support content sharing, such as Whatsapp, Facebook, Twitter, e-mail etc.

The API is extremely simple to use:

if ...

Geordi uses parallel_tests if available for running the test suite. To debug an application it is very unhandy to have multiple processes as your terminal I/O will not work as expected once a breakpoint is hit.

Even parallel_tests support an option to enable a single process run, it is not possible to pass this option through geordi. But you can set the number of processes via ENV variable manually:

PARALLEL_TEST_PROCESSORS=1 bundle exec geordi cucu...

It is possible to access Rails config (for example secrets) from within your webpack bundles, thanks to rails-erb-loader. When using webpacker, the setup is like this:

1. Install rails-erb-loader:

   yarn add rails-erb-loader
   

2. Add this to your config/webpacker/environment.js:

   environment.loaders.prepend('erb', {
     test: /\.erb$/,
     enforce: 'pre',
     use: [{
       loader: 'rails-erb-loader',
     }]
   })
   

3. Start using erb. For examp...

When debugging your application, you will come across objects created by some gem or framework. You don't have the source code at hand, still need to inspect this object. Here are some tools to do so:

Relevant methods

@object.methods - Object.instance_methods returns a list of methods excluding methods inherited from Object. This makes the methods list drastically more relevant. You can also try subtracting other base classes like ActiveRecord::Base.methods etc.
To further narrow it down you can also just look at public methods...

Font Awesome 5 is a comprehensive solution for vector icons on your website.

Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline <svg> tags), or even as SVG sprites.

All solutions have their pros and cons:

Icon font:

• little CPU load (no JavaScript)
• fonts are relatively large
• 1 extra HTTP request

Javascript + inline SVG:

• higher CPU load (needs to watch the DOM via mutation observers to ad...

S3cmd is a free command line tool and client for uploading, retrieving and managing data in Amazon S3. S3cmd reads its configuration by default from ~/.s3cfg, which is created once you run s3cmd --configure.

If you have many configurations, we recommend to always specify the configuration you want to use. This prevents applying actions to the wrong bucket.

Examples:

s3cmd -c ~/.s3cfg-github-staging ls
s3cmd -c ~/.s3cfg-github-development ...

There seems to be no built-in matcher in RSpec to check if a string contains terms in the desired order. A simple workaround is to use a regular expression that also matches newlines (m-modifier).

Cons:

• The readability when terms need to be escaped is bad
• A failed spec has an error which needs manually action to be understood (Search if terms appear and in which order)

Example:

expect(ActionMailer::Base.last.to_s).to match(/Dear customer.*Account canceled.*You Awesome Company/m)

In this example we assume that not only the storage gem changes but also the file structure on disc.

A general approach

Part A: Create a commit which includes a script that allows you to copy the existing file to the new file structure.

Part B: Create a commit which removes all paperclip logic and replace it with the same code you used in the first commit

Part A

Here are some implementation details you might want to reuse:

• Use the existing models to read the files from
• Use your own carrierwave models to write t...

Masonry is a famous library to dynamically arrange a grid of items that have different aspect ratio, like horizontal and vertical images.
Colcade is an alternative masonry-layouting library, developed by the same developer, but with a more modern approach.

It is said to have better performance while being smaller and having no dependencies. It automagically detects jQuery and defines a jQuery initializer, if present.
However, it offers [a few less features](https:...

For Sidekiq to be able to retry your jobs it has to be able to catch errors that occur while a job is executed.

Per default, Sidekiq will not raise / notify you if the retry count is exhausted. It will only copy the job to the dead queue (see wiki).

If you want to get notified, you have to implement it in your worker explicitly with a sidekiq_retries_exhausted-block, e.g. like this:

class DownloadWorker
  include Sidekiq::Worker

  # Import jobs are retried a few time...

Background

Cross-Site Request Forgery (CSRF) is an attack pattern for websites. A CSRF attack is usually relevant in a browser context, where state is kept for multiple domains (as opposed to independent requests made e.g. with curl). The most common example is authentication via cookies. If a script on https://example.com made requests to https://docs.google.com, the browser would send all cookies for docs.google.com along, effectively given the script access to anythin...

A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you to miss errors in your frontend code.

Using the BrowserConsole helper below you can check your browser's error console from your E2E tests.

The following will raise BrowserConsole::ErrorsPresent if there is an error on the browser console:

BrowserConsole.assert_no_errors!

Ignoring errors

You can ignore errors by their exact message:

BrowserConsole.ignore('Browser is burning')

You can ignore errors with me...

Geordi provides a pretty neat way to generate beautiful commit messages according to your stories in Linear:

geordi commit

Geordi reads from a .geordi.yml file inside your repo and connects to Linear to list started and finished stories with their title. Choosing one of them generates a commit message including id and title from Linear app and a link to the original issue. For example:

[VW-1337] CRUD Users

Issue: https://linear.app/makandra/issue/VW-1337/crud-user...

Geordi's cucumber command has a --rerun option that reruns failing tests the given number of times. Usage:

geordi cucumber path/to/features --rerun=2
geordi cucumber path/to/features -r2

Background and how to rerun manually

Cucumber will save a file tmp/parallel_cucumber_failures.log containing the filenames and line number of the failed scenarios after a full test run. Normally you can say cucumber -p rerun (rerun is a profile defined by default in config/cucumber.yml) to rerun all failed scenarios.

Here are a few al...

HTML's <input type="file"> accepts a single file. You can allow multiple files via <input type="file" multiple>.
But sometimes, selecting multiple files is not enough and can be cumbersome for the user. Enter webkitdirectory:

<input type="file" webkitdirectory multiple>

Using webkitdirectory switches the browser's file picker to select a directory. All files inside that directory, and inside any nested subdirectories, will be selected for the file input.

This can be useful when users want to upload all files from a nested dire...

If you use transactional_fixtures or the database_cleaner gem with strategy :transaction, after_commit callbacks will not be fired in your tests.

Rails 5+

Rails 5 has a fix for this issue and no further action is needed.

Rails 3, Rails 4

Add the gem test_after_commit to your test group in the Gemfile and you are done. You don't need to change the database strategy to deletion (wh...

If validations failed for a record, and you want to find out if a specific validation failed, you can leverage ActiveModel's error objects.
You rarely need this in application code (you usually just want to print error messages), but it can be useful when writing tests.

As an example, consider the following model which uses two validations on the email attribute.

class User < ApplicationRecord
  validates :email, presence: true, uniqueness: true
end

Accessing errors

Let's assume we have a blank user:

user = Us...

Restricting access to cookies is essential for security in many web apps. For example, the session ID, the secret token used to identify a particular session, is typically stored in a cookie. Cookies have several important settings. Previously, I discussed the secure flag. This time, let’s dive into the cookie domain.

The cookie domain is an important security feature, probably even more important than the secure flag. It tells the browser that this cookie must only be sent to matching domains. Matching however, can happen in several w...