Animate.css is a simple but powerful css library for adding all types of animations to your HTML elements. It is just a matter of including a CSS file and applying desired animation class.
You can download the CSS or use the CDN version of the same. It is also available as npm and bower dependency.
Here is the full documentation: https://github.com/daneden/animate.css
Single Element Spinners
Single Element Spinner is an online tool to generate HTML and CSS code required for some really cool spinners that can be used as busy load indicators on your Front End interface.
The tool provides the flexibility to choose foreground and background colors for the spinner. Once this is done you can simply view, copy and paste the required CSS and HTML from here.
This is my favorite one!!
Is.JS is a micro check library which provides a huge set of general utility checks for the following things:
You will notice how easy it is to check for things like browser type, device type,Array/Strings and time etc.
It is again a matter of including a js file and you are all set with all kind of available checks! It is also available as npm and bower dependency.
Here is the full documentation: https://github.com/arasatasaygin/is.js
Do you need to offer a tour guide to your first time application user?
In order to implement a first user tour, you need not to implement the whole functionality from scratch. There is this amazingly cool utility called Intro JS for implementing it really quick.
The official site provides a quick demo and the documentation for the usage is also very rich.
It is not a free utility for commercial use. If you want similar functionality at no cost, there is an alternate utility called Bootstrap Tour. It is based on bootstrap front end framework. If you don’t want bootstrap UI, you can also use the same without it.
Many of the times, while using some modern web feature we are not sure if it will work in old browsers or how it will behave across the browsers.
Modernizr provides a way to check for the feature’s compatibility in the user’s browser in advance(before rendering). If particular web feature is not supported in user’s browser you can provide a fallback mechanism to handle the scenario e.g. alternate implementation or just a simple message about compatibility issue!!
For getting started with Modernizr, here is the full documentation.
Following are 2 very popular libraries in front end framework world. As these are quite popular and a lot of people are already aware about these, we are not going in details here:
So, that was it for the day. If you find any of the libraries/tools interesting and useful for your application, feel free to explore the official documentation and use it with ease. See the magic of this cool stuff yourself while using it with your front-end development tasks.
We will be back soon with some more interesting stuff. Till then…