...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...
Within an event handler, there are multiple methods to cancel event propagation, each with different semantics. event.preventDefault() Only prevents the...
...missing an href attribute. This will probably happen to you every now and then on JavaScript-heavy applications. An example would be an AngularJS application where the following HTML actually...
...link placeholders. So Capybara at least adheres to the HTML spec. :) See also Triggering JavaScript when an element is clicked Capybara can find links and fields by their [aria-label...
JavaScript code can access and manipulate the browser's DOM tree. Using JavaScript we can add interactive behavior to our interfaces that would not be possible through declarative rules in...
...Playing with the DOM Visit https://makandracards.com/makandra Open your developer tools' console. Use JavaScript to locate all card elements. Use Javascript to read the text content of the second...
...forked MovieDB should already include a feature that uses a real browser. Add the @javascript tag to your other features to test it yourself. When you run your cucumber feature...
Fixing flaky integration tests (also watch the video on YouTube) What does the @javascript tag do and how does it work? We used to use Selenium with Firefox, but...
Here is an ES5 object literal with two string properties and a function property: let user = { firstName: 'Max', lastName: 'Muster...
...are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers. Basic usage Transitions are used to animate the...
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...
CoffeeScript and JavaScript (ECMAScript) both have operators in and of. Each language use them for more than one purpose. There is not a single case where the same operator can...
...an object (or its prototype) has a property CoffeeScript var hasFoo = 'foo' of object JavaScript var hasFoo = 'foo' in object; Iterate through all properties of an object CoffeeScript
Add gem 'database_cleaner' to your Gemfile. Then: Cucumber & Rails 3+ # features/support/database_cleaner.rb DatabaseCleaner.clean_with(:deletion) # clean once, now DatabaseCleaner.strategy = :transaction...
You can use the code below to check whether the browser can make connections to the current site: await isOnline...
...files matching the regex. What about when I change a file? Changed stylesheets and javascripts will always be reloaded because Rails appends a screen.css?1234567 timestamp to the paths. Background...
The Performance Navigation Timing API allows reading how the current document was loaded. All major browsers support it. Usage
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.
...RegExp to interpret text as Shift JIS encoded which you probably don't want. Javascript There is no modifier to make the dot match line feeds. You need to write...
...proposal that's stuck in Stage 1. While there is a /m modifier in Javascript, it only changes the meaning of ^ and $. Perl You can make the dot match line...
When you use native smooth scrolling there is no built-in method to detect the end of the scrolling animation...
...for a multi-line text in your HTML. Earlier, it was necessary to implement JavaScript solutions like Superclamp.js to enable this because the browser support has been rather limited and...
Still, we recommend to use the CSS approach whenever possible, since Clamping in JavaScript has significant performance costs. Usage display: -webkit-box overflow: hidden overflow-wrap: break-word