Open UI: Future development in web components and controls
tl;dr When browsers start to adapt proposals from Open UI, it might not be necessary to use any 3rd...
Updated: Documenting your Rails project's Node.js version in .nvmrc
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
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
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
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
The Web Animations API has great browser support, and you should be using it to animate DOM elements from JavaScript...
How to display an unsaved changes alert
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
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
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
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
Multiply by 1x the unit: $number = 13 $length = $number * 1px // => 13px Removing a unit
Livereload + esbuild
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
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
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
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
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
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
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
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
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
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
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
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
When you allow file uploads in your app, a user might upload content that hurts other users. Our primary concern...