Be more productive with these tools! 🎃 October picks for you
Tags: productivity, javascript, webdev, design
Published: 2019-10-06 20:24:16


Welcome to the October libraries collection!!
Let's inaugurate the :maple_leaf: Autumn season :maple_leaf: with a list of interesting libraries to use in our projects.
&nbsp;



![Moveable](https://thepracticaldev.s3.amazonaws.com/i/7o2c48tyou5d2yb6gne4.png)
Moveable allows to apply different transformations to a target element:

![example](https://thepracticaldev.s3.amazonaws.com/i/zn4uqxcraxggvdwi4sze.png)

The example below allows to rotate a selected element:

```javascript
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:

{% codepen https://codepen.io/daybrush/pen/VoQypZ %}
&nbsp;

--------------------------------------

&nbsp;
![Roughjs](https://thepracticaldev.s3.amazonaws.com/i/05r74f5wdg0yj7zf0lha.png)
[Rough.js](https://roughjs.com/) 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: 

```javascript
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:
![demo](https://thepracticaldev.s3.amazonaws.com/i/6wtjiwv3qulhrpb0e1cy.png)

Visit their [web site](https://roughjs.com/) to see further possibilities:
&nbsp;
![chart](https://thepracticaldev.s3.amazonaws.com/i/urnqhy1oxstr6rwowxpx.png)
&nbsp;

--------------------------------------

&nbsp;
![Tessaract](https://thepracticaldev.s3.amazonaws.com/i/5s8qvd9epfc218ls86m6.png)
> [Tesseract.js](https://tesseract.projectnaptha.com/) 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](https://dev.to/paco_ita/be-more-productive-with-these-tools-september-picks-for-you-2efm) 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:
![text](https://thepracticaldev.s3.amazonaws.com/i/te8u15wxdmbdvashst85.png)

The library provides the following output, that is very accurate:
![result](https://thepracticaldev.s3.amazonaws.com/i/le56huge6fv2kb64nyr0.png)

&nbsp;
However, in some other tests I did - with a background gradient and a less defined font - the results were not always good:
&nbsp;
![sample](https://thepracticaldev.s3.amazonaws.com/i/bkyme4kgqipwtstpt3un.png)

Some words have been correctly recognised but others went completely missing:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pusqe6qhaztv7o4wgm6e.png)

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:

```javascript
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](https://github.com/jeromewu/tesseract.js-angular-app) and [Vue](https://github.com/jeromewu/tesseract.js-vue-app)
&nbsp;

------------------------------

![papaparse-logo](https://thepracticaldev.s3.amazonaws.com/i/j95k9rwbdcxfhnqmyikf.png)
Sooner or later any developer has to face a task asking to parse data from/to a spreadsheet document :disappointed_relieved:. 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](https://github.com/mholt/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](https://www.papaparse.com/demo)

Hopefully PapaParse will make your next CSV task a bit easier :tada:
&nbsp;

------------------------------

&nbsp;
![bigpicture](https://thepracticaldev.s3.amazonaws.com/i/snrx57i37ponlm4w5nq7.png)

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. 

![video](https://thepracticaldev.s3.amazonaws.com/i/axuaezamktwo8q0htzqm.png)

> 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`:

```javascript
var BigPicture = require('bigpicture')

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

If we want to display a photo gallery:
```javascript
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
})
```
&nbsp;

I hope you enjoyed this month collection. Come back in November to see what's new behind the corner!

&nbsp;

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/betee5j5ij3pinrc2xzp.jpg)