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...
Feature Queries (Edge 12+): Similar to @media queries, @supports blocks can be scoped to browsers that support a given declaration...
Why improve your code reviews? Improving code review technique helps your reviewer, your team, and, most importantly: you.
This card is mainly an explanation how variable fonts work in CSS, not necessarily a recommendation to actually use them...
The linked article compares two approaches for writing CSS: A component library (like BEM) Utility classes (like Tailwind)
CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS...
Chrome has a built-in utility to check performance and accessibility (and more) of your web app: Lighthouse.
We structure our CSS using the BEM pattern. Our naming convention for blocks, elements and modifiers has evolved over the...
CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...
Select2 is a fantastic library for advanced dropdown boxes, but it depends on jQuery. Alternatives Tom Select
CSS selectors are a very simple tool to select elements from a Nokogiri document. However, the colon in the XML...
To make CSS rules dependent on the screen size, we use media queries: @media (max-width: 500px) { // rules for screen...
When you have many changes, and you want to spread them across different commits, here is a way to stage...