15 JavaScript Libraries for the Soul

I appreciate the finer details on the web. I really like intuitive animations (the kind that isn't just icing on the cake), data binding on forms and other user invoked elements as well as styles different than default web styles on certain elements like select fields for example.

JavaScript enhances user experiences on a whole new level compared to traditional CSS and HTML. To me, a website should make you feel good and happy when you’re using it. It should be both usable and pleasing to the eye. Balancing the two is often a challenge but the libraries below should help get the job done.

I titled the post 15 JavaScript libraries for the soul simply because these libraries bring a smile to my face when utilized correctly. They enhance things you use daily and often leave you with a feeling of accomplishment inside of applications and other interactive experiences. All of these libraries are front-end focused. These deal directly with user interaction as well as experience.

GreenSock GSAP

I found Green Sock after listening to the Shoptalk Show podcast featuring Chris Coyier and Dave Rupert. They mentioned it when a question was presented before them from a fellow listener. If you’re interested in animating things in a big way with code much similar to jQuery I highly recommend you check this library out.

There are a few flavors combined in the GSAP product line

• TweenLite - As the name describes, this tool aids in tweeting from one animation to another. You can use it in conjunction with TimelineLite or TimelineMax
• TweenMax - This tool builds on TweenLite by adding features like repeat(), repeatDelay(), yoyo() and more. Extra plugins you would have to normally download separately are also included by default like CSSPlugin, BezierPlugin, and more.
• TimelineLite - This tool is the lighter sequencing tool that acts as a container for tweens and other timelines when grouped. The markup is highly legible and can be chained like similar methods found inside your jQuery code.
• TimelineMax - This tool builds on TimelineLite by adding features like repeat(), repeatDelay(),yoyo() and more.

I recently used GreenSock’s GSAP library to animated an SVG logo. By setting ID’s on different paths of an SVG you can easily control it using this approach. It took me a little time to get used to the syntax but it definitely wasn’t hard to dive in and get the wheels rolling.

Popper.js

Popper.js is a neat library that offers you the ability to create dynamic popovers on your content. You can dictate what location the poppers appear as well as set custom boundaries and attributes. If you’re looking for a simple popover library without having to download something like Bootstrap then look no further.

Modaal

Accessibility should never be an afterthought. With that in mind, the makers of Modaal have introduced a highly accessible Modal library. Some accessible features include:

• WCAG 2.0 Level AA Support
• Saving page focusing state on modal open
• Switching focus state to new content on modal open
• Maintained take the scope to modal content
• ARIA support and customization for modal title
• and a ton more…

The library uses data- attributes to define various functionality based on your modal needs.

There is support for all types of content and most everything is configurable.

Framer.js

There are a lot of prototyping applications out there. Most are based on you providing images that require extra steps to add hot spots that act as links to other pages. Sometimes this is all you need to demonstrate an idea while other times this is rather limiting.

Framer steps in to add more customization into the mix. Using their native application you can literally code your prototypes as you please or use their built-in WYSIWYG type of editor to configure your prototypes in no time.

There is a bit of a learning curve if you are brand new to Framer. Some of the code is mainly just a series of coordinates and other settings that tie into the imagery or assets you provide from the start.

Lettering.js

I think everyone can appreciate awesome typography. With the web the way it is there are some drawbacks to working with type for screens. Different browsers render typography in all around different manors which creates headaches you didn’t plan on ever having. This is especially true if you are trying to have a design highly based on the typography itself.

Enter Lettering.js. This library lets you have complete control over your type. You can even control each letter if you need to.
Be sure to check out the gallery to give you a quick perspective as to what is achievable.

Chart.js

Charts are cool. They make data less boring. Nobody wants to really read through a ton of tables full of data to compare and contrast figures.

If you need a convenient way to visualize your data then Chart.js is the perfect tool for you. With 8 fully responsive chart types to choose from you are sure to find what you are looking for with this awesome tool. It’s also open-source which is pretty awesome too.

React.js

Facebook created a framework called React which helps build user interfaces. The massive benefit of using React or frameworks like Angular.js is the fact that it makes no assumptions. You can sprinkle in React wherever you please rather than having to go all-in like Angular to build applications.

The codebase is built upon good ole’ JavaScript if you choose to write with it. You can also use JSX which is a more tamed version that is faster and easier to use.

I keep reading of more and more developers switching to React due to the fact that you can use it inside any technology stack. As a novice towards using React and Angular, I can see the benefits of both but I would probably lean more towards React at this point in the event that your project could change in the future and require different technologies to adapt towards your goals.

Angular 2

Angular 1 and 1.5 were a smash hit in the developer community. I would compare it to the massive success of jQuery in its prime. Angular 2 recently launched promising a better development workflow for both desktop and mobile applications. The entire code structure has been tweaked and new improvements have been made.

A new Angular CLI is offered for generating builds, adding components, and running tests in a simple command.

Typescript becomes a new language utilized throughout the platform. You can still use regular JavaScript if you desire.

You can also quickly create new UI views with a simple template syntax similar to the new component below:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Being that the syntax is all new to people fairly family with Angular 1.5 I can beat there will be some developers who are not up for the switch. These devs might stay with 1.5 or possibly switch to React.

Vue.js

Due is similar to React and Angular but offers its own simple approach to getting UI on the page. It makes use of a templating system similar to Angular. Its file size is only 24kb which is impressive, to say the least. If you’re looking for something other than React and Angular, Vue.js is a great choice.

Reveal.js

Reveal doesn’t quite fall into the Front-end workflow as mentioned in the title but it is really useful for presentations. Rather than having to deal with PowerPoint or Google Slides I invite you to check out Reveal.js. It features an online editor that allows you to create highly branded slides all within HTML-based documents. You can add notes, graphics, media, you name it.

Video.js

Video is a pain to deal with. While the content it offers is probably the most engagement you’ll have, the support for it is always a challenge.

Video.js helps you optimize the experience of HTML5 video embeds. You can customize videos with your own branding and optimize them for all browsers.

Selectize.js

I found Selectize.js in pursuit of styling better form elements. Select fields, in particular, are a pain in the ass. Selectize.js saves the day when it comes to tweaking those pesky things.

The library essentially grabs the data from the native select field and injects a new component that is easier to style and use. You can apply themes or even roll your own. I highly recommend this if your project makes heavy use of select fields.

FullPage.js

FullPage.js is a useful library if you need a web page built out in sections. These sections can then be easily navigated to by either clicking pagination-based targets or scrolling.

You can configure the library to be vertical or horizontal. It’s extendable and responsive as well.

Intro.js

Sometimes new features are born but go unnoticed on an app or website. Giving a clue to the user is a great way to have them learn about the new feature and decide if they want to make use of it or not.

To increase adoption and better user experiences you can use Intro.js to keep your users engaged as well as informed along their journey.

Prism.js

Prism.js is syntax highlighting made easy. I use prism.js on Web-Crunch for various code highlighting inside some blog posts. The library is a breeze to install and easy to tweak. You can choose from different themes or tweak one to match your own branding.

Conclusion

I hope you’ve enjoyed these libraries as much as I have. If you ever visit a website and something about it puts a smile on your face be it the finer details or a clever antic put in place you can probably identify with me on the same level. There are many more libraries out there that I missed I’m sure. Be sure to share your favorites in the comments below!