The same way a mechanic uses his tools, a web designer or web developer uses his. In order to create modern websites or web apps with complex functionality you must use newly released tools when working on such projects. I’m trying to do my best in gathering these tools hoping that they’ll help you. Enjoy!

jQuery.PercentageLoader

jQuery.PercentageLoader

jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

CoverScroll jQuery plugin

CoverScroll jQuery plugin

This is a CSS3 variant of the Apple’s CoverFlow design pattern

mailcheck.js

mailcheck.js

The jQuery plugin that suggests a right domain when your users misspell it in an email address.

AngularJS

AngularJS

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

html shell

html shell

Happy.js

Happy.js

Lightweight form validation for jQuery or Zepto.js

jquery-handsontable

jquery-handsontable

Handsontable is a minimalistic (60 KB unminified) approach to Excel-like table editor in HTML & jQuery

Fantastic WYSIWYG editor on jQuery

Fantastic WYSIWYG editor on jQuery

Redactor is a free javascript program for writing texts on the web.

Balloons.IO

Balloons.IO

Balloons.IO is a web multi-room chat server and client ready to use. It’s built with the help of node.JS, Express, Socket.IO and Redis. Balloons uses easy-OAuth for authentication with Twitter

jQuery++

jQuery++ is an MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.7 and later. It’s not a UI project like jQuery UI or jQuery Tools. Instead, it’s all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, this is jQuery’s bald-spot covering toupee.

WYSIHTML5 – A better approach to rich text editing

WYSIHTML5 - A better approach to rich text editing

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Open-sourcing Stylo

Open-sourcing Stylo

Have a play around with the app. You can draw shapes, apply shadows, background gradients and add a variety of other styles. Double click on an element to add text, and use keyboard shortcuts, such as command z to undo. In the latest versions of Chrome, you can even copy elements and paste their CSS into a text editor.

Opera Mobile Emulator

Opera Mobile Emulator

Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop. Connect the Opera Mobile Emulator to Opera Dragonfly and do your mobile CSS, JS and performance debugging, using a powerful developer toolkit.

Cookie Control

Cookie Control

Cookie Control enables you to comply with UK and EU law on cookies, in a couple of quick and easy steps. Proudly developed in Scotland by CIVIC.

UNDERSCORE STRING

UNDERSCORE STRING

Underscore.string is JavaScript library for comfortable manipulation with strings, extension for Underscore.js inspired by Prototype.js, Right.js, Underscore and beautiful Ruby language.

Underscore.string provides you several useful functions: capitalize, clean, includes, count, escapeHTML, unescapeHTML, insert, splice, startsWith, endsWith, titleize, trim, truncate and so on.

FnordMetric

FnordMetric

FnordMetric is a highly configurable (and pretty fast) realtime app/event tracking thing based on ruby eventmachine and redis. You define your own plotting and counting functions as ruby blocks!

Brunch

Brunch

Brunch is an assembler for HTML5 applications. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.

To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in common.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.

Nitro

Get stuff done with Nitro

Nitro is the best way to get things done. It’s simple, fast and powerful at the same time. Nitro also syncs with Dropbox or Ubuntu One. Due to the power of Nitro, you’ll never get a “conflicted copy”.

Detector: combined browser & feature detection for your app

Detector: combined browser & feature detection for your app

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

Detector dynamically creates profiles using a browser’s (mainly) unique user-agent string as a key. Using Modernizr it records the HTML5 & CSS3 features a requesting browser may or may not support. ua-parser-php is used to collect and record any useful information (like OS or device name) the user-agent string may contain.

pageguide.js

pageguide.js

pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

gmaps.js

gmaps.js

gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Responsify

Responsify

Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

QuoJS

QuoJS

QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented, and micro coherent API.

Chronoline.js

Chronoline.js

chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale.

Opauth

Opauth

Inspired by OmniAuth for Ruby, Opauth provides a standardized method for PHP applications to interface with authentication providers.

Opauth as a framework provides a set of API that allows developers to create strategies that work in a predictable manner across PHP frameworks and applications.

Gumby framework

Gumby framework

The Grid lets you lay out pages quickly and easily in a natural, logical way. The Gumby Framework’s grid system can be customized and molded to fit your every need — it’s easily adapted to any screen size or application. The possibilities are endless; the results are extraordinary.

ddSlick

ddSlick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

ALAJAX

– 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.

jQuery Verbose Calendar

jQuery Verbose Calendar

Why another jQuery calendar? I needed something very specific for a personal project which led me to created this calendar. After making it I thought it was pretty neat-o

Spectacular HTML5 Image Galleries Made Easy

Spectacular HTML5 Image Galleries Made Easy

You’ll love Juicebox’s simple set up and easy-to-use image galleries, and with full major browser and mobile device support, you can be sure your viewers will love them too, wherever they are.

Gmvault

Gmvault

Use the full sync mode to backup your entire gmail account in a unique directory. Your email backup repository can then be easily tar and moved from one machine to the other.

Ratio.js

Provides a Fraction / Rational / Ratio object for javascript. Why use Ratio.js? By keeping values in a rational form, you can maintain precision and can avoid common floating point operation errors in Javascript.

Select2

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.

jQuery.Gantt

jQuery.Gantt

jQuery Gantt Chart is a simple chart that implements gantt functionality as a jQuery component.

Backbone Aura

Backbone Aura

Backbone Aura is a decoupled, event-driven architecture on top of Backbone.js for developing widget-based applications. It takes advantage of patterns and best practices for developing maintainable applications and gives you greater control over widget-based development. Aura gives you complete control of a widget’s lifecycle, allowing developers to dynamically start, stop, reload and clean-up parts of their application as needed.

jQuery Transit

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery

jQuery Picture

jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

Singool.js

Singool.js is a lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes.

Responsive Tables

Responsive Tables

Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

jCSML

jCSML

Imagine you could create complex animations that look the same on IE7+, Android, and iPhone/iPad. Now, imagine that it does not use Flash, SilverLight, SVG, or HTML5. Create professional quality jQuery animations and special effects that work on all major browsers and devices. Build the same animations found on this website using the BASIC version of jCSML

riloadr

A cross-browser framework-independent responsive images loader. The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time.

Siimpler

Siimpler

Siimpler is a simple HTML starting framework. This framework contains only the files and folders what you really need to start a web project.

Link From : http://www.designyourway.net/blog/resources/great-new-jquery-plugins-and-other-resources-for-web-designers/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s