An element with display: grid can define its grid-template-columns based on (preferred) child width using the repeat function...
Table Of Contents Flexbox wrapping Spacing Long content Prevent an image from being stretched or compressed Lock scroll chaining
Modern versions of Capybara include a finder method #ancestor which allows you to find a parental element using CSS or...
Basic validations Read the Rails Guide on ActiveRecord Validations. You should have an overview which kinds of validations are built...
You want to use fields in your applications. However, your desktop users may encounter some weird quirks: Aside from allowing...
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look...
Event delegation is a pattern where a container element has a single event listener that handles events for all descendants...
Besides their default styling properties, HTML elements have a semantic meaning. For example, an h1 tag is usually styled with...
Most browsers have built-in drag and drop support for different page elements like text and images. While this may...
age is a simple, modern and secure file encryption tool, format, and Go library. It features small explicit keys, no...
The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like...
Often people need links which are not linked directly, but should trigger execution of JavaScript. ❌ Bad workarounds
The need for clearfix hacks has been greatly reduced since we could layout with Flexbox or CSS Grid.
You can scale background images in CSS to the container size using background-size (Demo). Commonly, we use contain or...
When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable...
After switching a project from Sprockets to Webpack, I started observing a bug that was hard to debug: Our...
Webpack builds can take a long time, so we only want to compile when needed. This card shows what will...
The attached article examines what the percent unit (%) is relative to in CSS The article does a great job of...
Ruby 3.0 introduced a breaking change in how it treats keyword arguments. There is an excellent blog post on the...
When you have a hex color code, you can easily convert it into its RGB values using plain Ruby.
Browsers blocks abusable JavaScript API calls until the user has interacted with the document. Examples would be opening new tab...
Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...
Rails 6 includes a WYSIWYG editor, Action Text. It works out of the box quite well, but chances are that...
Rails supports alert and notice as default flash types. This allows you to use these keys as options in e.g...