...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...
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...
Unpoly 3.11.0 is a big release, shipping many features and quality-of-life improvements requested by the community. Highlights include...
...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...
...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...
...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"
...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...
...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...
...If you want auto-sizing inputs in those browsers, you still need a JavaScript solution. Suggested usage I suggest using a small JavaScript library like autosize for browsers that do...
} Note how we check for field-sizing support in both our CSS and JavaScript. We want neither solution to affect the other. Note Unlike field-sizing, any JavaScript auto...
...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...
...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...
...Add <%= csrf_meta_tag %> into your layout's head Put this into a JavaScript file that is always loaded (like your application.js -- or another file you add to the javascript...
Add <%= csrf_meta_tag %> into your layout's head Put this into a JavaScript file that is always loaded (like your application.js -- or another file you add to the...
...example is storing a transition duration as CSS custom property to read it from Javascript. By converting the value like this, you can ensure your Javascript will always get milliseconds...
(@foo or @bar) So you need to replace a hook like this: AfterStep('~@javascript') do ... end With this: AfterStep('not @javascript') do ... end Also grep your entire project for...
DirectUpload allows you to upload files to your file storage without having to wait for the form to submit. It...
...assets that we don't need allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).and_return('script') allow_any_instance_of(ActionView::Base).to receive(:stylesheet_link...
...will have two CSRF tokens: A in the . This is required so client-side JavaScripts may make POST, PATCH, DELETE requests. An within each form. Since Rails 5 this token...
...test runner supports mocking a module's dependencies. This has some drawbacks for frontend JavaScript that targets the browser: Jest only runs in Node.js. This means your specs can no...