3 awesome but small JavaScript Libraries you need to try

Louis Petrik
Feb 1 · 4 min read
Every second a new JS library appears :)

JavaScript has many and somehow lives from them — libraries.
I think that everyone has already made an overview of the most important & most popular of them, and yet got lost right away.
In this article I will show you 3 rather unknown, but very powerful & nevertheless small JavaScript libraries, which will make your life easy without making your web app unnecessarily heavy.

Good news: I just made a second part for you ❤

Basket.js

Official Documentation

Basket.js is a minimalist script loader library which is only 0.7 kB when gzipped.
(Well, it uses another library which is about 5kB when gzipped, as said in https://github.com/addyosmani/basket.js/issues/61 But that’s still pretty small)
But basket.js is not only there to load external JavaScript, it also caches them in the local storage of the browser, so that on the next page request the external JavaScript does not have to be requested over the network again, but can simply be loaded from the local storage.
But why the local storage and not the browser cache?
First of all, I personally find it much easier to cache JavaScript files via a JS library in the web page code, which is normally cached from the server side. With Basket.js it is now very easy to control the script cache dynamically with JavaScript in your code.

Let’s give it a try:
The actual API is not that complex. I think you are able to explore the documentation a bit on your own, in our little example we will only use basket.require because it is the heart of the whole library.

With basket.require we can load a JS file via basket. This file is then cached in the local storage as I already explained and the next time basket.require requests this file, e.g. when reloading the page, Basket will first look in the cache & if the file is already cached there, it will load the file via the local storage instead of requesting it again via the network.

index.html:
Here you can find the libraries:
https://addyosmani.com/basket.js/dist/basket.min.js
https://cdn.jsdelivr.net/npm/rsvp@4/dist/rsvp.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<script src=”rsvp.min.js”></script>
<script src=”basket.min.js”></script>
<title>Document</title>
</head>
<body>
<script>
basket.require({ url: '/scripts/jquery.js' })
</script>
</body>
</html>

As you can see we first import the RSVP library, Basket.js needs. Then Basket itself, and in the body we can execute our require function, to load jQuery from somewhere.
When you first open up the page, you should see this:

jQuery is requested as normal over the network.

But with the reloading of the page:

jQuery is no longer listed in the Network tab. It was loaded from the local storage.

And that’s the whole magic :)

Pill

Official Github

“Pill adds dynamic content loading to static sites and makes content loading smooth for users.” It’s about 1 kB when minified and gzipped.
The development of Pill started with just on tweet: https://twitter.com/sitnikcode/status/1109626507331338240
Quintessence: Most of us use single page applications to have web apps, that won’t load a whole new page, when we navigate. In most SPA frameworks this is given because everything is based on one index.html.

But what if we have multiple static pages? Pill is the solution.
On demand, it fetches the content of other HTML files on the server, and replaces the current content with the new, fetched one.
That leads to massive performance improvements, because our app does not request a whole new page.
The important content is just replaced.
With Pill, this is done automatically, since it intercepts navigation attempts.

Best thing about Pill — it is documented pretty good with a great example etc. so make sure to check everything out: Pill example
You can find the code on the GitHub https://github.com/rumkin/pill/tree/master/example
Have fun with Pill :)

JS-cookie

Official GitHub

Working with cookies in the browser can be quite strenuous. JS-cookies makes this a lot easier, and now we’ll go through the basics.

Implement it via the CDN:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>

Set a cookie key named ‘name’, and it’s value to “Max”

Cookies.set(‘name’, ‘Max’)

Get the value of cookie with the key ‘name’

Cookies.get(‘name’) // 'Max'

Create the cookie, let it expire after 7 days

Cookies.set('name', 'Max', { expires: 7 })

Delete the cookie

Cookies.remove(‘name’)

Get all cookies

Cookies.get() // { name: 'Max' }

Thank you for reading! About me, the author :)

Hi! Thank you very much for reading, my name is Louis and I am a 18 years old student from Germany. I am in love with Web development, both backend and frontend. My favorite technologies are React, Vue, React Native and Node.js.
Make sure to follow me for more content related to those, and feel free to have a look on my IG @louis.jsx & @codingcultureshop
Have a nice day & feel free to leave me your feedback!

And if you liked the article, then please leave me a Clap — after all it costs nothing

JavaScript in Plain English

Learn the web's most important programming language.

Louis Petrik

Written by

18 year old hobby developer from Germany, with a passion for JavaScript, Node.js & React.js. Contact & more about me: LP7.co/links

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade