DEV Community

Cover image for Be more productive with these tools! 🎃 October picks for you
Francesco Leardini
Francesco Leardini

Posted on • Updated on

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

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 }) => {
}).on("rotate", ({ target, beforeRotate }) => {
    frame.rotate = beforeRotate; = `rotate(${beforeRotate}deg)`;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onRotateEnd", target, isDrag);
Enter fullscreen mode Exit fullscreen mode

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'));, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });, 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

Enter fullscreen mode Exit fullscreen mode

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:
Alt Text

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('');
  await worker.terminate();
Enter fullscreen mode Exit fullscreen mode

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


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

var BigPicture = require('bigpicture')

  el: this,  // The element triggering the overlay
  ytSrc: 'dFoxnBf7_wQ'
Enter fullscreen mode Exit fullscreen mode

If we want to display a photo gallery:

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

  el: this,
  gallery: unsplashImages
Enter fullscreen mode Exit fullscreen mode


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


Alt Text

Top comments (3)

bgdesigns profile image
Bryan George

+1 to Papa Parse - I had a project where I ended up importing a csv then parsing into a json. It worked like a charm and was super easy to implement.

paco_ita profile image
Francesco Leardini

Cool, glad that it was helpful for you!!

webdeasy profile image

Some cool tools, thanks for sharing! :)