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...
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...
Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating...
...common cause of non-accessible web pages are elements that were made interactive via JavaScript but cannot be focused or activated with anything but the mouse. ❌ Bad example
...without an additional [tabindex] attribute They can be activated with the keyboard without custom JavaScript. They will emit a click event after keyboard activation. By using a we can reduce...
RubyMine has a HTTP Client that can be useful to test web APIs. Just create a .http scratch file an...
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...
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...
...great browser support, and you should be using it to animate DOM elements from JavaScript, or to control or wait for CSS animations. Here is a quick overview of a...
...few useful features: Animating elements from JavaScript Use the Element#animate() function to perform animations on an element. Its API probably a bit different from how your favorite frontend framework...
Jasmine is a great way to unit test your JavaScript components without writing an expensive end-to-end test for every small requirement. After we integrated Jasmine into a Rails...
To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website uses some large JavaScript library – say TinyMCE – which is only...
...been loaded via AJAX }) The import function allows webpack to automatically put the imported JavaScript into a separate bundle (it uses some heuristic to decide whether to do it), automatically...
...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...
...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...
...to feature support. "Transpilation" and "polyfills" are both techniques to use modern HTML and JavaScript features with old browsers Understand the differences between transpilation and polyfilling Find some JavaScript features...
...maybe-unsupported HTML feature? How can you gracefully degrade when using a maybe-unsupported JavaScript feature? How can you gracefully degrade when using a maybe-unsupported CSS feature? Understand which...
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...
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...
...Our primary concern here is users uploading .html or .svg files that can run JavaScript and possibly hijack another user's session. A secondary concern is that malicious users can...
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...
Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an...
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() {
esbuild comes with a minifier that is good enough for most cases. If you're looking to squeeze out as...
To ensure a consistent code style for JavaScript code, we use ESLint. The workflow is similar to integrating rubocop for Ruby code. 1. Adding the gem to an existing...
...and configure specific rules You can use comments to disable specific rules in your JavaScript code.. Or you could use your own configuration for specific rules, like: rules: { '@stylistic/comma-dangle...
...prefer to set overflow properties to html (or :root). Scrolling the main viewport with JavaScript The browser's main document viewport is also scrollable by default. The element that corresponds...
...the correct element or set scrollTop on both and . Finding the scrolling element Your JavaScript can call document.scrollingElement to retrieve the scrollable element for the main viewport. On Chrome, Firefox...
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...
The way that Javascript schedules timeouts and promise callbacks is more complicated than you think. This can be the reason why callbacks are not executed in the order that they...
...execute in order, and are executed: after every callback, as long as no other JavaScript is mid-execution at the end of each task Further resources: JavaScript Visualized: Promise Execution...