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...
tl;dr The Chrome DevTools are a neat collection of tools for the daily work as a web developer. If...
sass >= 1.35.0 has the option quietDeps and silenceDeprecations to silence deprecation warnings from dependencies. quietDeps: No deprecation warnings for dependencies...
When writing a Sass function, you may run into an error message that may be confusing: @function rules may not...
You can use ETags to allow clients to use cached responses, if your application would send the same contents as...
Here are a few common patterns that will probably lead to flaky specs. If you notice them in your specs...