Spreewald now comes with a step that tests if a form field is visible:

Then the "Due date" field should be visible
But the "Author" field should not be visible

The step works by looking up the field for the given label, then checks if that field is hidden via CSS (or Javascript).

It is not currently tested if the label is visible or hidden. For this see: [Check that an element is visible or hidden via CSS with Cucumber/Capybara](https://makandracards.com/makandra/1049-check-that-an-elem...

You can include files from app/assets or from the public folder with javascript_include_tag. The subtle difference that tells rails how to build the path correctly is a single slash at the beginning of the path:

<%= javascript_include_tag('ckeditor/config') %> # for assets/ckeditor/config.js
<%= javascript_include_tag('/ckeditor/ckeditor') %> # for public/ckeditor/ckeditor.js

This also applies to stylesheet_link_tag.

Note that when you refer to a Javascript or stylesheet in /assets you need to add it to [the list of asse...

capybara-lockstep can help you with flaky end-to-end tests:

This Ruby gem synchronizes Capybara commands with client-side JavaScript and AJAX requests. This greatly improves the stability of a full-stack integration test suite, even if that suite has timing issues.

In order to navigate through the browser history. you can manipulate the window.history object via javascript like follows:

When /^I go back in the browser history$/ do
  page.evaluate_script('window.history.back()')
end 

For further functions of the window and history objects check out this link.

An improved version of this step is now part of our gem spreewald on Github.

When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.

Use the Javascript hack below to disable text selection on mobile devices:

// Deactivating distracting Text Selection:
// from: http://stackoverflow.com/questions/1794220/how-to-disable-mobilesafari-auto-selection
$.fn.extend({
  disableSelection : function() {
    this.each(function() {
      this.onselectstart = function() {
        return false;
  ...

• The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
• I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
• The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
• For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
• There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...

When you use google analytics to track your visitors interactions, you should ensure that it runs on your production site only. Otherwise it will spoil your statistics. To prevent this, test for the right environment and place the JS-code afterwards:

- if Rails.env.production?
  :javascript
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
    _gaq.push(['_trackPageview']);
    ...

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

Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the content inside is too long.

While you can only truncate single lines with CSS by using text-overflow, this small JavaScript library also allows truncating text after multiple lines.

Please note:

• For Internet Explorer, the element you clamp on needs to have its line-height set in pixels. A relative value will not work.
• There is also the [-webkit-line-clamp](http:...

Reason

If you are using Coffeescript, it is likely to be the culprit. Since Coffeescript always returns the value of the last expression, it may return DOM nodes:

# coffeescript
scope.focus = ->
  element.focus()

# javascript
scope.focus = function() {
  return element.focus(); // wheee
}

If you e.g. use this function like this, the error will be raised:

<span ng-click="focus()">...</span>

Solution

By adding an explicit return value (e.g. return false), you can Coffees...

When running Selenium features with parallel_tests, some browser-server interaction might take longer than usual and the impatient Capybara will not wait enough to see results.

Put the attached file into features/support/ to make Capybara more patient in scenarios tagged @javascript.

A set of javascript tools for working with files.

It offers different kinds of things:

• A cross-browser JS API to work with File objects.
• Image helper methods, like rotating images, or generating thumbnails in the browser (because you don't want your browser to scale tons of 20MB-JPEGs just for an upload preview)
• Webcam access
• Uploads

When HTML5 support is unavailable, it uses Flash polyfills.

Check out the documentation and demos at their GitHub page.

To install via bower, simply add the `...

If you need to debug Analytics tracking, consider using this chrome extension. It will replace the tracking code with a debug version that prints debugging info to the JavaScript console.

If you want to do JavaScript-style camelization, ActiveSupport's String#camelize method can actually help you out. Simply pass a :lower argument to it.

>> 'foo_bar_baz'.camelize
=> "FooBarBaz"
>> 'foo_bar_baz'.camelize(:lower)
=> "fooBarBaz"

fake_stripe spins up a local server that acts like Stripe’s and also serves a fake version of Stripe.js, Stripe’s JavaScript library that allows you to collect your customers’ payment information without ever having it touch your servers. It spins up when you run your feature specs, so that you can test your purchase flow without hitting Stripe’s servers or making any external HTTP requests.

We've also had tests actually hitting the testing sandbox of Stripe, which worked OK most of the time (can be flakey).

When you include a non-existing Javascript file, you probably won't notice it during development. But with caching active (on production or staging) Rails will write an empty all.js file without complaining.

A while ago I tweeted a thread about how a small JavaScript snippet, one that can fit in a single tweet in fact, can be used to allow defining custom elements purely in HTML. This post will expand on the idea, show how the snippet works, and argue for why you might want to actually use this.

A nice trick that lets you define "partials" in HTML without any additional rendering technology on the server or client.

Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.

The attached article explains how to preload images with only CSS. No Javascript required.

The gist is:

.element:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none;
}

Free Bootstrap theme resembling Material Design.

Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.

Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.

Also check out their other themes which can be used in a similar fashion.

Small (1.5 KB) Javascript library that lets you render tables, lists, etc. with hundreds of thousands of items.

How it works is that you move your data set from the DOM into JS. Clusterize than makes sure only the rows in the viewport (and adjacent batches) are rendered.

I believe that AngularUI's data grid component uses a similar technique to reduce the number of bindings in large tables, but I can't seem to find documentation on that.

Batman is an alternative Javascript MVC with a similar flavor as AngularJS, but a lot less features and geared towards Ruby on Rails.

The attached link leads to a tutorial for a small blog written with Rails / Batman.js.

I'm collecting other Batman.js resources in my bookmarks.

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.