...forms against concurrent edits This is from a real project: When opening a form, JavaScript makes a request to acquire a lock for that record (1). After 20 seconds the...
...JavaScript starts polling the server (2), to check if another user has taken the lock away from us by force. When the PC was low on resources (parallel_tests), acquiring...
...flight AJAX requests to finish before ending a scenario: You may have client-side JavaScript that freaks out when the tab closure kills their pending requests. If that JavaScript opens...
end Legacy solution for jQuery frontends The module above is compatible with all JavaScript frameworks (or VanillaJS). If you cannot use capybara-lockstep and you're working on an...
If possible your code should detect features, not browsers. But sometimes you just need to sniff the browser. And when...
...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...
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...
...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...
...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...
...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...
...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...
...different file types including: Ruby (business logic) HTML fragments (layouts and views) CSS/Sass/SCSS (styles) JavaScript (client-side behavior) Static media (images, fonts, videos) Except for the Ruby part, all these...
...system listed below, understand how they achieve: Asset concatenation Are they bundling many small JavaScript or CSS files into one single file? If yes, how can we define a "manifest...
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...
...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...
...to set a breakpoint: Gem Breakpoint pry binding.pry byebug byebug debug binding.break Debugging in JavaScript At any line, insert the command debugger When a modern browser's JavaScript interpreter passes...
...a debugging console if developer tools are already open. Do this. Note that since JavaScript is single-threaded, you cannot interact with your app's frontend while the debugging console...
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...
You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can do this in three different ways: function code(event...
...issues and tradeoffs: Registering many handlers vs. having many unnecessary target element checks in JavaScript. Ability to stop event propagation. Ability to work with elements that are created programmatically after...
...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"
...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...