WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use.

When you need to add a event listener to hundreds of elements, this might slow down the browser.

An alternative is to register an event listener at the root of the DOM tree (document). Then wait for events to bubble up and check whether the triggering element (event.target) matches the selector before you run your callback.

This technique is called event delegation.

Performance considerations

Because you only register a single listener, registering is ...

When deploying Rails applications you might have noticed that JS and CSS are not cached by all browsers.

In order to force Apache to add expiry dates to its response, add the attached .htaccess to the public directory. This will add a header such as Expires: Thu, 07 Oct 2010 07:21:45 GMT to the httpd response.

Configuring Apache

Check that you have mod_expires enabled. You need it for the attached .htaccess to work:

sudo a2enmod expires

Configuring Nginx

You can add this:

With this plugin, you can create a scalable tooltip by just using a single background image for the tooltip body.

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

Please note: "Permission to use Prototip on your domain is required and can be obtained by paying a small fee."

This will eventually be integrated into jQuery UI with the multiple: true option, but right now this is the way. Credits go to jqueryui.com.

Use this if you want to show or hide part of a form if certain options are selected or boxes are checked.

The triggering input gets an data-selects-visibility attribute with a selector for the elements to show or hide, like

<%= form.select :advancedness, [['basic', 'basic'], ['advanced', 'advanced'], ['very advanced', 'very_advanced]], {}, :"data-selects-visibility" => ".sub_form" %>

The elements that are shown/hidden look like

<div class="sub_form" data-show-for="basic"> 
  only shown for advancedness = basic 
</div>

...

You can write regular expressions some different ways, e.g. /regex/ and %r{regex}. For examples, look here.

Remember that it is always a good idea to match a regex visually first.

Characters

Literal Characters

[ ] \ ^ $ . | ? * + ( )

Character Classes

[ae]            matches a and e, e.g. gr[ae]y => grey or gray => but NOT graay or graey
[0-9]  ...

traits.js is a minimal, standards-compliant trait composition library for Javascript.

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

String manipulation extensions for the Underscore.js javascript library.

Currently not possible as the linked .htc file contains JavaScript which is not explicitly called.

The developers are working on a pure JavaScript solution which will have some downsides but work across different domains.

Compress and obfuscate Javascript code online completely free using this compressor.

In Webkit you can use the HTML5-attribute autofocus:

= form.text_field :title, :autofocus => 'autofocus'

Here is a jQuery fallback for browsers that don't speak HTML5:

var Autofocus = {

  supported: function() {
    return 'autofocus' in document.createElement('input');
  },

  fake: function() {
    $('[autofocus]').focus();
  },

  extend: function() {
    Autofocus.supported() || Autofocus.fake();
  }

};

$(Autofocus.extend);

jqueryElement.is(':checked')

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.

JSViz makes it easy to create dynamic 2D views of information. Practical applications include network graphs, navigation, and other dynamic layouts.

The Sexy Curls jQuery Plugin is an open-source jQuery plugin by Elliott Kember which lets you share in the beauty of the page fold.

JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

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

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Flotr is a javascript plotting library based on the Prototype Javascript Framework (version 1.6.0.2 at the moment) and inspired by Flot (written by Ole Laursen).

Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files. It takes any number of source files and preprocesses them line-by-line in order to build a single concatenation. Specially formatted lines act as directives to the Sprockets preprocessor, telling it to require the contents of another file or library first or to provide a set of asset files (such as images or stylesheets) to the document root.