Use jQuery's selector engine on vanilla DOM nodes

There are cases when you need to select DOM elements without jQuery, such as:

  • when jQuery is not available
  • when your code is is extremely performance-sensitive
  • when you want to operate on an entire HTML document (which is hard to represent as a jQuery collection).

To select descendants of a vanilla DOM element (i.e. not a jQuery collection), one option is to use your browser's native querySelector and [querySelectorAll](https://developer.mozilla.org/de/docs/We...

AngularJS: How to force Content-Type on GET and DELETE requests

While you usually do not need a Content-Type on GET request (which have a blank body), an external API may still force you to send one.
Angular's $http service will strip that header when the request data (body) is blank. [1] This is possibly a misconception of RFC2616.

Here is how to send GET requests with a Content-Type header in Angular.

Example

Consider this request:

$http({ me...

Detect the current jQuery version

You can say this in Javascript:

$.fn.jquery
=> "1.11.1"

Bootswatch: Paper

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.

How to disable auto-complete on login forms

Disabling auto-complete in login forms is probably a bad idea, since it encourages weak passwords.

If you are still forced to implement this (maybe due to legal or policy requirements), this is how:

Prevent browsers from saving the password in the first place. Disabling autocomplete does not improve security.

How to prevent password saving:

To prevent the browser from saving passwords (and usernames), you need to:

  • copy username and password to hidden form fields before submitting the login form
  • c...

SmartUnderline

SmartUnderline is an open-source JavaScript library which uses clever tricks to draw underlines in a more beautiful and readable way.

We've not yet put this into a project, but its effect is very pretty. Please update this card when you use it.

Copy & Paste & The Web | CSS-Tricks

Insanely detailled guide about controlling copy & paste behavior using web technology in 2015.

Note that you can now trigger a copy action through Javascript, no Flash required.

Reverse-proxying web applications with Apache 2.4+

Note: Making a reverse proxy with nginx is much more straightforward.


A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:

  • Expose a local service that you cannot directly reach over the internet
  • "Change" the domain or path of a web application by rewriting them on the fly
  • Instantly change servers that respond to a name or ...

Clusterize.js

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.

Angular: Fixing "Referencing DOM nodes in Angular expressions is disallowed"

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

Cucumber: More patience for Selenium features

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.

yaronn/blessed-contrib

Build dashboards using ascii/ansi art and javascript

Awesome!

Magnific Popup: Responsive jQuery Lightbox Plugin

Responsive Lightbox JavaScript that just works.

You can use it for single images or a gallery. Animations are optional.

Databound

Databound provides Javascript a simple API to the Ruby on Rails CRUD.

Tries to expose a full model CRUD as an API. Not sure if this is useful for more refined requirements.

mailru/FileAPI

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

josephschmitt/Clamp.js

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

LoDash: isBlank and isPresent mixins

When you need to check a value for presence, don't rely on JavaScript since it considers 0 or "0" false. Also don't rely on LoDash's _.isEmpty:

if ('0') { ... } // false
if (0) { ... } // false

^
if (!.isEmpty('0')) { ... } // true (= good)
if (!
.isEmpty(0)) { ... } // false (= not good)

This is because isEmpty it is only meant for objects with a length.

While the name implies that it's meant only for collections, you probably still want something like isBlank or `is...

Chartkick

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.

Tearing Down Capybara Tests of AJAX Pages

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

Why you might not need MVC with React.js

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

Sticky table header with jQuery

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

Restangular: How to remove an element from a collection without breaking restangular

So you have a restangular collection and you want to remove an element from it, after you've successfully deleted it from the server.

The README suggests to say something like $scope.users = _.without($scope.users, user). While that works at first glance (the element is no longer in your collection), it will break horribly when you want to use restangular's attributes on that collection.

This...

Ruby: How to camelize a string with a lower-case first letter

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"

Listening to bubbling events in Prototype is easy

If you come across an (older) application that is using Prototype instead of jQuery, you may often see events bound to single elements only, like this:

$('foo').observe('change', updateThings);
$('bar').observe('change', updateThings);
$('baz').observe('change', updateThings);

If you are calling only one method in each case, this is unnecessarily ugly. Also, when your page contents have been replaced via AJAX (like sections of a form after choosing something), those event hooks will no longer wo...