Skip to content

Instantly share code, notes, and snippets.

@semlinker
Forked from jookyboi/javascript_resources.md
Last active August 29, 2015 14:12
Show Gist options
  • Save semlinker/d3d1b8ebde99e48d4fd8 to your computer and use it in GitHub Desktop.
Save semlinker/d3d1b8ebde99e48d4fd8 to your computer and use it in GitHub Desktop.
Here are a set of libraries, plugins and guides which may be useful to your Javascript coding.

Libraries

  • jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS - Conventions based MVC framework for HTML5 apps.
  • Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • lawnchair - Key/value store adapter for indexdb, localStorage and more
  • Handlebars - Minimal semantic templating

Plugins

  • jQueryUI - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
  • Bootstrap - Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
  • Async.js - Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Although originally designed for use with node.js, it can also be used directly in the browser. Also supports component.
  • timeago - Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
  • Chosen - Chosen is a library for making long, unwieldy select boxes more friendly.
  • QTip2 - Second generation of the advanced tooltip plugin for jQuery
  • spin.js - JS replacement for gif loading spinners
  • Hotkeys - John Resig's plugin for adding/removing handlers for keyboard events
  • Linkify - jQuery plugin to format text containing URL or hashtag into clickable anchor tags.

Tools

  • Bower - Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
  • Grunt - Javascript Task Runner

Guides

  • Jasmine - Jasmine is a behavior-driven development framework for testing JavaScript code.
  • Building a Chrome Extension - Extensions allow you to add functionality to Chrome without diving deeply into native code. You can create new extensions for Chrome with those core technologies that you're already familiar with from web development: HTML, CSS, and JavaScript.
  • Backbone Tutorials - Backbone Tutorials is a collection of tutorials written by Thomas Davis.

A string trim function

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

Append an array to another array

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);

Transform the arguments object into an array

var argArray = Array.prototype.slice.call(arguments);

Verify that a given argument is a number

function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); }

Empty an array

var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to []

Don’t use delete to remove an item from array

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10

Truncate an array using length

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]

Pass functions, not strings, to setTimeout() and setInterval()

setInterval(doSomethingPeriodically, 1000);
setTimeout(doSomethingAfterFiveSeconds, 5000);

An HTML escaper function

function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", """: """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
}); }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment