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

 

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)

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

 

---

 

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

 

Semi circle example (check the Result tab):

Custom shape example (check the Result tab):

Website
 

---

 

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>

Generate this output:

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']
  }
}

Website
 

---

 

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.

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

Website
 

---

 

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:

Website
 

---

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

Comments

[Erkand Imeri]

ProgressBar looks like a cool addition. Thanks.

[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!

[Francesco Leardini]

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