3 more awesome but small JavaScript Libraries you need to try

Thank you guys so much — here is the promised second part for you

Louis Petrik
Feb 8 · 4 min read
Here is the second part with more cool libraries!

First, thank you so much for that awesome feedback on my first part of this series — I got a lot of messages that the article might help you, and you got to know some cool new JS libraries.
In case you did not check the first part out, there you go:

With this second part I want to do the same, of course.
This article will show you 3 rather unknown, but very powerful & nevertheless small JavaScript libraries, which will make your life (and the life of your clients) easy without making your web app unnecessarily heavy.

1. ) Reliable data validation with xtype.js

Have you ever had the problem that you wanted to check types in JavaScript, but the typeof function of Vanilla JS gave you unreliable results?

If you don’t know what I mean, then take a look at this mess

typeof(new Date())                     // objecttypeof([‘Max’, ‘Carl’, ‘Tom’])         // objecttypeof({ name: ‘Max’, age: 20 })       // objecttypeof(/ab+c/i)                        // objecttypeof(new Error(‘Error’))             // object

But with xtype.js, there is a solution for this:
You can install it via NPM to use it with E.g. React or Node.js

npm install xtype

Or use it in the browser when you downloaded it.
But first, let’s have a look on how we can solve our mess with it:

xtype.type(new Date())                 // datextype.type([‘Max’, ‘Carl’, ‘Tom’])     // arrayxtype.type({ name: ‘Max’, age: 20 })   // objectxtype.type(/ab+c/i)                    // regexpxtype.type(new Error(‘Error’))         // error

Cool, hm? And it gets better. Because by not using the type function, but passing the value directly, we can also get more details about our value.

xtype.type(-1.1)                       // number// more details please:xtype(-1.1)                            // negative_floatxtype(1)                               // positive_integerxtype('')                              // empty_string xtype('  ')                            // whitespacextype(["Max", "Carl"])                 // multi_elem_arrayxtype(["Max"])                         // single_elem_array

Isn’t that absolutely amazing?

And it’s only 3kB in size. And it works in the Browser and with Node.js :)
Tip: There is so much more to discover in the
official documentation.

2. ) Handling keyboard shortcuts in the Browser with Mousetrap.js

Especially when building more complex UI’s, it is helpful or even necessary to provide the user with keyboard shortcuts.
Of course this is also conceivable in video games or something like that. Anyway — here is Mousetrap with just 2.2kB for you

Get the code, for example from a CDN: https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js?a4098
Import it in the <head> of your website.
Or:
npm install mousetrap
import Mousetrap from ‘mousetrap’

Let’s have a look on a few examples

Bind a single Key:

Mousetrap.bind(‘4’, function() {
console.log(‘you pressed 4’)
})

Important note: It makes a difference whether it is a capital or small letter that was defined or pressed. For Mousetrap, for example, x is not equal to X.

Bind a single key, trigger the function when you let the key come up, after holding it down. (Because of the keyup-setting)

Mousetrap.bind(‘x’, function() {
console.log(‘You pressed x and let it come up’)
},‘keyup’)

Trigger when the a, b and c keys are pressed in sequence. The specified sequence must be observed.

Mousetrap.bind(‘a b c’, function() { 
console.log(‘You pressed a, then b & after that you pressed c’)
})

Creating a key combination

Mousetrap.bind(‘command+shift+k’, function(e) {
console.log(‘you pressed command, shift & k’)
})

Several key combinations, which should be reacted to in the same way, can be passed with an array

Mousetrap.bind([‘a+d’, ‘w+s’], function(e) {
console.log(‘you pressed a & d OR w & s’)
})

For more, check out the official documentation :)

3. ) Analyzing user input with Countable.js

With Countable.js you can count in real time what your user enters into a text field. No matter if it is about counting characters, words or paragraphs.

Good news first: There is a live demo available.
But let’s build something on our own with it

Download the library from https://github.com/RadLikeWhoa/Countable/archive/master.zip
Or install it via npm:
npm install countable

<textarea id=”text”></textarea><script>
Countable.count(document.getElementById(‘text’), counter =>
console.log(counter)
)
</script>

Now you should see:

{paragraphs: 0, sentences: 0, words: 0, characters: 0, all: 0}

With the Countable.count function we get the current state of our text field. But if we change anything in it now, the function will not be called again.

The triggering at every change of the content of the text field can be achieved by the Countable.on function

Countable.on(document.getElementById(‘text’), counter =>
console.log(counter)
)

Whenever we now change the input, there will be a new console.log

Not difficult at all and not unnecessarily complex I find.
Therefore gzipped & minified only 1kB large :)

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

And leave me some claps & feedback — it does not cost anything :)
Have a nice day!

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