Be more productive with these tools! 🎅 December picks for you

Cool web tools to boost your design and productivity!

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

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:

The library offers several interesting features:

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

https://jsfiddle.net/kimmobrunfeldt/sqwdkrg0/?utm_source=website&utm_medium=embed&utm_campaign=sqwdkrg0

Custom shape example (check the Result tab):

https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/?utm_source=website&utm_medium=embed&utm_campaign=dnLLgm5o

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…

Originally published at https://dev.to on December 17, 2019.

Senior Consultant & Angular Trainer at Trivadis — Passionate about web technologies | Focusing on Javascript, Angular and PWAs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store