loading...
Cover image for Be more productive with these tools! ☔️ November picks for you

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

paco_ita profile image Francesco Leardini Updated on ・4 min read

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

Compressorjs

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.

results

You can play with the DEMO on the website.
 


 
pagemap

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.

usage

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.
 


Alt Text

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

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>

Alt Text

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.
 


 
quokkajs

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.

License

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

CodeCoverage
 

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.

LiveFeedback
 

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.

LiveFeedback

 


 

This concludes our November list. Come back next month to see some new libraries from the web. 🙋

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