To be a good developer means not only produce good products but also to stay on top of changes in the field. Keeping up with the ever-changing world is a key to success.
But, it does not mean that you should obsessively take part in every conference, meeting and event as well as put to work all brand-new techniques. Whether it is just a concept in Codepen or fork in GitHub, the dev community comes up with some interesting ideas almost every day.
For example, Moon.js. This small library, whose minified version weighs just 7 kB, was created specifically to prototype interfaces. Much like Vue or React it has a component system that lets you build UIs in a short span of time.
Or Tippy.js, that is aimed to improve the informative side of the project by providing readers with unobtrusive clues. It creates and adds tooltips. Customization options are pretty extensive – you can specify placement, arrows, triggers, animations and even themes.
If you need more than just a tiny hint, you can employ pop-up windows where you can place special offers or extra data. In this case, Modaal should be your choice. It is a well-thought-out combination of quality, flexibility and accessibility. It is applicable for any type of content, including images, videos and galleries.
Or maybe you seek a beautiful and multi-functional date picker for your project then you should consider Datedropper.
Although it was created in 2015, it has seen many improvements, making it a viable jQuery library for crafting UI date pickers.
Almost any aspect of the interface can be done with the help of plugins. Whether it is a banal slide-out navigation which can be easily recreated with the help of Canvi or a set of charts that can be built via a fantastic Billboard.js or Markvis that covers all the necessary instruments for effective data visualization, ready-made solutions do all the heavy lifting. Their sphere of use is very extensive. Though, you don’t need me to tell you that. Let’s move continue through our collection.
Fitty is a solution for forcing the text to fit the specified container, whereas MediumLightbox is a lightweight alternative to famous lightbox that adds zooming functionality to images imitating Medium’s smooth transitions.
Consider one of the most common features of modern interfaces – sticky panels. Almost every other website use sticky positioning to provide visitors with an extra way of navigating: it can be a “Go to top” button or main menu. If you need something like that on your project then you can go for StickyBits or Sticky Sidebar.
Add Some Fun
AnimatePlus is a lightweight library for setting HTML or SVG elements into motion. You can control easing, duration, delay, direction, loop, speed and more factors.
If you just want to enrich UI with a mere aesthetically pleasing feature, then you should try Moving Letters, PixelWave, Blotter.js and Bubbly Bg. These four solutions will give the interface a splendid finishing touch. Let’s consider each.
It may sound like a tautology, but Moving Letters is for moving letters. It is a small collection created by the talented Tobias Ahlin who developed different ways of bringing typography to life. Each effect is accompanied by a code snippet that you can easily adapt to your project.
Much like the previous example, Blotter.js is also for creating text effects with zest.
Pixelwave is for spicing up transitions between pages or slides with a subtle geometric effect.
And Bubbly.bg is for creating a canvas with a sweet bubbly animation that takes up the whole viewport.
The previous effects are nice and lovely, but they are small and short. If you seek more extravagant and extensive ways to impress visitors then you can set your eyes on CSS Doodle, Draggable and Pts.js.
These plugins come from different categories and do absolutely different stuff but they have one thing in common – they are able to give interfaces a wow factor.
CSS Doodle is a web component that lets you programmatically draw patterns using pure CSS.
Draggable is a lightweight library for adding drag-and-drop functionality to your project. It promises to be accessible, sortable, swappable and extensible.
In Pts.js point is a basic building block that you connect with the others in order to create a set of dots. Use it to build unique particles-based masterpieces.
The last tool to consider is Emergence.js. Unlike previous plugins that are ready-made solutions which partially dictate their rules, Emergence.js.is a flexible tool that just provides a solid foundation for experiments. It is ideal for crafting storytelling or scroll-based experiences. Its goal is to detect visibility of certain elements in the browser giving you a freedom of further manipulations.
What plugins catch your eye?