DEV Community

Cover image for Be more productive with these tools! πŸŽ… December picks for you
Francesco Leardini
Francesco Leardini

Posted on

Be more productive with these tools! πŸŽ… December picks for you

Just a couple of weeks remaining before the end of the year, let's have a look at the last collection for the 2019!!

Many thanks to all the readers who left positive comments about the previous posts, it is always a pleasure to know you could use the suggested libraries in your projects!! ❀️

medium-zooom

Medium zoom is a JavaScript library for zooming images on a page and add different effects to them, like a margin or a background color matching the target image.

sample
Β 

We have different ways to bind the zoom functionality to an image element:

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)
Enter fullscreen mode Exit fullscreen mode

The library offers several interesting features:

  • πŸ“± Responsive β€” scale on mobile and desktop
  • πŸš€ Performant and lightweight β€” should be able to reach 60 fps
  • ⚑️ High definition support β€” load the HD version of your image on zoom
  • πŸ”Ž Flexibility β€” apply the zoom to a selection of images
  • πŸ–± Mouse, keyboard and gesture friendly β€” click anywhere, press a key or scroll away to close the zoom
  • πŸŽ‚ Event handling β€” trigger events when the zoom enters a new state
  • πŸ“¦ Customization β€” set your own margin, background and scroll offset
  • πŸ”§ Pluggable β€” add your own features to the zoom
  • πŸ’Ž Custom templates β€” extend the default look to match the UI of your app

Website

Β 


Β 

Progress

Progressbar.js is a library to create responsive and slick progress bars with animated SVG paths. Some built‑in shapes are available, but it is also possible to create custom shaped progress bars with any vector graphic editor.

The usage is quite simple:

var ProgressBar = require('progressbar.js');

// Assuming you have an empty <div id="container"></div> in HTML
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0
Enter fullscreen mode Exit fullscreen mode

Β 

Semi circle example (check the Result tab):

Custom shape example (check the Result tab):

Website
Β 


Β 
Alt Text

Tailwind CSS is a utility-first framework for rapid UI development.
Differently from others CSS frameworks, it doesn't provide a set of ready-to-use elements, but rather it offers several utility classes that can used directly in our HTML templates.

For example, the following set of style rules, applied to a sample template:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Generate this output:

Alt Text

The idea behind is to not write any custom CSS, but rather style our elements by applying pre-existing Tailwind classes directly to the HTML files.
Moreover every utility class can be applied conditionally at different breakpoints, making it very easy to build complex responsive interfaces.

It is also possible to customize the default settings with ease:

// Example `tailwind.config.js` file
module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}
Enter fullscreen mode Exit fullscreen mode

Website
Β 


Β 

logo

Color Thief can extract the dominant colour from an image and also generate a palette for it. The colour details are returned as an array of integers representing red, green, and blue values that can be used for further processing.

example

example2

It can be very useful when you need to decide which colours set to use in your web application.

Website
Β 


Β 

ascii

Would you like to generate an ASCII title to give a nerdish touch to your app?
Then give Ascii Today a try, it is an interesting ASCII title generator, you type the title you want and you can select among different ASCII representations of the entered text:

Alt Text

Website
Β 


Β 
That's all for the December collection! Come next year for new discoveries...
Β 

Alt Text

Top comments (4)

Collapse
 
edimeri profile image
Erkand Imeri

ProgressBar looks like a cool addition. Thanks.

Collapse
 
paco_ita profile image
Francesco Leardini

I like the possibility to use custom svg images as scrollbar. This allows to be more creative and provide unique solutions for a website. Glad you found it useful!

Collapse
 
paco_ita profile image
Francesco Leardini

Thank you DesirΓ©, glad you will be able to use then in your next project!! Wohoo!