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...
The currentColor CSS keyword references the current text color and can be used to apply an element's text color...
The :nth-child pseudo class is commonly used for targeting elements based on their position within a parent container, for...
For Selenium tests, your browser starts in your local timezone, or whatever your system's environment specifies. This is usually...
Here is a workaround for when you want to use text-wrap: balance but must also render nicely for browsers...
DirectUpload allows you to upload files to your file storage without having to wait for the form to submit. It...
When debugging slow SQL queries, it’s helpful to understand the database engine's query plan. Whenever you execute a...