25 Useful JavaScript Tools For Designers & Developers

25 Useful JavaScript Tools For Designers & Developers
in jQuery , Resources 11 comments
Advertisements

Fresh JavaScript resources which are very useful for both designers and developers. JavaScript is an extremely useful scripting language for enhancing user experience and usability. It is becoming more and more popular, as a JavaScript developer, you’ll need to keep up with the latest news and learn new skills.

Today’s we put together a list of twenty five useful JavaScript Tools and resources to help save you time and energy along the way. The collection based on framework, libraries, tools, techniques, and plugins. Enjoy!

You may be interested in the following modern trends related articles as well.

JavaScript Library & Tools For Designers & Developers

These JavaScript Tools can help to develop your project must faster and easier. JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Here is the list of 25 responsive frameworks for front-end design. Enjoy!

1. Chart.js: Charting Library with HTML5 Canvas

Chart.js easy, object oriented JavaScript charting libaray with html5 canvas for designers and developers. It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

Chart.js: Charting Library with HTML5 Canvas

Website Link

2. Drawscript: Easily Convert Illustrator Shapes Into Code

Drawscript is an free extension for Illustrator (available in Adobe Creative Cloud), It generates graphics code from vector shapes in realtime. The extension is capable of converting them into codes like Obj-C, C++, JavaScript, Processing, ActionScript 3, JSON and raw bezier points.

Drawscript: Easily Convert Illustrator Shapes Into Code

Website Link

3. Bespoke.js: Lightweight Framework For Custom Presentations And Sliders

Bespoke.js is a lightweight (<1kb minified-gzipped) JavaScript framework for crafting totally custom presentations or content sliders.

It is a foundation that offers the base (keyboard + touch support and adding the necessary classes to slide items) and the rest (CSS transitions or any other JS ) can be developed however preferred.

Bespoke.js: Lightweight Framework For Custom Presentations And Sliders

Website Link

4. InstaStream.js: jQuery plugin to stream pictures

A simplistic plugin for only getting the images of a user and displaying them as a gallery. Just define the number of images to be pulled and that’s it.

InstaStream.js: jQuery plugin to stream pictures

Website Link

5. SVG.js: Lightwight JavaScript Library For Manipulate and Animating SVG

SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity. The library is standalone, very lightweight in size (5kb gzipped) and has lots of features.

SVG.js: Lightwight JavaScript Library For Manipulate and Animating SVG

Website Link

6. Browserhacks: Browser Specific CSS and JavaScript Hacks

Browserhacks is a website which presents a list of browser-specific CSS and JavaScript hacks.

Browserhacks: Browser Specific CSS and JavaScript Hacks

Website Link

7. iWantHue: Web-based Tool For Creating Color Palettes

iWantHue is a web-based color palette generator that provides powerful settings for finding the colors that play well with each other. It works by defining a range of hue, chroma +lightness and the app can return a palette of any size instantly.

iWantHue: Web-based Tool For Creating Color Palettes

Website Link

8. Stately: A Font For Creating US Maps

Stately is a symbol font that makes it easy to create a map of the United States using only HTML and CSS. Each state can be styled independently with CSS for making simple visualizations. And since it’s a font, it scales bigger and smaller while staying sharp as a tack.

Stately: A Font For Creating US Maps

Website Link

9. Typeahead.js: jQuery Autocomplete Plugin

Twitter has released new library named Typeahead.js for building smart auto-complete form fields. It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling. The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

Typeahead.js: jQuery Autocomplete Plugin

Website Link

10. Maplaec.js: Google Maps Javascript Helper

Maplace.js is a jQuery plugin that embed Google Maps into websites. Its quickly create markers and controls menu for the locations on map. It works with the latest Google Maps API (v3) and has methods for adding markers + custom content and drawing paths, polygons or routes.

Maplaec.js: Google Maps Javascript Helper

Website Link

11. Textillate: CSS Text Animations With jQuery

Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.

Textillate: CSS Text Animations With jQuery

Website Link

12. Parsley: Powerful, UX aware JavaScript Form Validations

Parsley is a JavaScript library, that can work with both jQuery or Zepto, for validating forms so easily. A lot. Parsley is totally aware of that, and is designed to help your users and not bother or frustrate them. Parsley has a full support for #UX concerns and detailed options. Override almost every Parsley default behaviors to fit your exact needs.

