Raising JavaScript errors in Ruby E2E tests (RSpec, Cucumber)
Selenium E2E tests can miss frontend JavaScript errors because browser console logs do not fail specs by default. BrowserConsole raises on console errors and supports ignore rules.
Capybara: Execute asynchronous JavaScript
evaluate_async_script runs asynchronous JavaScript in Capybara and waits for completion, avoiding Selenium timeouts and allowing Ruby to receive results or error details.
JavaScript: Testing the type of a value
JavaScript value checks are inconsistent across primitives, objects, arrays, null, undefined, and NaN; the right test depends on whether you need type, instance, or property presence.
Minifying object properties in JavaScript files
JavaScript minifiers can shorten private members safely when internal names follow _ or # conventions, reducing bundle size without mangling public APIs.
Working with lists of DOM elements in JavaScript
DOM query results can be live, array-like lists rather than true arrays, and some APIs include text nodes or comments as children.
Generating test images on the fly via JavaScript or Ruby
Create placeholder images dynamically as SVG data URIs in JavaScript or Ruby, avoiding external image services and keeping the graphic easily adjustable.
Detect the current Rails environment from JavaScript or CSS
Expose Rails.env on <html> to branch JavaScript and CSS by environment, making Selenium- and test-specific behavior easy to toggle.
Heads up: JavaScript does not like big numbers
JavaScript numbers lose precision above Number.MAX_SAFE_INTEGER, because values are stored as double-precision floats. BigInt handles arbitrary large integers.
Controlling smooth scrolling in browsers
Browser scrolling can switch between instant and animated movement depending on CSS, JavaScript options, and user settings; behavior and scroll-behavior interact in surprising ways.
Javascript: How to match text by Unicode properties
Unicode character class escapes let JavaScript regular expressions match letters, numbers, and symbols beyond ASCII, making password checks work with umlauts and non-Latin digits.
JavaScript: Comparing objects or arrays for equality (not reference)
JavaScript has no built-in deep equality check for objects and arrays; use _.isEqual(), up.util.isEqual(), or isDeepStrictEqual() for value comparison.
JavaScript basics tutorial: 33 Concepts Every JavaScript Developer Should Know
JavaScript fundamentals often hide bugs in scope, this, prototypes, async flow, and type coercion. Core concepts support cleaner code and fewer runtime surprises.
Accessing JavaScript objects from Capybara/Selenium
Capybara and Selenium can access only browser globals, so exported JavaScript modules fail in evaluate_script unless the component instance is attached to the element.
Webpack(er): A primer
Webpacker integrates webpack with Rails to bundle JavaScript, stylesheets, images, and other assets, with Yarn managing dependencies and loaders handling non-JavaScript files.
The JavaScript Object Model: Prototypes and properties
JavaScript’s object model hinges on prototypes, property descriptors, and this binding; understanding constructor functions, inheritance, and Object.getPrototypeOf() prevents common OOP pitfalls.
How to auto-resize a textarea (or other inputs) in pure CSS
field-sizing: content lets textareas and other inputs grow to fit their contents, but Firefox and Safari still need a JavaScript fallback.
Rails disables CSRF protection in tests
Rails test environment turns off CSRF checks by default, so missing authenticity tokens can hide broken POST flows. Enabling forgery protection in JavaScript tests catches these failures.
You should probably load your JavaScript with <script defer>
Loading JavaScript with defer avoids blocking rendering, runs after parsing, and still before DOMContentLoaded, making it the safer default for head scripts.
Format your JavaScript with prettier
Opinionated formatting for JavaScript and TypeScript can remove whitespace debates and keep code consistent, with a small config and automatic reformatting.
Webpack(er): Analyze the size of your JavaScript components
Keep JavaScript bundles small with webpack-bundle-analyzer, which visualizes module size and highlights large chunks before production.
How to evaluate CSS media queries in JavaScript
Responsive breakpoints can be checked in JavaScript with matchMedia() instead of duplicating CSS logic, and MediaQueryList change events track width updates efficiently.
Unobtrusive JavaScript helper to progressively enhance HTML
Attach JavaScript behavior to matching HTML elements as they appear in the DOM, with automatic initialization for dynamic content and cleanup on removal.
Async control flow in JavaScript: Promises, Microtasks, async/await
JavaScript async code often becomes hard to read and error-prone; promises and async/await flatten control flow, model failures, and avoid callback nesting.
JavaScript: Stopping expensive work in inactive tabs
Pause expensive periodic work when a tab is hidden to save battery and mobile data; document.hidden and visibilitychange let background pages go passive.