Within an event handler, there are multiple methods to cancel event propagation, each with different semantics. event.preventDefault() Only prevents the...
...missing an href attribute. This will probably happen to you every now and then on JavaScript-heavy applications. An example would be an AngularJS application where the following HTML actually...
...link placeholders. So Capybara at least adheres to the HTML spec. :) See also Triggering JavaScript when an element is clicked Capybara can find links and fields by their [aria-label...
Here is an ES5 object literal with two string properties and a function property: let user = { firstName: 'Max', lastName: 'Muster...
...are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers. Basic usage Transitions are used to animate the...
Modern JavaScript includes Intl.NumberFormat to format numbers in different formats and locales. In this card, we describe a wrapper for it that humanizes a given number of seconds in the...
CoffeeScript and JavaScript (ECMAScript) both have operators in and of. Each language use them for more than one purpose. There is not a single case where the same operator can...
...an object (or its prototype) has a property CoffeeScript var hasFoo = 'foo' of object JavaScript var hasFoo = 'foo' in object; Iterate through all properties of an object CoffeeScript
Add gem 'database_cleaner' to your Gemfile. Then: Cucumber & Rails 3+ # features/support/database_cleaner.rb DatabaseCleaner.clean_with(:deletion) # clean once, now DatabaseCleaner.strategy = :transaction...
You can use the code below to check whether the browser can make connections to the current site: await isOnline...
...files matching the regex. What about when I change a file? Changed stylesheets and javascripts will always be reloaded because Rails appends a screen.css?1234567 timestamp to the paths. Background...
The Performance Navigation Timing API allows reading how the current document was loaded. All major browsers support it. Usage
When your JavaScript bundle is so massive that you cannot load it all up front, I would recommend to load large libraries from the compilers that need it.
...RegExp to interpret text as Shift JIS encoded which you probably don't want. Javascript There is no modifier to make the dot match line feeds. You need to write...
...proposal that's stuck in Stage 1. While there is a /m modifier in Javascript, it only changes the meaning of ^ and $. Perl You can make the dot match line...
When you use native smooth scrolling there is no built-in method to detect the end of the scrolling animation...
...for a multi-line text in your HTML. Earlier, it was necessary to implement JavaScript solutions like Superclamp.js to enable this because the browser support has been rather limited and...
Still, we recommend to use the CSS approach whenever possible, since Clamping in JavaScript has significant performance costs. Usage display: -webkit-box overflow: hidden overflow-wrap: break-word
This might be relevant for us since we're often managing customer documents in our apps. I played around with...
Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different...
...E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our output will be more verbose than when we only need support modern browsers.
This card describes how to pass an array with multiple element to a JavaScript function, so that the first array element becomes the first function argument, the second element becomes...
...CoffeeScript to ES6. You can use decaffeinate to convert your CoffeeScript source to modern JavaScript. Install decaffeinate globally: npm install -g decaffeinate Call decaffeinate on each .coffee file, relaxing some...
To read the current breakpoint tier in JavaScript, employ this CSS: :root { --current-breakpoint-tier: xs; @media (min-width: $screen-sm-min) { --current-breakpoint-tier: sm; } @media (min-width: $screen...
} @media (min-width: $screen-xxl-min) { --current-breakpoint-tier: xxl; } } Then use this JavaScript: // globally getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier') // or locally getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier...
...often than it needs to. One example for that are scroll event handlers in JavaScript: You want to react to a user scrolling, but it's enough to do that...
...when they have stopped scrolling. Here is a small JavaScript function that you can use for that: function debounce(callback, delay) { let timer return function(...args) { clearTimeout(timer) timer = setTimeout...
...you might be looking for an event emitter library. Today I learned that vanilla JavaScript comes with a native event emitter, which I've been indirectly using forever. There's...
...add -p with single key presses Stash unstaged changes only with git stash -k JavaScript Create an object with no properties with Object.create(null) => {} The comma operator returns its last...
If you want to move an element inside an array, neither JavaScript/ES6+ nor libraries like LoDash offet that natively. Here is a simple function instead that modifies the input array...
Reacting on a class getting added can be done with a mutation observer. Example: const items = document.querySelectorAll('.item') const expectedClass...