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...
...for Angular 1 originally, most of the advice is relevant for all client-side JavaScript code. How to observe memory consumption To inspect the amount of memory consumed by your...
...Javascripts in Chrome: Open an incognito window Open the page you want to inspect Press Shift + ESC to see a list of Chrome processes Find the process for the incognito...
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...
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.
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...
...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...
Great presentation about writing Javascript like you write everything else: Well-structured and tested. JavaScript is no longer a toy language. Many of our applications can’t function without it...
...If we are going to use JavaScript to do real things, we need to treat it like a real language, adopting the same practices we use with real languages.
...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...
The Javascript code below is a rough equivalent to the simple_format helper that ships with Rails: function simpleFormat(str) { str = str.replace(/\r\n?/, "\n"); str = $.trim(str); if (str.length...
...see an error message such as /usr/lib/ruby/gems/1.8/gems/execjs-1.3.0/lib/execjs/runtimes.rb:50:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
...a JavaScript runtime to your Gemfile and the error vanishes. Examples: gem 'therubyracer'
...markdown from user input, an attacker might be able to use this to inject javascript code into the source code of your page. The linked github page is a collection...
...common markdown XSS payloads which is handy for writing tests. Producing arbitrary links: [Basic](javascript:alert('Basic')) [Local Storage](javascript:alert(JSON.stringify(localStorage))) [CaseInsensitive](JaVaScRiPt:alert('CaseInsensitive')) [URL](javascript://www.google.com...
...with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions...
...offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common simple feature...
...to use for Selenium+Chrome). Similar sounding but completely different card: Detect if a Javascript is running under Selenium WebDriver (with Rails...
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...
...in the global scope (which is window in web-browsers). Declaring a variable in Javascript is done like var x = 5. This creates a new variable in the current scope...
...e.g. the function you're in). What happens when don't use var? Javascript needs to be clever when you do an assignment without declaring a variable, e.g. x...
...primarily increase with the number and size of your assets, especially with CSS and JavaScript. Always optimize: Keep your JavaScripts small. This is the most important rule.
...pages (e.g. TinyMCE), only load it on those pages. Be wary of low quality JavaScript libraries. You need to have a rough understand how a library works. This is especially...