Grid by Example: a website about CSS Grid

Posted About 1 month ago by Dominik Schöler.
gridbyexample.com

Rachel Andrew has built a website about CSS Grid. Video tutorials More than 30 layout examples for feature demonstration

You should be using the Web Animations API

Posted 2 months ago by Arne Hartherz.

The Web Animations API has great browser support, and you should be using it to animate DOM elements from JavaScript...

Updated: In Chrome 121+ the now supported spec-compliant scrollbar properties override the non-standard `-webkit-scrollbar-*` styles

Posted 2 months ago by Fabian Schwarz.
makandracards.com

It is still possible to style the -webkit-scrollbar-* pseudo elements in Chrome 121+. However the now supported spec-compliant...

In Chrome 121+ the now supported spec-compliant scrollbar properties override the non-standard `-webkit-scrollbar-*` styles

Posted 2 months ago by Arne Hartherz.

Up until Chrome 120, scrollbars could only be styled using the various -webkit-scrollbar-* pseudo elements, e.g. to make the...

SASS: Adding, removing and converting units

Posted 3 months ago by Dominik Schöler.
sitepoint.com

Multiply by 1x the unit: $number = 13 $length = $number * 1px // => 13px Removing a unit

CSS: Letting text flow around a round element

Posted 3 months ago by Dominik Schöler.

If you have an element with significant border-radius (e.g. 50% for a circle) and you want inline content (i.e...

Livereload + esbuild

Posted 4 months ago by Tobias Kraze.

Getting CSS (and JS) live reloading to work in a esbuild / Rails project is a bit of a hassle, but...

List of default browser stylesheets

Posted 5 months ago by Henning Koch.
bitsofco.de

Even when you app has no CSS at all, you still inherit a default user agent stylesheet from your browser...

A reasonable default CSP for Rails projects

Posted 5 months ago by Tobias Kraze.

Every modern Rails app should have a Content Security Policy enabled. Very compatible default The following "default" is a minimal...

RSpec: Leverage the power of Capybara Finders and Matchers for view specs

Posted 6 months ago by Felix Eschey.
thegnar.com

View specs are a powerful tool to test several rendering paths by their cases instead of using a more costing...

Spreewald, Cucumber: Selector for the nth element

Posted 6 months ago by Felix Eschey.

The recommended additional setup of the spreewald gem, a useful set of cucumber steps, includes adding a file for defining...

Lightning Talk: Coverage based Test Case Prioritization in Ruby on Rails

Posted 7 months ago by Felix Eschey.
github.com

For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra...

How to transition the height of elements with unknown/auto height

Posted 8 months ago by Arne Hartherz.

If you want to collapse/expand elements with dynamic content (and thus unknown height), you can not transition between height: 0...

How to prevent a 1fr grid column overflow

Posted 8 months ago by Dominic Beger.

TL;DR: Grid elements have min-width: auto in a 1fr column, which may lead to overflows. With minmax(0...

Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis

Posted 8 months ago by Dominic Beger.

Note: You won't need this for single lines of text. In this case it is better to just use...

Balance your texts today with text-wrap: balance

Posted 9 months ago by Arne Hartherz.

So you have a heading that is just barely wider than the container it should fit into, and it wraps...

Checklist for Implementing Design

Posted 9 months ago by Dominik Schöler.

We have a long-standing checklist for merge requests. However, it hardly matches the intricate requirements for design. This checklist...

Allow capybara to click on labels instead of inputs for checkboxes

Posted 10 months ago by Max E..

Within Capybara you most certainly use the #check- and #uncheck-method to (un)check checkboxes. But there's one problem...

Rails: Fixing ETags that never match

Posted 11 months ago by Henning Koch.

Every Rails response has a default ETag header. In theory this would enable caching for multiple requests to the same...

Modern CSS supports individual transform properties

Posted 11 months ago by Arne Hartherz.

tl;dr Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when...

CSP: strict-dynamic

Posted 11 months ago by Julian.
content-security-policy.com

tl;dr The strict-dynamic source list keyword allows you to simplify your CSP policy by favoring hashes and nonces...

Rails: Assigning associations via HTML forms

Posted 12 months ago by Emanuel.

Let's say we have posts with an attribute title that is mandatory. Our example feature request is to tag...

CSS: CSS Container Queries

Posted About 1 year ago by Emanuel.
developer.mozilla.org

Container queries enable you to apply styles to an element based on the size of the element's container. If...

How to read the current breakpoint tier(s) in JavaScript

Posted Over 1 year ago by Dominik Schöler.

To read the current breakpoint tier in JavaScript, employ this CSS: :root { --current-breakpoint-tier: xs; @media (min-width: $screen...