Be more productive with these tools! ☔️ November picks for you

#productivity #webdev #javascript #design

Here we are for another round of interesting libraries!! Let's see what the month of November will bring us. 🎉

Compressorjs is a library to compress images, as the name suggests 😄.

It uses the HTMLCanvasElement.toBlob API for the compression process.
A Blob object is created, representing the image contained in the canvas.

Usage:

<input type="file" id="file" accept="image/*">

import axios from 'axios';
import Compressor from 'compressorjs';

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  new Compressor(file, {
    quality: 0.6,
    success(result) {
      const formData = new FormData();

      // The third parameter is required for server
      formData.append('file', result, result.name);

      // Send the compressed image file to server with XMLHttpRequest.
      axios.post('/path/to/upload', formData).then(() => {
        console.log('Upload success');
      });
    },
    error(err) {
      console.log(err.message);
    },
  });
});

There are different options available to set max sizes or the quality of the output image for instance. The results I tried are pretty good, with a compression around 70% and still no significative quality loss.

You can play with the DEMO on the website.

Pagemap is an interesting library allowing to create a minimap for your site, similar to some code editors like VS Code. It can be especially useful for pages with lot of text content.

The usage is pretty straightforward:

Add a canvas tag to your HTML page:

<canvas id='map'></canvas>

Fix the position on the screen (here top right):

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

Init and style the mini map according to your elements:

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

Here a DEMO.

Mailgo library automatically opens a modal dialog when we click on :mailto and :tel links. It can redirect directly to Gmail or Outlook for emails and Telegram, WhatsApp or Skype for phone numbers.

Usage:

<a href="mailto:mymail@gmail.com">mymail@gmail.com</a>

If you are scared to expose your email to potential spam, you can split the email address using the data-address and data-domain attributes:

<a href="#mailgo" data-address="mymail" data-domain="gmail.com">write me!</a>

Click on the links of the demo to give it a try:

Vant is a library of UI components created for mobile applications, based on Vue.js. It lists many components like Action Components which can provide their own methods & options.

Below an example with the Card component:

<!-- Basic Usage -->
<van-card
  num="2"
  price="2.00"
  title="Title"
  desc="Description"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/>

<!-- Discount info -->
<van-card
  num="2"
  tag="Tag"
  price="2.00"
  title="Title"
  desc="Description"
  origin-price="10.00"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/>

<!-- Custom Card -->
<van-card
  num="2"
  title="Title"
  desc="Description"  
  price="2.00"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
>
  <div slot="tags">
    <van-tag plain type="danger">Tag</van-tag>
    <van-tag plain type="danger">Tag</van-tag>
  </div>
  <div slot="footer">
    <van-button size="mini">Button</van-button>
    <van-button size="mini">Button</van-button>
  </div>
</van-card>

Other than typical form elements like radio boxes, buttons and input fields, Van also provides file uploader, progress bars, swipe panel and password fields to mention some of its components.
Therefore it can be very useful to any Vue.js developer.

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Currently supported editors are: VS Code, JetBrains, Atom and Sublime Text and it comes in two versions: Community (free) and Pro.

Some of its interesting features are:

Live Code Coverage

Once Quokka.js is running, you can see the code coverage on the left side of your editor. The coverage is live, so by changing the code the coverage will automatically be updated accordingly. This is a nice feature coming from the Wallaby.js product (the same team is behind quokka).

Live Feedback

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor.

Live Values Display (PRO version)

While the Live Comments feature provides an excellent way to log expression values and will keep displaying values when you change your code, sometimes you may want to display or capture expression values without modifying code. The Show Value and Copy Value features allow you to do exactly that.

To use these features, the expression being logged either needs to be selected, or the cursor position needs to be right after the expression when the command is invoked.