JavaScript

Introduction

JavaScript, as you will know if you have done any web development, is a client-side scripting language that enables some of the clever desktop-like behavior you can experience on various web sites today. Of course, AJAX plays an important part in this as well.

Getting Started

Best Practices

Tips and Tricks

Books

  • JavaScript: The Definitive Guide, Fifth Edition - A good book to have around. Follow the link to get a chapter breakdown along with code examples.
  • JavaScript - The Good Parts - “Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative book scrapes away these bad features to reveal a subset of JavaScript that’s more reliable, readable, and maintainable than the language as a whole-a subset you can use to create truly extensible and efficient code.”
  • JavaScript Rocks! - JavaScript Performance, Benchmarking, and Tuning - $25 ebook. It claims to be a no-nonsense guide to maximizing your JavaScript performance.

CoffeeScript

jQuery

This popular library deserves its own section. The following is documentation, tips, tricks, etc.

Plugins:

jQuery has lots of useful plugins. You might also check out Visual jQuery for a more visual experience of jQuery API or you can start learning jQuery now.

  • Tools - A very nice library for common tools you might need. It provides capabilities such as: tabs, tooltip, overlay, expose, scrollable, and flash embedding.
  • Tooltip - Adds tooltip pop-up and hover support to various elements on the page.
  • Block UI - A nice solution to blocking the UI for long AJAX processing giving nice feedback to the end user.
  • Live Query - Uses jQuery selectors to bind events or fire callbacks automatically.
  • timepickr - An elegant and easy-to-use plugin for selecting time.
  • moreSelectors
  • Intercept
  • Listen
  • js-hotkeys - Add/remove keyboard event handlers.
  • metadata - Extract metadata from a DOM Element and return it as an Object.
  • jGrowl - Adds message notification similar to that found with the Growl framework on the MacOS.
  • Gritter - Another solution for adding Growl-like messages to your web app.
  • Anti-aliased Rounded Corners
  • Lightbox
  • piroBox - A nice lightbox-like image viewer and dynamic resizer.
  • CrossSlide - A simple image slider.
  • Slides - Supports looping, auto play, fade or slide transition effects, cross-fading, image pre-loading, and auto generated pagination.
  • Galleria - An advanced and theme-able image slider and gallery for photos.
  • s3Slider
  • AnythingSlider - Slide and loop through any kind of media including images, text, video, etc.
  • SliderNav - Provides alphabetic sliding and navigation as found on iOS devices.
  • Wilq32.RotateImage - Rotate images using the HTML 5 canvas element.
  • Media - “Supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.”
  • Embed Quicktime
  • Chain
  • Form
  • Dynamic Form - Dynamically adds elements to a form.
  • Validation
  • Inline Validation - A handy and visually appealing way of adding inline validation messages for invalid form fields.
  • Valid8 - “Solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions.”
  • Ketchup - A “slim” form validator.
  • timeago
  • ScrollTo
  • LocalScroll
  • SerialScroll
  • Easy Slides - An easy and simple to use slide show plugin.
  • pageSlide - Animation effect that slides a page to reveal hidden content.
  • Flot
  • Image Preloader
  • Table Sorter - Easily enable sortable table columns with plenty of options for behavior customization.
  • Data Tables - “DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables.”
  • KeyTable - “A Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse.”
  • jTPS - Provides animated table navigation, sorting, pagination, etc.
  • jqGrid - A nice mapping and interface to tabular data with AJAX, sorting, and pagination support.
  • Flexigrid - A simple and elegant table navigation system.
  • Sheet - “Gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.”
  • Colorize - Allows tables to be color coded based on selection of rows and columns.
  • JX - An object oriented extension library for jQuery.
  • jsTree - Dynamic tree navigation with support for JSON data and AJAX loading.
  • Dynatree - Adds tree navigation with lazy load and AJAX support.
  • jParallax - Check out the demo.
  • mcDropdown - A complex, hierarchical combo box selector.
  • Sexy Page Curls - Adds page curl animations to pages.
  • GX - “GX is a full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property. “
  • jQTouch - “A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.”
  • Text Overflow - Condenses long text to ellipses.
  • Glow - Allows your elements to glow.
  • Superfish - “Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).”
  • Accordion - “Creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.”
  • Horizontal Accordion - Easily transform unordered lists into a horizontal menu.
  • CSS Template Layout - “Aims at providing web designers with a way to use the W3’s CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification.”
  • Transform - “Enables users to easily make cross-browser XML transformations with XSL.”
  • jQWidon’t - “Replaces the whitespace between the last two words of a given element’s contents with a non-breaking space, to prevent typographic widows.”
  • Fancy Letter - “Lets you prettify your web page by styling the first letter of any element while keeping the HTML markup clean and readable by both human and machine.”
  • XHR - “Provides a registry for different xhr implementations to co-exist.”
  • AJAX Filter - Provides a filter registry for dealing with different AJAX responses.
  • Clear Field - Provides default field values or messages that disappear upon clicking.
  • Field Tag - Provides descriptive watermarks for expected field values. The text will disappear upon clicking.
  • In-Field Labels - Provides default field values or messages that fade and disappear upon clicking.
  • Password Validation - Extends jQuery validation with the ability to rate password strength with a visible meter.
  • Chroma Hash - A color visualizer that changes shades based on dynamic computation of password hash for visual feedback.
  • Password Strength - It estimates the time it would take to hack your password. It is great visual feedback to remind those who are lazy about constructing good passwords.
  • Visualize - Adds chart and graph visualization to tabular data in an unobtrusive manner.
  • jqPlot - A plotting and charting library that can produce line, bar and pie charts with additional features.
  • Flip - Allows you to animate flipping elements in four different directions.
  • Anything Zoomer - A magnifier for just about anything.
  • Portal - An AJAX portal framework for jQuery.
  • AD Gallery - A customizable AD gallery.
  • Easy Slider - Easily implement image sliders.
  • jCarousel - “Enables controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).”
  • Float Object - Float an element to current scroll position.
  • Feedback - A quick way in which to provide feedback via popup messages that fade away after a duration.
  • Week Calendar - A weekly calendar and scheduling interface.
  • Swipe - “This plugin uses Mobile Safari’s built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.”
  • QuickFlip - Flips any HTML element over like a card.
  • Animated Navigation with CSS & jQuery
  • Tweetable - “A lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily. More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.”
  • Twit - Easily display Twitter feeds on your web page.
  • Truncatable - “A lightweight truncation plugin for jQuery. Designed for users who want to be able to hide and expand text on a page. “
  • Truncate - Truncates text in order to conserve space but then can be expanded for further reading.
  • Overscroll - “This plug-in takes any parent element with overflowing children elements and turns that parent into a scrollable pane.”
  • Elastic - Allows text areas to grow and shrink dynamically as more content is entered into them.
  • Code Expander - An automatic and elegant solution for presenting and expanding code on a web page.
  • Desktop - In case you want to create desktop within the browser, then this might be worth a look.
  • Browser Detection - Aids in detecting the type of browser being used.
  • Mark It Up - A universal WYSWYG markup editor.
  • Query Loader - An elegant way for preloading a page (especially one with images).
  • Utils - A collection of various utilities and aids.
  • Nano - A way in which to template views via JSON.
  • List Menu - Turn any list into a alphabetical and navigational menu system for easy access.
  • jDiv - Adds richer/multimedia content to your drop-down menus.
  • Sammy - RESTful Evented JavaScript.
  • Browser Detection - Aids in detecting the type of browser being used.
  • Message - “Allows you to easily display feedback messages as an unobstrusive overlay. The message fades away automatically after some time, avoiding the need to click an “ok” button or something similar. The user can speed up hiding of the message by moving the mouse or clicking anywhere.”
  • Pretty Date - “Provides client side date formatting in the style of Twitter’s timeline: ‘just now’, ‘5 minutes ago’, ‘yesterday’, etc.”
  • Treeview - “Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence.”
  • 10 jQuery Plugins for Easier Google Map Installation
  • iPhone Style Checkboxes - Add iPhone checkbox slider behavior to your app.
  • jBreadCrumb - Adds a nice visually collapsing/expanding bread crumb trail. Great for deeply nested navigation but with little screen real estate.
  • gMap - Easily adds embedded Google Map support.
  • Quicksand - Adds dynamic re-ordering of page content using beautiful animations.
  • Fitted - Makes entire content areas clickable.
  • Video JS - Add HTML5 video playback support complete with CSS3 skinning.
  • Snowfall - A lightweight but somewhat CPU intensive snowfall effect for images and backgrounds.

