This is the first of my end of the year round up of HandPicked Goodies for Designers & Developers, I normally post these type of roundups the start of every new month of the year and today’s post will be focusing on all the new, great and wonderful JavaScript & jQuery Plugins that been released through this year.
I would like to say that not every JavaScript & jQuery Plugins that got featured on the monthly roundup will be featured as the list is huge anyway. and for your ease of reading pleasure I will be splitting the best of the JavaScript & jQuery Plugins into each months… so lets start.
January
Mapael
jQuery Mapael is a jQuery plugin that has been based on raphael.js which allows you to display dynamic vector maps.
For example, with Mapael you can display a map of the world with clickable countries, or you can just build a simple dataviz by setting some parameters in order to automatically set a colour depending on a value to each area of your map and display the associated legend.
Libscore
Libscore scans the top million sites on the web to collect stats on JavaScript library usage, you will see the search box, you just enter the case-sensitive variable that a library exposes itself as, e.g. jQuery, Modernizr, $.ui, or $.fn.fancybox and Libscore will aggregates this data to provide open source developers the numbers they need to measure their impact.
Specifically, Libscore scans for third-party modules loaded with RequireJS, jQuery plugins, window variables produced by non-jQuery libraries, and cross-domain external scripts (e.g. analytics services and CDNs).
Also it scans every site twice: once to pick up results for the desktop version of the site, and again to pick up results for the site’s mobile redirect page.
February
FormatJS
FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.
Immuntable
Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.
Immutable provides Persistent Immutable List, Stack, Map, OrderedMap, Set, OrderedSet and Record. They are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data.
Blockrain
Blockrain.js is a tetris game in HTML5 + Javascript with autoplay. Just copy and paste a bit of code and you’ll be good to go. Best of all, it’s responsive, no matter how wide or narrow your display is, you’ll always be able to play. You can also customize it as you want. Change the colors to fit your site. Adjust how fast the blocks are falling to make it more difficult. Add the scoreboard or not. That’s your decision.
March
NativeScript
NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms. Watch the video to learn more.
jQuery.loadScroll
Simple jQuery extension for dynamically loading images while scrolling. Intended for image-heavy websites to save bandwidth and decrease intial load time.
jQuery.imgx
imgx is a lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image variants, using Apple’s recommended naming convention for high-resolution graphics.
April
Dom Animator
Dom Animator is a nifty JavaScript library, used to show small ascii animations within comments in your dom. You can say this nifty item is a little easter egg for anyone inspecting your code. Nothing more, nothing less .It is a stand alone library so no jQuery, or the likes, so usage is pretty straight forward.
Cta.js
cta.js or “Call to Animation” is a light-weight performant library to animate any element (“action”) onto any other element (“effect”) on the page.It is written with an aim to promote visual continuity in web apps.
Skit
Skit is a pure JavaScript frontend for building better web clients. Featuring nearly 100% shared server and client-side code, zero configuration, automatic static resource bundling, and built-in server-side rendering.
May
Vorlon.js
Vorlon.js is an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. it’s powered by node.js and socket.io. so you can install Vorlon.JS and add a single line of JavaScript to your web app, run your server and start the Vorlon.JS dashboard.
And you can remotely connect up to 50 devices simultaneously, run your code on each or all of them with a single click and debug JavaScript on nearly any platform with a web environment plus the plugins allow you to add new features and resources.
Clusterize.js
Clusterize.js is a tiny plugin to display large data sets easily, the main idea is not to pollute DOM with all used tags but instead of that – it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of table so that browser shows scrollbar as for full list.
Layzr.js
Lazyr.js is a small, fast, modern, and dependency-free library for lazy loading images. Lazy loading boosts page speed by deferring the loading of images until they’re in (or near) the viewport. This library makes it completely painless – maximizing speed by keeping options to a minimum.
Elevator.js
Finally, a “back to top” button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.
June
Watermark.js
Watermark.js is a functional library for watermarking images in the browser. Written with ES6, and made available to current browsers via Babel. Supports urls, file inputs, blobs, and on-page images.
Toolbar.js
Toolbar.js is a jQuery plugin that creates tooltip style toolbars. It allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons plus You can run as many toolbars as required.
basicModal
BasicModal is a dialog-system for modern web-apps. It includes everything you need to display information, ask questions or request input from the user. Modals can be chained, so you can easily build a setup-assistant or show dialogs in a predefined order. Invalid input can be highlighted and handled using the included function. BasicModal uses SASS, CoffeeScript, CSS3 Flexbox and only requires jQuery on your website. It has been tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.
July
Enhance
Enhance is a port of Zoom.js plugin that is simple jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes.
ExpandJS
ExpandJS is a modular library with 80+ custom elements and 350+ utility functions to kickstart your Web Applications.The elements are built upon Polymer and follow Google’s Material Design guidelines, allowing for beautiful and responsive interfaces.The utility library is an extension of lodash, adding more functions and introducing checks for unexpected arguments.
DynamicJS
Dynamics.js is a JavaScript library to create physics-based animations. Simply include dynamics.js into your page, and then you can animate CSS properties of any DOM element. You also can animate SVG properties. Dynamics.js has its own setTimeout. The reason is that requestAnimationFrame and setTimeout have different behaviors. And any JavaScript object. It has been tested on Safari 7+, Firefox 35+, Chrome 34+, IE10+.
August
FormFiller
FormFiller is a simple Javascript bookmarklet that helps you to stop wasting your time. Stop filling out the same forms over and over again, instead fill it out once and drag the bookmarklet to your bookmarks bar.
Bootbox.js
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
SubstituteTeacher.js
substituteteacher.js is a JavaScript library that lets you substitute sentences for each other, swapping only the words necessary.
html5tooltips.js
Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework dependencies.
Image Blur Plugin
Image Blur Plugin is a ultra small plugin for Blurring images. This plugin utilises SVG filter to blur the image if SVG is supported by the browser (all except IE), otherwise the plugin creates an IMG tag and applies a special IE-only filter in CSS. If you are using Velocity.js animation library, the plugin will automatically detect its presence and make fade in/fade out animations more performant, especially on mobile. If Velocity is not present on the page, jQuery’s “animate” is used.
September
Choclat
Chocolat.js is a responsive jQuery lightbox plugin that enables you to display one or several images staying on the same page.The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.The viewer may appears full-page or in a block
UpUp
UpUp is a tiny JavaScript library that makes sure your users can always access your site’s content, even when they’re on a plane, in an elevator, or 20,000 leagues under the sea. Mobile-First has become the de-facto standard for building modern sites. But in a world where everyone is mobile, an always-on connection isn’t something we can rely on. It’s time to start thinking Offline First. With UpUp you control the content your users see, even when they are offline. And you can do it with just a single JavaScript command.
lightGallery
jQuery LightGallery is a lightweight, customisable, modular, responsive, lightbox gallery plugin for jQuery. It uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use.
October
Clipboard.js
Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why clipboard.js exists. This library relies on both Selection and execCommand APIs. The second one is supported in the following browsers: Chrome 42+, Firefox 41+, IE 9+, Opera 29+, Safari X.
ESLint
ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.
ContentTools
Content Tools is a JS library for building WYSIWYG editors for HTML content. The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps. There are step-by-step guides for common use scenarios as well as more advanced topics for those rolling their own editors. Full API documentation and examples for the ContentTools family of libraries. The ContentTools family of libraries is free and open-source. The libraries are hosted, developed and maintained on GitHub.
jQuery Nice Select
jQuery Nice Select is a lightweight jQuery plugin that replaces native select elements with customisable dropdowns.
November
AntiModerate
AntiModerate is the progressive image loading library for the greater good, as this JavaScript library reduces the loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images in background which replace as they finish, it comes with a nice blur effect thanks to StackBlur so you have a good looking page while it is loading, this library is space optimised, and with gzip it is less than 2kb.
Adi.js
Adblock Identifier (Adi) is a sweet little jQuery plugin that detects ad blocking software and creates an alert for users that functionality will be disabled if the ad block is left running.
jQuery DrawSVG
jQuery DrawSVG uses the built-in animation engine to jQuery to transition the stroke on every inside the selected element, using stroke-dasharray and stroke-dashoffset properties. It weights less than 2KB minified and 800 bytes gzipped. It’s easy to use with easing and stagger support.
Cropper
Cropper is a simple jQuery image cropping plugin that supports options, methods, events, touch (mobile), zoom, rotation, scale (flip), canvas, multiple croppers and cross-browsers. The outputted cropped data bases on the original image size, so you can use them to crop the image directly.
December
InstantSearch.js
InstantSearch.js is a library of UI widgets to help you build the best instant-search experience with Algolia’s Hosted Search API. Your code is easy to write and maintain. instantsearch.js provides the glue between the different parts of your search page.Everything is packaged in one library.
Every website is different and the modular design of instantsearch.js allows you to configure, rearrange and combine the widgets to build your own experience. Sometimes you want to build a custom feature, you can do that by forking a pre-built widget or coding your own.
Unslider 2.0
Unslider 2.0 is a super simple jQuery carousel/image slider. It has a variety of options available, including animation, a totally manual option, infinite sliders, and more.
Booking.js
Booking.js is an easy-to-use embedabble calendar booking widget. It’s easy to customize, works with Google Calendar, and it can be integrated seamlessly into your branding.
ResponsifyJS
ResponsifyJS makes truly responsive images while taking into account the content of photos. You can define the focus area or let it define it automatically.
