This card shows an uncommon way to retrieve a file using selenium where JavaScript is used to return a binary data array to Ruby code. The following code example retrieves...
...if (!response.ok) { # throwing an error from JS within execute_script raises Selenium::WebDriver::Error::JavascriptError # which you could handle in ruby throw new Error(`Unsuccessful request: ${response.status}`) } const contentType = response.headers.get...
Terser is a really good minifier ("compressor") for JavaScript code. I'm often surprised by the thoughtfulness of its compressed output. Let's take this function: function fn() {
JavaScript objects can have getter and setter functions that are called when a property is read from or written to. For example, if you'd like an object that has...
Here is an ES5 object literal with two string properties and a function property: let user = { firstName: 'Max', lastName: 'Muster...
...a container inside the , around your elements. ...using a custom attribute, like and using JavaScript to disable all controls inside it. This works nicely with Unpoly compilers or Angular directives...
Regular expressions in Javascript are represented by a RegExp object. There also is a regex literal as in many other languages: /regex/. However, they are used slightly differently.
You can use the code below to check whether the browser can make connections to the current site: await isOnline...
...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...
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...
esbuild comes with a minifier that is good enough for most cases. If you're looking to squeeze out as...
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
When you use native smooth scrolling there is no built-in method to detect the end of the scrolling animation...
This might be relevant for us since we're often managing customer documents in our apps. I played around with...
...dismiss confirmation dialogs. Here is how to fix that. Also see Type text into Javascript prompt dialogs in Capybara/Selenium...
Using querySelector or querySelectorAll in JavaScript, you can easily find descendants of a node that match a given selector. But what if you want to find only children (i.e. direct...
The container2 element Browser Support :scope is supported in all browsers for the JavaScript DOM API...
...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...
Make sure that you use the correct property when editing an HTML attribute. Using innerHTML with unsafe arguments makes your...
Reacting on a class getting added can be done with a mutation observer. Example: const items = document.querySelectorAll('.item') const expectedClass...
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand...
...logical assignment operators, numeric separators and WeakRef on all major browsers except IE11. replaceAll JavaScript's replace(searchValue, replaceValueOrFn) by default replaces only the first match of a given String...
...the logical assignment operator ||=. The logical assignment operators &&=, ||= and ??= are now also available in JavaScript. let name // => undefined name ??= 'Alice' // assigns if name is null or undefined // => 'Alice'
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...
...two separate packs Since we do not want to mix Jasmine into our regular Javascript, we will create two additional packs. The first only contains Jasmine and the test runner...
.../lib/jasmine-core/boot0.js' import 'jasmine-core/lib/jasmine-core/boot1.js' import 'jasmine-core/images/jasmine_favicon.png' // app/webpack/packs/specs.js // First load your regular JavaScript (copy all the JavaScript imports from your main pack). // For example: let webpackContext = require.context('../javascripts...
To check if a method has been called in Jasmine, you first need to spy on it: let spy = spyOn...
...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...