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.
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:
- Your textarea needs to have a line-height in Pixels.
- 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...
Type text into Javascript prompt dialogs in Capybara/Selenium
Spreewald gives you steps like these:
When I enter "text" into the browser dialog
Also see Accept or deny JavaScript confirmation dialogs in Capybara/Selenium.
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:
- It does not freeze your server like when you're using a debugger. (Compared to the
Then console
step) - It enables interacting with the server. (Compared to taking screenshots in Capybara)
- It is a faster alternat...
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.