We're always striving towards keeping our website's JavaScript as small as possible. If you're using webpack(er), you can use the webpack-bundle-analyzer plugin to get...
...a good overview, which of your JavaScript modules take up how much space, and where you can optimize. To use it, add it via npm or yarn yarn add webpack...
The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like an Unpoly compiler for apps that don't use Unpoly...
...Custom Elements or any other mechanism that pairs JavaScript with HTML elements. The compiler() function is also a lightweight replacement for our legacy $.unobtrusive() helper (no jQuery required).
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...
JavaScript is a scripting language supported by all browsers. Browsers don't speak Ruby, so if we want to implement client-side logic that runs in the browser, we need...
...to express ourselves in JavaScript. Goals You should have a strong understanding of the following language features/concepts: Writing and reading variables Defining and calling functions Control flow: if, for, switch...
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...
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...
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...