The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files reference images (like jQuery UI) or fonts (like webfont kits from Font Squirrel), since all those url(images/icon.png) will now point to a broken path.

In the past we have been using the vendor/asset-libs folder ...

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 it is not really what you are looking for:

isNaN(NaN)     // true
isNaN('hello') // true

Option 1: ES6

The Object.is() method determines whether two values are the same value. It even works for NaN:

Object.is(NaN, NaN) // true

Option 2: ES5

The example above shows that simply using isNaN would match other ...

Simply use one(...) instead of on(...). It takes the same arguments.

JavaScript structures that include circular references can't be serialized with a"plain" JSON.stringify. Example:

a = { name: 'Groucho' };
b = { name: 'Harpo', sibling: a };
a.sibling = b;

Doing a JSON.stringify(a) will throw an error:

TypeError: Converting circular structure to JSON

There is not much you can do about that except specifying a custom serializer function that detects and cleans up circular references. There are existing solutions so you do not need to think of one yourself, like <https://githu...

Create beautiful Javascript charts with one line of Ruby.

Promising chart library for easily rendering charts with Google Charts.

This seems to not submit your data points to Google.

Great introduction to React.js and the ideas behind it.

Capybara and most assistive technology will fail to find <a> tags that are missing an href attribute. This will probably happen to you every now and then on JavaScript-heavy applications.

An example would be an AngularJS application where the following HTML actually works. [1]

<a ng-click="hello()">Hello</a>

Capybara will fail to find that link, even though looking it up via the DOM shows it:

>> find_link("Hello")
Capybara::...

What PDFKit is

• PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood.
• For you as a web developer this means you can keep using the technology you are familar with and don't need to learn LaTeX. All you need is a pretty print-stylesheet.

How to use it from your Rails application

• You can have PDFKit render a website by simply calling PDFKit.new('http://google.com').to_file('google.pdf'). You can then send the...

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

function moveArrayElement(array, element, offset) {
  const index = array.indexOf(element)
  const newIndex = index + offset
  
  if (newIndex > -1 && newIndex < array.length) {
    // Remove the element from the array
    const removedElement = array.splice(index, 1)[0]

    // At "newIndex", remove 0 elements and insert the removed el...

When using jQueryUI's Sortable plugin (either directly or via Angular's ui.sortable), you might struggle testing your nice drag&drop GUI since Selenium webdriver does not support native dragging events.

But jQueryUI uses jquery.simulate for their testing, so why shouldn't you? There is even an extension to it that makes testing drag & drop quite easy.

Here is what you need:

1. jquery.simulate.js
2. [`jquery.simula...

Nearly all jQuery traversal functions ignore elements that are not HTML tags.

To work with other type of nodes (like text, comment or CDATA sections) you need to:

• Retrieve child nodes contents() (which behaves like children() except that it returns all types of child nodes)
• Filter manually using either plain Javascript or jQuery's filter() method

Example

Let's write a function that takes a jQuery element and returns an array of all child nodes that are text nodes:

function selectTextNodes($container) {
  retu...

Restmod creates objects that you can use from within Angular to interact with your RESTful API.

Amazing guide how to divide a ball of Javascript spaghetti distinct separate layers (model, view, controller, backend adapter).

It does not use a Javascript framework.

When making cross-domain AJAX requests with jQuery (using CORS or xdomain or similar), you will run into issues with HTTP headers:

• jQuery will not set the X-Requested-With header. On your server, requests will not look like AJAX requests (request.xhr? will be false).
• jquery-ujs will not set CSRF headers.

This is by design and improves secu...

Automatically builds gems from Bower packages (currently 1700 gems available). Packaged Javascript files are then automatically available in your asset pipeline manifests.

Why we're not using it

At makandra we made a choice to use bower-rails instead. While we believe Rubygems/Bundler to be superior to Javascript package managers, we wanted to use something with enough community momentum behind it that it won't go away in 10 years...

SudoSlider is a simple yet powerful content slider that makes no (or very few) assumptions about your markup and is very customizable.

You can basically embed any HTML into the slides, so you can mix images, videos, texts, and other stuff.

Check out the demos.

Please note:

• There is a ton to configure. Check the demos and read the docs.
• It does not bring styles for prev/next links etc, so you need to style controls yourself (which I consider to b...

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 the second argument, etc.

Note how this is different from passing the entire array as the first argument. Compare these two different ways of calling fun() in Ruby:

# Ruby
array = [1, 2, 3]
fun(array)  # same as fun([1, 2, 3]) (1 argument)
fun(*array) # same as fun(1, 2, 3)   (3 arguments)

Depending on your culture the spreading of array eleme...

When you cannot make Selenium trigger events you rely on (e.g. a "change" event when filling in a form field), trigger it yourself using this step:

When /^I manually trigger a (".*?") event on (".*?")$/ do |event, selector|
  page.execute_script("jQuery(#{selector}).trigger(#{event})")
end

Note that this only triggers events that were registered through jQuery. Events registered through CSS or the native Javascript registry will not trigger.

An all-in-approach to fix the problem of pending AJAX requests dying in the browser when the server ends a test or switches scenarios.

We were able to work around this issue in most projects by doing this instead:

After '@javascript' do
  step 'I wait for the page to load'
end

jQuery plugin that makes it easy to dynamically add and remove records when using ActiveRecord's nested attributes.

I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the end of an article:

findLastLeaf = ($container) ->
  $children = $container.children()
  if $children.length == 0
    $container
  else
    $lastChild = $children.last()
    $lastContent = $container.contents().filter(->
      # Only return nodes that are either elements or non-empty text nodes
      @nodeType == 1 || (@nodeType == 3 && _.strip(@nodeValue) != '')
    ).last()
...

React.js is a relatively new Javascript templating engine that has two-way-bindings like AngularJS or Batman. The interesting idea here is that React keeps a virtual copy of the DOM tree in memory, and when you re-render, it only changes the DOM as little as required. That means if you re-render a list with 1000 items, and only one item has changed, the browser-DOM will only remove and add a single element instead of 1000 elements. This makes React.js views insanely fast.

The attached article proposes that React.js is so fast that you don...

When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below.

Style

table.fixed_table_header{
  position: fixed;
  top: 0;
  width: auto;
  display: none;
  border: none;
  margin: 0;
}

Javascript

;(function($) {
   $.fn.fixHeader = function() {
      return this.each(function() {
         var $table = $(this),
            $t_fixed;

         function init() {
            $t_fixed = $table.clone();
            $t_fixed.find('tbody').remove().end().addClass('fi...