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.

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.

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.

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

You can say this in Javascript:

$.fn.jquery
=> "1.11.1"

Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.

By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

Font Awesome version 5 changed some icon names, and introduces new prefixes fab, far, and fas.

There is a JavaScript shim that you can use as a "quick fix". It allows you to keep v4 icon names on v5.

The linked page includes details on using that, and a migration guide including a list of icon renames.

ClockPicker is a JavaScript and Bootstrap implementation of an Android-style time picker which looks and feels great.

Unfortunately, it is no longer maintained.