Don’t be afraid to write your own JavaScript

With the advent of jQuery and it’s gargantuan user-submitted repository of plugins, many web developers have become so reliant on other people’s code that they try a plugin first before attempting to write something themselves that will do the specific job required. Not only does this make developer’s own skills rusty, it adds another potential point of failure – which may only rear its head a month after your production deploy. If you write the code yourself you will also get a greater feeling of satisfaction!

Gallery Carousel

I’ve seen far too many jQuery gallery carousel plugins on websites that only need to rotate three images in a loop. If this is all you need, then you don’t need much more than a simple function that updates an image “src” attribute, wrapped in a setTimeout() function, feeding from a string array of URLs. Here’s a very simple one that took twenty minutes to put together.

Popup Overlay

In many cases, an overlay library such as Colorbox is the way to go, but if you have just the one container you need to show, just write a few lines of script and position the container absolutely. These two functions and three lines of CSS took about fifteen minutes and the result is a nice post-it note style overlay that positions itself relative to the hyperlink that launches it, and has a self-contained close button.

Expand and Collapse List

This has to be the quickest script to write – my example took less than five minutes to complete – yet I still see bloated plugins being used for such a simple task. This is literally one line of jQuery and a handful of CSS. No excuses – write your own FAQ list!

Remember, the simpler you keep your code the easier it is to debug and the easier it is to expand upon and adapt to work on other devices. So next time don’t immediately download the 120Kb library and all its required dependencies – have a crack at it yourself!

What are some other good examples of scripts you should DIY?