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.