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!
Water CSS
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:
<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">
Draggable
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, allowing to arrange the items of a list in a different order and the swap function, useful in a dashboard with cards, where we can swap their original positions.
One HTML Page Challenge
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
Animate On Scroll Library (AOS)
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):
You can find more details here
Autonumeric JS
Autonumeric is a configurable javascript library to format numbers and currencies.
The library comes with predefined settings, but it also provides a web configurator where you can customise it according to your specific needs.
Other examples on their website
If you liked the July list of libraries share some ❤️ 🦄 to show your enthusiasm. See you next month! 🙋
Top comments (0)