BT
x Share your thoughts on trends and content!

What's Exciting in New JavaScript Libraries

by on Jan 08, 2015 |

A number of new JavaScript libraries have popped up at GitHub and we decided to take a look at some of the more promising ones.

QuaggaJS: A barcode-scanner entirely written in JavaScript

QuaggaJS is a barcode-scanner entirely written in JavaScript, supporting real-time localization and decoding of various types of barcodes such as EAN and CODE128.

Although various barcode libraries exist, it was written from scratch and is not a direct port of the popular zxing library. QuaggaJS’s implementation features a barcode scanner capable of finding a barcode-like pattern in an image, resulting in an estimated bounding box including the rotation. As a result, you can do smart recognition for barcodes on your images.

If you want to take full advantage of QuaggaJS, your browser needs to support the getUserMedia API, which is implemented in recent versions of Firefox, Safari, Chrome and Opera.

The library exposes the following API:

Quagga.init(config, callback)
This method initializes the library for a given configuration and a callback function which is called when the loading-process has finished. The initialization process also requests for camera access if real-time detection is configured.

Quagga.start()
When the library is initialized, the start() method starts the video-stream and begins locating and decoding the images.

Quagga.stop()
If the decoder is currently running, after calling stop() the decoder does not process any more images.

Quagga.onDetected(callback)
Registers a callback function which is triggered whenever a barcode-pattern has been located and decoded successfully. The callback function is called with the decoded data as the first parameter.

Quagga.decodeSingle(config, callback)
In contrast to the calls described above, this method does not rely on getUserMedia and operates on a single image instead. The provided callback is the same as in onDetected and contains the decoded data as first parameter.

The QuaggaJS examples repository contains more examples and use cases.

Lining.js: A JavaScript plugin for CSS web typography

Lining.js is a library for manipulating individual lines within an element. You can use Lining.js by simply adding the data-lining attribute to your element, and then style it using CSS.

In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line. Lining.js offers complete down to the line control of your text, as in the following example:

html
<div class="poem" data-lining>Some text...</div>
<style>
.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>

Currently, Lining.js only supports major browsers such as Chrome, Firefox, Safari, and Opera. Internet Explorer does not.

InteractJS: JavaScript drag and drop, resizing and multi-touch gestures

InteractJS is a JavaScript module that adds drag and drop, resizing and multi-touch gestures with inertia and snapping to modern browsers (and also IE8+).

The main goal of the library is to replace functionality that is added by jQuery UI. As a result, it makes web apps using InteractJS more usable on smartphones and tablets. InteractJS is lightweight, works with SVGs, handles multi-touch input and leaves the task of rendering and styling elements to the application.

The official InteractJS website offers examples and use cases of dragging, snapping, resizing and multi-touch rotation.

TreeJS: Build and manipulate hookable trees

Tree.js is a JavaScript library to build and manipulate hookable trees. It is a useful plugin for looking up and traversing through directory structures.

Imagine you have an admin section in web-application to browse a file system. Using Tree.js, you can represent the file system as follows:

javascript

var myTree = Tree.tree({
    children: [
        {
            name: 'dupuis',
            children: [
                {
                    name: 'prunelle',
                    children: [
                        {
                            name: 'lebrac',
                            job: 'designer'
                        },
                        {
                            name: 'lagaffe',
                            firstname: 'gaston',
                            job: 'sleeper'
                        },
                    ]
                }
            ]
        }
    ]
});

In order to find a node, you can search through this tree by passing any valid directory structure as a parameter

javascript
var lebrac = myTree.find('/dupuis/prunelle/lebrac');
lebrac.data() // { name: 'lebrac', job: 'designer' }
lebrac.attr('job'); // designer
lebrac.path(); // /dupuis/prunelle/lebrac

The Tree.js repository on GitHub provides additional use cases using hooks and promises.

Rate this Article

Relevance
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss
General Feedback
Bugs
Advertising
Editorial
Marketing
InfoQ.com and all content copyright © 2006-2016 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.