tl;dr Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when...
tl;dr The strict-dynamic source list keyword allows you to simplify your CSP policy by favoring hashes and nonces...
The linked content describes: The different color space of Oklch and RGB/HSL (HDR colors) The advantage of Oklch when you...
If you want to to create maps within SASS/SCSS-files, it normally works like this: $some-map: (key1: value1, key2: value2...
Haml 6 was a major rewrite with performance in mind. To achieve a performance improvement of 1.7x, some design...
Capybara has a variety of finder methods like find_button to help you look up DOM elements. There are also...
When you use native smooth scrolling there is no built-in method to detect the end of the scrolling animation...
Let's say we have posts with an attribute title that is mandatory. Our example feature request is to tag...
SASS has an @extend keyword to inherit styles. .alert color: red &.-framed border: 1px solid red padding: 5px &.-homepage
This is a checklist I use to work on issues. For this purpose I extracted several cards related to the...
Rails partials have a lot of "hidden" features and this card describes some non-obvious usages of Rails Partials.
vertical-align is hard. Have you ever wanted to vertically center an icon with text? This usually means "vertically align...
Usually, design development starts with drafts, sketches and prototypes. These are reviewed, refined and iterated until the final design is...
To read the current breakpoint tier in JavaScript, employ this CSS: :root { --current-breakpoint-tier: xs; @media (min-width: $screen...
In a Jasmine spec you want to spy on a function that is imported by the code under test. This...
By default subscript ( ) and superscript ( ) tags are styled with vertical-align: sub, respectively vertical-align: super by most browsers.
The cards editor has a feature "Cite other card" to create links to other cards in the same deck as...
You have some SVG files you want to use as icons on your website. How would you embed them?
In esbuild, you usually import other files using relative paths: import './some-related-module' import `../../utils/some-utility-module` import `../../../css/some-css.sass` This is totally fine...
Jasmine specs for the frontend often need some DOM elements to work with. Because creating them is such a common...
Hide/Show Drawer You can press Escape to show/hide the drawer. Fast Navigation with Command Menu Use Ctrl + Shift + p to...
tl;dr In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including...
While in CSS zero is usually referenced without specifying a unit (e.g. padding: 0), you must not use a unitless...
One-line takeaways Don’t override native browser (or OS) shortcuts. Support standard shortcuts that don’t contradict the previous...