This is the first of my end of year round up of my monthly featured HandPicked Goodies for Designers & Developers, today’s post will be focusing  on all the great fantastic JavaScript & jQuery Plugins that been released through this year. Please note that not every JavaScript & jQuery Plugins that got featured on this blog will be featured as the list is huge anyway and for your ease of reading i will be splitting the best of the JavaScript & jQuery Plugins into months… so lets start.

January

Gulp.js

gulp

Gulp.js is a streaming build system that use a streams and code-over-configuration to make for a simpler and more intuitive build. By preferring code over configuration, Gulp keeps the simple things simple and makes complex tasks manageable.

By harnessing the power of node’s streams you can get fast builds that you don’t need to write intermediary files to disk. Gulp’s strict plugin guidelines assure plugins stay simple and work the way you expect. With a minimal API surface, you can pick up gulp in no time. Your build works just like you envision it: a series of streaming pipes.

 

Share Button

share-button

Share Button is a simple lightweight, flexible  and awesome share button jquery plugin that doesn’t load any iframes or extra javascript which can effect load time. This plugin  looks simple and clean by default, but can be customised in any and every way. It’s tiny and compact, expanding only when the user actually wants to share something.

Planetary.js

Planetary

Planetary.js is a JavaScript library that is use for building interactive globes. Planetary.js uses D3 and TopoJSON to parse and render geographic data. Planetary.js uses a plugin-based architecture; even the default functionality is implemented as a plugins.

Planetary.js extremely flexible as it’s fully customizable, you can change colours, rotation, and more. You can also display animated “pings” at any location with custom colors and sizes. This library also support the Mouse drag and zoom.

Adaptive Backgrounds

adapative-backgrounds

Adaptive Backgrounds is a jQuery plugin that extracts dominant colors from images and applying it to its parent element. The Adaptive Backgrounds plugin utlises the tag element and the ImageData object, and due to cross-site security limitations, this script will fail after one single try when trying to extract the colors from an image that is not hosted on the current domain,unless the image allows for Cross Origin Resource Sharing.

Dynatable.js

Dynatable

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON, and this plugin is not just for tables. But the purpose of Dynatable is to provide a simple, extensible API, which makes viewing and interacting with larger datasets easy.  This plugin also provides a framework for implementing the most common elements out of the box, including sorting, searching and filtering.

jQuery Label Better

jQuery-Label-Better

jQuery Label Better plugin that will help you to label your form input with beautiful animation and without taking up space. With this plugin all you really have to do is add a placeholder text.

Unison

unison

Unison.js is a small jQuery plugin that allows you to declare named breakpoints in one place and automatically sync them across your JavaScript and markup. When all of your front-end technologies share breakpoint information, complex responsive tasks such as conditional loading and image swapping become much simpler and straight-forward.

Type Rendering Mix

Type-Rendering-Mix

Type Rendering Mix is a small JavaScript library that allows you to apply styles only when core text is used in order to achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing. Type Rendering Mix works by auto-adding some styles to the element that represent the rasterizer and anti-aliasing support on the browsers and leaves the rest to the script.

February

Tether

tether

Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. for example with this library, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.

As Tether includes the ability to constrain the element within the viewport, it’s scroll parent, any other element on the page, or a fixed bounding box. When it exceeded those constraints it can be pinned to the edge, flip to the other side of it’s target, or hide itself.

Tether optimises it’s location placement to result in the minimum amount of ‘jankyness’ as the page is scrolled and resized. The page can maintain 60fps scrolling even with dozens or hundreds of tethers on screen. Tether is 5kb minified and gzipped, and supports IE9+, and all modern browsers.

ScrollReveal.js

scrollreveal

ScrollReveal.js is a simple way to create and maintain how elements fade in, triggered when they enter the viewport. It helps you to build declarative on-scroll reveal animations for your websites and by adding a data-scrollreveal attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport.

Nightwatch

nightwatch

Nightwatch is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. Nightwatch uses a simple but powerful syntax. It uses the Selenium WebDriver API to perform commands and assertions on DOM elements, managing the Selenium server automatically.

Fun

fun

Fun is a NodeJS Wall messages app that offers user authentication and uses MongoDB as the main database system and Backbone for front-end interaction. Fun is easy to install, with the only requirements being Node JS and MongoDB.

SVGMagic

svgmagic

SVGMagic is a cross-browser compatible jQuery plugin that searches for SVG images on your site and automatically creates PNG versions if the browser doesn’t support SVG. SVGMagic is a simple, single-purpose plugin that requires no configuration.

You might not need jQuery – Reference

You-might-not-need-jQuery

