25+ fresh JavaScript resources for web 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. We’ve put together a list of more then twenty five fresh JavaScript resources to help save you time and energy along the way. In this post you can fine 25+ Fresh JavaScript Resources, framework, libraries, tools, techniques, and plugins. Enjoy!
You may be interested in the following modern trends related articles as well.
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.
Don’t forget to
subscribe to our RSS-feed and
follow us on Twitter — for recent updates.![]()
Add GraphicDesignJunction in your circle.![]()
It brings lots of new featured for working with strings, numbers, dates, arrays, objects,regular expressions and functions.
Sugar Features:
Object.fromQueryString
Converts the query string of a URL into an object.capitalize
would make the 1st letter capitalisEven
and isOdd
helps finding if the given number is odd or evencount
would find how many times the given character exists in an arrayisFuture
would return if any given date is bigger than todayThe library is very well-documented with powerful API and it is a huge helper for JavaScript-heavy applications.
Compatibility: All Major Browsers
Website:https://sugarjs.com/
It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.
Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).
Compatibility: Most Modern Browsers
Website: https://bartaz.github.com/impress.js/
Spine Mobile is a lightweight JavaScript framework, for building mobile wep apps, with familiar web technologies like HTML5 and CSS3 to easily design and develop mobile applications.
The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.
Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you’ll need Node.js.
Features:
It is well documented and there are open sourced examples to easily get started.
Requirements: Node.js
Website: https://spinejs.com/mobile
Demo: https://spine-mobile-currency.herokuapp.com/
Countdown.js emphasizes producing intuitively correct description of timespans which are consistent as time goes on. To do this, Countdown.js uses the concept of “today’s date next month” to mean “a month from now”. As the days go by, Countdown.js produces consecutively increasing or decreasing counts without inconsistent jumps. The range of accuracy is only limited by the underlying system clock.
It can provide the timespan in many formats like milliseconds, seconds, minutes, hours, days, weeks and even millennias.
There are methods for displaying it as an English sentence like “3 years, 6 months, 21 days, 10 hours, and 32 minutes”.
The countdown can be reset easily and there are callbacks both on start
and end
.
Website: https://countdownjs.org/
Demo: https://countdownjs.org/demo.html
It has support for text +images and can be shaped as a sphere, hcylinder or vcylinder.
The resource has so many settings for maximum customization and works even in IE (thanks to ExplorerCanvas).
The canvas
element is not supported by Internet Explorer versions up to and including version 8. However, the tag cloud above should be working in IE thanks to the ExplorerCanvas (Google code site) Javascript include file that translates canvas functions into IE’s VML. It is a bit slow, but it does work. Mostly.
At the time of writing you must use the latest trunk version of ExplorerCanvas, as the current version in the project downloads area does not have the required text output support.
Compatibility: All Major Browsers
Website: https://www.goat1000.com/tagcanvas.php
Besides the desktop, it also works on mobile browsers with touch interfaces (supports pinch to zoom and pan gestures).
A simple map helps finding out the which part of the image is being viewed and it is possible to enable fullscreen mode with a click.
PanoJS3 supports all modern major web browsers like Chrome 3+, Safari 3+, FireFox 2+, Internet Explorer 8+, Opera 9+.
PanoJS requires image tiles to be stored on a web server somewhere so it could fetch on request. You could use a free cross-platform command line utility Bio-Image Convert to split any image into tiles. It’s available for Mac, Windows and Linux and is open source so you sould compile it for any other system.
Compatibility: All Modern Browsers
Website: https://www.dimin.net/software/panojs/
Swipe brings content sliding to the mobile web to preserve space and allow for new types of interaction. Many mobile web sliders currently exist but few embody all the rules a slider like this should follow.
1:1 touch movement
1:1 movement, as described above, is about tracking the position of the touch and moving the content exactly how the touch interacts. This interaction is very common in native apps.
Resistant bounds
When Swipe is at the left-most position, sliding any more left will increase the resistance to slide, making it obvious that you have reached the end. This detection/resistance occurs at both left and right bounds.
Rotation/resize adjustment
When a user rotates their device (in turn resizing the browser window), the slider resets to make sure the sliding elements are the right size. This is only necessary for sliders without declared widths.
Variable width containers
Swipe allows you to set a width to the container, which designates the width of each slide element. This is important if you do not want a full width slider (the default).
Scroll prevention
Scroll prevention is one of the most overlooked pieces of mobile sliders. Swipe detects if you’re trying to scroll down the page or slide content left to right.
Library agnostic
Swipe doesn’t rely on any library. Trust me this is a good thing. All you have to do is pass in the container element, set some parameters, and BOOM goes the dynamite– you’re all set. You may choose to pass the element to Swipe with a library, but it’s not necessary.
Swipe is a standalone slider which doesn’t rely on any JavaScript library and has few configuration options like:
Also, it has API methods for custom interactions including the display of prev-next items and getting the current position.
Compatibility: All Modern Touch-Enabled Devices
Website: https://swipejs.com/
Download: https://github.com/bradbirdsall/Swipe
The library enables us to create and transform objects (using SVG/VML) dynamically.
There are built-in elements like line, circle, ellipse, polygon, etc. and support for stroking and/or filling them with many customization options.
JSGL API provides a set of fundamental objects, such as a line, a circle, polygon, or a text label, in a form of so-called JSGL elements.
JSGL element is practically a GUI component – through the use of appropriate methods, a programmer may change its appearance.
Demos provided (PathFinder and NeuralNet) give us a strong opinion on the capabilities of the library.
Compatibility: All Major Browsers
Website: https://www.jsgl.org/
Download: https://sourceforge.net/projects/jsgraphicslib/files/
The feature is triggered when readers select any desired text and an icon appears to inform them about the feature + create a unique link when clicked.
Readers just select text (paragraphs, sentences, words) and simply click the icon, copy the unique URL generated and share it with others. When a MASHA-generated URL is loaded, the selected text is highlighted so that it is seen easily.
There are callbacks for onMark
, onUnmark
and onHashRead
(when a MASHAURL is loaded) that makes custom events possible and a WordPress plugin exists for quickly adding this utility.
This utility was first developed for the official site of the President of Russia, where it was successfully launched. Since then we got a lot of questions “What is it?”, “Can I use it on my site?”, so we decided to bring development to public.
Compatibility: All Major Browsers
Website: https://mashajs.com/index_eng.html
Besides notifications, it supports alerts + confirmations and doesn’t require any other JS libraries to run.
The positions of the messages, their auto-expire duration and whether they can be controlled via keyboard or not can all be configured.
Each message type (except notifications) has callbacks for a customized interaction and the look/feel of messages can be completely styled.
This library was extracted from the code of DHTMLX suite. jsMessages library can be used under terms of MIT license (basically free).
DHTMLX is a JavaScript library that provides essential functionality for building cross-browser, Ajax-based user interfaces. Develop impressive web applications faster with a set of ready-to-use UI widgets.
Requirements: No Requirements
Compatibility: All Major Browsers (except IE6)
Website:https://dhtmlx.github.com/message/
Download:https://github.com/DHTMLX/message
jwerty is a tiny library, weighing in at around 1.5kb bytesminified and gzipped (~3kb minified). jwerty has no dependencies, It doesn’t require any other JavaScript frameworks but compatible with jQuery, Zepto.js and Ender.
Requirements: No Requirements
Compatibility: All Major Browsers
Website:https://keithcirkel.co.uk/jwerty/
Download:https://github.com/keithamus/jwerty
HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image. They were also designed to give users a faster experience by doing away with browser plugins such as Adobe Flash.
Unfortunately, older browsers don’t support HTML5 video and audio tags, and even modern browsers don’t support a consistent set of video codecs, making embedding a video rather difficult.
The html5media project makes embedding video or audio as easy as it was meant to be. It’s a fire-and-forget solution, and doesn’t require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It’s one of the smallest, fastest solutions available, and as browser technology improves it will become even faster.
Even in the Flash-fallback, the library applies the settings defined inside the <audio>
– <video>
tags to the player (like poster
image).
html5media can be installed to your own website or a free-hosted-version offered for a quick usage.
To make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the <head> of your document.
<script src="https://api.html5media.info/1.1.4/html5media.min.js"></script>
How to embed video
You can embed video into your page using the following code.
<video src="video.mp4" width="320" height="200" controls preload></video>
How to embed audio
You can embed audio into your page using the following code.
<audio src="audio.mp3" controls preload></audio>
Compatibility: All Major Browsers
Website:https://html5media.info/
Download:https://github.com/etianen/html5media
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!
Elycharts comes with many interactions like mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more.
Also, it can modify data dynamically with good-looking animations to display the change in charts.
The charts are generated with SVG/VML and the library is built on jQuery + Raphaël.
Elycharts can draw all frequently used chart types:
All charts can have multiple data series, with stacked and cumulative options and withmultiple axis support and automatic axis scaling.
So, for example, you can draw a stacked bar chart with a line chart over it in a different axis.
With Elycharts you can customize every aspect of the charts the way you want. All the colors, text parameters, sizes, grid types can be easily changed.
Furthermore, Elycharts natively support features like legend generation, data tooltips and labels, templates and a lot more…
To use all these features you don’t need any special programming skills. Configuration is expressed with a simple Javascript object, which is a simple set of keys and values.
Elycharts support dynamic data modification, with graceful animations to show the chart evolution. You can configure each aspect of animations used to initially render the graphs and to manage transformations of it.
Also, Elycharts also has a lot of interactions features to improve user experience: mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more…
Tested to work on all major browser (even in IE6 and without the need of plugins like ExCanvas) and operating systems, so your charts will be visible to all your visitors.
SVG Rendering is used on all browsers that supports it, VML rendering is enabled for the others (IE).
Compatibility: Firefox 3.0+, Safari 3.0+, Opera 9.5+, Internet Explorer 6.0+, Google Chrome/Chromium.
Requirements: jQuery & Raphaël
Compatibility: All Major Browsers
Website:https://elycharts.com/
Demo:https://elycharts.com/examples
Download:https://elycharts.com/download
Using a simple function, a canvas element (loader) is created inside a placeholder div and multiple instances can be created at the same page.
You can try the Cusromizer to see how easy it is to create the sexiest preloaders on the web. If you like what you created, feel free to download your custom CanvasLoader and use your custom snippet.
There are few different loader types supported and they can be customized in many ways like color, density, speed, diameter, fading, FPS and scaling. Also, functions exist for getting the values of each parameter.
Optionally, a web-based creator helps building the loader image by setting the values, previewing the output and downloading the HTML file.
Requirements: No Requirements
Compatibility: All Modern Browsers
Website:https://heartcode.robertpataki.com/canvasloader/
Download:https://github.com/heartcode/CanvasLoader
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.
Download Leaflet Javascript Library For Interactive Maps
Demo: https://leaflet.cloudmade.com/index.html
Download:https://leaflet.cloudmade.com/download.html
Website: https://leaflet.cloudmade.com/index.html
Such a usage ends up in bigger-sized web pages although it can be prevented easily by using “to-the-point” micro frameworks.
Microjs is a website which is a directory of such tiny (<5kb) JavaScript libraries and frameworks.
From a list of options, you can select the feature you need like: a base framework, CSS animation, data manipulation, etc. and it’ll present you the resources that can meet your requirements.
Although getting used to new frameworks may seem like a “loss of time”, it’ll probably pay back in load times (specially for the mobile).
Website: https://microjs.com/
A guider is a dialog box that guides a user through your application. This improves the user experience of a web application by visually introducing the user to important features. Enough text, let’s show you what we mean.
Guiders can be attached to an element on your web page, or they can be centered on their own. Attaching a guider to an element on your page is as simple as using theappropriate jQuery selector and a position value 1-12.The position value determines which direction the guider attaches to the element, according to the numbers on an analog clock. below example show guider is attached with a position value of 2.
Custom event handlers can be used to hide and show guiders. This makes interactively showing the user how to use your software by having them complete steps possible.
It requires jQuery and very easy to setup by simply creating the list of guiders, ordering them and attaching the events we want to each.
Requirements: jQuery
Compatibility: All Major Browsers
Website:https://blog.optimizely.com/introducing-guidersjs-an-open-source-guider-e
Download:https://github.com/jeff-optimizely/Guiders-JS
It has support for ID3 (with most of the tags) and works out-of-the-box in Firefox, requires “enabling Web Audio API” in Chrome and other browsers are not yet compatible.
As you can guess, the project is pretty experimental. With better browser support, it will be so useful specially for building real-time audio applications implemented in JavaScript.
Compatibility: Firefox 4+
Website:https://jsmad.org/
Download:https://github.com/nddrylliog/jsmad
Using Modernizr in the backend, it detects which HTML5 and CSS3 are supported, shows the result in a nice interface and links to the related W3C or WHATWG page for each property.
Haz.io is an open source project where you can get the source and update/improve it.
Website:https://haz.io/
Download:https://github.com/philippbosch/haz
This library provides realtime image effects using WebGL. There are three parts to glfx.js:
Every filter comes with different variables that can be configured to create custom effects.
Although WebGL is supported by most modern browsers, not by all of them yet (check if your browser supports it).
Requirements: No Requirements
Compatibility: Most Modern Browsers
Website:https://evanw.github.com/glfx.js/
Download:https://github.com/evanw/glfx.js
It has support for RSA + AES methods and the text can be encrypted with any given bit length (228, 1024, etc.).\
The content is encrypted with a public key and it can only be decrypted with that key (which makes sense if the recipient already has that information).
Cryptico.js doesn’t require any JS frameworks to function and it is well-documented.
Requirements: No Requirements
Website:https://cryptico.wwwtyro.net/
It creates the UI with CSS3 (VML in Internet Explorer) and works in all browsers (even in IE6).
The spinners can be customized in several ways like setting the number of lines, their color, length, width, radius, speed of the animation and the trail effect. Such a flexibility ends up in many possible variations.
And, Spin.js weights only 1.7kb gzipped which is smaller than an animated GIF file in most cases.
Requirements: No Requirements
Compatibility: All Major Browsers
Website:https://fgnass.github.com/spin.js/
Download:https://github.com/fgnass/spin.js
The library is lightweight (~1kb gzipped), doesn’t require any JavaScript frameworks and works in all major browsers (yes, including IE6).
Validation rules that are used frequently like numeric, required, e-mail, less/greater than, etc. are already included and it can be extended with new, custom rules.
It has support for chainable declarations for easily using multiple rules on a single input field.
And, although there are hard-coded warning messages for each rule, they can be overridden with a method provided.\
Requirements: No Requirements
Compatibility: All Major Browsers
Website:https://rickharrison.github.com/validate.js/
Download:https://github.com/rickharrison/validate.js
The applications created with it works in all of the popular platforms (iOS, Android, Blackberry and WebOs).
It has support for touch events like tap, double-tap or swipe and doesn’t use images (including the icons) as everything is vectorized.
Features:
HTML5 features like WebSQL, geolocation, history or device orientation can all be used.
A well-documented JavaScript API has methods for handling all the major stuff and Lungo.js is modular + completely customizable.
Requirements: No Requirements
Compatibility: iOS, Android, Blackberry and WebOs
Website:https://www.lungojs.com/
Download:https://github.com/TapQuo/Lungo.js
It is only 2.3kb, chainable, well-documented (supported with examples) and works pretty fast (with an optimized browser rendering buffer usage).
And, there is a queuing system which allows morphing multiple items.
Requirements: No Requirements
Compatibility: All Major Browsers
Website:https://jsmorph.com/
Demo:https://jsmorph.com/demos.html
Download:https://jsmorph.com/download.html
Using the library, the lists 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable. These actions not only include the values of <li>
elements but any other elements and tags used inside them.
It equips lists with add, edit and delete functionality. Also, getting values of items is so easy.
Compatibility: All Major Browsers
Website:https://listjs.com/
Demo:https://listjs.com/examples.html
Download:https://github.com/javve/list
Compared to jQuery Mobile (24kb), it is much smaller in size with only 3.5kb (both minified and gzipped) and covers most features with the same syntax.
When it comes to speed, jQMobi is impressive there as well and mentioned to be 3x faster on Android and 2.2x faster on iOS.
Framework Features:
The framework also has a UI library (again smaller in size) and includes plugins for mobile interactions and interfaces
Compatibility: WebKit Browsers
Website:https://www.jqmobi.com/
Download:https://github.com/appMobi/jQ.Mobi/downloads
The picker is a hidden layer, doesn’t use any pop-ups and can be positioned on any side of the input field.
It has 2 modes; HSV (hue saturation, value) or HVS, can be set to display a default color on initial load and its look can be customized.
There are functions provided for showing/hiding the color picker and it can generate RGB or HSV values from a HEX input.
Requirements: No Requirements
Compatibility: All Major Browsers
Website:https://jscolor.com/
Demo:https://jscolor.com/try.php
Download:https://jscolor.com/download.php
10 Useful jQuery Plugins For Designers
This collection is really helpful for designers and developers. thanks for sharing
Thank you very much for great quality resources.
Thank you very much for great quality resources.
Great resource collection, i do like them very much, thanks for the share 🙂