hyphenator

Javascript that implements client-side hyphenation of HTML-Documents.

OscarGodson/jKey - GitHub

jQuery plugin to register callback functions to keyboard shortkuts. Keyboard events in vanilla Javascripts are super-painful to work with, so hopefully this library can help.

kangax's protolicious - GitHub

Added utility methods for the Prototype Javascript framework.

Prototip 2 - Create beautiful tooltips with ease

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

epeli / Underscore.strings / source — bitbucket.org

String manipulation extensions for the Underscore.js javascript library.

flot - Google Code

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

biilly's doodle.js at master - GitHub

Javascript sprite library for Canvas

mynyml's holygrail at master - GitHub

The Holy Grail of testing for front-end development; execute browser-less, console-based, javascript + DOM code right from within your Rails test suite.

Scroll a textarea to a given line with jQuery

You can use this code:

function scrollToLine($textarea, lineNumber) {
  var lineHeight = parseInt($textarea.css('line-height'));
  $textarea.scrollTop(lineNumber * lineHeight);      
}

Some caveats about this code:

  1. Your textarea needs to have a line-height in Pixels.
  2. The code will scroll to the line number in the text area, not the line number of the original text. These will differ if any lines wrap at the edge of the textarea.

Also see our solution for [scrolling a textarea to a given position with jQuery](htt...

How to emulate simple classes with plain JavaScript

If you want a class-like construct in JavaScript, you can use the module pattern below. The module pattern gives you basic class concepts like a constructor, private state, public methods.

Since the module pattern only uses basic JavaScript, your code will run in any browser. You don't need CoffeeScript or an ES6 transpiler like Babel.

A cosmetic benefit is that the module pattern works without the use of this or prototypes.

Example

Here is an example for a Ruby class that we want to translate into Javascript using the module patter...

screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

Using the JS fullscreen API is painful because all browers use different methods and events and you need to use lots of boilerplate code to make your application work in all browsers.

The "screenfull" library wraps that for you, including events.

Examples

The linked GitHub repo contains some information. You basically use the library like this:

// Make an element go fullscreen
screenfull.request(element)

// Leave fullscreen
screenfull.exit()

...

Trigger an event with Javascript

This is non-trivial because you need to fake event objects and require different code for different browsers. Luckily, there is tool support for most types of events.

In jQuery you can say:

$('a#close_window').click();

In Prototype you can use event.simulate.js from the Protolicious library to say:

$$('a#close_window')[0].simulate('click');

To trigger custom events with Prototype, you can use the [built-in Element.fire()](http://api.prototypejs.org/dom/...

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a minimalistic headless WebKit.

It has fast and native support for various web standards:

DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headless testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter and many other usages.

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

JavaScript Start-up Performance

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has to parse, interpret & run them. In this post, we’ll dive into this phase for JavaScript, why it might be slowing down your app’s start-up & how you can fix it.

The article author also tested 6000+ production sites for load times. Apps became interactive in 8 seconds on desktop (using cable) and 16 seconds on mobile (Moto G4 over 3G).

Debugging cucumber feature with javascript + firefox vnc

TL;DR Debugging problems with javascript errors in cucumber tests is sometimes easier in the browser. Run the test, stop at the problematic point (with Then pause from Spreewald 1.7+) and open VNC for Firefox.

Features:

Jasmine: Reset the location when testing code that uses pushState / replaceState

When testing code that uses pushState / replaceState, your browser will appear to navigate away from http://localhost:3000/specs (or wherever you run your Jasmine tests). This is inconvenient, since reloading the document will no longer re-run the test suite.

To remedy this, copy the attached file to a place like spec/javascripts/helpers and #= require it from your tests. It will store the current location before every test and reset if afterwards (using location.replaceState).

traits.js - Traits for Javascript

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

Javascript Compressor - compress code online for free

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

JSMIN, The JavaScript Minifier

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.

Highslide JS - JavaScript thumbnail viewer

Highslide JS is an open source image, media and gallery viewer written in JavaScript.

Grafico: Javascript charting library • Design • Kilian Valkhof

Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information.

Sizzle JavaScript Selector Library

A pure-JavaScript CSS selector engine