You Might Not Need jQuery can show you exactly whether you need jQuery to enable certain features based on the oldest version of IE that you need to support. While using jQuery is great if it makes your life easier, requiring it as a dependency in your libraries might not be necessary.

Creditcard.js

Creditcardjs

Creditcard.js is an HTML/CSS/JS credit card form with an emphasis on usability.

Placeholdem

Placeholdem

Placeholdem is a JavaScript plugin that animates placeholder carets on inputs and textareas. The placeholder value will incrementally delete on focus, and easily restore on blur.

jQuery Notebook

jquery-notebook

jQuery-Notebook is a simple but very clean and elegant WYSIWYG rich text editor that you can use for web applications

March

ScrollMagic

scrollmagic

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar but as a progress bar. This is the plugin if you are wanting to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, pin an element at a specific scroll position (sticky elements).  You can easily add a parallax effect to your website with ScrollMagic. You can call functions when the user hits certain scroll positions or react in any other way to the current scroll position and ScrollMagic supports browsers in recent versions: Firefox 26+, Chrome 30+, Safari 6+, Opera 19+, IE 9+.

Remodal

remodal

Remodal is a flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. All modern browsers are supported. You can easily define the background container for the modal(for effects like a blur).

ImagesLoaded

imagesloaded

ImagesLoaded is an event emitter that uses JavaScript to detect when images have loaded, so that you can then trigger various events (like animations). It’s also available as jQuery plugin, and works with RequireJS.

jQuery fontIconPicker

fonticonpicker

jQuery fontIconPicker is a small jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, loading an array of icons or directly from a Fontello config.json file.

Scroll Depth

Scroll-Depth

Scroll Depth is a small Google Analytics plugin that you will need to include jQuery that will allows you to measure how far down the page your users are scrolling. This plugin monitors the 25%, 50%, 75%, and 100% scroll points by sending a Google Analytics Event at each one.

And with Scroll Depth you can also track when specific elements on the page are scrolled into view.  For example if you run a blog you could send a Scroll Depth event whenever the user reaches the end of a post. The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager.

April

Font To Width

font-to-width

Font-To-Width if a small JavaScript routine which fits text to the width of an element using multiple font families of different widths.

HideSeek

hideseek

HideSeek is simple but yet customisable jQuery plugin for live search, the plugin is compatible from IE7+, Chrome, Firefox, Safari and with  jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0. The HideSeek plugin supports highlighting, custom message, navigation, initialization via data attribute and custom events.

Flickerplate

flickerplate

Flickerplate is a awesome jQuery plugin that lets you flick through content. This plugin is a jQuery plugin and so is required but its also requires Modernizr for touch detection and the jQuery.Finger library for touch events. But don’t worry as both jQuery and a custom build of Modernizr are supplied

Full Page

fullPage

Full Page is a simple but easy to use plugin to create full-screen scrolling websites, as it allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

Trianglify

trianglify

Trianglify is a JavaScript library that lets you create colourful triangle meshes automatically, which you can then use as CSS backgrounds, or SVG images. There are controls for noise, cell size, and cell padding, and of course the whole thing is open source.

Waveform.js

waveform

Waveform.js makes drawing SoundCloud waveforms simple and lets you style and color them the way you want it. Waveform comes as a small JavaScript library and is using a lightweight service hosted on waveformjs.org that translates the waveform images provided by SoundCloud into floating points.

browserWrapper

browserwrapper

browserWrapper is a jQuery plugin, which builds a 1:1 scale responsive browser window, at any size, around any element in the DOM.

May

Famo.us

famo-us

Famo.us is a JavaScript framework designed to build rich, interactive web applications. Famo.us takes an opinionated approach to web development, maintaining a tight control of rendering to achieve performance. The framework also maintains strict modularity for flexibility. Paired with server-side technology designed to match Famo.us on the front end, you can finally create high quality applications that was once reserved only for native development.

TitleNotifier.js

TitleNotifier

TitleNotifier.js is a lightweight dependency-free javascript library that dynamically show the number of unread notifications in your webpage title.

Debug

debug

Debug is a small library for logging debug messages, since it is just a wrapper around console.log, it works in both Node and the Browser. It allows you to filter logging output without changing your source and it also outputs time differences which lets you easily tell how much time has elapsed between log messages.

Wholly

wholly

Wholly is a jQuery plugin for triggering table column mouse-enter and mouse-leave events. Wholly is used for highlighting the entire table column. Wholly supports tables with colspan and rowspan attributes.  So if you want to support colspan and rowspan, then first you will need to build table cell index and then you need to track events of all the table cells of interest and calculate their offset in the matrix and the columns that share the vertical index.

Wholly is not limited to setting a particular style, the custom event hook allows you to select the entire column and can be used to copy the data, for selecting multiple columns, etc.

