3977 cards

Using ngrok for exposing your development server to the internet

Sometimes you need to access a dev server running on localhost from another machine that is not part of the same network. Maybe you want to use your phone to test a web page, but are only in a guest WiFi. In the past, we often used some port forwarding or other techniques to expose the service to the internet.

Enter ngrok, a command line tool that gives you an on-the-fly internet...


Collect all values for a given column in an ActiveRecord scope

In modern Rails versions you can also use ActiveRecord's pluck Archive method.

>> User.active.pluck(:id)
=> [1, 5, 23, 42]

If you are plucking from the id column in particular you can also say:

>> User.active.ids
=> [1, 5, 23, 42]

For a DISTINCT selection, use distinct on your scope (not the resulting array).

>> Article.distinct.pluck(...

Does <html> or <body> scroll the page?

Scrolling overflowing elements with JavaScript

HTML elements with overflow-y: auto or overflow-y: scroll will get a scrollbar when their content is higher than their own height.

When you scroll an element , the element's scrollTop property is updated with the scrollbar's new position. You can also set element.scrollTop = 30 to scroll the element to a vertical pixel position counted from the top.

Scrolling the main viewport with JavaScript

The browser's main document viewport is also scrollable by default. The element that ...

Trigger a link's click action with Javascript

Use the click method on the DOM element:

let link = document.querySelector('a')

RSpec: Inferring spec type from file location

RSpec Rails can automatically mix in different behaviors to your tests based on their type tag, for example enabling you to call get and
post in specs with the tag type: :request.

Alternatively you can skip these tags by setting the config config.infer_spec_type_from_file_location! in the spec_helper.rb. This will automatically choose the right type context based on the file location Archive of the test.

For instan...


Rails 6.1: where.not changes behaviour from NOR to NAND

Since Rails 6.1, if we use where.not with multiple attributes, it applies logical NAND (NOT(A) OR NOT(B)) instead of NOR (NOT(A) AND NOT(B)). If you do not take care, this change will increase the matched set.


"Don't send newsletters neither to admins nor to trashed users!" becomes "Don't send newsletters to trashed admins".

User.where.not(role: 'admin', trashed: true)
# Before Rails 6.1, with NOR
=> "SELECT "users".* FROM "users" WHERE "users"."role" != 'admin' AND "users"."trashed" != TRUE"
# Equivale...

RSpec: Define negated matcher

You can use RSpec::Matchers.define_negated_matcher to define a negated version of an existing matcher.

This is particularly useful in composed matcher expressions or to create more expressive and meaningful matchers.


RSpec::Matchers.define_negated_matcher :not_change, :change

describe 'A negated matcher' do
  it 'can be used to chain negated changes' do
    expect { subject.maybe_change(object) }
      .to not_change(object, :attr_1)
      .and not_change(contract, :attr_2)

Browsers will not send a referrer when linking from HTTPS to HTTP

  • When your site is on HTTPS and you are linking or redirecting to a HTTP site, the browser will not send a referrer.
  • This means the target site will see your traffic as "direct traffic", i.e. they cannot distinguish such hits from a user who directly typed in the URL.

Reasons for this behavior

It's probably because of this RFC Archive :

Clients SHOULD NOT include a Referer header field in a (non-secure) HTTP request if the referring page was transferr...


Ruby: Using named groups in Regex

An alternative of using a multiple assignment for a Regex are named groups. Especially when your Regex becomes more complicates it is easier to understand and to process.


  • In case a string does not match the pattern, .match will return nil.
  • With Ruby 2.4 the result of .match can be transformed to a Hash with named_captures. This allows you to use methods like slice or fetch on the result.

Example with a mult...


PostgreSQL and its way of sorting strings

PostgreSQL uses the C library's locale facilities for sorting strings:

  • First, all the letters are compared, ignoring spaces and punctuation.
  • It sorts upper and lower case letters together. So the order will be something like a A b B c C
  • Then, spaces and punctuation are compared to break ties.


Ruby PostgreSQL
IMAGE3.jpg image2.jpg
image.jpg image3.jpg
image2.jpg IMAGE3.jpg
image3.jpg image.jpg

[PostgreSQL-FAQ: Why_do_my_strings_sort_incorrectly](https://wiki.postgresql.org/w...

Linked content

CSS Grid Display allows defining number of grid columns based on child width

An element with display: grid can define its grid-template-columns based on (preferred) child width using the repeat function with auto-fill or auto-fit, like so:

grid-template-columns: repeat(auto-fit, 100px)

auto-fill and auto-fit behave differently if you use rules with dynamic sizing, like minmax(100px, 1fr). Simply put, auto-fill will create as many columns as possible, including empty ones, while auto-fit hides empty columns.

See the linked page for more details.

Linked contentAuto-destruct in 22 days

Unpoly 2.5.0 released

This is a maintenance release while we're working on the next major feature update.

  • The event up:form:submit Archive has a new property { submitButton }. It points to the <button> or <input> element used to submit the form, if the form was submitted with a button.
  • The event up:form:submit Archive has a new property { params }. It points to an editable up.Params Archive object for the form's data payload.
  • Fix a bug where [[up-validate]](ht...
Linked content

Defensive CSS

Table Of Contents

  • Flexbox wrapping
  • Spacing
  • Long content
  • Prevent an image from being stretched or compressed
  • Lock scroll chaining
  • CSS variable fallback
  • Using fixed width or height
    • The fixed height
    • The fixed width
  • Forgetting background-repeat
  • Vertical media queries
  • Using justify-content: space-between
  • Text over images
  • Be careful with fixed values in a CSS grid
  • Show a scrollbar only when it's needed
  • Scrollbar gutter
  • Minimum content size in CSS flexbox
  • Minimum content size in CSS grid
  • Auto fit vs auto...

Selector for finding the currently selected option in a <select> tag

Use option:checked to find the currently selected option:


Yes, :checked, not :selected.

This is the same as finding an option with the { selected: true } property in JavaScript:

select.querySelectorAll('option').find((option) => option.selected)

What about the selected attribute?

Note that option[selected] would only find an <option selected> tag. This may be the selected option right after loading the page, but not once the user switched to a different value. ...


RSpec: How to aggregate failures

RSpec >= 3.3 added aggregate_failures Archive , which allows multiple failures in an example and list them all, rather than aborting on the first failure.

This can be used:

  • In the global configuration
  • With the tag :aggregate_failures (our preferred option in case every expectations should be aggregated)
  • With the method aggregate_failures

Below is an example, which shows why aggregating failures are useful.


aggregate_failures do

Don't compare datetimes with date ranges in MySQL and PostgreSQL

When selecting records in a date range, take care not to do it like this:

start_date = Date.parse('2007-05-01')
end_date = Date.parse('2007-05-31')
LogItem.where(:created_at => start_date .. end_date)

The problem is that created_at is a datetime (or Time in Ruby), while start_date and end_date are simple dates. In order to make sense of your query, your database will cast your dates to datetimes where the time component is 00:00:00. Because of this the query above will lose records created from `2007-05-31 00:...

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