loading...
Cover image for Be more productive with these tools! πŸŽƒ October picks for you

Be more productive with these tools! πŸŽƒ October picks for you

paco_ita profile image Francesco Leardini Updated on ・4 min read

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

Moveable
Moveable allows to apply different transformations to a target element:

example

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:


Β 


Β 
Roughjs
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:
demo

Visit their web site to see further possibilities:
Β 
chart
Β 


Β 
Tessaract

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

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

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

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('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
Β 


papaparse-logo
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

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

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
})

Β 

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

Β 

Alt Text

Posted on by:

paco_ita profile

Francesco Leardini

@paco_ita

Software Engineer βˆ™ International speaker βˆ™ Focusing on Javascript, Angular, React and PWAs

Discussion

markdown guide
 

+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.

 

Cool, glad that it was helpful for you!!

 

Some cool tools, thanks for sharing! :)