June

Splitchar

Splitchar

Splitchar is an easy to use jQuery plugin that allows you to style half of a character.

Card.js

card-js

Card.js is a better credit card form in one line of code, as it will take any credit card form and make it the best part of the checkout process without you changing anything. As everything is created with pure CSS, HTML, and Javascript this plugin contains no images. Card.js ships with pure-CSS cards for Mastercard, Visa, Discover, and American Express.

App.js

app-js

App.js is a lightweight JavaScript UI library for creating mobile web apps, that must behave like native apps, sacrificing neither performance nor polish. It’s cross-platform, theme-able platform-specific UI designs, configurable native-like transitions and it supports built-in widgets for general use-cases.

Boba.js

boba-js

Boba.js is a small, easily extensible JavaScript library that makes working with Google Analytics easier. It supports the old ga.js library as well as the new analytics.js library. It has one out of the box function, trackLinks, and makes tracking everything else child’s play all you really need to add is jQuery.

ScrollMe

ScrollMe

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

Odyssey.js

odyssey

Odyssey.js is an open-source tool that allows you to combine maps, narratives, and other multimedia into a beautiful story. Creating new stories is simple, requiring nothing more than a modern web-browser and an idea. You enhance the narrative and multimedia of your stories using Actions that will let you tell your story in an exciting new way. You can use Odyssey’s templates to control the overall look and feel of your story in beautifully designed layouts and experts of Odyssey can also add custom Templates and Actions (e.g. map movements, video and sound control, or the display or new content). The library is open source and freely available to use in your projects.

Sysend.js

sysend

sysend.js is small library that allow to send message between pages that are open in the same browser. They need to be in same domain. The library don’t use any dependencies and use HTML5 LocalStorage API. You can send any object that can be serialized to JSON or just send empty notification.

July

Smart Fixed Navigation

smart-fixed-navigation

Smart Fixed Navigation is a fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

Select or Die

select-or-die

Select or Die is a jQuery plugin to style select elements, if you feel like adding a placeholder that’s displayed before anything is selected you can as once a selection has been made the placeholder will be removed until the user clicks the SoD again. You can also add a prefix that’s displayed in front of the selected option.

Dense.js

dense

Dense is a simple jQuery plugin that offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website. Clear the blurry, images be crisp.

Giflinks

giflinks

GifLinks is a simple javascript library used for adding full screen gif action as a hover effect.

Ampersand.js

ampersands

Ampersand.js is a highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps. It’s a well-defined approach to combining a series of intentionally tiny modules.

August

Eloquent JavaScript

Eloquent-JavaScript

Eloquent JavaScriptis a free ebook that offers up a second edition that shows a modern introduction to JavaScript programming. It covers everything from program structure to regular expressions to Node.js, and everything in between.

smoothState.js

jquery-smoothState

jquery.smoothState.js is a jQuery plugin that helps you eliminate jerky page loads by adding transitions that eliminate hard cuts and white flashes. It’s easy to implement, and can greatly improve user experience.

Blast.js

blast-js

Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases. As Blast is highly accurate; it neither dumbly splits words at spaces nor dumbly splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported.

Bitcoin.js

bitcoin-js

The Bitcoin JS is a clean, readable, proven library for Bitcoin JavaScript development as it is a pure JavaScript library for node.js and browsers. This Bitcoin.js been used in production by over 1.5 million wallet users, and as BitcoinJS is the backbone for almost all Bitcoin web wallets in production today.  For advanced features,of Bitcoin.js it’s features such as multi-sig, HD Wallets.

It’s also fast and been optimised code, used typed arrays instead of byte arrays for performance. and it’s also Altcoin-ready which is capable of working with bitcoin-derived currencies such as Dogecoin.

Chartist

chartist-js

Chartist.js is a simple responsive charting library built with SVG. As Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard.

Timesheet

Timesheet

Timesheet.js is a JavaScript library that allows you to create HTML time sheets. With Timesheet you can visualise your data and events with sexy HTML5 and CSS3, simply create the time sheets with some sneaky JavaScript and include the Timesheet.js and configure your data and you set as this library has no external dependencies, no jQuery needed and of course no Angular.JS! It’s just contains a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by mighty you.

fontFlex

fontFlex

fontFlex is a lightweight jQuery extension for dynamically changing font sizes according to screen / browser width. It’s intended to be used with responsive or adaptive CSS layouts. You simply define a default CSS font base by setting font-size: 1em and line-height: 150% on the body or intended element and declaring the font-size is optional, but highly recommended in case javascript is disabled and you simple call the plugin on said element.

September

Rollerblade.js

rollerblade

