A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you to miss errors in your frontend code. Using the BrowserConsole...
...spec has ended: RSpec.configure do |config| config.after do BrowserConsole.assert_no_errors! end end Ignoring JavaScript errors for a spec We can configure RSpec to ignore JavaScript errors in specs tagged...
Checking if a JavaScript value is of a given type can be very confusing: There are two operators typeof and instanceof which work very differently. JavaScript has some primitive types...
...this inconsistency behind functions like _.isBoolean(x) or _.isObject(x). However, I encourage every JavaScript developer to understand what these functions do under the hood. This way you will be...
An introduction to mangling When you minify ("compress", "optimize") your JavaScript for production, the names of your functions and variables will be renamed for brevity. This process is often called...
When you query the browser for DOM elements, there are some footguns you should know about. Some lists are synchronized...
Capybara provides execute_script and evaluate_script to execute JavaScript code in a Selenium-controlled browser. This however is not a good solution for asynchronous JavaScript. Enter evaluate_async_script...
done("some result") }) JS Finally, you can pass additional object from Ruby to Javascript: result = page.evaluate_async_script(<<~JS, arg1, arg2) let [arg1, arg2, done] = arguments doSomethingAsynchronous().then(() => {
...can easily adjust it yourself. Simply set it as an image's src attribute. JavaScript Simple solution in modern JavaScript, e.g. for use in the client's browser: function svgUri...
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...
In a JavaScript console, type this: > 9112347935156469760 9112347935156470000 Ooops. And that's not a float! This occurs because JavaScript uses double precision floats to store numbers. So according to IEEE...
...and 2^53 - 1 (9007199254740991) can safely be represented in JavaScript. Number.MAX_SAFE_INTEGER will return the largest integer that can accurately be represented. For arbitrary large numbers (even...
...can be hard to understand what causes a browser scroll smoothly or instantly. CSS, JavaScript and the browser settings all have options to influence the scroll behavior. They all interact...
...to instantly jump to new scroll positions in these situations: When clicking an . When JavaScript functions scroll without a { behavior } option. When the user manually changes the location #hash in...
The linked MDN article is quite informative of a neat feature supported by all major browsers: Unicode character class escape...
JavaScript has no built-in functions to compare two objects or arrays for equality of their contained values. If your project uses Lodash or Underscore.js, you can use _.isEqual():
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on...
IIFE, Modules and Namespaces Message Queue and Event Loop setTimeout, setInterval and requestAnimationFrame JavaScript Engines Bitwise Operators, Type Arrays and Array Buffers DOM and Layout Trees Factories and Classes...
When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate_script block in one of your steps. Capybara may only...
webpack is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets for consumption in browsers. Webpacker is a wrapper around webpack...
...our assets in app/webpack instead of the default app/javascripts, since we not only bundle JavaScript, but stylesheets as well. To do this, change default.source_path to app/webpack in config/webpacker.yml.
...will be in German with English slides. Introduction As web developers we work with JavaScript every day, even when our backend code uses another language. While we've become quite...
...adept with JavaScript at a basic level, I think many of us lack a deep understanding of the JavaScript object model and its capabilities. Some of the questions we will...
...If you want auto-sizing inputs in those browsers, you still need a JavaScript solution. Suggested usage I suggest using a small JavaScript library like autosize for browsers that do...
} Note how we check for field-sizing support in both our CSS and JavaScript. We want neither solution to affect the other. Note Unlike field-sizing, any JavaScript auto...
It is generally discouraged to load your JavaScript by a tag in the : The reason is that a tag will pause the DOM parser until the script has loaded and executed. This will delay the browser's first contentful paint. A much better default is to load your scripts with a tag: A deferred script has many useful properties: It does not block the browser from rendering...
You probably want to enable CSRF protection in tests that can speak JavaScript. For RSpec feature tests Add this to any file to the spec/support folder: RSpec.configure do...
...files in spec/support. For Cucumber tests Add this to any file in features/support: Around '@javascript' do original = ActionController::Base.config.allow_forgery_protection ActionController::Base.config.allow_forgery_protection = true yield ensure ActionController::Base.config.allow...
prettier calls itself an opinionated code formatter. I recommend using it for your JavaScript and TypeScript code. prettier only concerns itself with the formatting of your JavaScript (and also some...
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).
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...
...or locking required because nothing is really parallel This is the model of many JavaScript APIs, EventMachine (Ruby), Netty (Java), LibEvent (C), Twisted (Python) Javascript has a mix of Sync...
...resolve(value) or reject(reason) }) promise.then(onFulfilled, onRejected) A promise-based alternative to setTimeout JavaScript has an async function setTimeout that calls a given function after a given number of...
...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...
Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating...