Latest Javascript Resources For Web Designers And Developers

Javascript and jQuery plugins are very important resources nowadays for designers as clients want everything to be dynamic and modern. They are important also for their versatility and the possibility to create incredible new features with them.

I like to bookmark for myself all the new things that are launched in this particular industry so I can keep up with the advancements and I’m happy to share these bookmarks with you in an attempt to help you with your projects.

jQuery.fracs – determine the visible fractions of an element

jQuery.fracs - determine the visible fractions of an element

jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.

grumble.js

grumble.js

Originally written for Huddle.com, grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning.

A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

Elycharts

Elycharts

Elycharts is a pure Javascript solution, so it doesn’t require any client side plugins like Flash or Java. Running on the client browsers, you don’t need to install anything on your server. You need only to include some javascript files in HTML pages where you want to use drawing tools, and you’re ready for your new charts!

Candy — a JavaScript-based multi-user chat client

Candy — a JavaScript-based multi-user chat client

There are plenty of web-based chat clients out there. Most of them are built to emulate your instant messenger. They offer you tons of settings. They can join multiple networks, let you edit your profile, and even manage your message history.

JointJS

JointJS

JointJS is a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams.

jQuery Boilerplate – Jump-starting jQuery plugins development

jQuery Boilerplate - Jump-starting jQuery plugins development

Contains lots of comments to help you get going easily. It is truly object-oriented, it implements public and private methods as well as public and private properties, making it the ideal candidate for when building both simple and complex jQuery plugins.

It does not adhere to the suggestions made by the jQuery documentation regarding Plugins/Authoring and by doing so it provides better performance and memory usage by not creating multiple instances of itself and attaching them to the target DOM elements.

jQuery EasyUI

jQuery EasyUI framework helps you build your web page easily.

jQuery EasyUI framework help you build your web page easily.

  • easyui is a collection of user-interface plugin based on jQuery.
  • using easyui you don’t need to write many javascript code, you usually defines user-interface by writing some HTML markup.
  • easyui is very easy but powerful.

Boxjs

Boxjs

Boxjs gives you the flexibility of a modular loading system whilst providing the speed of a single, compressed JS file. Boxjs allows you to organise your files however you wish, but always deliver them to your users as quickly as possible.

MotionCAPTCHA

MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and doesn’t really have IE support – but the next releases will feature progressive enhancement and the ability to use this in production environments as a serious CAPTCHA alternative

JSColor

JSColor

JSColor is a simple & user-friendly color picker for your HTML forms. It extends all desired < input > fields of a color selection dialog. You can pickerize your input fields in two easy steps

Cuepoint JS

Cuepoint JS

Cuepoint.js is an open source plugin for adding subtitles to your HTML5 video. You’re free to use it for whatever you want. Take a look at the source code of this page for an example of how to use it

leanModal.js

leanModal.js

Features:

  • perfect for hidden page content
  • uber light at just 780 bytes (minified)
  • flexible width & height
  • image free
  • multiple instances on one page
  • great for login, sign up & alert panels, etc.

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Guiders.js

Guiders.js

Guiders are a user experience design pattern for introducing users to a web application.

Simple Overlay

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.

jsmad

jsmad is a pure javascript MP3 decoder, based on libmad, with an ID3 decoder written from scratch.

For example, jsmad allows Firefox 4.0+ to play MP3s without any Flash. Faster loading times. Fewer security holes. No 64-bit headaches on Linux. Fewer memory leaks.

jsmad opens up a whole world of realtime audio applications implemented in javascript: dj-mixers, samplers, sequencers, all these applications benefit from using mp3s as audio source.

heatmap.js

heatmap.js

heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. The heatmaps are fully customizable – you’re welcome to choose your own color gradient, change its opacity, datapoint radius and many more.

Awkward Showcase – A jQuery Plugin

Awkward Showcase – A jQuery Plugin

Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more.

Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website.

Augment.js

Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods.

Never overrides any native implementations; it only adds what is missing.

OpenJS Grid

OpenJS Grid

OpenJS Grid is the easiest jQuery Data Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it’s all done.

Leaflet – A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps

Leaflet - A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps

Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API.

It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5. Its top priorities are usability, performance, small size, A-grade browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.

Ninja UI

Ninja UI

Tooltipsy – a jQuery tooltip plugin for control-obsessed designers

Tooltipsy is a jQuery tooltip plugin created by Brian Cray because he was frustrated with the lack of CSS control and bulky includes of the others. Tooltipsy gives you complete control over the CSS, animation, and position.

Kaiten

Kaiten is a jQuery plug-in which offers a new navigation model for web applications.

Unlike conventional applications where the screen flush another without continuity between information and actions, with Kaiten interactions between the user and the application are a stack of contiguous screens where each screen is presented in columns.

jCanvas – jQuery meets the HTML5 canvas

jCanvas is a jQuery plugin that makes working with the HTML5 canvas easy.

microjs

microjs

How much library code do you really need — 50K? 100K? 150K? More? How much of that do you really use?

Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. But how often do we reach for the ride-on John Deere tractor with air conditioning and six-speaker sound system, when a judiciously applied pocketknife would do the trick better, faster, slicker?

Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only — and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

vintageJS – add some awesome retro-look to your images

vintageJS - add some awesome retro-look to your images

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via facebook or twitter.

AGILE Carousel

AGILE Carousel

Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup.

Peity

Peity is a simple jQuery plugin that converts an element’s content into a simple < canvas > mini pie, line or bar chart.

Skitter – Slideshow for anytime

Skitter – Slideshow for anytime

With 27 different animations, two types of navigation and many options to customize!

Adapt.js

Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions.

jquery.easie.js

jquery.easie.js

Css3-like easings for jQuery animations

  • Tweak the shape of easings
  • Compatible with Css3 easings
  • Small (less than 2kB minified)
  • Fast (uses lookup tables)

Live.js – one script closer to designing in the browser

Live.js - one script closer to designing in the browser

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

Enjoyed this article? Subscribe to read more like it

 

Sponsors