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...
Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code. The JavaScript Object Model
...JavaScript Object Model: A deep dive into prototypes and properties. There's also a video of that talk in our internal library. The first three sections of the article Inheritance...
...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...
Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like: General support libraries like Lodash Frontend Frameworks like...
...and the article "Choose Boring Technology". When you add a new library - be it JavaScript, Ruby or anything else - you should first get a general overview of the most popular...
Understand how asynchronous JavaScript works: Read Henning's presentation about asynchronous Javascript (there's also a German video presentation in our shared folder) Read about Promises on MDN and...
...in event listeners Tasks, microtasks, queues and schedules Picking the Right Tool for Maneuvering JavaScript's Event Loop Browse the internet to answer the following questions: What are "synchronous" or...
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...
A common task in web applications is to add client-side JavaScript behavior to existing HTML elements. For instance, in Working with the DOM you built a movie counter...
...it has many shortcomings. Thinking in components Ideally we want to package all our JavaScript in the form of reusable components. Examples: Date picker: A text field opens a calendar...
Hints The purpose of this lesson to learn interacting with external APIs from JavaScript. Even though this exercise can be implemented trivially by embedding a Google Maps...
...iframe, don't do that for the purpose of learning. Instead you should work with JavaScript-consumable APIs, either by calling functions of a client library or by making your...
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.
Jasmine is a great tool to unit test your JavaScript components without writing an expensive end-to-end test for every little thing. Jasmine is a purely client-side tool...
...look at your classes, Jasmine is a very direct way to look at your JavaScript components. For example, when you want to test that a date picker opens a calendar...