...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...
...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...
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...
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...
...searchable when you just have a question about some function. Performance issue 1: Slow JavaScript If an event occurs and JavaScript has to run, the browser have to process the...
...JavaScript first, before it can redraw the screen. While JavaScript is very fast, you need to be very careful with JavaScript code that is called frequently: Code that runs on...
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...
Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src.
...language settings. For example, German users will see 1,23 for . Values in the JavaScript API or when submitting forms to the server will always use a point as decimal...
JavaScript objects can have getter and setter functions that are called when a property is read from or written to. For example, if you'd like an object that has...
...gem 'jsbundling-rails' group :development, :test do gem 'foreman' # ... end bundle install run bin/rails javascript:install:esbuild in a console to prepare esbuild. run yarn install to install all packages...
...assets:clobber to remove the precompiled assets again. adapt your stylesheet_link_tag and javascript_link_tag to match the new pack names. start the development server with the command...
Regular expressions in Javascript are represented by a RegExp object. There also is a regex literal as in many other languages: /regex/. However, they are used slightly differently.
...dismiss confirmation dialogs. Here is how to fix that. Also see Type text into Javascript prompt dialogs in Capybara/Selenium...