Libraries

  • Common JS - “A group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.”
  • Sun Labs Lively Kernal - A programming environment developed by Sun to build desktop-like apps on the web using pure JavaScript and requiring no additional plugins.
  • Google AJAX Libraries API - Serves up many of the popular libraries listed below. It is worth mentioning here because you can potentially speed up the loading of various JavaScript libraries from the Google server instead of hosting them on your own. More details here.
  • Prototype - Adds AJAX support for dynamic communication between browser and application. Here are some handy libraries built on top of Prototype: Starbox, Lightbox, Prototip, Proto.Menu, and ProtoChart.
  • script.aculo.us - Provides a cross-browser, user-interface for your web applications. Sits nicely on top of Prototype.
  • Yahoo! User Interface Library (YUI) - Another JavaScript library that is a collection of utilities and controls for building robust web interfaces.
  • Ext JS - Originating from the Yahoo! User Interface (YUI) library, Ext JS is a library that can be used to bring a lot of interesting UI behavior to your web application.
  • Dojo - A library that has I/O, widget, GUI, testing, and animated transitions amongst other things.
  • MooTools - A cross-browser and compact JavaScript framework with plug-in support. Check out the following plug-ins: JxLib, FancyUpload, and FileManager.
  • CSS Browser Selector - Enables special tags in your CSS to be used for specific browsers only.
  • Modernizr - “A small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.”
  • IE8 Compliance - Makes versions of IE less than IE8 behave like IE8.
  • Jester - A JavaScript client that supports REST API and also uses Ruby on Rails coding conventions.
  • LiveValidation - A library for client-side validation of text as it is typed.
  • Date JS - A library for dealing with date and time.
  • Timeframe - Built on top of Date JS, it allows you to select date ranges.
  • SoundManager 2 - Wraps and extends the sound capabilities of Flash.
  • PersistJS - A client-side, cross-browser persistent storage solution that does not use cookies.
  • ContentFlow - A library that provides coverflow-like effects.
  • Sphere - Turn images into three dimensional images.
  • Bluff - Create beautiful graphs. Ported for use by Ruby developers.
  • Highcharts- An elegant and visually appealing graphing and charting library. It does cost money to use commercially though.
  • InfoVis - A graph and chart visualization library.
  • Protovis - A graph and chart visualization library.
  • GChart - A graph and visualization library from Google.
  • Typeface - Allows you to load custom fonts without having to render to image like sIFR. It is in its infancy and has issues still.
  • JS.IO - A I/O library for network communication.
  • Pi - Designed for JavaScript programmers develop applications with reduction in browser differences.
  • jslibs - “A standalone JavaScript development runtime environment for using JavaScript as a general-purpose scripting language.”
  • Blackbird - Makes logging message to the console easy. Comes with a slick looking console as well.
  • Busy.js - Easily add/remove status indicators on a page.
  • GUID Generator - Code for creating unique IDs via JavaScript.
  • Syntax Highlighter - Good for representing code on your site for educational purposes.
  • ShiftZoom - A library for interacting with large images.
  • CKEditor - “A WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.”
  • WMD - Not really a library in the way others are listed on this page but a collection of files that allow you to add a WYSIWYG editor to your site using markdown.
  • SmartMarkUP - “A lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs.”
  • NicEdit - A WYSIWYG editor with the goal to be fast and lightweight.
  • WSIHat - A WYSIWYG JavaScript editor. More specifically it is the foundation from which you can apply your own UI to.
  • Mapeed.AddressChooser - “A Javascript script to create a nice address form for any websites that need to collect addresses. For example getting user’s address, place’s location or anything that can be localized on a map.”
  • Geo Fill - “Automatically fill form fields with geo information either by IP or Postcode.”
  • DLINK - Helps visual identify which links are internal, external, sub-domain, etc.
  • mimeparse - Provides basic functions for parsing mime types against a range of media types.
  • ActiveRecord - “Makes it easy to begin working with databases in JavaScript on the client or server, with Google Gears & Chrome, Aptana Jaxer, Adobe AIR or any platform supporting the W3C HTML5 SQL Specification (currently Webkit and iPhone).”
  • Offspring - “Offspring is a JavaScript library that applies CSS classes corresponding to some advanced CSS selectors, opening the door for more precise selectors in previously-incapable browsers.”
  • SWF Object - “An easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.”
  • Reflections - Adds reflections to images.
  • Whatever:hover - Patches :hover for IE browsers.
  • Joose - A meta object system where one can use OO techniques such as classes, mixins, etc. to crate robust objects.
  • Cappuccino - “Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.”
  • Guage - Add unobtrusive gauges to your pages (similar to Apple gauges).
  • IE6 Upgrade Warning - Display an elegant upgrade warning to users of your site on an outdated browser.
  • TextboxList - “Turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.”
  • Processing - “An open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.”
  • Sizzle - A pure-JavaScript CSS selector engine that works with all CSS3 selectors.
  • Base JS - “A lightweight JavaScript framework intended for use with Mobile Safari on the iPhone and iPod Touch.”
  • Rico - “An open source JavaScript framework used to create rich, highly interactive web applications.”
  • P4JS - A generic parse library.
  • APE (AJAX Push Engine) - An open-source engine for exchanging data amongst many nodes in real-time without reloading.
  • CiteDrag - Adds drag and drop support.
  • GitHub - JavaScript API for GitHub.
  • Doodle - a simple library for drawing and interacting with sprites via the HTML5 Canvas element.
  • Scripty2 - A UI library with some advanced effects.
  • Tablecloth - A lightweight way to add style and behavior to your tabular data.
  • Glimmer - A UI library for animations and effects.
  • Swell - Allows you to drag and drop files between browser and desktop (among other things).
  • Cartagen - “A vector-based, client-side framework for rendering maps in native HTML5.” Uses the canvas element.
  • Kamaloka - “An implementation of the AMQP messaging protocol in native JavaScript. It is setup to be used with Orbited but can be used with any library which produce TCPSockets in the browser similar to Orbited. Kamaloka bindings are generated from qpid XML protocol description files.”
  • WAMI - “Is a simple way to add speech recognition capabilities to any web page.”
  • Underscore - “Functional programming aid for Javascript. Works well with jQuery.”
  • Google Closure - “A broad, well-tested, modular, and cross-browser JavaScript library. Web developers can pull just what they need from a wide set of reusable UI widgets and controls, as well as lower-level utilities for the DOM, server communication, animation, data structures, unit testing, rich-text editing, and much, much more.” Read more.
  • Jaml - HAML for JavaScript.
  • Simply Buttons - A nice way to style and make buttons more usable. JavaScript support is provided for further animation.
  • Express - “Insanely fast (and small) server-side JavaScript web development framework built on node.js and the V8 JavaScript engine.”
  • MathJax - “High-quality display of LaTeX and MathML math notation in HTML pages.”
  • Orderly - “A textual format for describing JSON. Orderly can be compiled into JSONSchema. It is designed to be easy to read and write.”
  • TransM - Adds programmable image transition support.
  • Sublime Video - Adds HTML5 video support with full playback controls and support for all browsers and mobile devices.

