Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code. Important Work on this lesson in...
Learning goals You can explain JavaScript's object model — objects, prototypes and the prototype chain — and how class syntax maps onto it. You can explain what a module...
...services. In this lesson you integrate geocoding, maps and a title-autocomplete API from JavaScript, and learn to test code that talks to external services. Important Work on this lesson...
...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...
Jasmine is a great tool to unit test your JavaScript components without writing an expensive end-to-end test for every little thing. Important Work on this lesson in builder...
...the database. Any HTTP calls must be mocked. Learning goals You can explain what JavaScript unit tests cover that end-to-end tests shouldn't: a component's details and...
Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating...
RubyMine has a HTTP Client that can be useful to test web APIs. Just create a .http scratch file an...
Page-specific JavaScript quickly becomes brittle. This lesson teaches you to structure JavaScript as reusable components that attach to HTML elements, support multiple instances, and clean up after themselves.
...Work on this lesson in advisor mode. Learning goals You can explain what makes JavaScript "unobtrusive": behavior is attached to HTML elements by selector, and views contain no scripts.
...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...
...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...
...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...
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...
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...
...boring technology over the newest option. You can explain why the size of your JavaScript matters to users and check what a package costs (e.g. on Bundlephobia).
...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...
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. Important Work on this lesson in teacher mode. Learning goals You can explain how JavaScript in the browser differs from Ruby on the server: it...
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...
...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...
Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an...
...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...
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...
Browsers differ in which HTML, CSS and JavaScript features they support. This lesson covers how to find out what you can use, which browsers we support, and how transpilation, polyfills...
...a feature may be missing — detect it and fall back — in HTML, CSS and JavaScript. You can test an app in browsers and devices you don't own, e.g. on...
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...
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...