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...
...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...
...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...
...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...
...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...
...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...
...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...
...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...
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...
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...
...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...
...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...
Unpoly 3.11.0 is a big release, shipping many features and quality-of-life improvements requested by the community. Highlights include...
...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...
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...
...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...
...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...