Introducing Vanicom.js: A Minimalist JavaScript Helper Library

When it comes to building simple web interfaces, sometimes you don’t need the heavy artillery of libraries like “jQuery” or “lodash”. You need a lightweight, simple helper that simplifies common tasks without adding unnecessary bloat to your project. And perhaps surprisingly for some, building a frontend with a builder (like Webpack or Vite) with React (Vue, Next, etc.) isn’t always desirable either — often you just need a few extra features to make a fully functional page in pure HTML. That’s where Vanicom.js comes in.

What is Vanicom.js?

Vanicom (short for "vanilla commons") is a microframework designed to provide small, handy utility functions for everyday JavaScript tasks. It’s written in pure, vanilla JavaScript with no external dependencies, making it perfect for small projects or when you want to keep things simple and fast.

The library is designed to work in browsers as old as IE9, so it includes some polyfills for ES6 features. This makes it a great choice for projects that don’t use bundlers like Babel or Webpack, or for those who still need to support older browsers (though, let’s be honest, their share is shrinking every day).

What Vanicom.js is NOT:

• It’s not a replacement for jQuery. If you’re looking for a full-fledged DOM manipulation library, this isn’t it.
• It’s not trying to be lodash. While lodash is fantastic for complex data manipulation, Vanicom.js is much simpler and focuses on basic utilities.
• It’s not reinventing the wheel. It’s just a collection of small, useful functions that make your life a bit easier.

Why Vanicom.js?

Minimalism is Key

In the world of web development, performance is king. Vanicom.js is all about keeping things lightweight and fast. Modern web APIs are powerful enough to handle most tasks natively, so why drag in a massive library when you only need a few helper functions?

Polyfills for Older Browsers

Yes, I know—most of us don’t need to worry about IE9 anymore. But for those rare cases where you do, Vanicom.js has you covered. The library includes polyfills for some ES6 features, ensuring compatibility with older browsers. And don’t worry, as these browsers fade into obscurity, you can easily drop the polyfills.

No Prototype Pollution

I’m aware of the concerns around Prototype Pollution, but after years of using this approach, I haven’t encountered any issues. Plus, as older browsers become less relevant, many of these concerns will naturally fade away.

How to Use Vanicom.js

Installation

You can install Vanicom.js via npm:

npm i vanicom

Then, import the functions you need:

import { logg, getRandomString, isObject } from 'vanicom';

Or, if you prefer to use it as a standalone library (yeaah, as if it's 2010 now), just include the script in your HTML:

<script type="text/javascript" src="vanicom.min.js"></script>

Of course, don't forget to download vanicom.min.js first from the releases page on GitHub.

All functions will be available globally, so you can start using them right away.

Examples of Vanicom.js in Action

1. Simplified Logging

The first thing that always bugged me was having to type console.log every time I wanted to debug something. With Vanicom.js, it’s as simple as:

logg('Hello, world!'); // Shortcut for console.log

2. Type Checking Made Easy

Checking types in JavaScript can be annoying. For example, ensuring that a variable is an object (and not an array or null) usually requires a convoluted check. With Vanicom.js, it’s just:

isObject(someVar); // true if it's an object, false otherwise
isObject([]); // false
isExistAndNotNull(null); // false
isNumber('1254'); // false
isNumber(NaN); // false

No more writing !Array.isArray(value) && typeof value === 'object' && value !== null. Just simplest functions call.

No more stupid questions on stackoverflow!

Yes, I'm sure you've seen this a thousand times, but I'm really tired of writing something like this in my projects, and I don't want to drag out another five dependencies for the sake of such a trifle, so HERE it is, a super-simple helper WITHOUT dependencies.

3. Random Numbers and Strings

Need a random number or string? Ok, here we go, Vanicom.js has you covered:

getRandomNum(1, 100); // Returns a random number between 1 and 100
getRandomString(10); // Returns a random 10-character string

4. DOM and strings manipulation

Working with DOM or strings? I'm sure there are a bunch of little things you've done a thousand times. While Vanicom.js isn’t a DOM manipulation library, it does include a few handy helpers, like deleting a DOM node:

deleteNode(document.getElementById('someElement'));

Or make first character in a string uppercase:

capz('capzed'); // return 'Capzed'

Yes, I know about :first-letter, but it's not always convenient.

5. Cookies and LocalStorage

Working with cookies and LocalStorage is a breeze:

setCookie('authToken', '12345', 3600); // Set a cookie with a 1-hour expiry
getCookie('authToken'); // Retrieve the cookie value

setLocalItem('theme', 'dark', 86400000); // Store a theme preference for 24 hours
getLocalItem('theme'); // Retrieve the stored value

6. Toasts for Quick Messages

Need to show a quick message to the user? Vanicom.js includes a simple toast function:

toast({ message: 'Success!', duration: 3000, class: 'custom-toast' });
// Or even simpler:
toast('Message!');
// And if you need to hide it manually:
hideToast();

There are a few more cool little things there, you can see the full list on GitHub.

Why Keep It Simple?

The web is moving towards faster, more efficient experiences. Vanicom.js is my way of advocating for minimalism in web development. You don’t always need a massive library to get the job done. Sometimes, a few well-crafted utility functions are all you need to keep your project lean and performant.

Final Thoughts

Vanicom.js isn’t trying to be the next big thing. It’s just a small, practical library that solves a few common problems in a simple way. If you’re working on a small project or just want to keep your codebase lightweight, give Vanicom.js a try. It might just save you a few lines of code—and a few headaches.

You can find the library on GitHub and install it via npm. And remember, it’s distributed under the MIT license, so feel free to use it however you like. Just don’t forget to give credit where it’s due!

Happy coding! 🚀