Prism - A New Lightweight, Extensible Syntax Highlighter, Built With Modern Web Standards In Mind

Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Features

• Dead simple - Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done!  
• Intuitive - Language classes are inherited so you can only define the language once for multiple code snippets.
• Light as a feather - The core is 1.5KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.  
• Blazing fast - Supports parallelism with Web Workers, if available.
• Extensible - Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture.  
• Easy styling - All styling is done through CSS, with sensible class names like .comment, .string, .property etc

Full list of features

• Only 1.5KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
• Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
• The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
• Supports parallelism with Web Workers, if available. Disabled by default (why?).
• Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
• Very easy to define new languages. Only thing you need is a good understanding of regular expressions
• All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
• Wide browser support: IE9+, Firefox, Chrome, Safari, Opera, most Mobile browsers
• Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
• Highlights inline code as well, not just code blocks
• Highlights nested languages (CSS in HTML, JavaScript in HTML
• It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
• Highlight specific lines and/or line ranges (requires plugin)
• Show invisible characters like tabs, line breaks etc (requires plugin)
• Autolink URLs and emails, use Markdown links in comments (requires plugin)

Requirements: None
Demo: http://prismjs.com/#examples
License: MIT License

Gridster - A jQuery Plugin That Allows Building Intuitive Draggable Layouts From Elements Spanning Multiple Columns

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.


Requirements: jQuery
Demo: http://gridster.net
License: MIT License

Flex - A Fluid Asymmetrical Animated Grid Plugin For jQuery

Flex is a fluid asymmetrical animated grid plugin for jQuery.  Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead the developer to a few plugins that were similar, but not the same. He saw one person say it was "quite impossible", thought it would be a fun challenge.


Requirements: jQuery
Demo: http://jsonenglish.com/projects/flex/
License: MIT License

BinaryJS - A JavaScript Library For Realtime Binary Streaming For The Web Using WebSockets

BinaryJS is a JavaScript library for bidrectional realtime binary data streaming with WebSockets.  BinaryJS is a lightweight framework that utilizes WebSockets to send, stream, and pipe binary data bidirectionally between browser JavaScript and Node.js.

• BinaryPack serialization format is fast, binary, and JSON-type compatible. Data stays binary end to end
• Automatically chunks large binary data buffers for streaming performance
• Send multiple streams of data concurrently over multiplexed websocket connection
• API implements Node.js read/write Streams. You can pipe any stream into BinaryJS streams (and vice-versa)
• "pause," "resume," and "end" as in the Streams API

Requirements: None
Demo: https://github.com/binaryjs/binaryjs/tree/master/examples
License: MIT License

Gauge.js -100% Native & Cool Looking Animated JavaScript/CoffeeScript Gauges

Gauge.js is a JavaScript library, written in CoffeeScript which enables you to create 100% native and cool looking animated JavaScript/CoffeScript gauges.

Features

• No images, no external CSS - pure canvas
• No dependencies
• Highly configurable
• Resolution independent
• Animated guage value changes
• Works in all major browsers
• MIT License

Browser Support

• Chrome
• Safari 3.2+
• Firefox 3.5+
• IE 9
• Opera 10.6+
• Mobile Safari (iOS 3.2+)
• Android 2.3+

Requirements: None
Demo: http://bernii.github.com/gauge.js/
License: MIT License

JZoopraxiscope - A jQuery Plugin For Making Animations From Static Images

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge's Zoopraxiscope.  JZoopraxiscope is licenced under the terms of the GPLv3 and the MIT License.

Browser Support

• Chrome 18.0.1025.162
• Mozilla Firefox 11.0
• Internet Explorer 8
• Safari 5
• Opera 11.62

Requirements: jQuery, jQuery UI
Demo: http://cobalys.github.com/JZoopraxiscope/
License: MIT License or GPLv3

jsSHA - A JavaScript Implementation Of The Entire Family Of SHA Hashes

jsSHA is a JavaScript implementation of the entire family of SHA hashes as defined in FIPS 180-2 (SHA-1, SHA-224, SHA-256, SHA-384, and SHA-512) as well as HMAC. Despite JavaScript not natively supporting 64-bit operations, SHA-384 and SHA-512 are even implemented! jsSHA is also 100% cross-browser compatible.


Requirements: None
Demo: http://caligatio.github.com/jsSHA/
License: BSD

Enquire.js - A Pure JavaScript Framework For Programmatically Responding To CSS Media Queries

Enquire.js does not aim to be a replacement for, but rather a supplement to, CSS media queries. Some circumstances demand more than what CSS based media queries can offer and this is where Enquire.js steps in. In a responsive design, you may want to do some complex things with your markup e.g:

• On a mobile device, generate a new a touch friendly main menu from your current menu
• Replace images with higher resolution variants for screens with high DPI
• Shuffle content around on smaller screens

Enquire.js makes it trivial to do all of these things and more!


Requirements: None
Demo: https://github.com/Wi...e/master/demo
License: Free

TerrificJS - A JavaScript Framework To Modularize Your jQuery Code

TerrificJS is a neat, clever piece of code that allows you to modularize your jQuery code by solely relying on CSS naming conventions.

The Terrific module structure helps you to organize your project in a very natural way. It reduces the complexity by splitting your code up in little pieces.

Modules are like Legos. Use them in your grid in every combination you can think of. Use them once, twice or as many times you like – even on the same page.


Requirements: jQuery
Demo: http://terrifically.org/
License: MIT License

Create.js - A Comprehensive Web Editing Interface For Content Management Systems

Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

The user interface philosophy behind Create is simple: all content that you are allowed to change becomes editable, right there on the page you’re reading. Any modifications you make are retained in your browser and can be sent back to the CMS with a push of a button.

With Create, it is time to stop filling forms and to start communicating with your web audience.


Requirements: None
Demo: http://createjs.org/demo/hallo/
License: MIT License

jQuery.Spritely - Create Dynamic Character & Background Animation In HTML & JavaScript

jQuery.Spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript.  It's a simple, light-weight plugin with a few simple methods for creating animated sprites  and dynamic scrolling backgrounds.  You can use it on any HTML web page, and any part of the page can interact with a sprite.

Features

• It works well on iPhone/iPod Touch/iPad - check out this page on an iPhone. (Please note that there is a problem with the current version of Mobile Safari on the iPad - see the documentation page for more information.)
• It has been tested successfully on all the major browsers - even Internet Explorer 6
• It's a great alternative to Flash if your desired platform does not support it.
• It's light-weight so you can do fill the whole window with movement without draining bandwidth.
• Animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
• You should be able to make fully accessible web pages in pure html and JavaScript without any problem

Browser Support

• Internet Explorer 6 +
• Firefox
• Safari
• Chrome
• Opera

Mobile Support

• Android
• iPhone
• iPad
• iPod Touch

Requirements: jQuery
Demo: http://spritely.net/
License: MIT License or GPL

jQuery TypeButter - Allows You To Set Optical Kerning For Any Font On Your Website

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you.

What Is Optical  Kerning (Source)?

Optical Kerning adjusts the spacing between adjacent characters based on their shapes and pays no mind to the kerning pairs.

Theoretically, Optical kerning will give you more consistent character spacing, because every character pair, even the most unlikely ones like zh or xw or gk, is kerned based on its character shapes. It's a matter of preference, but here are some things to consider:

• If your font includes few built-in kerning pairs, you're better off with Optical Kerning. Decorative and novelty fonts are likely to have few kerning pairs.
• When combining two typefaces in the same paragraph, the two fonts may use very different kerning metrics and may not look right side by side. This is another occasion when you'll be better served by Optical Kerning.
• You might want to view Metrics vs. Optical Kerning as a microcosm of the timeless drama of man vs. machine. Optical Kerning will be more consistent, more mathematically correctbut will it look better? Ultimately it depends on the quality of the metrics you are comparing it against.

So basically, that's what the jQuery Kerning does.

Requirements: jQuery
Demo: http://typebutter.com/demo/
License: CC Share-Alike 3.0 License

jQuery Ambiance - Notifications On The Fly By Just Calling A Function & Providing Some Information

jQuery Ambiance allows you to create notifications on the fly by just calling the function and providing some information.  The jQuery Ambiance plugin is for jQuery 1.7.2+.


Requirements: jQuery
Demo: http://richardhsu.github.com/jquery.ambiance/
License: MIT License or GPL

Approach - A jQuery Plugin That Allows You To Animate CSS Properties Based On Distance To An Object

Approach is a jQuery plugin that allows you to animate CSS properties based on distance to an object.  jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.  For example, you could use approach on an element's opacity, increasing the opacity as you get closer.


Requirements: jQuery
Demo: http://srobbin.com/jquery-plugins/approach/
License: MIT License or GPL

HTML5 jQuery Paint Plugin - Paint On A Canvas Area With Various Shapes & Colors Including An Eraser

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area with various shapes and colors including an eraser. It also features the fantastic Websanova Color Picker allowing you to set both border and fill colors. The canvas area can be set to any size you like and perhaps it’s greatest feature is the ability to save your drawing as an image and then load it back in later. In fact you can load any image in as your drawing as long as it is a base64 encoded PNG image.

Features

• Menu – Can be moved anywhere on the screen.
• Shapes – Ellipse, Rectangle, Line, Pencil and Eraser.
• Colors – Select colors for both border and fill, featuring the Websanova Color Picker.
• Width – Set the line or border width of the pencil and shapes.
• Save/Load – You can save your creations and load in any image.

Requirements: jQuery
Demo: http://www.websanova.com/plugins/paint/html5#websanova
License: MIT License or GPL