Be more productive with these tools! 🌻 My July picks for you
Tags: javascript, webdev, design, productivity
Published: 2019-07-19 15:14:10

Every day new JS libraries and web tools are published and it is impossible to keep track of all of them. I like to regularly search for interesting creations and try them in small projects. Sometimes those findings are good, other times they just look *fancy*, but not really useful.

Therefore I decided to create a series about these discoveries and share with you my favourite ones on a monthly base. I concentrate on libraries that are easy to use and can bring a practical benefit to common web projects. 

I hope you will enjoy my July collection! 
&nbsp;

## Water CSS

![watercss](https://thepracticaldev.s3.amazonaws.com/i/5qshwdhgh2o4vsc3jd98.png)

Water CSS allows to automatically apply generic layout styles to web pages.

It is like having a magic wand and use it to *beautify* our web app with a single touch. The typical scenario where watercss shines is when we have a simple demo project, but we don't have (or want) to invest time in styling it.

From the author:
> Water.css is a css framework that doesn't require any classes. You just include it in your head tag and forget about it, while it silently makes everything nicer.

There are also two themes available, making it easy to switch between the light and dark mode:

```javascript
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
```

[Water CSS website](https://watercss.netlify.com/)
&nbsp;


## Draggable

![draggablelogo](https://thepracticaldev.s3.amazonaws.com/i/n76hds6i67one7fbe5xf.png)

Draggable is a JS library providing a set of drag & drop actions.
Some of its features look a bit extreme to me, but I like the [sort list](https://shopify.github.io/draggable/examples/simple-list.html), allowing to arrange the items of a list in a different order and the [swap](https://shopify.github.io/draggable/examples/flexbox.html) function,  useful in a dashboard with cards, where we can swap their original positions.

![dragexample](https://thepracticaldev.s3.amazonaws.com/i/azwhhe3nzil7pgswjlf4.png)

[Draggable examples](https://shopify.github.io/draggable/examples/)
&nbsp;


## One HTML Page Challenge

![logo](https://thepracticaldev.s3.amazonaws.com/i/0r1raltr49d9xgd6qs0q.png)

This is not a JS library, but I liked the idea so much that I wanted to share with all of you. It consists in a collection of crazy and genial ideas developed on a single HTML page, without the assist of any third party framework.

> The goal is to create anything you want within 1 single html file. Practice your skills with no assistance from libraries, no separation of files, and no assistance of a modern framework. 
**How creative can you be with such restrictions?**

It is amazing to see what can be achieved with very basic resources and for sure it is a great training gym for developers of any level.

Will you publish there also your single page creation? If so, please write the URL in the comments, I am very curious to see new SPAs!!

For some inspiration have a look at the [existing creations](https://metroxe.github.io/one-html-page-challenge/?ref=devawesome.io)
&nbsp;


## Animate On Scroll Library (AOS)

![aos-logo](https://thepracticaldev.s3.amazonaws.com/i/w8h106l2wm5nh2h2lkzr.png)

Are you working on a company landing page or simply would you like to add some engaging animations to your web application?

AOS is an interesting library allowing to easily animate elements while scrolling the page. There are plenty of built in animations, but also custom ones can be added for specific scenarios.

Give it a try below (it might take some time to load):

{% codepen https://codepen.io/michalsnik/pen/WxNdvq default-tab=html,result %}

You can find more details [here](https://michalsnik.github.io/aos/)
&nbsp;


## Autonumeric JS
![autnumericlogo](https://thepracticaldev.s3.amazonaws.com/i/lix3dvuoi4a2abcahx8d.png)

Autonumeric is a configurable javascript library to format numbers and currencies.
The library comes with predefined settings, but it also provides a [web configurator](http://autonumeric.org/configurator) where you can customise it according to your specific needs.

![examples](https://thepracticaldev.s3.amazonaws.com/i/fb1ztdzyiakueay7hy0c.png)

Other [examples](http://autonumeric.org/examples) on their website
&nbsp;
&nbsp;

If you liked the July list of libraries share some :heart:&nbsp;&nbsp;:unicorn: to show your enthusiasm. See you next month! :raising_hand:
&nbsp;
&nbsp;