Javascript equivalent of Ruby's array.collect(&:method)

The most common use case for Ruby's #collect is to call a method on each list element and collect the return values in a new array:

['hello', 'world', 'this', 'is', 'nice'].collect(&:length)
# => [5, 5, 4, 2, 4]

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.

If you are using jQuery with the Underscore.js utility library, you can use [pluck](htt...

Single step and slow motion for cucumber scenarios using @javascript selenium

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 Stepping. Hit enter to continue"
  STDIN.getc
end

If you're using spreewald, these tags are available as @slow-motion and @single-step (with dashes instead of underscores).

Note: You can also [prevent the selenium webbrowser wind...

Prevent the selenium webbrowser window from closing after a failed @javascript step

When cucumber encounters a failing step in a @javascript feature, the selenium browser window instantly closes. Sometimes you do not want that, because you need to see what is going on. You can click through the data your feature created, when you add the following file to your features/support directory:

#features/support/examiners.rb

After('@leave_the_window_open') do |scenario|
  if scenario.respond_to?(:status) && scenario.status == :failed
    print "Step Failed. Press return to close browser"
    STDIN.getc
  ...

sstephenson/execjs - GitHub

ExecJS lets you run JavaScript code from Ruby. It automatically picks the best runtime available to evaluate your JavaScript program, then returns the result to you as a Ruby object.

How to accept or deny JavaScript confirmation dialogs in Capybara/Selenium

These methods are available to you:

page.driver.browser.switch_to.alert.accept
page.driver.browser.switch_to.alert.dismiss
page.driver.browser.switch_to.alert.text # the confirmation text

Spreewald gives you steps like these:

When I confirm the browser dialog
When I cancel the browser dialog

Note that recent versions of Selenium will automatically dismiss confirmation dialogs. [Here is how to fix that](https://makandracards.com/makandra/617366-configure-selenium-webdriv...

Rails 3.1.0 has been released!

jQuery as new default Javascript library, streaming response support, attr_accessible with roles, prepared statements, easier migrations.

Detect the current Rails environment from JavaScript or CSS

Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead.

You might be better of checking against the name of the current Rails environment. To do this, store the environment name in a data-environment of your <html>. E.g., in your application layout:

<html data-environment=<%= Rails.env %>>

Now you can say in a pi...

Chosen - makes select boxes better

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

JSONP - Wikipedia

Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML <script> element. Taking advantage of the open policy for <script> elements, some pages use them to retrieve Javascript code that operates on dynamically-generated JSON-formatted data from other origins. This usage pattern is known as JSONP. Requests for JSONP retrieve not JSON, but arbitrary JavaScript code.

Cross-Origin Resource Sharing - Wikipedia

Cross-Origin Resource Sharing (CORS) is a browser technology specification, which defines ways for a web service to provide interfaces for sandboxed scripts coming from a different domain under same origin policy. CORS is a modern alternative to the JSONP pattern. While JSONP supports only the GET request method, CORS also supports other types of HTTP requests. Using CORS enables a web programmer to use regular XMLHttpRequest which supports better error handling than JSONP. On the other hand, JSONP works on legacy browsers that do not have C...

simple_format helper for Javascript

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 > 0) {
    str = str.replace(/\n\n+/g, '</p><p>');
    str = str.replace(/\n/g, '<br />');
    str = '<p>' + str + '</p>';
  }
  return str;
}

Unlike the Rails helper, this does not preserve whitespace. You probably don't care.

How to hide your selenium browser window with "headless"

Note: While the solution in this card should still work, we prefer another solution now: Hide your Selenium browser window with a VNC server.


If you would like to hide the annoying selenium browser window that always gets the focus and prevents you from working, you can use the headless gem. This note provides some instructions how you can get it to work with your cucumber accepta...

Rails 3: Make "link_to :remote => true" replace HTML elements with jQuery

In Rails 2, you could use link_to_remote ... :update => 'id' to automatically replace the content of $('#id').

To do the same in Rails 3, include usual rails-ujs JavaScript, and put this into your application.js:

$(function() {
  $('[data-remote][data-replace]')
    .data('type', 'html')
    .live('ajax:success', function(event, data) {
      var $this = $(this);
      $($this.data('replace')).html(data);
      $this.trigger('ajax:replaced');...

Failtale

Free Hoptoad/Airbrake alternative which can capture exceptions from any platform. It comes with a Rails notifier and a RESTful API to write your own notifiers for Javascript, etc.

Should we some day wish to do away with the current way we deal with exceptions, this might be a good place to start.

Disable text selection on iOS and Android devices

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

Popular mistakes when using nested forms

Here are some popular mistakes when using nested forms:

  • You are using fields_for instead of form.fields_for.
  • You forgot to use accepts_nested_attributes in the containing model. Rails won't complain, but nothing will work. In particular, nested_form.object will be nil.
  • The :reject_if option lambda in your accepts_nested_attributes call is defined incorrectly. Raise the attributes hash given to your :reject_if lambda to see if it looks like you expect.
  • If you are nesting forms into nested forms, each model involved ne...

Check whether an element is visible or hidden with Javascript

jQuery

You can say:

$(element).is(':visible')

and

$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation :

element.offsetWidth > 0 && element.offsetHeight > 0;

jQuery > 3

Query 3 slightly modifies the meaning of :visible (and therefore of :hidden).

Emulate jQuery'...

markbates/coffeebeans

When CoffeeScript was added to Rails 3.1 they forgot one very important part, the ability to use it when responding to JavaScript (JS) requests!

In Rails 3.1 it’s incredibly easy to build your application’s JavaScript using CoffeeScript, however if you fire off an AJAX request to your application you can only write your response using regular JavaScript and not CoffeeScript, at least until CoffeeBeans came along.

A nicer way to run RSpec and/or Cucumber

geordi, our collection of awesome shell scripts, has been extended by three scripts to help you call RSpec or Cucumber:

cuc

This script runs Cucumber the way you want it:

  • Prints some line feeds to easily find your test results when you come back to the console later
  • Configures Cucumber to use cucumber_spinner if it is available in your Gemfile
  • Runs Cucumber under bundle exec
  • Uses an old version of Firefox for Selenium (Javascript) features...

Soft-scroll to an anchor with jQuery

This snippet makes links that refer to an anchor (like "<a href="#something">...</a>") scroll softly to it.\
In this example we only do it for links that also own a data-animate attribute.

$('a[href^="#"][data-animate]').live('click', function() {
  var hash = $(this).attr('href');
  var offset = $(hash).offset();
  if (offset) {
    $('html, body').animate({ scrollTop: offset.top }, 'slow');
    location.hash = hash;
    return false;
  }
});

Note that this could basically work for any element whos...

IE7 not properly redrawing elements with position: relative

If you manipulate the DOM with JavaScript and your page contains nested elements with position: relative, chances are Internet Explorer 7 will not properly move to the right position.

I have not found a fool-proof workaround, but these are options that have worked for me:

  • Try to lose some position: relative attributes, so they do not nest. This is often impossible, though.
  • Force the correct redrawing of the elements using JavaScript. Adding a bogus class ($(element).addClass('touch')) seems to suffice.
  • Try to give the off...

Cucumber steps to travel through time with Timecop

These steps are now part of Spreewald.


Here are some useful examples how to use the attached Cucumber Timecop steps:

When the date is 2011-05-06
When the time is 2011-05-06 17:30

There is also one really awesome step that lets you travel to the past or to the future:

When /^it is (\d+|a|some) (seconds?|minutes?|hours?|days?|months?|years?) (later|earlier)$/

As yo...

Rails 3.1: Release candidate

Asset pipeline, HTTP streaming, jQuery as default framework, auto-reversable migrations, identity map for ActiveRecord.

Ruby 1.8.x support will be dropped with or after Rails 4.

Matching line feeds with regular expressions works differently in every language

Although regular expression syntax is 99% interchangeable between languages, keep this in mind:

  • By default, the dot character (".") does not match a line feed (newline, line break, "\n") in any language.
  • Some languages allow you to modify the behavior of a regular expression by appending a modifier to the pattern expression. E.g. /foo/i makes the pattern case-insensitive in many languages. Note however that some of these modifiers may not exist or mean entirely different things in different languages.
  • Some languages have a m...