Parsley: Powerful, UX aware JavaScript Form Validations

Website Link

13. Hint.css: A Tooltip Library in CSS

Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.

Hint.css: A Tooltip Library in CSS

Website Link

14. Roole: A JavaScript-Powered CSS Preprocessor

Roole is a language that compiles to CSS. It similar to many inspirations from other CSS preprocessing languages like Sass, LESS and Stylus.

The most unique feature of Roole is that it has vendor prefixing built-in, so the language stays dead simple yet being able to prefix some extremely complex rules transparently. Since Roole is also a superset of CSS, you can use it directly as a CSS prefixer.

Roole: A JavaScript-Powered CSS Preprocessor

Website Link

15. Howler.js: JavaScript Audio Library For Web

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

It accepts multiple file formats for cross-browser compatibility, has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally).

Howler.js: JavaScript Audio Library For Web

Website Link

16. Audio5js: Cross-Browser HTML5 Audio

Audio5js is a Javascript library that provides a seamless compatibility layer to the HTML5 Audio playback API, with multiple codec support and a Flash-based MP3 playback fallback for older or unsupported browsers.

Audio5js: Cross-Browser HTML5 Audio

Website Link

17. KeyboardJS: A JavaScript library for Handling keyboard and Combos

KeyboardJS, a standalone JavaScript library, handles the keyboard part and helps us to understand any key strokes and turn them into actions. The library has support for both single + combo strokes and can work with keyboards of any locale.

KeyboardJS: A JavaScript library for Handling keyboard and Combos

Website Link

18. InK: Front-end Development Interface Kit

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers.

InK: Front-end Development Interface Kit

Website Link

19. xCharts: JavaScript Chart Library Using HTML-CSS+SVG

xCharts is an open JavaScript charting library that is built on top of D3.

It works with using HTML-CSS + SVG to create good-looking and custom-data-driven charts with ease. to create good-looking and custom-data-driven charts with ease.

xCharts: JavaScript Chart Library Using HTML, CSS, and SVG

Website Link

20. Alertify: Customizable Dialogbox with JavaScript

Alertify is a lightweight JavaScript library for displaying stylish notifications with ease.

The library doesn’t depend on any JS frameworks, can show notifications in a modal window and also feature growl-like messages.

Alertify: Customizable Dialogbox with JavaScript

Website Link

21. Sparky: JavaScript Sparklines Library

Sparklines are intense, simple, word-sized graphics. Sparky is a JavaScript library for drawing them dynamically in your web browser. In the words of Edward Tufte, who coined the term:

Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather a sparkline graphic can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic.

Sparky: JavaScript Sparklines Library

Website Link

22. Fine Uploader: Javascript Standalone File Uploader Library

Fine Uploader is a plug ‘n’ play script that ease file uploads and improve usability with the Ajaxed interface.

It only requires us to insert a CSS + JavaScript file and the rest is taken care of on the server-side with your favorite scripting language. No worries, ASP.NET, ColdFusion, Java, Node.js, Perl, PHP, Python implementations are offered in the download package.

Fine Uploader: Javascript Standalone File Uploader Library

Website Link

23. Pikaday: JavaScript Datepicker

Pikaday is a JavaScript datepicker with a light footprint and easy style-ability with modular CSS. It’s in ‘developer preview mode’ but already looking great.

The most popular one is probably the jQuery UI’s picker but it is heavy in size for any project that actually does only need a datepicker.

Pikaday: JavaScript Datepicker

Website Link

24. Chardin.js: Overlayed Instructions For Any HTML Element

Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour).

Chardin.js: Overlayed Instructions For Any HTML Element

Website Link

25. Jarallax: JavaScript Library for Create Parallax Scrolling

Jarallax is a feature-rich JavaScript library for easily creating and customizing parallax scrolling effects.

The library enables us to manipulate CSS using keyframes and it supports custom controllers.

Jarallax: JavaScript Library for Create Parallax Scrolling

Website Link

 
 
Author:
I'm Muhammad Faisal founder of GDJ and co-founder of FPD. I love all things having to do with WordPress, PHP, HTML5, CSS, or jQuery. And really enjoying to writing articles on web design and typography. You can catch me on Twitter, Facebook and Pinterest.

11 Comments

Trackbacks to this post.
Leave a Comment

Previous Post
«
Next Post
»
© 2010 - 2014 Graphic Design Junction.
Powered by Wordpress.