DEV Community

Cover image for volcareso.js- A multi talented Javascript library
volcareso
volcareso

Posted on • Updated on

volcareso.js- A multi talented Javascript library

volcareso.js

A multi talented JavaScript library.

Gitter

Usage

<script src="https://volcareso.github.io/volcareso.js/volcareso.min.js"></script>
Enter fullscreen mode Exit fullscreen mode
<script src="https://volcareso.github.io/volcareso.js/polyfill.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

That's it! The power is in your hands now!

Selecting elements

$$('<css_compatible_selector>').action();
Enter fullscreen mode Exit fullscreen mode

where <css_compatible_selector> is a selector that you'd use to select elements in CSS (see here), e.g: #id_selector, .class-selector, tagname-selector and action is any method (from below) that performs some action.

Hiding elements

$$('body').hide();
Enter fullscreen mode Exit fullscreen mode

Listening to events

$$('element').on('eventName', function () {
  alert('i have ears!');
});
Enter fullscreen mode Exit fullscreen mode

where, eventName is any event as described here.

Appending or prepending text to elements

// appending
$$('element').append('appendedText');

// prepending
$$('element').prepend('prependedText');
Enter fullscreen mode Exit fullscreen mode

Reading and setting attributes:

// reading attributes
$$('element').attr('class');

// settings attributes
$$('element').attr('class', 'foo_bar');
Enter fullscreen mode Exit fullscreen mode

Changing CSS properties

$$('element').css('property', 'value');
// e.g.:
$$('element').css('text-align', 'center');
Enter fullscreen mode Exit fullscreen mode

Fetch remote content

$$('element').load('https://url-to-file.com/abs/path/to/FILE.txt');

// load with credentials:
$$('element').load(
  'https://url-to-file.com/abs/path/to/FILE.EXT',
  'username',
  'password'
);
Enter fullscreen mode Exit fullscreen mode

Handling cookies

$$().setCookie('cookieKey', 'cookieVal', 'expiryDate', 'path');

$$().getCookie('cookieKey');
Enter fullscreen mode Exit fullscreen mode

Append elements

$$('elementToAppendTo').addElm('elem', 'id');
Enter fullscreen mode Exit fullscreen mode

Local Storage

$$().storage('action', '[key]', '[value]');

/// action list:
/// "clear" clears the local storage (key, value not required)
/// "get" gets the item with specified key (value not required)
/// "set" set the key with the respective value
/// "remove" remove the item with the specified key (value not required)
Enter fullscreen mode Exit fullscreen mode

Toggle (hide and show state)

$$('element').toggle();
Enter fullscreen mode Exit fullscreen mode

Text-to-speech

$$().read('message'); // reads "message"

$$('element').read(); // reads the text inside 'element'
Enter fullscreen mode Exit fullscreen mode

Basic data about client

$$().data.lang.userAgent.os.cookies.vender.online.version.mobileType.doNotTrack; //en_US //Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Mobile Safari/537.36" //linux x86_64 // true //Google.inc // true id online //5.0 //4g //true is turned on

$$().data; //returns all data in an object
Enter fullscreen mode Exit fullscreen mode

Fingerprinting (sort of):

$$().fingerprint(key); //sets the fingetprint on the user machine
$$().checkFingerprint(key); // returns true if the fingerprints are matched (else false)

// e.g.:

if ($$().checkFingerprint('user1')) {
  console.log('not a new user');
} else {
  console.log('new user');
}

$$().fingerprint('user1');
Enter fullscreen mode Exit fullscreen mode

Custom elements

$$().recycle('custom-element', '<p>an element </p>');
Enter fullscreen mode Exit fullscreen mode

Now, when we use <custom-element></custom-element> anywhere in the html document, it will be replaced with the html markup given in the second parameter. This way you can reuse the same code again.

Dynamic data (sort of a PoC)

new react({
  el: 'body',
  data: {
    hello: 'world',
  },
});
// replaces {{ hello }} with world in element body
// inspired from Vue.js
Enter fullscreen mode Exit fullscreen mode

Discussion (6)

Collapse
thumbone profile image
Bernd Wechner

Given the rather (pleasing) forward march of vanilla Javascript over time I think it worth adding clear descriptions to each section what the value add is here over vanilla. Basically for the syntactic sugar items sharing the vanilla JS equivalent and for bigger better ones.

I mean more and more people I think, leaving jQuery are on new mission to use as much vanilla JS as possible not tie themselves down to syntactic sugar in a sense creating a new dependency.

Of the items listed the Reuseable components left the greatest impression with me.

As to the name if you;re worried about it being egoistic I have two thoughts:

  1. To a great many, particularly in US culture, that is no issue at all. Ego is not a dirty word.

  2. It is of course a bigger issue in other cultures and if it bugs you even slightly I'd recommend honouring that and just playing around with some other names. Of course that can be a nuisance or a fun game as you see it. Derivatives are easy to play with for example,given Shrihan's comparison with jQuery, iQuery, kQuery, μQuery all leap out a amusing candidates, but there are plenty of other angles you can go ...

Collapse
volcareso profile image
volcareso Author • Edited

I mean more and more people I think, leaving jQuery are on new mission to use as much vanilla JS as possible not tie themselves down to syntactic sugar in a sense creating a new dependency.

Yeah, i think the same way too, i made this cause i was bored with jQuery as a annoying dependency in my projects. As i learnt more vanilla js i was more and more leaving jQuery. You're right, a few people like loads of dependencies in their project while others don't.
Dependencies arent good, they attract bugs.

Volcareso isnt my real name btw xD

Thanks for the reply. It feels better when the community shows interest in a project. xD

Collapse
volcareso profile image
volcareso Author

And i know i am bad at names :D

Collapse
volcareso profile image
volcareso Author

Made a react class for vue like reactivity.
Special thanks to @ghaerdi .

Collapse
shrihankp profile image
Shrihan Kumar Padhy

This could be the next jQuery!

Collapse
volcareso profile image
volcareso Author

Thanks for the support :)