Updated: Documenting your Rails project's Node.js version in .nvmrc

Posted 10 days ago by Henning Koch.
makandracards.com

We no longer use non-deterministic versions like lts/gallium. This is not supported by all tools. In particular asdf is...

Chaining Capybara matchers in RSpec

Posted 22 days ago by Henning Koch.

You can chain multiple Capybara matchers on the page or any element: expect(page) .to have_content('Example Course')

Accessibility: Making non-standard elements interactive

Posted 23 days ago by Michael Leimstädtner.
developer.mozilla.org

A common cause of non-accessible web pages are elements that were made interactive via JavaScript but cannot be focused...

Virtual scrolling: A solution for scrolling wide content on desktops

Posted 28 days ago by Tobias Kraze.

I recently built a screen with a very high and wide table in the center. This posed some challenges:

You should be using the Web Animations API

Posted About 1 month ago by Arne Hartherz.

The Web Animations API has great browser support, and you should be using it to animate DOM elements from JavaScript...

capybara-lockstep 2.2.0 released

Posted About 2 months ago by Henning Koch.
github.com

The capybara-lockstep gem synchronizes Capybara commands with client-side JavaScript and AJAX requests. This greatly improves the stability of...

How to display an unsaved changes alert

Posted About 2 months ago by Michael Leimstädtner.

All browsers implement an event named beforeunload. It is fired when the active window is closed and can be used...

In Chrome 121+ the now supported spec-compliant scrollbar properties override the non-standard `-webkit-scrollbar-*` styles

Posted About 2 months ago by Arne Hartherz.

Up until Chrome 120, scrollbars could only be styled using the various -webkit-scrollbar-* pseudo elements, e.g. to make the...

Use <input type="number"> for numeric form fields

Posted About 2 months ago by Arne Hartherz.

Any form fields where users enter numbers should be an . Numeric inputs have several benefits over : On mobile or tablet...

How to configure Selenium WebDriver to not automatically close alerts or other browser dialogs

Posted About 2 months ago by Arne Hartherz.

tl;dr We recommend configuring Selenium's unhandled prompt behavior to "ignore". When running tests in a real browser, we...

SASS: Adding, removing and converting units

Posted 2 months ago by Dominik Schöler.
sitepoint.com

Multiply by 1x the unit: $number = 13 $length = $number * 1px // => 13px Removing a unit

Livereload + esbuild

Posted 4 months ago by Tobias Kraze.

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

Javascript: Avoid using innerHTML for unsafe arguments

Posted 4 months ago by Emanuel.

Make sure that you use the correct property when editing an HTML attribute. Using innerHTML with unsafe arguments makes your...

A reasonable default CSP for Rails projects

Posted 4 months ago by Tobias Kraze.

Every modern Rails app should have a Content Security Policy enabled. Very compatible default The following "default" is a minimal...

How to work around selenium chrome missing clicks to elements which are just barely visible

Posted 6 months ago by Arne Hartherz.

Chromedriver (or selenium-webdriver?) will not reliably scroll elements into view before clicking them, and actually not click the element...

Lightning Talk: Coverage based Test Case Prioritization in Ruby on Rails

Posted 6 months ago by Felix Eschey.
github.com

For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra...

Minifying object properties in JavaScript files

Posted 7 months ago by Henning Koch.

An introduction to mangling When you minify ("compress", "optimize") your JavaScript for production, the names of your functions and variables...

How to transition the height of elements with unknown/auto height

Posted 7 months ago by Arne Hartherz.

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

Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis

Posted 7 months ago by Dominic Beger.

Note: You won't need this for single lines of text. In this case it is better to just use...

JavaScript has a native event emitter

Posted 8 months ago by Dominik Schöler.
stefanjudis.com

Suppose you want to implement a publish/subscribe pattern in your Frontend application to react to data changes and events. First...

How to find child nodes that match a selector with JavaScript

Posted 8 months ago by Arne Hartherz.

Using querySelector or querySelectorAll in JavaScript, you can easily find descendants of a node that match a given selector.

Code splitting in esbuild: Caveats and setup

Posted 8 months ago by Henning Koch.

TL;DR Still has caveats. Code splitting is a feature of JavaScript bundlers that can keep huge libraries out of...

Don't assert exceptions in feature specs

Posted 9 months ago by Michael Leimstädtner.

As we are slowly switching from Cucumber scenarios to RSpec feature specs, you might be tempted to write assertions like...

Preventing users from uploading malicious content

Posted 10 months ago by Henning Koch.

When you allow file uploads in your app, a user might upload content that hurts other users. Our primary concern...