...In other cases (e.g. currencies with changing exchange rates) this might not be possible. Javascripts Your Javascript might render text, dates, formats, etc., so you must at least implement minimal...
...a gem that gives you your Rails locale dictionary and the I18n class in Javascript. Note that you might be using Javascript libraries that render strings, e.g. date pickers. Make...
...soft hyphens, which makes testing uncomfortable. Automatic insertion of soft hyphens You can use JavaScript libraries like hypher (includes LGPL patterns!) to automatically insert soft hyphens into the text of...
Loading the correct hyphenization patterns for the language you're using JavaScript to apply the library function to the DOM nodes you want hyphenated Manually adding exceptions...
...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...
...inherit styles from the document. See Styling a Web Component for this case. Applying JavaScript behavior to new elements All client-side JavaScript frameworks comes with mechanisms to activate JavaScript...
...using a framework mechanism you may use customElements.define() to register your custom element's JavaScript behavior with the browser directly. A big advantage of using the browser's customElements.define() is...
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.
...you never want to override with a default. To make it worse, languages like JavaScript or Perl have many more falsey values, including the number 0 or the empty string...
...has a key :x, and fetch will return its value nil. Setting defaults correctly: JavaScript Plain ES5 (no libraries) Prefer to check if the variable is null or undefined before...
...get a second request, but the error page will show with full CSS and JavaScript. The code assumes you are using Ruby on Rails with better_errors, which is the...
...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...
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...
...are for Sprockets. Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on...
...to other images in your stylesheets (background-image: url(/path/to/asset)) and sometimes in your Javascripts. You need to route all these paths through Rails or you won't get hashed...
...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...
Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the...
...they enter the viewport – aka "lazy-loading images". General Issues Crawlers do not execute JavaScript (generally speaking). When removing the src attribute of an img tag in favor of lazy...
...characters like & or = unescaped: # ❌ bad URI.encode('foo=foo&bar=bar') => "foo=foo&bar=bar" Javascript In Javascript, use encodeURIComponent: // ✅ good encodeURIComponent('foo=foo&bar=bar') => "foo%3Dfoo%26bar%3Dbar"
...browser must load via a separate request. While this transformation minimizes the amount of JavaScript transmitted, it may also cause your initial bundle to be split into multiple files, which...
...time by only registering a single listener. When the descendants are changed dynamically via JavaScript, no additional event listeners must be registered to enhance new elements. This technique has some...
In the example above the container receives all click events and must run JavaScript to check if a .message element was hit. This can degrade performance when you deal...
...Repeating header on every page Repeating footer on every page You can actually execute JavaScript before the page is rendered to PDF, and implement things like page numbers in the...
...is already at the right position replace: { # You can pass custom data to your JavaScript this way custom: { :foo => 'bar', }.to_json } Both files are independent DOM trees and share...
...a simple tag in your HTML, or by instantiating a new Audio object from Javascript. No additional libraries are required, although browser implementations are so bad you will probably want...
...will be broken for VBR MP3s in Flash mode). The libraries usually have a Javascript API that is nicer than the ones provided by the browser and plain Flash, and...
Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different...
...E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our output will be more verbose than when we only need support modern browsers.
...why a dialog is shown is somewhat fucked up. It often happens like this: @javascript Scenario: First scenario When I am on a page And I trigger an AJAX request...
...that shows an alert in case of an error @javascript Scenario: Second scenario When I am on another page If your PC is fast enough, the "When I am on...
New guides The documentation has been extended with new guides: Enhancing elements with JavaScript teaches everything you need to know about compilers, destructors and preventing memory leaks. Submitting forms...
...in-place shows how to have Unpoly handle forms from HTML or JavaScript. Notification flashes now contains guidance for suppressing flashes in cached responses. Submit buttons can override form attributes...
...parallel_tests can be run CI and also supports splitting by runtimes Changes in JavaScript and CSS lead to insuficient mapping to features, even though template support has been enabled...
...to Coverage. This gives a benefit because changes in JavaScript often correlate with changes in HTML. This may partly also be influenced by the fact that features are harder to...
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...
Quick reference for passing data from Rails to JavaScript via Unpoly compilers. Haml Attribute Syntax # Ising hash rockets and string symbols (method calls) = form.text_field :name, 'date-picker': true
...up.element.booleanAttr(element, attr) up.element.numberAttr(element, attr) up.element.jsonAttr(element, attr) Quick Reference Use Case Haml JavaScript Access Simple string { 'data-id': @id } data.id (string) Multiple strings { 'data-id': @id, 'data-name...
...a package functionality from window e.g. $(...).datepicker() from your dev console or any other javascript within the application. Background By default yarn will create a folder node_modules that includes...
...to window, to have access to jQuery from our dev console or any other javascript within the application. app/webpack/packs/main.js window.$ = jQuery window.jQuery = jQuery Now this will not allow us to...