JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as...
...performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language. JavaScript Garden does not aim to teach you JavaScript...
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...
Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because...
...keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that...
When testing code that uses pushState / replaceState, your browser will appear to navigate away from http://localhost:3000/specs (or wherever...
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...
...you never want to override with a default. To make it worse, languages like JavaScript or Perl have many more falsey values, including the number 0 or the empty string...
...has a key :x, and fetch will return its value nil. Setting defaults correctly: JavaScript Plain ES5 (no libraries) Prefer to check if the variable is null or undefined before...
...Using jasmine.clock().mockDate() you can mock new Date() (which returns the current time in Javascript) While you can use SinonJS Fake timers, using the built-in Jasmine clock will save...
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...
...are for Sprockets. Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on...
...to other images in your stylesheets (background-image: url(/path/to/asset)) and sometimes in your Javascripts. You need to route all these paths through Rails or you won't get hashed...
...many ways to achieve this, from SVGs inlined into the HTML, SVGs inlined in CSS, JavaScript-based solutions, to icon fonts. Out of all these options, the tried and true...
...most advantages, since icon fonts are supported everywhere they perform well and require no JavaScript at all their icons align nicely with text their icons automatically inherit color and size...
Javascript that implements client-side hyphenation of HTML-Documents...
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...
Added utility methods for the Prototype Javascript framework...
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...
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side...
Javascript sprite library for Canvas
The Holy Grail of testing for front-end development; execute browser-less, console-based, javascript + DOM code right from within your Rails test suite...
You can use this code: function scrollToLine($textarea, lineNumber) { var lineHeight = parseInt($textarea.css('line-height')); $textarea.scrollTop(lineNumber * lineHeight); }
Sometimes modern Javascript projects get out of hand. A major culprit in this can be the messy handling of asynchronous tasks, leading to long, complex, and deeply nested blocks of...
...code. Javascript now provides a new syntax for handling these operations, and it can turn even the most convoluted asynchronous operations into concise and highly readable code...
...able to work around this issue in most projects by doing this instead: After '@javascript' do step 'I wait for the page to load'
...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...
...characters like & or = unescaped: # ❌ bad URI.encode('foo=foo&bar=bar') => "foo=foo&bar=bar" Javascript In Javascript, use encodeURIComponent: // ✅ good encodeURIComponent('foo=foo&bar=bar') => "foo%3Dfoo%26bar%3Dbar"
...time by only registering a single listener. When the descendants are changed dynamically via JavaScript, no additional event listeners must be registered to enhance new elements. This technique has some...
In the example above the container receives all click events and must run JavaScript to check if a .message element was hit. This can degrade performance when you deal...
A tooltip library that does not use Javascript. Works in IE9+. This library (or the technique used by it) could be a great choice for projects with a lot of...
...tooltips, which are hard to do fast with Javascript...