Here is a list of great JavaScript and CSS menu libraries as well as 40 Useful JavaScript Libraries.

Tools

  • Line-Height - A tool that helps you determine line-height for various fonts (since each font has it’s own calculation).
  • XSS Rays - Requires a bit of setup but once you have a server configured, you can use this bookmarklet to scan for XSS holes.
  • IxEdit - “A JavaScript-based interaction design tool for the web.”

Testing

  • Test Swarm - A distributed continuous integration test system by John Resig of jQuery fame.
  • JS Context - Syntactic sugar for Javascript unit tests (i.e. like being able to build contexts and should statements).
  • JsUnit - A client-side testing framework.
  • Screw Unit - A BDD testing framework that feels a bit like RSpec for JavaScript.
  • QUnit - A test framework for the jQuery library. Read Chad Myers’ post on how to get started.
  • JSLitmus - Another testing library.
  • JavaScriptMVC - A complete testing framework for the MVC architecture.
  • jQuery Lint - A testing framework for jQuery code. Even detects poorly formed code and recommends best practices.

Performance

  • SunSpider - A JavaScript performance test engine developed by the WebKit team.
  • V8 Benchmark - A performance test engine developed by the Google team.
  • Dromaeo - A performance test engine developed by the Mozilla team.

Resources

Sub-Pages

Search

 

Twitter

Tweets

Categories