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.

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can!

Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript solution like...

Chrome now supports desktop notifications using WebKit's webkitNotifications API. This means you can create popup bubbles from Javascript.

In your Cucumber features you can't really click hidden elements when using Selenium (it does work for a plain Webrat scenario, though).

Unfortunately you need to hack around it, like this:

When /^I press the hidden "([^\"]+)" submit button$/ do |label|
  page.evaluate_script <<-JS
    $('input[type=submit][value="#{label}"]').show().click();
  JS
end

If your button is nested into a container that is hidden this will not do the trick. You need a more complex method to also show surrounding containers:

When /^I pre...

One of the most common production errors are ActionController::MethodNotAllowed errors. They usually happen when someone reloads a form by pressing enter/return in the URL field, or by opening JavaScript links incorrectly.

The attached initializer provides a default way to deal with this.

You'll get the following behaviour:

• if the incorrect request has a HTTP_REFERER coming from the same application, set a flash, and redirect back
• if the incorrect request has no HTTP_REFERER or one coming from an external source, set a flash...

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']);
    ...

There are several options, but most of them are impractical. The best way is to use the :ruby filter:

:ruby
  puts javascript_include_tag(
    'lib/jquery-1.6.1.min.js',
    'lib/jquery-rails-ujs.js',
    'lib/jquery-ui-1.8.13.custom.min.js',
    'lib/jquery.ui.datepicker-de.js',
    'lib/jquery-ui-timepicker-addon.min.js',
    'lib/jquery.tools.min.js',
    'application.js',
    'google-maps.js',
    :cache => true
  )

...

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

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.

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

Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.

It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.

Check out the Demo and the basic example and then download version 0.3.

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>
</ul>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

  back...

Terminus is a Capybara driver where most of the driver functions are implemented in client-side JavaScript. It lets you script any browser on any machine using the Capybara API, without any browser plugins or extensions.

If you have several submit elements (inputs or buttons with type="submit") that each cause different things to happen (e.g. you might have a button that sends an extra attribute) you might run into trouble when submitting the form by pressing the return key in a field.

When nothing fancy like a tabindex is defined it seems as if the first submit element inside a form is chosen (and has its attributes submitted) when pressing return.\
So, if possible, put your "default" (aka least harmful) submit element before others.

NB: If you s...

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.

Web 2.0 sites have lots of tiny javascript/css files, which causes one extra round trip per file to the server and back! This is bad! Bundle-fu throws it all up into a big package and sends it out all at once.

Reads Active Record's validations and makes them available to live client side javascript

A Rails plugin that delivers a special message to DiggBar users, or runs frame-killer javascript.

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts.

Asynchronous JavaScript and CSS, also known as CSSHttpRequest, is a method of URI-encoding data in 2KB chunks split over several CSS rules with a modified data URI scheme. Because CSS is not subject to the same-origin policy, no service proxy is required.

iUI is a framework consisting of a JavaScript library, CSS, and images for developing iPhone webapps.

In a nutshell, Bowline lets you build cross platform desktop applications with Ruby, HTML and JavaScript. The idea is to make building desktop apps as simple (and fun) as building Rails websites.

Celerity is a JRuby wrapper around HtmlUnit – a headless Java browser with JavaScript support. It provides a simple API for programmatic navigation through web applications. Celerity aims at being API compatible with Watir.

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.