Be more productive with these tools! 🎃 October picks for you

#productivity #javascript #webdev #design

Welcome to the October libraries collection!!
Let's inaugurate the 🍁 Autumn season 🍁 with a list of interesting libraries to use in our projects.

Moveable allows to apply different transformations to a target element:

The example below allows to rotate a selected element:

import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    rotatable: true,
    throttleRotate: 0,
    rotationPosition: "top",
});

const frame = {
    rotate: 0,
};
moveable.on("rotateStart", ({ set }) => {
    set(frame.rotate);
}).on("rotate", ({ target, beforeRotate }) => {
    frame.rotate = beforeRotate;
    target.style.transform = `rotate(${beforeRotate}deg)`;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onRotateEnd", target, isDrag);
});

Give it a try to test further functionalities:

Rough.js is a graphic library allowing to draw shapes in a hand-drawn-like style. We can use a set of functions to draw lines, curves and other shapes.
Even though it might not fit some business projects where a more sober layout is required, it can give a different touch to prototypes and app content.

The usage is pretty straightforward:

const rc = rough.canvas(document.getElementById('canvas'));

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });

rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});

rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});

rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

The code above creates a set of filled shapes:

Visit their web site to see further possibilities:

Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine.

This library supports more than 100 languages, automatic text orientation and script detection, a simple interface for reading paragraph, word, and character bounding boxes. Tesseract.js can run either in a browser and on a server with NodeJS.

In the previous article we saw Removebg library, which is capable to remove the background from a photo.
Today we'll see how to extract text from a given picture with Tesseract.

Given the photo below:

The library provides the following output, that is very accurate:

However, in some other tests I did - with a background gradient and a less defined font - the results were not always good:

Some words have been correctly recognised but others went completely missing:

Probably the library gives its best in processing photos of documents, since background patterns and other elements seem to alter the final result.

Below a code sample showing how to process text images:

import { createWorker } from 'tesseract.js';

const worker = createWorker({
  logger: m => console.log(m)
});

(async () => {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  console.log(text);
  await worker.terminate();
})();

On the website you can also find examples with Angular and Vue

Sooner or later any developer has to face a task asking to parse data from/to a spreadsheet document 😥. In some cases we can achieve this without the use of any third party library.
However in other situations it might be useful to have a tool grouping several features to process CSV files.

Here it comes PapaParse!
Aside from providing JSON -> CSV and back, it offers several other useful functions, like:

Auto-detect delimiter
Accept remote files
Skip eventual comments in document
Multi threaded

Demo

Hopefully PapaParse will make your next CSV task a bit easier 🎉

BigPicture is a lightweight (3.5 KB gzip) and framework independent JavaScript viewer for images and videos. It provides loading spinner and captions out of the box, making the creation of a media gallery a walk in the park.

When you want to open something, pass an object to BigPicture containing the element from which you want the animation to start and an optional second parameter depending on what you want to do.

So if we want to reference a youTube video, we need to provide the video ID and the element that triggers the overlay. For instance, having the video https://www.youtube.com/watch?v=dFoxnBf7_wQ:

var BigPicture = require('bigpicture')

BigPicture({
  el: this,  // The element triggering the overlay
  ytSrc: 'dFoxnBf7_wQ'
})

If we want to display a photo gallery:

var unsplashImages = ['meiying', 'clemono2', 'heftiba'].map(function(user) {
  return {
    src: 'https://source.unsplash.com/user/' + user + '/daily'
    caption: 'Here I can add my caption...'
  }
});

BigPicture({
  el: this,
  gallery: unsplashImages
})