6 Tiny JavaScript Libraries To Drop Into Your Next Project

The discussion around frontend development is often focused on frameworks. But what about libraries?

Even when we move away from frameworks and get into libraries, the most popular libraries are often the ones that dictate your development style. Whether we are talking about Redux or RxJS or Immutable or Flux or Lodash or Ramda, all these libraries share something in common: they introduce patterns and constraints to help you write code that is easier to read, reason about, debug, and extend.

Flux even calls itself “an application architecture” rather than a library. It provides various utilities – but the core focus is the pattern, not the utilities it provides for implementing it. In the dev’s own words: “Flux is more of a pattern than a framework”.

That may be a good thing, after all – javascript is a very weakly typed, dynamic language written by a madman on a 10-day deadline. On top of that, it’s implemented slightly differently across all browsers.

So adding some constraints can make your coding experience easier. Enforcing some patterns can save you a lot of time when your team starts scaling up and your application starts expanding.

But I like to think of libraries as tools. A good hammer doesn’t give me guidelines for working with nails, it just does a damn good job at shoving them into stuff.

I’ve taken it upon myself to compile a list of six small, performant, self-contained javascript libraries that do a single job and do it well.

Including Angular or React in your project might help you a lot in the grand scheme of things, but it won’t automatically solve any problem or improve your app.

But the kind of libraries that I aim to present here do just that. They will magically improve your website and solve your problems, no extra effort, bloat or refactoring required.

Without further adieu, let me introduce our first contender.

Lscache

Local storage is a feature supported by essentially all browsers. It works similarly to a cookie, but allows you to store much more data. Most modern browsers will have a default value of 50MB on desktops and 5 or 10MB on mobile.

Lscache is a library that makes it easy to use this local storage. It will be familiar to anyone that used a Redis or Memcached client.

Unlike other libraries, it doesn’t fall back on other storage methods (e.g. cookie or session storage), permitting it to be much smaller (2.4KB) and avoids potential bugs and confusion.

What I like about it, in particular, is that it provides an easy to set an expiration date for values, which can save you a lot of boilerplate.

Here’s a simple example of how you’d use lscache to speed up your website:

async function get_user_data() {
let user_data = lscache.get('user_data')
if (user_data === null) {
const resp = await fetch('/api/get_user_data');
user_data = await resp.json();
// Cache the user's data for 4 hours
lscache.set('user_data', user_data, 4 * 60)
}
return user_data
}

You can install lscache via npm or simply include the minified version in your html, which will expose a global lscache object.

https://github.com/pamelafox/lscache

Cropper

There are many in-browser image manipulation libraries out there. Cropper is not the most complex, but it is one of the tiniest. I find it to be the quickest, prettiest and easiest to use library for its intended purpose: cropping and rotating images.

Cropping a section of an image is quite a useful feature for any website to have. Whether it is for zooming, allowing users to edit their pictures, or dynamically modifying content based on screen size.

A visual example is much easier with this one, so I suggest you look at the one on their github.io page or play with this in-browser photo editor made using cropper.

Cropper can be installed via npm or via including the script and its CSS in your HTML. At ~41KB uncompressed, it’s quite tiny, considering what it does.

https://github.com/fengyuanchen/cropperjs

Ifvisible

Ifvisible is one of those libraries I never knew I needed, but once I found it, I couldn’t live without it.

Whether you’re gathering user interaction data or want to provide a fluid experience, ifvisible will come in handy.

It does pretty much what it says on the cover. It tells you if your page is visible to the user or not, and, can trigger actions when a state change between the two happens. It also allows you to trigger events after a specific period of idleness from your user.

Here’s a simple example of how you could use this library:

// "blur" stands for a user leaving your page
ifvisible.on("blur", async () =>; {
// Pause any annoying audio
audio.pause();
// Log the the website state when the user lost interest
await fetch(`/analytics/state=${state.serialize()}?action=inactive`)
});
// "focus" stands for a user coming back to the page
ifvisible.on("focus", () =>; {
audio.resume();
})

Ifvisible provides other functionalities, such as a .now() function that checks the current state of the page, as well as an idle and wakeup trigger.

It weighs in at 3.6KB minified, but unlike the other libraries, will have a slight effect upon performance if your users have very old hardware.

Including it is fairly easy, it can be installed via npm or simply by including the script in your HTML, exposing a global ifvisible object.

https://github.com/serkanyersen/ifvisible.js

Topbar

Topbar is a library that has seen no updates since 2014. Whilst normally this would be a bad sign, in the case of topbar, it stands as a testament to its success.

This library aims to do only one thing: display a wonderful looking progress bar at the top of your screen. As far as I am concerned, it accomplishes this goal flawlessly.

Its behaviour, style, and colour scheme are fully configurable. Using it is as easy as calling topbar.show().

This is a library best seen in action, so I recommend that you go check out a demo and some short code examples on the github.io page.

It may not be very glittery, but that doesn’t make it any less of a hidden gem.

https://github.com/buunguyen/topbar

Clone

This library provides a single function, called “clone”, which will clone a javascript object. Clone is an operation that some of your may know as deepcopy. Usage is rather straightforward:

 const arr1 = ['foo', 'bar']
const arr2 = clone(arr1)
arr2.pop()
arr2.push('blax') // arr2 is now ['foo', 'blax']
// arr1 is still ['foo', 'bar'], since arr2 is a copy of arr1, rather than a reference

Clone is our smallest library for the day, occupying only 2.3KB uncompressed. You can install it via npm or include it as a script tag.

The full function signature has two optional arguments, with which you can fine-tune its behaviour and performance. You can read more about it on the GitHub page.

https://github.com/pvorb/clone

Pell

Pell is a tiny WYSIWYG text editor that you can easily embed in your web pages.

It’s only 3.54kB in size, it comes with a nice default theme and it generates standard HTML based on what the user types. It’s easily customizable and blazingly fast.

This editor is a great replacement for any ugly <textarea> that you may have lying around on your website.

Adding it into your project is as easy as including the CSS and the javascript, then creating an element with the class pell, such as:

<div class=”pell”></div>

I do recommend you check out this simple demo on the developer’s blog.

https://github.com/jaredreich/pell

If you're looking for your next job as a software engineer, have companies apply to you by adding your profile to Snap.hr.