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...
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...
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(() => {
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...
...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...
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...
...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...
...for Angular 1 originally, most of the advice is relevant for all client-side JavaScript code. How to observe memory consumption To inspect the amount of memory consumed by your...
...Javascripts in Chrome: Open an incognito window Open the page you want to inspect Press Shift + ESC to see a list of Chrome processes Find the process for the incognito...
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. Note that ECMAScript 6 will probably also offer Number.MAX_SAFE_INTEGER (and Number.MAX_SAFE_INTEGER) that point to those...
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():
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...
...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...
...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...
...wrapped as a jQuery collection: let $element = $(element) An API object to call additional JavaScript behavior added by a library: var player = flowplayer($element) player.play() Framework activation layers (like Angular...
...The future is Custom Elements In the future library developers will no longer ship JavaScript as Angular directives, Unpoly compilers or anything framework-specific. It will all be Custom Elements...
Within an event handler, there are multiple methods to cancel event propagation, each with different semantics. event.preventDefault() Only prevents the...
Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an...
When your JavaScript bundle is so massive that you cannot load it all up front, I would recommend to load large libraries from the compilers that need it.
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...
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...