Over a million developers have joined DZone.

10 Must-Have JS Plugins for Busy Developers

· Java Zone

Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience, brought to you in partnership with JetBrains

This guest post on HtmlCenter blog is written by Casey Ark who runs Plato Web Design.

top must have js plugins

I run a design firm called Plato, and about a year ago, my team and I had reached an impasse. Like everyone else, we built websites with PHP/Wordpress, and had a great time doing it, but there was one problem: we were slow.

So we analyzed our processes – we watched everything our developers did each day, and tried to find the biggest time-wasting activities. After quite a bit of analysis, we eventually found out that approximately 50% of the time each of our developers spent each day was on repeatable tasks.

In fact, the biggest time-suck of all was in programming and reprogramming simple JavaScript features like lightboxes, form validation, and galleries. And in most cases, we were reinventing the wheel: features like these were already available as free Javascript plugins.

In the end, we spent a few weeks searching out the easiest-to-install, most customizable JS scripts in the world for use in our sites, and we saw an incredible increase in productivity.

In this post I want to share our findings. Ready to speed up your development time? Take a look at some of our favorite JS time-savers:

1. Parsley Form Validation

Form validation can be a pain. Even when you’re working with a WordPress plugin like NinjaForms or Gravity Forms, you often have to do a considerable amount of styling after the fact to make things look nice.

Parsley makes things easy: just add a tag to your form, and Parsley takes care of all of the validation (and styling) for you.

2. Fancybox Lightbox

Fancybox might just be the world’s simplest Lightbox tool. It’s easy to install, lightweight, and has all the features you could ever imagine needing (AJAX loading, plenty of options, and convenient image gallery options.

3. Tooltipster

Tooltip is a tiny JS tooltip library with some surprisingly powerful features that can really come in handy for larger projects.

4. NanoGallery

HTML galleries are good, NanoGallery is significantly better. Not only is it easy to navigate and responsive, it also supports image categorization into folders.

5. Flexslider

Just about every site needs a slider these days – Flexslider makes it awfully easy to set up and deploy your own, with an incredible degree of customization. This plugin alone has saved us over 100 hours of development time this year.

6. ArcText

Arcing text is all the rage these days, but it can be close to impossible to implement on your own (trust me, I’ve tried). ArcText (a plugin from Codrops) takes care of all of the dirty work for you.

7. 3D Mockups

It’s no secret that clients love to see design mockups, but sometimes it can be difficult to take time away from development just to provide a visual preview.

This 3D mockups framework provides the ability to create simple mockups (including notes and tooltips), and best of all, it rotates in 3D (what can I say, I’m a sucker for 3D).

8. LazyLoad Images

If you’re using high-res images for a project, you might experience some serious loading time issues (which can seriously affect your SEO). LazyLoad allows you to delay the loading of unimportant large images until after the entire page has loaded. Just add a “.lazy” class to any image you’d like to load lazily, and you’ll see an instant loading time increase.

9. Headroom

If you’re a fan of dynamic headers, you need HeadRoom: an easy-to-implement plugin that creates headers that are hidden until you need them. When users scroll down to read your content, the header disappears to allow for a larger reading pane. When they start to scroll up, the header instantly appears.

10. Drag-And-Drop File Uploads

Setting up the ability for users to upload files can be a serious pain, but this plugin takes away some of the sting. DropZone allows users to drag and drop files into the browser, see an image preview, and easily start the upload process.

Bonus plugin: Flare

Flare.js is a simple JS plugin with just one purpose: making super cool flare hover effects on buttons. Sure, it’s gratuitous and unnecessary, but it’s a whole lot of fun (and don’t underestimate the power of a little visual wow-factor).

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.


Published at DZone with permission of Saul Zukauskas, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}