A Box of Javascript Chocolates (part 1)

There are a lot of awesome jQuery plugins and Javascript libraries out there, and with every new one it gets more difficult to keep track.

Some might save you hours of work, others just add that teaspoon of UI love, that little big detail, that separates a good UI from a UI that feels great and makes using your app fun. Here are some of our picks – virtual chocolates, all sugar-free and low-calorie.

Feel free to add yours in the comments!

Galleries

• Nivo Slider lets you create image sliders with transitions. [Demo]
• jQuery.popeye is an alternative to lightboxes, especially if you don’t want to disrupt the user experience by having a modal window pop up. [Demo]
• Infinite Carousel displays your images in a continuous loop. [Demo]

UI Helpers

• grumble.js lets you create bubble style tooltips you can freely position and rotate.
• If you’re not into bubbles, try tipped. It has everything, from the simple classic one-line tooltip to more advanced ones.

• If you need custom drop downs with images and descriptions, try ddSlick. [Demo]
• Before you code that tag form field with autocomplete, check out TextExt – it might save you a lot of work.
• Have users explore all the awesome details of whatever with Magnifying Glass. It’s just an eyecandy, but isn’t it always about the little details?

• Avgrund displays nice modal boxes with depth of field.
• jQuery Stick ‘em can make elements stick to a fixed point as you scroll. Useful for explanations in the sidebar. [Demo]
• noty is a slick alternative for jQuery’s standard alert dialog. It provides a queue and several layouts.

Typography and Text

• If you’re looking for down-to-the-letter control and kerning of your type, kerning.js and  Lettering.js might be for you.

• Love big responsive headlines? Try slabText.
• With Cutter.js you can truncate HTML code without losing the markup.
• No excuses for ugly unformatted documentation: Create instant Markdown documents with Strapdown.js.
• Speaking of Markdown, Showdown is a Javascript port of Markdown.
• Looking for a lightweight syntax highlighter? Look no further: Prism.js

Data

• list.js makes your HTML lists and tables searchable, sortable and filterable.
• If you rather sort by drag and drop, HTML5 Sortable is for you.
• Remember that sleepless night some weeks ago when you thought it might be a fun project to code Excel for the web? Have a look at Handsontable. It’s a data-grid editor.
• For displaying large data sets there’s Pivot.js.

• For even larger project, try Datatables.

Responsive Design

• Wanna serve high resolution images for users with Retina displays? Retina.js is here to help.
• foresight.js is an alternative to Retina.js that detects whether the user has a Retina display and a fast enough network connection for hi-res images.

Form Styling

• Replace endless select boxes with a more user-friendly alternative with Chosen.
• For even more select box awesomeness, have a look at Select2. It can use remote data sets, offers multiple select and tagging.
• Super Labels is a nice and user-friendly way to label form fields.
• prettyCheckable brings better looking checkboxes and radio buttons.

Forms

• Ideal Forms is a framework that helps you build and validate your forms.
• As a lightweight alternative, there’s validate.js.
• Need to validate credit card numbers? jQuery Credit Card Validator
• Tired of users misspelling their email address? Try mailcheck.
• If you want to offer users the possibility to search using complex queries, VisualSearch.js might be for you.
• Give your users feedback about their password strength with Complexify.

• Add pretty file uploads to your app with jQuery File Upload. It’s got progress bars, image preview and uploads are resumable.
• If you just want the resumable uploads, go straight to resumable.js – it does just that.

Time Savers

• Has this ever happened to you: You started filling out a lengthy form on some website, and halfway through the process your browser crashed and everything you entered was lost? Yeah, that sucks. Protect your users from mishaps like this with Sisyphus.js.
• For money and currency formatting there’s a little helper called accounting.js.
• fIf you not only want to display currencies, but also convert them, check out money.js.
• Formatting, parsing and validating dates is another tedious task. Let moment.js do it for you.
• Smart Time Ago intelligently updates the relative timestamps in your document.
• cookies.js is for managing … – guess what – cookies!
• For zipping and unzipping files, there’s zip.js.
• With string.js come handy methods like slugify, truncate() and isEmpty().
• Let’s be honest: Google Maps is awesome, but its Javascript API can really be a pain. gmaps.js soothes this pain.
• If you need a preloader for your HTML5 game, try PxLoader.
• Working with URIs a lot? URI.js can help you. It offers methods for working with query strings, detecting URIs within text and much more.
• For dealing with touch events in the browser, there’s Touchy.js.

This is a collection of things we’re using in our day to day projects. We find these things on Smashing Magazine who originally created a post with useful plugins, additional links came from Daily.js and Badass.js.

Many thanks to all the hard working developers who created all these plugins - you make a better web happen!