Rollerblade easily give your webpage visitors a great 360° viewing experience with your products, images, or anything else you can think of. Rollerblade targets a container element with an image element inside that has the class of “rollerblade-img”. Make the src of the image the path to the first image in your rotator.

Rollerblade.js works on desktops, tablets, and smartphones (touch enabled). For all mobile devices, the rollerblade rotator will be activated when a user slides their finger from left to right.

heatmap.js

heatmapjs

Heatmap.js makes dynamic heatmaps for the web. This JavaScript library will help you make your 3 dimensional data speak up. Use heatmap.js v2.0 to add new value to your project, build a business based on it, study and visualize user behaviour, and much more.

Strip

strip
Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

SweetAlert.js

sweetalert
Sweet Alert is a beautiful replacement for JavaScript Alert, as SweetAlert automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s even highly customisable.

October

ProgressBar

progressbar

ProgressBar.js is a beautiful and responsive progress bars with animated SVG paths but with ProgressBar.js, it’s easy to create arbitrary shaped progress bars. This library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor.

Converse.js

Converse-js

Converse.js is a free & open source chat client that runs in your browser, it can be integrated into any website this is similar to Facebook chat but it also supports multi-user chatrooms. As Converse.js can connect to any accessible XMPP/Jabber server, either from a public provider such as jabber.org, or one you had set up yourself, it also is possible to enable single-site-login, whereby users already authenticated in your website will also automatically be logged in on the chat server.

Midnight.js

midnight

Midnight.js is a simple jQuery plugin that switches between multiple header designs as you scroll, so you will always have a header that looks great with the content below it, as Midnight.js lets you switch fixed headers on the fly, if you are in iOS <7 and older Android devices the scrollTop isn’t updated fluently, which creates a choppy effect this is a known issue and this issue can be fixed somewhat by wrapping the body in container and detecting touch events.

 

November

jQuery Face Detection Plugin

face-detection

jQuery Face Detection Plugin detects faces on images, videos and canvases to get theirs coordinates. It tracks a face and outputs the coordinate positions of the face model as an array. We believe that face recognition will open up a ton of possibilities in how we interact not just with each other.

Hamlet

hamlet

Hamlet lets you create simple, powerful reactive templates. It uses CoffeeScript, has a small footprint, and is a great fit for smaller projects, as well as large ones.

Walkway

walkway

Walkway.js is an easy way to animate your simple SVG elements. It includes built-in easing functions, and also has options for selector and duration.

Dropcap

dropcap

Dropcap.js makes it simple to add drop caps to your online typography, like many print designs. You can specify different fonts for the dropcap and paragraph type, as well as baseline position and height.

Vivus

vivus

Vivus is a little JavaScript class (little because it’s lightweight and has no dependencies) to make animating SVGs easy. Different animations are available, and you can even script the entire SVG to do whatever you want.

FixedContent.js

fixed-content

FixedContent.js is a mobile friendly jQuery plugin for content that persists while scrolling, including sidebars and nav. It includes settings for the top nav, as well as width and position on load and refresh.

December

Voice Elements

voice-elements

Voice Elements is a web component wrapper to the Web Speech API, that allows you to do voice recognition (speech to text) and speech synthesis (text to speech) using Polymer.Voice recognition is the translation of spoken words into text. This is achieved in the browser by using the SpeechRecognition interface from the Web Speech API. Speech synthesis is the conversion of language text into speech.

Lining

Lining

In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line.

and there comes Lining.js, as it offers you complete DOWN-TO-THE-LINE control. So if you want your line style support Responsive web design all you do is to make sure you add the data-auto-resize attribute and it will automatically relining when window resize event happen. lining.effect.js is an extra part of lining.js. It gives you the power to add appearances animation on your lines.

Vue

Vue-js

Vue.js is a library for building interactive web interfaces. It provides the benefits of MVVM data binding and a composable component system with a simple and flexible API. Technically, Vue.js is focused on the ViewModel layer of the MVVM pattern. It connects the View and the Model via two way data bindings. Actual DOM manipulations and output formatting are abstracted away into Directives and Filters.

PhotoSwipe

PhotoSwipe

PhotoSwipe is a Javascript gallery created using Node.js, Grunt.js, Ruby and Jekyll. It can be used to showcase galleries both on desktop and on mobile devices.All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.

Lazy Loading Google Maps

lazy-loading-google-maps

The Lazy-loading Google Maps Plugin checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn’t loaded before) Google Maps API script file and then initiates the corresponding map instances. Finally, there’s a callback function which is called within every map instance initiation so that you can continue doing whatever you need with your maps.

Share

The Best HandPicked Goodies of 2014: JavaScript & jQuery Plugins Edition