This guest post on HtmlCenter blog is written by Casey Ark who runs Plato Web Design. We are always looking for interesting contributions to our blog which can provide value to our readers, please get in touch.
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 customisable 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:
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.
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.
Tooltipster
Tooltip is a tiny JS tooltip library with some surprisingly powerful features that can really come in handy for larger projects.
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.
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.
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.
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).
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.
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.
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).
One Response
This is helpful for my learning and for my future projects. Was looking for such stuff across the Internet and I’m glad I found them in one place