This might be relevant for us since we're often managing customer documents in our apps. I played around with...

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.

This card describes how to pass an array with multiple element to a JavaScript function, so that the first array element becomes the first function argument, the second element becomes...

...CoffeeScript to ES6. You can use decaffeinate to convert your CoffeeScript source to modern JavaScript. Install decaffeinate globally: npm install -g decaffeinate Call decaffeinate on each .coffee file, relaxing some...

To read the current breakpoint tier in JavaScript, employ this CSS: :root { --current-breakpoint-tier: xs; @media (min-width: $screen-sm-min) { --current-breakpoint-tier: sm; } @media (min-width: $screen...

} @media (min-width: $screen-xxl-min) { --current-breakpoint-tier: xxl; } } Then use this JavaScript: // globally getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier') // or locally getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier...

...often than it needs to. One example for that are scroll event handlers in JavaScript: You want to react to a user scrolling, but it's enough to do that...

...when they have stopped scrolling. Here is a small JavaScript function that you can use for that: function debounce(callback, delay) { let timer return function(...args) { clearTimeout(timer) timer = setTimeout...

...you might be looking for an event emitter library. Today I learned that vanilla JavaScript comes with a native event emitter, which I've been indirectly using forever. There's...

...add -p with single key presses Stash unstaged changes only with git stash -k JavaScript Create an object with no properties with Object.create(null) => {} The comma operator returns its last...

If you want to move an element inside an array, neither JavaScript/ES6+ nor libraries like LoDash offet that natively. Here is a simple function instead that modifies the input array...

Reacting on a class getting added can be done with a mutation observer. Example: const items = document.querySelectorAll('.item') const expectedClass...

Using querySelector or querySelectorAll in JavaScript, you can easily find descendants of a node that match a given selector. But what if you want to find only children (i.e. direct...

The container2 element Browser Support :scope is supported in all browsers for the JavaScript DOM API...

While we are used to run our JavaScript tests on a test page within our Browser, it's also possible to run them on the command line with NodeJS. I...

Make sure that you use the correct property when editing an HTML attribute. Using innerHTML with unsafe arguments makes your...

Capybara gives you two different methods for executing Javascript: page.evaluate_script("$('input').focus()") page.execute_script("$('input').focus()") While you can use both, the first line (with evaluate_script) might freeze...

One really simple way to check whether JavaScript Sentry integration was successful (raven-js or @sentry/browser), is to create an erroneous event handler like this: My Website … and clicking on...

...logical assignment operators, numeric separators and WeakRef on all major browsers except IE11. replaceAll JavaScript's replace(searchValue, replaceValueOrFn) by default replaces only the first match of a given String...

...the logical assignment operator ||=. The logical assignment operators &&=, ||= and ??= are now also available in JavaScript. let name // => undefined name ??= 'Alice' // assigns if name is null or undefined // => 'Alice'

...the Webpack Bundle Analyzer, Chrome's new Lighthouse feature … … shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used...

...your page. It can also visualise unused bytes. This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the...

...two separate packs Since we do not want to mix Jasmine into our regular Javascript, we will create two additional packs. The first only contains Jasmine and the test runner...

.../lib/jasmine-core/boot0.js' import 'jasmine-core/lib/jasmine-core/boot1.js' import 'jasmine-core/images/jasmine_favicon.png' // app/webpack/packs/specs.js // First load your regular JavaScript (copy all the JavaScript imports from your main pack). // For example: let webpackContext = require.context('../javascripts...

...to this element. Example DOM Breakpoints can be quite useful to quickly find the JavaScript that is responsible for some (unexpected) behavior. You can use DOM Breakpoints for debugging subtree...

...or node removal. Here you can see a very simple example that shows what JavaScript lines are responsible for a text change (subtree modification): You can use this Code Pen...

...are not written to input fields with fill_in. A workaround is to use javascript / jquery to change the contents of an input field. Use the following code or add...

...unknown reasons. field = find_field(locator) id = field[:id].presence if id execute_script <<~JAVASCRIPT var field = document.querySelector('##{id}'); field.value = #{text.to_json}; field.dispatchEvent(new Event('input')); field.dispatchEvent(new Event('change...

You can use JavaScript to get or set cookie values on the client. Using the vanilla JavaScript API In JavaScript, document.cookie is an accessor to all cookies on the current...

Using a library If you are regularly working with cookies in JavaScript, you may want to use a library that simplifies this. Cookies.js is small and works nicely...

...the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does regular text-overflow magic: .overflow_container white-space: nowrap overflow: hidden text-overflow...

...up with nsbp + space, causing 2 spaces width. Wrap the code in our unobtrusive JavaScript helper or another way it's run once the DOM is loaded...

This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title...

...As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such...

Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means...

...are fully loaded. The following snippets show how you can do this with plain JavaScript, jquery or prototype (dom ready event binding in other frameworks). Plain JavaScript document.addEventListener("DOMContentLoaded", function...