What it Does: As the Internet of Things becomes such an important component of modern software, users demand more apps and sites that connect the information they search for directly to their daily lives. Algolia Places makes it easy to integrate map functionality into your programs. By drawing from OpenStreetMap’s expansive and free database of worldwide locations, it allows you to integrate map functionality and autocomplete directly into your HTML code.
The Coolest Features: Algolia makes it easy to incorporate the sort of quality of life functions you’d find on Google Maps into any application. Autocomplete is available for both address and country searches, meaning that users won’t have to sift through locations thousands of miles away to track down an address just a few blocks away. A ranking algorithm means that the most relevant results will show up first in the feeds of your users, and there’s even the ability to let users narrow down their results using a traditional map and pin structure drawing from that same algorithm. Algolia takes typos into account with its rankings for better results. Search results from the OSM database can even be linked to your internal indices to create smart and targeted results tailored to your mission statement.
The Coolest Features: While it may not be the sexiest thing around, Underscore is exceptionally good at sorting things and manipulating data. A lot of these functions are the sort of standards migrating users could expect from functional languages like Python that are built for data visualization and manipulation. The pluck function allows you to create an array of property values using a fraction of the code. There’s also the ability to map arrays, create a ranged list of integers, and invert the keys and values in any object. FindWhere is an essential for anyone working with large data sets, allowing you to quickly identify the first match in your listed key-value pairs.
What it Does: HTML and CSS are cool, but putting together a sleek and modern user interface can require some incredibly complex coding and tricky workarounds. Built in 2013 by Jordan Walke, React has quickly ascended to a position as one of the most popular libraries for putting together a UI. There’s a good reason for that too. React offers a whole wealth of tools you can use to create an interface that looks slick and adapts responsively to accommodate the demands of multiple devices. Its declarative structure means that you can make adaptations to your code easily without having to worry about the fundamentals breaking and you having to rebuild your structure from the ground up. A smartly designed component-based structure allows you to create exceedingly complex interfaces with far less fuss.
The Coolest Features: PropType is an especially cool function, as it allows you to more easily debug your program by setting data validation parameters for each of your components. Meanwhile, Object.assign allows quick comparison of components when testing functions so that you can avoid redundancies more easily.
What it Does: Premonish is a short and sweet library that allows you to easily create sites that predict and respond to the cursor movements of your visitors. A simple API makes integrating it into your site a breeze. By calculating the location and velocity of your cursor, Premonish lets you highlight elements on your page through the use of a variety of CSS functions. While it may be lacking in its variety, it’s a useful library to keep around if you want your site to stand apart from the rest of the herd.
The Coolest Features: Premonish is a straightforward library that does exactly what it says on the packaging. The premonish function allows you to link together dynamic CSS effects that respond to user input.
The Coolest Features: The functions available through Voca are incredibly dense. You’ll find a dozen case functions that allow you to manipulate your text into practical standards like upper and title case as well as more complex variations like camel and snake case. Digging deeper provides even more robust manipulation options. You can chop up strings at particular characters and code points or use more flexible truncation or slice functions. Additionally, Voca provides robust options for formatting, counting, and indexing strings for more complex string analysis.
What it Does: Web design has come a long way since the crude dynamic sites of the early days of HTML and CSS, and Three.js is leading the charge in the creation of apps and sites that want to incorporate 3D design functionality. Three.js simplifies the process of creating 3D images and animations for your project and reduces the barrier to entry for designers with more limited coding experience and coders looking to create complex designs without having to learn the ins and outs of three dimensional design suites. If you’ve ever browsed codepen.io, you understand the impressively complex three dimensional structures that coders can design with CSS and a line or two of HTML alone, but Three.js makes these sort of designs infinitely easier and adds a number of cool functional assets on top.
The Coolest Features: The Three.js examples page provides a wealth of samples for what you can create with its rich library. Their geometric functions allow you to easily put together dynamic and responsive models, but just impressive are their texture functions which allow you to simulate everything from the effects of water to realistic cloth structures. Camera functions put you in control of the perspective, and a number of seamless animation functions allow you to recreate everything from the movement of human models to zooming maps.
The Coolest Features: For most of your practical needs, Lazy replicates the sort of functions you’ll find in Underscore. Pluck allows you to iterate through an array using a variable and create a new array according to your specifications, while filter allows you to further narrow down the criteria for your iteration. The take variable allows you to set a discreet limit on how much information you reiterate. That’s not to say that Lazy’s functions are interchangeable with other utility libraries. There’s the ability to create infinite sequences, event sequences that allow you to iterate over time, and functionality for asynchronous iteration.
The Coolest Features: Anyone who’s used a functional language more devoted to numerical manipulation will find themselves very comfortable with this library. While the majority of its functions are pretty standard for the category, its main use is its utility. You’ll find the ability to determine a square or square root, round off a fractional or decimal number, and determine a derivative. Adding to its utility is the ability to create complex expressions and then chain them together when you’re working with more complex computations.
What it Does: We’ve already talked about utility libraries that can help you manipulate arrays, numbers, and more advanced data types, but ChartJS adds another layer of utility in the form of data visualizations. Combined with a library like Underscore or lazy.js and math.js, users will have the ability to analyze copious amounts of big data and then format them into easier to digest visualizations using ChartJS’ functions. Eight different types of data visualizations are supported, and they can be effectively rendered into basic HTML without any fuss or hassle.
The Coolest Features: The simplicity with which you can wield ChartJS is a breath of fresh air. Charts can be converted into an HTML5 ready wrapper simply by assigning them to <canvas> tags, and the performance across browsers is particularly and refreshingly strong. Each of the varieties of charts is assigned to its own simple function, but there are additional options to manipulate the components more readily. You can adjust the axes and radials to create more personalized results as well as assign events to create more advanced interactions with your users. A number of styling options are also available for things like labels, coloring, and fonts.
What it Does: While #keyframes and animation tools add some level of animated functionality to the latest version of CSS, they’re limited, and it’s not a language particularly well suited for more complex variations. Anime.js lets you cut out the busywork and provides you with access to an extensive library of animation functions that you can use to turn a simple object into a dynamic work of art that responds to predetermined or user-initiated events. From forms with borders that respond to user clicks to animations with the basic look and feel of cartoon shorts, there’s a lot you can do with anime.js.