Reacting on a class getting added can be done with a mutation observer. Example: const items = document.querySelectorAll('.item') const expectedClass...
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand...
...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'
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...
...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 check if a method has been called in Jasmine, you first need to spy on it: let spy = spyOn...
...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...
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...
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...
...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...
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...
Native promises have no methods to inspect their state. You can use the promiseState function below to check whether a...
tl;dr: Use the URLSearchParams API to make your live easier if you want to get or manipulate query parameters...
Webfonts are not always available when your JavaScript runs on first page load. Since fonts may affect element sizes, you may want to know when fonts have been loaded to...
...trigger some kind of recalculation. Vanilla JavaScript / Modern DOM API In modern browsers (all but IE and legacy Edge) you can use document.fonts. Use load to request a font and...
Jasmine has spyOnProperty(), but it only works if the property is implemented using getter and setter functions. This is a...
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...
Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs). The approach is simple...
...as a bookmark. Place it in your bookmarks bar and click it to activate. javascript:(function(){var overlay=document.createElement('div');Object.assign(overlay.style,{position:'fixed',top:0,left:0,width:'100vw...
...After trying jQuery's trigger to no avail, I had success by using native Javascript methods to create and dispatch an event. For instance, to trigger a mousedown event:
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it...
Let's say you want to merge the properties of two JavaScript objects: let a = { foo: 1, bar: 2 } let b = { bar: 3, baz: 4 } let merged = merge(a, b...
You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...
Use the click method on the DOM element: let link = document.querySelector('a') link.click()
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...