When you query the browser for DOM elements, there are some footguns you should know about. Some lists are synchronized...
A simple web tool for generating lighter (tints) and darker (shades) versions of any HEX color value. Tip
Compatibility: Angular 20+ with Jasmine 5.x and Karma 6.x As a default Angular CLI auto-generates test bootstrap...
You want to prevent input to a form field, but all the solutions have side effects: The [readonly] attribute is...
The File System Access API is a new capability of modern browsers that allows us to iterate over selected folders...
Quick reference for passing data from Rails to JavaScript via Unpoly compilers. Haml Attribute Syntax # Ising hash rockets and string...
Quick guide for frequently used compiler selector patterns of Unpoly. 1. BEM Component Pattern When: Reusable UI components with multiple...
Note Compiling Sass is probably the slowest part of your build, so this is worth a try if you're...
prettier calls itself an opinionated code formatter. I recommend using it for your JavaScript and TypeScript code. prettier only concerns...
navigator.sendBeacon is a way to reliably send a POST request, even on unload. Please note, however, that there are generally...
If you run a Rails app that is using Turbo, you might observe that your integration tests are unstable depending...
The linked MDN article is quite informative of a neat feature supported by all major browsers: Unicode character class escape...
SimpleForm comes with an option browser_validations which could be used to give fields that have a presence validation the...
Currently we often use geordi to run cucumber and rspec tests. Geordi takes care of installing a matching chromedriver for...
Frontend performance and user experience are orthogonal to feature development. If care is not taken, adding features usually degrades frontend...
Modern CSS offers the field-sizing property to allow elements to automatically adjust size (width and/or height) to fit their...
When you repeat complex assertions in your tests multiple times, it might be a good idea to extract a custom...
You can report CSP violations to Sentry. Within config/initializers/content_security_policy.rb: Rails.application.configure do config.content_security_policy do |policy| # Settings for the policy...
We usually ship applications that self-host webfonts to comply with GDPR. Many popular web fonts are available as NPM...
tl;dr Set profile.password_manager_leak_detection to false in your Selenium Chrome options to disable password leak detection and...
Use these snippets when you want to measure yourself. Currently available: Core Web Vitals Largest Contentful Paint (LCP) Largest Contentful...
It can be hard to understand what causes a browser scroll smoothly or instantly. CSS, JavaScript and the browser settings...
Say you wrap your index view in a form to apply different filters like pagination or a search query. On...
To apply transparency to an element, you can use opacity in CSS. However, sometimes you don't want to make...