We structure our CSS using the BEM pattern. Our naming convention for blocks, elements and modifiers has evolved over the...
PhantomJS is a minimalistic headless WebKit. It has fast and native support for various web standards: DOM handling, CSS selector...
Event delegation is a pattern where a container element has a single event listener that handles events for all descendants...
The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the...
For outputting a given String in HTML, you mostly want to replace line breaks with or tags.
You probably know that you can use CSS selectors to match against elements and their attributes, such as:
jQuery comes with .animate() that lets you transition some CSS selectors: function floatIn($element) { $element.css({ 'opacity': 0, 'margin-top': 200px...
This is a presentation from 2019-01-21. Summary We want to move away from jQuery in future projects
To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website...
RSpec let's you chain a matcher with .or. The expectation will then pass if at least one matcher matches...
We usually ship applications that self-host webfonts to comply with GDPR. Many popular web fonts are available as NPM...
The Capybara API is somewhat hard for parse for a list of methods you can call on a Capybara node...
When you print (or print preview) and elements are cut off (e.g. after 1st page, or "randomly") you should check...
Modern CSS offers the field-sizing property to allow elements to automatically adjust size (width and/or height) to fit their...
The Web Animations API has great browser support, and you should be using it to animate DOM elements from JavaScript...
Container queries enable you to apply styles to an element based on the size of the element's container. If...
Besides their default styling properties, HTML elements have a semantic meaning. For example, an h1 tag is usually styled with...
With ngAnimate, you can easily animate certain events (see directive support). We'll make use of ngClass animations to style...
This is useful if, for example, you want to use a background-image that has to scale with the width...
This are the steps I needed to do to add esbuild to an application that used the vanilla rails asset...
Capybara has a global option (Capybara.ignore_hidden_elements) that determines whether Capybara sees or ignores hidden elements.
A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets...
Note: Making a reverse proxy with nginx is much more straightforward. A reverse proxy is a "man in the middle...
tl;dr Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when...