jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it...

To check if a method has been called in Jasmine, you first need to spy on it: let spy = spyOn...

CSS (+ some Javascript) framework, implementing Google's material design for static web pages. Can be used for plain websites without requiring a full blown Javascript framework, unlike the (also excellent...

...and will constantly scroll the page to the top. Using it together with a JavaScript framework requires some care, because you constantly need to "upgrade" elements with MDL.

tl;dr: Use the URLSearchParams API to make your live easier if you want to get or manipulate query parameters...

...to the lack of support. To solve this, you will need to introduce some JavaScript. In earlier Firefox versions, adding an inline ondragstart="false"-handler was enough to bypass the...

Native promises have no methods to inspect their state. You can use the promiseState function below to check whether a...

Single step and slow motion for Cucumber scenarios can come in handy, especially in @javascript scenarios. # features/support/examiners.rb AfterStep('@slow_motion') do sleep 2 end AfterStep('@single_step') do print "Single...

...Note: You can also prevent the selenium webbrowser window from closing after a failed @javascript step. Fixing out-of-sync Cucumber output The problem with the @slow_motion step above...

...Although there is no equivalent to this idiom in naked Javascript, there is a way to collect object properties (but not method results) if you are using common Javascript libraries...

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...

Controller responses often include Javascript code that contains values from Ruby variables. E.g. you want to call a Javascript function foo(...) with the argument stored in the Ruby variable @foo...

If some of your JavaScripts fail on Internet Explorer, but only in staging or production environments, chances are that JavaScript compression is the culprit. By default, Rails 3.2 compresses JavaScript...

...with UglifyJS. I have seen a few cases where this actually breaks functioning JavaScript on IE (one example is the CKEditor). I fixed this by switching to Yahoo's YUI...

...time and does not need to be fixed. However, as your frontend adds more JavaScript, AJAX and animations, this test might become "flaky". Flaky tests destroy the trust in your...

...is sufficient for basic, server-rendered application. However, as frontends become more complex (more JavaScript, AJAX requests, animations), race conditions will become too severe to be caught by these default...

If you are writing any amount of Javascript, you are probably using closures to hide local state, e.g. to have private methods. In tests you may find it necessary to...

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...

JavaScript's NaN ("Not a Number") is hard to compare against. It never equals anything, not even itself: NaN === NaN; // false Number.NaN === NaN; // false There is the isNaN method, but...

...by sprockets) has a nice feature where templates ending in .jst are compiled into Javascript template functions. These templates can be rendered by calling JST['path/to/template'](template: 'variables'): Hello, <%= name...

...templates/hello $("#hello").html(JST["templates/hello"]({ name: "Sam" })); Whatever is in the <%...

...%> is evaluated in Javascript. You can also use CoffeeScript here: Sprockets supports two JavaScript template languages: EJS, for embedded...

To simulate Rails' to_sentence in your JavaScript application, you can use these few lines of CoffeeScript code: joinSentence = (array) -> if array.length > 1 array[0..-2].join(', ') + ', and ' + array...

...cats', 'dogs', 'pandas']) # => 'cats, dogs, and pandas' ^ > joinSentence(['llamas']) # => 'llamas' Here is some plain JavaScript, should you prefer that: function joinSentence(array) { if (array.length > 1) { return array.slice(0, -1).join...

A list of clever debugging tricks. TOC: Advanced Conditional Breakpoints monitor() class Calls Call and Debug a Function Pause Execution...

If you are trying to inspect timings in JavaScript, you can use console.time and console.timeEnd which will write to your browser console. Example: console.time('lengthy calculation'); lengthyCalculation(); console.timeEnd('lengthy calculation...

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...

JavaScripts and CSS should be minified for production use. In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of...

...your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.

...icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline tags), or even as SVG sprites.

...have their pros and cons: Icon font: little CPU load (no JavaScript) fonts are relatively large 1 extra HTTP request Javascript + inline SVG: higher CPU load (needs to watch the...

You can easily have a JavaScript hash/object that returns a default value for unset keys/properties -- as long as you need to support only recent browsers. The key are JavaScript proxies...