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...
...disable the conditional rules as the screen width changes. To detect responsive breakpoints from JavaScript, you may use the global matchMedia() function. It is supported in all browsers:
...the current breakpoint tier (in Bootstrap e.g. "xs" or "md") without duplicating breakpoints to JavaScript: you can read the current breakpoint tier(s) in JavaScript...
...logs out the user). Rails probably does this because CSRF protection sort of requires Javascript. You want to enable CSRF protection in tests that can speak Javascript. For RSpec feature...
end end For Cucumber tests Add this to any file in features/support/: Before '@javascript' do allow_any_instance_of(ApplicationController).to receive(:protect_against_forgery?).and_return(true)
Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead. You might be better of checking against...
...application layout: <html data-environment=<%= Rails.env %>> Now you can say in a piece of Javascript: if (document.documentElement.dataset.environment == 'test') { // Code that should happen in Selenium tests } else { // Code that should happen...
Flash movies (.swf files) can talk with Javascript code embedded in the same HTML page. There are two ways to do this: The preferred way is to use the ExternalInterface...
...class to call Javascript functions from ActionScript, and to bind ActionScript functions to the Flash movie's DOM element so they can be called from Javascript. The deprecated way is...
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() {
Often people need links which are not linked directly, but should trigger execution of JavaScript. ❌ Bad workarounds You can find a lot of workarounds for that: Do something with js...
You can use the code below to check whether the browser can make connections to the current site: await isOnline...
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...
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...
esbuild comes with a minifier that is good enough for most cases. If you're looking to squeeze out as...
Here is an ES5 object literal with two string properties and a function property: let user = { firstName: 'Max', lastName: 'Muster...
When you use native smooth scrolling there is no built-in method to detect the end of the scrolling animation...
...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...
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.
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...
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
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...
Reacting on a class getting added can be done with a mutation observer. Example: const items = document.querySelectorAll('.item') const expectedClass...
...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...
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...