The Web Animations API has great browser support, and you should be using it to animate DOM elements from JavaScript, or to control or wait for CSS animations.

Here is a quick overview of a few useful features:

Animating elements from JavaScript

Use the Element#animate() function to perform animations on an element.

Its API probably a bit different from how your...

Up until Chrome 120, scrollbars could only be styled using the various -webkit-scrollbar-* pseudo elements, e.g. to make the scrollbars have no arrows, be rounded, or with additional margin towards their container.

Starting with version 121, Chrome now also supports the spec-compliant properties scrollbar-width and scrollbar-color.
These allow less styling. You may only specify the track and thumb colors, and a non-specific width like auto, thin, or none.

If you have an element with significant border-radius (e.g. 50% for a circle) and you want inline content (i.e. text) to flow around it, do it like this:

• Place the element right before the text and float: right or float: left
• Tell the browser to take the content-box for the element's shape, i.e. without margin, padding and border. shape-outside: content-box
• Set the margin where you want it, e.g. 10px left and bottom
• Set the shape-margin to the same size ...

Getting CSS (and JS) live reloading to work in a esbuild / Rails project is a bit of a hassle, but the following seems to work decently well.

We assume that you already use a standard "esbuild in Rails" setup, and have an esbuild watcher running that picks up your source code in app/assets and compiles to public/assets; if not change the paths below accordingly.

Basic idea

We will

• use the guard-livereload gem as the livereload server (which send updates to the browser),
• use the livereload-js npm package in the browser to con...

Every modern Rails app should have a Content Security Policy enabled.

Very compatible default

The following "default" is a minimal policy that should

• "just work" for almost all applications
• give you most of the benefits of a CSP

In your config/initializers/content_security_policy.rb, set

Rails.application.config.content_security_policy do |policy|
  policy.object_src :none
  policy.script_src :unsafe_eval, :strict_dynamic, :https # Browsers with support for "'strict-dynamic'" will ignore "https:"
  po...

The recommended additional setup of the spreewald gem, a useful set of cucumber steps, includes adding a file for defining custom selectors which can be used as prose within steps:

When I follow "Edit" within the controls section

Where the controls section can be any arbitrary defined css selector within selectors.rb

Often it can be useful to select the nth element of a specific selector. Luckily, this can ...

If you want to collapse/expand elements with dynamic content (and thus unknown height), you can not transition between height: 0 and height: auto.

Doing it properly, with modern CSS features

In the past, you might have resorted to bulky JavaScript solutions or CSS hacks like transitioning between max-height: 0 and max-height: 9999px. All of them were awkward and/or have several edge cases.

With modern CSS, there is actually a way to do it properly:
Just use a display: grid container which transitions its grid row height betwe...

TL;DR:

Grid elements have min-width: auto in a 1fr column, which may lead to overflows. With minmax(0, $width) you can reset the min-width.

Say you have a simple grid layout:

.container
  .first-item
  .second-item
  .third-item

.container
  display: grid
  grid-template-columns: 100px 1fr 100px

Your expectation is now that

• the first item will be located on the left hand side with a fixed width of 100px
• the third item will be located on the right hand side, also with a width of 100px
• ...

Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate long texts

You can use -webkit-line-clamp in your CSS/SASS to natively render an ellipsis (...) after a specific amount of lines for a multi-line text in your HTML.
Earlier, it was necessary to implement JavaScript solutions like Superclamp.js to enable this because the browser support has been rather limited...

So you have a heading that is just barely wider than the container it should fit into, and it wraps a single word to a new line and it's not really pretty?
Cry no more, for you can use text-wrap: balance today to fix that. At least in some browsers.

When browsers encounter a text-wrapping element with text-wrap: balance style, they will try breaking to a new line sooner, if it balances out the width of lines.

Without text-wrap: balance	With text-wrap: balance
	![...

We have a long-standing checklist for merge requests. However, it hardly matches the intricate requirements for design. This checklist fills the gap.

Before starting implementing, look at all designs: are there components similar to yours? Have they already been implemented? Can you build on this prior art when implementing yours?

Checklist: I confirm my design implementation

• has been tested manually by me
• adheres to the code style of the project (e.g. BEM)
• avoids "magic numbers" (don't say e.g. ...

Within Capybara you most certainly use the #check- and #uncheck-method to (un)check checkboxes.
But there's one problem, if you want to test a custom styled checkbox, which hides its <input>-Tag:

• The methods cannot (un)check checkboxes without an visible <input>.
• The error message will be something like: Unable to find visible checkbox "Some label" that is not disabled

Solution 1

Use the keyword argument allow_label_click: true within the method call.
So instead of check('Some label'), use `check('Some label', allow...

Every Rails response has a default ETag header. In theory this would enable caching for multiple requests to the same resource. Unfortunately the default ETags produced by Rails are effectively random, meaning they can never match a future request.

Understanding ETags

When your Rails app responds with ETag headers, future requests to the same URL can be answered with an empty response if the underlying content ha...

tl;dr

Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when applying multiple transformations and/or when animating transforms.

For ages, CSS transforms had to be defined using the transform property. For a single transformation, this was something like transform: scale(1.5), and multiple transformations could be applied by chaining them.

.example {
  transform: scale(1.5) rotate(45deg) translateY(-50%);
}

All modern browsers (Chrome & Edge ...

Let's say we have posts with an attribute title that is mandatory.

Our example feature request is to tag these posts with a limited number of tags. The following chapters explain different approaches in Rails, how you can assign such an association via HTML forms. In most cases you want to use Option 4 with assignable values.

The basic setup for all options looks like this:

config/routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts, except: [:show, :destroy]
end

**db/migrate/...

To read the current breakpoint tier in JavaScript, employ this CSS:

:root {
  --current-breakpoint-tier: xs;
  
  @media (min-width: $screen-sm-min) {
    --current-breakpoint-tier: sm;
  }
  @media (min-width: $screen-md-min) {
    --current-breakpoint-tier: md;
  }
  @media (min-width: $screen-lg-min) {
    --current-breakpoint-tier: lg;
  }
  @media (min-width: $screen-xl-min) {
    --current-breakpoint-tier: xl;
  }
  @media (min-width: $screen-xxl-min) {
    --current-breakpoint-tier: xxl;
  }
}

Then use this JavaScript: