Navigation

Home
Search
Submit A Resource
Contact Us
About Functionn

Subscription Options


Subscribe By Email (265+)


Lists


Archives

Jul 31, 2012

Author: Hirvesh Posted At: 7/31/2012 Tags: , ,

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
Demohttp://prismjs.com/#examples
License: MIT License
Author: Hirvesh Posted At: 7/31/2012 Tags: , , , , , ,

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
Demohttp://gridster.net
License: MIT License
Author: Hirvesh Posted At: 7/31/2012 Tags: , , , , ,

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
Demohttp://jsonenglish.com/projects/flex/
License: MIT License

Jul 30, 2012

Author: Hirvesh Posted At: 7/30/2012 Tags: , , , , , ,

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
Demohttps://github.com/binaryjs/binaryjs/tree/master/examples
License: MIT License
Author: Hirvesh Posted At: 7/30/2012 Tags: , , , , ,

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
Demohttp://bernii.github.com/gauge.js/
License: MIT License
Author: Hirvesh Posted At: 7/30/2012 Tags: , , , , ,

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
Demohttp://cobalys.github.com/JZoopraxiscope/
License: MIT License or GPLv3

Jul 25, 2012

Author: Hirvesh Posted At: 7/25/2012 Tags: , , , , ,

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
Demohttp://caligatio.github.com/jsSHA/
License: BSD
Author: Hirvesh Posted At: 7/25/2012 Tags: , , , , ,

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
Demohttps://github.com/Wi...e/master/demo
License: Free
Author: Hirvesh Posted At: 7/25/2012 Tags: , , , , ,

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
Demohttp://terrifically.org/
License: MIT License

Jul 24, 2012

Author: Hirvesh Posted At: 7/24/2012 Tags: , , , ,

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
Demohttp://createjs.org/demo/hallo/
License: MIT License

Jul 19, 2012

Author: Hirvesh Posted At: 7/19/2012 Tags: , , , , , , ,

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
Demohttp://spritely.net/
License: MIT License or GPL
Author: Hirvesh Posted At: 7/19/2012 Tags: , , , ,

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
Demohttp://typebutter.com/demo/
License: CC Share-Alike 3.0 License
Author: Hirvesh Posted At: 7/19/2012 Tags: , , , , ,

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
Demohttp://richardhsu.github.com/jquery.ambiance/
License: MIT License or GPL

Jul 18, 2012

Author: Hirvesh Posted At: 7/18/2012 Tags: , , , , , ,

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
Demohttp://srobbin.com/jquery-plugins/approach/
License: MIT License or GPL
Author: Hirvesh Posted At: 7/18/2012 Tags: , , ,

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
Demohttp://www.websanova.com/plugins/paint/html5#websanova
License: MIT License or GPL
Author: Hirvesh Posted At: 7/18/2012 Tags: , , , , ,

Cubism.js - A D3 Plugin For Visualizing Time Series

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.

Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Cubism renders incrementally, too, using Canvas to shift charts one pixel to the left. This approach lets Cubism scale easily to hundreds of metrics updating every ten seconds! Despite asynchronous fetching, rendering is synchronized so that charts update simultaneously, further improving performance and readability.

Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Cubism’s horizon charts make better use of vertical space than standard area charts, allowing you to see many more metrics at-a-glance and increasing the likelihood of discovery.

Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources. Client-side metric arithmetic allows further flexibility by combining metrics from multiple sources. Cubism’s modular components are designed for extensibility. You can add new chart types and modes of interaction, too. Cubism builds on D3, making it highly customizable via CSS and JavaScript.


Requirements: D3.js
Demohttp://square.github.com/cubism/
License: Apache License v2.0

Jul 17, 2012

Author: Hirvesh Posted At: 7/17/2012 Tags: , ,

TypeLink.js - A Mini Pure JavaScript Library That Allows Users To Find Important Page Links By Typing

TypeLink is a mini pure javascript library that allows users to find important page links by typing.  If in the past you used to search for "about" "team" or even "login" links in a page, the common drill was Ctrl+f , then type "about" and then navigate the cursor to the link.

With TypeLink.js, you just type "about", or even "a" and hit enter.  The link to the page is automatically loaded.


Requirements: None
Demohttp://weakwire.com/projects/typelink
License: MIT License
Author: Hirvesh Posted At: 7/17/2012 Tags: , , , ,

safeQuery - Notification For Bad Selectors When Using jQuery

safeQuery warns you when jQuery calls return zero elements.  Silent failures such as bad selectors are annoying time-wasters.  Try the following in the console: $('.oops')

If the above class oops  is not present on the page, safeQuery will throw the error jQuery Selector ".oops" returned no matches

safeQuery has been tested with jQuery 1.7.2 and should work on all browsers. Just add the safeQuery script after loading jQuery.  safeQuery is also available as a bookmarklet which can load it onto any page.


Requirements: jQuery
Demohttp://reallygood.co.il/plugins/safeQuery/
License: MIT License
Author: Hirvesh Posted At: 7/17/2012 Tags: , , ,

stickyMojo.js - A Contained Fixed Positioned Sticky Sidebar jQuery Plugin

stickyMojo is a contained sticky sidebar plugin for jQuery. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.


Requirements: jQuery
Demohttp://mojotech.github.com/stickymojo/
License: MIT License

Jul 16, 2012

Author: Hirvesh Posted At: 7/16/2012 Tags: , , , , , ,

XRegExp - A JavaScript Library That Provides Augmented, Extensible Regular Expressions

XRegExp is an open source (MIT License) JavaScript library that provides augmented, extensible regular expressions. You get new syntax, flags, and methods beyond what browsers support natively. XRegExp is also a regex utility belt with tools to make your client-side grepping simpler and more powerful, while freeing you from worrying about pesky cross-browser inconsistencies and the dubious lastIndex property.

XRegExp is fully compliant with the regular expression flavor specified in ES3 and ES5. It works with Internet Explorer 5.5+, Firefox 1.5+, Safari 3+, Chrome, and Opera 9.5+. You can also use it on the server with Node.js.


Features

  • Adds new regex and replacement text syntax, including comprehensive support for named capture.
  • Adds new regex flags: s, to make dot match all characters; x, for free-spacing and line comments; and n, for explicit capture mode.
  • Provides an extensive and powerful suite of functions that make complex regex processing simpler.
  • Fixes or helps you avoid the most commonly encountered cross-browser inconsistencies in regex behavior and syntax.
  • Supports addons that add new XRegExp syntax, flags, and methods. Offical addons support Unicode, recursive matching, grammatical patterns, and more.


Requirements: None
Demohttps://github.com/slevithan...usage-examples
License: MIT License
Author: Hirvesh Posted At: 7/16/2012 Tags: , , , ,

Tocify - A jQuery Table Of Contents Plugin Which Can Be Styled With ThemeRoller

Tocify is a jQuery Table of Contents plugin, inspired by the Can.js and JavaScript Garden documentation. Tocify can be optionally styled with ThemeRoller, and animated with jQuery show/hide effects. Tocify also provides support for smooth scrolling, scroll highlighting, and the HTML5 pushstate API via History.js.


Features

  • Styleable with the jQueryUI Themeroller
  • Supports dynamic scroll and click jQuery show/hide effects
  • Supports HTML5 History pushstate API (via History.js) for forward and back button support
  • Supports smooth scrolling animations
  • Supports dynamic scroll highlighting
  • Supports a page extender option to make sure a page is big enough to scroll to all table of content items
  • Passes jsHint with no errors

Browser Support

  • IE7+
  • Firefox 4+
  • Chrome
  • Safari 4+
  • Opera 11+


Requirements: jQuery, jQuery UI
Demohttp://gregfranko.com/jquery.tocify.js/
License: MIT License
Author: Hirvesh Posted At: 7/16/2012 Tags: , , , , ,

Hallo.js - Distraction-Free Rich Text Editor For The Web

Hallo.js is the simplest web editor imaginable. Instead of cluttered forms or toolbars, you edit your web content as it is. Just you, your web design, and your content.

Hallo is not TinyMCE or Aloha Editor. Hallo isn't Microsoft Word, or even Google Docs. It is just the most simple and pleasurable web writing tool imaginable, available to be included into any web application under the liberal MIT open source license.

The Hallo editor operates as a jQuery UI plugin and has been written in CoffeeScript for the sake of simplicity. CoffeeScript is a beautiful little language that compiles into JavaScript.


Requirements: jQuery, jQuery UI
Demohttp://hallojs.org/
License: MIT License

Jul 13, 2012

Author: Hirvesh Posted At: 7/13/2012 Tags: , , , , , , , ,

jQuery Roundabout - Converts Nested HTML Structures Into Interactive, Turntable-Like Areas

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones. Roundabout is equipped to play nicely with a couple of other plugins if they’re made available.

It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects.


Requirements: jQuery
Demohttp://fredhq.com/projects/roundabout/
License: BSD License
Author: Hirvesh Posted At: 7/13/2012 Tags: , , ,

LinkedIn Dust - Asynchronous Templates For The Browser & Node.js

Dust provides asynchronous templates for the browser and Node.js.


Features

  • Async/streaming operation
  • Browser/node compatibility
  • Extended Mustache/ctemplate syntax
  • Clean, low-level API
  • High performance
  • Composable templates


Requirements: None
Demohttp://linkedin.github.com/dustjs/
License: MIT License
Author: Hirvesh Posted At: 7/13/2012 Tags: , , , , ,

taciónJS - A jQuery Mobile Framework For Creating Real-Time Presentations

taciónJS is a jQuery Mobile framework for creating real-time presentations.  One of the great features you get with tación is syncing. 
Syncing is a mechanism that allows the presenter and his audience to keep in sync. To help add clarity to the notion of syncing, tacion employs the metaphor of a driver (the presenter) and passengers (the audience). When the driver's device transitions to a new slide, he triggers an event on a sync channel. Passengers, viewing the presentation on their own devices, consume events on the sync channel, and transition to the same state as the driver.

Syncing allows a for a new, distributed type of presentation that can engage the audience in never-before seen ways. However, because not every implementation may call for syncing, its inclusion in each presentation is optional. To opt-in to syncing, one only need to define the "pusher" property in their manifest.json file. This property should provide a valid API key to the Pusher WebService.

So, what is Pusher? Pusher is an online service that makes it easy to add real-time communication to your web app. Pusher is free to sign up, and their free usage limits are pretty generous. Tacion uses Pusher to establish a "sync channel", all without forcing the implementor to host their own server.

Of course, integration with Pusher is arbitrary, and tacion will eventually support running your own socket server (if you so wish).


Requirements: jQuery, jQuery Mobile
Demohttp://azoff.github.com/tacion.js/examples/spain.js
License: MIT License or GPLv2
Author: Hirvesh Posted At: 7/13/2012 Tags: , , ,

EpicEditor - An Embeddable JavaScript Markdown Editor

EpicEditor is an embeddable JavaScript markdown editor.  EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.


Requirements: None
Demohttp://oscargodson.github.com/EpicEditor/
License: MIT License
Author: Hirvesh Posted At: 7/13/2012 Tags: , , ,

Social Web Icons - 25 Gorgeous SVG Icons With PNG Fallbacks

Social Web Icons is a set of 25 gorgeous SVG Icons with PNG fallbacks.  Each icon is designed to be used as the background of an anchor, and each icon has its own class as well as a couple of global classes. They are all set to be inline, so you can put them up against each other, in line with your text, or in any kind of layout or construct.

When you consider how common ultra-high resolution screens have become and couple that with the ubiquity of low-bandwidth mobile connections it becomes clear that we need to start really exploring and using alternate image methods. Since they are defined by vector shapes and colors rather than bitmaps, SVG files can be much smaller than a comparable PNG or JPG while also supporting any arbitrary size. The designers of the icon set did a great job putting together a series of refined, vibrant icons that rely on modern browser support for SVG (with small PNG fallbacks).

SVG images are still somewhat poorly understood and underutilised — the hope is that playground pieces like this will start to really illustrate their value and lead to greater understanding and adoption (starting with our own understanding).


Requirements: SVG
Demohttp://www.zurb.com/playground/social-webicons
License: CC Attribution 3.0 License
Author: Hirvesh Posted At: 7/13/2012 Tags: , , , , , ,

Foundation 3 - The Most Advanced Responsive Front-End Framework In The World

Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.


Features

  • Flexible GridThe Grid lets you lay out pages quickly and logically with a flexible, nestable system. Even better, the Grid can be whatever size you need — it's easily adapted to any size screens, from phones to TVs.
  • Rapid PrototypingFoundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.
  • Multidevice MobilityThe Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites — the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.


Requirements: None
Demohttp://foundation.zurb.com/case-flite.php
License: MIT License

Jul 11, 2012

Author: Hirvesh Posted At: 7/11/2012 Tags: , , , , , ,

HTML5 Sortable - A jQuery Plugin To Create Sortable Lists & Grids Using Native HTML5 Drag & Drop API

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.


Features

  • Less than 1KB (minified and gzipped).
  • Built using native HTML5 drag and drop API.
  • Supports both list and grid style layouts.
  • Similar API and behaviour to jquery-ui sortable plugin.
  • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.


Requirements: jQuery
Demohttp://farhadi.ir/projects/html5sortable/#demos
License: MIT License
Author: Hirvesh Posted At: 7/11/2012 Tags: , , , , , ,

jQuery Twitter Bootstrap Tour - Quick & Easy Way To Build Your Product Tours With Twitter Bootstrap Popovers

jQuery Twitter Bootstrap Tour is a quick and easy way to build your product tours with Twitter Bootstrap Popovers.  Setting up the plugin is very easy.  It is licensed under Apache License v2.0.


Requirements: jQuery, Twitter Bootstrap
Download: https://github.com/sorich87/bootstrap-tour/
Demo:  http://sorich87.github.com/bootstrap-tour/
License: Apache License v2.0
Author: Hirvesh Posted At: 7/11/2012 Tags: , , , , , , , ,

Zebra - A JavaScript Library With A Rich Set Of UI Components Implemented Using OOP

Zebra is a new OOP, Rich WEB UI programming philosophy that makes stress to modular software engineering as an opposition to HTML DOM/CSS manipulation with scattered everywhere JavaScript code. Zebra can rely on almost empty HTML as a container for JS code.

Zebra core introduces and implements easy and very clear OOP concept. Inheritance, interfaces, method overloading and overriding, constructors, inner classes, packaging and other OOP features can be found there. Following OOP stimulates implementing well designed, supportable, extendible and pretty code.

Zebra Rich WEB UI is powerful engine that allows developers to implement any imaginable user interface components. Zebra UI core employs new HTML5 Canvas element where any custom content can be rendered. Having full control over UI components rendering you can get rid of typical annoying WEB UI “puzzling” and heavy CSS/DOM manipulations.

Features

  • Easy JS OOPSimple and light weight Zebra JavaScript code supplies easy for understanding, eyes candy OOP concept
  • Rich Web UIOver 30 various fully customizable UI components. Flexible layouts, controllable look and feel, XML UI form description .
  • Result In 5 MinutesDeveloping Zebra application is revolving around writing well structured code with almost zero DOM/HTML dependencies.


Requirements: None
Demohttp://www.lw-zone.org/zebra/test/live-demo.html
License: GPL or MIT License

Jul 10, 2012

Author: Hirvesh Posted At: 7/10/2012 Tags: , , ,

Recline.js - A Simple But Powerful Library For Building Data Applications In Pure JavaScript & HTML

Recline.js is a simple but powerful library for building data applications in pure JavaScript and HTML.


Features

  • Open-source (and heavy reuser of existing open-source libraries)
  • Pure JavaScript (no Flash) and designed for integration -- so it is easy to embed in other sites and applications
  • View and edit your data in clean grid interface
  • Bulk update/clean your data using an easy scripting UI
  • Visualize your data


Requirements: None
Demohttp://reclinejs.com/demos/
License: MIT License
Author: Hirvesh Posted At: 7/10/2012 Tags: , , ,

HubInfo - A jQuery Plugin To Show Information About Your Github Repo

HubInfo is a jQuery plugin to show information about your GitHub repo.  If you've ever wanted to show off information about your Github repository, this is the plugin to do it.  It weights at only at around 2KB and has a tweet option included.


Requirements: jQuery
Demohttp://projects.jga.me/hubinfo/
License: MIT License
Author: Hirvesh Posted At: 7/10/2012 Tags: , , , , , ,

OxJS — A JavaScript Library For Web Applications

OxJS (pronounced oh-ex-jay-ess) is a comprehensive JavaScript library, originally developed for the media archive platform pan.do/ra. While it still has bugs, holes, design errors and lots of cruft, its good parts may already be of interest to a wider audience.

Core Library

The core of OxJS is Ox.js, a general-purpose utility library. It embraces functional programming, supports modules, provides lots of tools to deal with dates, has all the missing math methods (plus some more for geographic coordinates) and helper functions for strings and regular expressions, fixes type detection and equality testing, includes utilities to handle HTML, the DOM and remote requests, can tokenize and minify JavaScript, comes with its own documentation format, including inline tests, and does many other cool things.


UI Framework

Then there are modules, most notably Ox.UI, which provides a simple but flexible model to write complex, desktop-class web applications for HTML5-compliant browsers. Ox.UI has tons of highly customizable and fully themable widgets: all the form elements you ever wanted, menus that actually work, resizable panels and dialogs, grid and table views that can hold millions of items, maps and calendars done right, a feature-rich video player, and lots more. These widgets communicate via built-in events, they can be extended or recombined to form new widgets, and, above all, they allow you to focus on your application and stop arguing with the DOM. And if you need to, each widget comes with the exact same API as a jQuery-wrapped DOM element. But Ox.UI also provides the logic to bring these pieces together, including custom events, keyboard focus, remote API discovery and client-side URL handling. As long as your backend speaks JSON, it doesn't have to speak any HTML whatsoever.


Other Modules

Among the other modules, Ox.Unicode helps with converting or sorting unicode strings, Ox.Image can do basic image manipulation, including steganography.


Requirements: None
Demohttps://oxjs.org/#examples
License: GPL or MIT License

Jul 9, 2012

Author: Hirvesh Posted At: 7/09/2012 Tags: , ,

Githtml - Chrome/Firefox Extensions For View Beautifully Rendered HTML On Github Repos

Githtml is an extension for Google Chrome and Firefox which allows you to view beautifully rendered HTML on github repos.  This comes in handy if you've every wanted to see example code which are found in repos, without actually downloading them.  It helps in saving time and frustration.


Requirements: None
License: Free
Author: Hirvesh Posted At: 7/09/2012 Tags: , , , , , ,

Selectable.js - A jQuery Plugin To Turn Anything Into A Selectable/Checkable Element

jQuery.Selectable.js is a jQuery plugin which allows you to turn anything into a selectable/checkable element.  Using this jQuery plugin, you can convert elements like buttons to checkboxes/radio button easily.


Requirements: .jQuery
Demohttp://endel.github.com/jquery.selectable.js/
License: MIT License
Author: Hirvesh Posted At: 7/09/2012 Tags: , , , ,

App.js - Build Desktop Applications For Linux, Windows & Mac Using HTML, CSS & JavaScript

App.js allows you to build desktop applications for Linux, Windows and Mac using HTML, CSS and JavaScript.


Why AppJS?

Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.


HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!


CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.


Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.


Requirements: Node.js
Demohttp://appjs.org
License: MIT License

Jul 6, 2012

Author: Hirvesh Posted At: 7/06/2012 Tags: , , , , , , , ,

Easy Pie Chart - A jQuery Plugin To Render & Animate Amazing Pie Charts

Easy Pie Chart is a lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.   It uses the canvas element to render simple pie charts for single values. These charts are highly customizable and very easy to implement.


Requirements: jQuery
Demohttp://rendro.github.com/easy-pie-chart/
License: MIT License or GPL
Author: Hirvesh Posted At: 7/06/2012 Tags: , , , , ,

ALAJAX - A jQuery Plugin Which Ajaxifies HTML Forms Easily

ALAJAX is a jQuery plugin which enabled you to easily ajaxify an HTML form.  It is very lightweight, - 3 KB uncompressed.


Features

  • Converts forms into AJAX simply.
  • No programming background needed.
  • Works with Dynamic Forms (forms that is updated by Javascript)
  • Lightweight code (3KB uncompressed).
  • Easy to understand and to modify.
  • Cool for Developers, designers and website ownsers.

Browser Support

Tested on: IE6+, Firefox, Chrome, Safari, Opera, and Mobile browsers.

Requirements: jQuery
Demohttp://www.alajax.com/demo
License: GPLv2
Author: Hirvesh Posted At: 7/06/2012 Tags: , , , ,

Mousetrap - A Simple JavaScript Library For Handling Keyboard Shortcuts

Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.4kb minified and gzipped.


Supported Keys

  • For modifier keys you can use shift, ctrl, alt, option, meta, and command.
  • Other special keys are backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, and del.
  • Any other key you should be able to reference by name like a, /, $, *, or =

Browser Support

  • Internet Explorer 6+
  • Safari
  • Firefox
  • Chrome

Requirements: None
Demohttp://craig.is/killing/mice
License: Apache License v2.0

Jul 5, 2012

Author: Hirvesh Posted At: 7/05/2012 Tags: , , , , ,

The Boiler - A Responsive HTML5/CSS3 Boilerplate WordPress Theme

The Boiler is a responsive HTML5/CSS3 boilerplate WordPress theme. It is the first of many themes releasing from a brand new theme studio Vorkshop. It’s got premium features, but it’s free.


Features

  • Theme Customizer & Options
  • Custom Header
  • Custom Background
  • Custom Templates
  • Shortcodes and more!


Requirements: WordPress
Demohttp://themes.vorkshop.com/boiler/
License: Free
Author: Hirvesh Posted At: 7/05/2012 Tags: , , , , , ,

jQuery UI Touch Punch - A Small Hack To Use Touch Events On Sites Using jQuery UI Library

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI library.

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

jQuery UI Touch Punch has been tested on iPad, iPhone, Android and other touch-enabled mobile devices.


Requirements: jQuery, jQuery UI
Demohttp://touchpunch.furf.com/
License: MIT License or GPLv2
Author: Hirvesh Posted At: 7/05/2012 Tags: , , , , , ,

Yeoman - A Robust Client-Side Stack To Quickly Build Beautiful Web Applications

Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications.


Features

  • Lightning fast scaffolding — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.
  • Automatically compile CoffeeScript & Compass — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.
  • Automatically lint your scripts — All your scripts are automatically run against jshint to ensure they're following language best-practices.
  • Built-in preview server — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.
  • Awesome Image Optimization — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.
  • AppCache manifest generation — I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.
  • Killer build process — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and if you're using AMD, we'll pass those modules through r.js so you don't have to.
  • Integrated package management — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g yeoman search jquery), install them and keep them updated without needing to open your browser.
  • Support for ES6 module syntax — Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.
  • PhantomJS Unit Testing — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.


Requirements: None
Demohttp://yeoman.io/
License: Free

Jul 4, 2012

Author: Hirvesh Posted At: 7/04/2012 Tags: , ,

Lovicons - A Set Of 48 Free Payments Icons For Well Know Payment Methods

Lovicons Free.Payments is an icon set which contains 48 free icons for well-known payment methods such as Visa, Visa Electron, Western Union, 2CO, American Express, Cirrus, Delta, Direct debit, Discover, JCB, Maestro, MasterCard, Moneybookers, Paypal, Solo, Switch. All of the icons are available in PNG format with transparency in three different sizes: 64x64, 48x48 and 32x32 pixels. 


Requirements: None
Demohttp://www.lovicons.com/collections/free-payments.html
License: CC Attribution 3.0 License
Author: Hirvesh Posted At: 7/04/2012 Tags: , , , , , ,

Speak.js - A Speech Synthesizer For Text-To-Speech On The Web Using Only JavaScript & HTML5

Speak.js is a port of the eSpeak speech synthesizer from C++ to JavaScript using Emscripten.  It enables text-to-speech on the web using only JavaScript and HTML5.  Speak.js supports multiple language, but you need to compile a custom version of it in your desired language for it to work.


Browser requirements:

Typed arrays. The eSpeak code is not portable to the extent that would be necessary to avoid using typed arrays. (It should however be possible to rewrite small bits of eSpeak to fix that.) Typed arrays are present in Firefox and Chrome, and hopefully by the time you read this in IE, Safari and Opera.


Requirements: None
Demohttp://syntensity.com/static/espeak.html
License: GPL
Author: Hirvesh Posted At: 7/04/2012 Tags: , , , , , , ,

CreateJS - A Suite Of JavaScript Libraries & Tools For Building Rich, Interactive Experiences With HTML5

CreateJS is a suite of JavaScript libraries & tools for building rich, interactive experiences with HTML5.  These components work together to enable rich interactive content on open web technologies via HTML5. 

These libraries are designed to work completely independently, or mixed and matched to suit your needs. The CreateJS Suite is comprised of: EaselJS, TweenJS, SoundJS, PreloadJS, and Zoë.


Components

  • EaselJSA JavaScript library that makes working with the HTML5 Canvas element easy.
  • TweenJSA JavaScript library for tweening and animating HTML5 and Javascript properties.
  • SoundJSA JavaScript library that provides a simple API, and powerful features to make working with audio a breeze.
  • PreloadJSA JavaScript library that lets you manage and co-ordinate the loading of assets.
  • ZOË A stand alone tool for exporting SWF animations as EaselJS sprite sheets that can be used in Canvas and CSS.


Requirements: None
Demohttp://createjs.com/#!/SoundJS/demos/testSuite
License: MIT License

Jul 3, 2012

Author: Hirvesh Posted At: 7/03/2012 Tags: , , , ,

aSimpleTour - A Simple Tour Plugin For jQuery

aSimpleTourPlugin is a jQuery plugin allows you to make website tours.  The plugin works using a very easy jSON Structure that gives it to the plugin all the elements, configurations, tooltips and help texts.

Requirements: jQuery
Demohttp://alvaroveliz.github.com/aSimpleTour/
License: MIT License
Author: Hirvesh Posted At: 7/03/2012 Tags: , , , ,

Fancy Timeline - A jQuery Plugin For General Purpose Timelines

Fancy Timeline is a jQuery Plugin which uses HTML and Javascript to create general purpose timelines.  It is similar to the other various timeline libraries featured on Functionn.  It allows you display data in a chronological manner.


Requirements: jQuery
Demohttp://flowcode.com...amples/default/
License: GPL
Author: Hirvesh Posted At: 7/03/2012 Tags: , , , , ,

Pagify.js - A jQuery Plugin For Single Page Web Sites

Pagify is a simple jQuery plugin that simply replaces the contents of a div with content from other HTML files.

Features

  • Simple - include pagify.js, create a div, make one jQuery call and you're done!
  • Lightweight - pagify.js is far less than 100 lines of code, well commented and easy to understand and extend!
  • Flexible - Get started by only specifying a list of pages or customize animations, default pages and caching!
  • Fast - Load all pages upfront or load on the fly; a simple $.get() is used to get content with minimal proccessing!
  • Clean - Replace long HTML files broken up into sections and verbose JS to do the simple task of switching content!
  • HTML & JavaScript Only - Uses only Javascript and HTML so it can be uploaded like any other static site!


Requirements: jQuery
Demohttp://cmpolis.github.com/Pagify/
License: MIT License

Jul 2, 2012

Author: Hirvesh Posted At: 7/02/2012 Tags: , , , , , ,

Gorgeous CSS3 Microsoft-Metro Buttons CSS/JS Library

CSS3 Microsoft-Metro Buttons is an implementation of Microsoft's Metro buttons.  It weights in at a healthy 21KB (compressed, 4KB gzipped), it's a light-weight and easy-to-use CSS/JS library that uses CSS3 styles for rich button design. The library can also work with Twitter Bootstrap. The buttons are also cross-browser compatible from IE8, to the latest version of Chrome, and Firefox so you don't have to spend countless minutes testing on different browsers.


Requirements: None
Demohttp://ace-subido.github.com/css3-microsoft-metro-buttons/
License: CC Attribution 3.0 License
Author: Hirvesh Posted At: 7/02/2012 Tags: , , ,

EuropaPHP - An Extremely Fast, Flexible And Lightweight MVC Framework For PHP 5.4+

EuropaPHP is an extremely fast, flexible and lightweight MVC Framework designed for PHP 5.4+.  EuropaPHP is the manifestation of the shortcomings of other PHP frameworks with a strong focus on scalability, standards, the view/controller relationship and dependency injection. It is specifically designed to be paired with your favourite libraries and it will seamlessly integrate with anything.


Features

  • Fast & ScalableBeing one of the fastest frameworks is one thing, but being one of the fastest in real world circumstances is another.
  • EfficientIt not only saves your server CPU cycles and your users time, the carefully engineered KISS API will also save you time.
  • ModularEuropa effortlessly integrates with any framework or library because it is functionally coherent, loosely coupled and follows widely accepted standards.
  • ExtensibleEvery bit of code is written with extensibility, maintainability, portability and ease of use in mind by making liberal use of namespaces, interfaces and abstract classes.
  • CleanThe code is wrought from the hands of talented, passionate developers that are constantly striving to write better code.
  • SimpleEuropa does not do everything, but is meant to do what it does effectively and utilize other awesome tools like Twig, Doctrine and Zend for what they do well.


Requirements: PHP 5.4+
Demohttps://github.com/treshugart/EuropaPHP/
License: BSD License
 


Recent Posts

Popular Categories



Popular Components



Popular Licenses