Ruby Gems vs Javascript Libraries with some pretty cool libraries!

If you’re a beginner to the world of programming like me then you’ve probably gone through a very similar emotional rollercoaster as I have. At first everything's all great, you're learning all this cool stuff, front end, backend wow this is awesome. Then you keep learning and keep learning and keep refactoring and you get to a point where you're just like Whoa, am I really expected to remember everything??!

Me trying to remember everything I’ve learned

In short no…

If you have any experience with ruby you’ve probably heard of these little things called gems. If you're like me however, you might have had this idea that ruby gems are magical and they just work. I remember putting gems into my gemfile and running a quick bundle install and voila it just worked. Truth is we've all been fooled and there's no such thing as magic.

So what is a ruby Gem?

A Ruby Gem is a library or plug-in. It’s some functionality that you’ll install to fill a specific need. The RubyGems software allows you to easily download, install, and use ruby software packages on your system.

A Ruby gem is a library for any type of functionality that you feel is reusable and want to share with other programmers. Anyone can make a ruby gem whether its helpful or not.

But is using a gem cheating because you didn’t code it yourself?

Honestly, a very important thing I've learned in my short time being a programmer is that programmers are lazy! If someone has already built out a functionality that is publically available then use it!!

Gems are great! I love gems and now that I'm learning Javascript I can continue using gems to help me right?

Jokes on me because gems are only a Ruby thing.

Me when I learned Javascript didn’t have gems

Think back to that Ruby Gem definition for a minute though. A Ruby Gem is actually a sort of library… and Javascript has MANY libraries that we can utilize just like gems!

A library is a JavaScript file that contains a bunch of functions, and those functions accomplish some useful task for your webpage.

https://www.khanacademy.org

Me when I discovered javascript libraries

Cool JavaScript Libraries that I found:

Algolia Places

Algolia Places is a JavaScript library that will help you autocomplete forms, and it specializes in addresses. You can even add a map to the search and display the location, which is incredibly useful. It’s wonderfully accurate and super fast, which will definitely increase the user experience on your site. It is available as a Javascript autocomplete library, as a REST API and inside the JS, PHP, Swift and Android Algolia API clients. https://community.algolia.com/places/

Anime.js

Animation and micro interactions are all the rage these days, and anime.js is a flexible JavaScript library that can help you add some dashes of motion to your site. It works with CSS, Individual Transforms, SVG, DOM attributes, and JavaScript Objects, making it super versatile and perfect for almost any project. https://animejs.com/

AOS — ANIMATE ON SCROLL

The Animate on Scroll JavaScript library can help you add some sweet animations as a user scrolls down the page. From fade effects to static anchor placements, this library will help you create a delightful site design that keeps users engaged. https://michalsnik.github.io/aos/

Choreographers-JS

Choreographer-js is a simple JavaScript library for animating CSS. It’s easy to use, but it can really help you achieve some cool and complex CSS animations on your site. https://christinecha.github.io/choreographer-js/

Premonish

Premonish is a JavaScript library that predicts what element a user will interact with next, based on mouse movement. This allows for some really interesting animation triggers, and can definitely help your CTAs stand out. https://mathisonian.github.io/premonish/

TweenJs

This simple JavaScript library is incredibly powerful for tweening and animating HTML5 and JavaScript, and can help you add some really fun interactions to your site. It’s part of the CreateJS suite, which offers even more nifty JavaScript tools that you can use on your site. https://www.createjs.com/tweenjs

LayerJS

This is a simple and open source composition framework for creating UI patterns like menus, sliders, lightboxes and more. It is only 30kb minified and gzipped, has no dependencies and is completely responsive. What is more, LayerJS supports directional touch and touchpad gestures to trigger transitions. https://layerjs.org/examples.html

Wired Elements

With Wired Elements you can create basic UI elements that look as if they were hand-drawn. All the elements are randomly generated, which means that there can’t be two exactly the same elements. https://github.com/wiredjs/wired-elements

Curtains.jS

A lightweight vanilla WebGL library for animating images and videos. It takes HTML elements containing images and videos and converts them into 3D WebGL textured planes, allowing you to animate them via shaders. It is easy to use but requires good knowledge of HTML, CSS and JavaScript. https://www.martinlaxenaire.fr/libs/curtainsjs

Three.js

For anyone interested in 3D design, Three.js is a really fun JavaScript library to play around with. It can help you create some really incredible projects and bring your designs to life. https://threejs.org/

IZIMODAL

When you need to notify your users of something or ask for some information, sometimes the best solution is with a pop-up modal. And thanks to iziModal, a lightweight jQuery plugin, it’s super easy to throw one up on your site. With several different modal types and lots of customizations, this flexible plugin is a great solution. http://izimodal.marcelodolce.com/

Granim.js

Brighten up your site with a colorful background gradient with the help of Granim.js. This small JavaScript library is perfect for adding fluid and interactive gradients. They can stand alone, cover an image, live under an image mask, basically anything you can dream up! https://sarcadass.github.io/granim.js/examples.html

Bideo.js

Full-screen videos make for excellent site backgrounds, and that’s exactly what Bideo.js is for. This JavaScript library makes it super easy to add a video background that looks good on every screen size and scales super smoothly. https://rishabhp.github.io/bideo.js/

Chart.js

Chart.js is a delightful JavaScript library for designers and developers to add beautiful charts to a site. It offers lots of different types of charts, plus the ability to mix them in a single space to provide a really interesting data set. It also has some animation capabilities, which instantly makes data a lot more fun to consume. https://www.chartjs.org/

Cleave.js

Have you ever used a form field that formatted your content while you were typing? Think of a phone number field, transforming your 1234567890 into (123) 456–7890. Cleave.js is a JavaScript library that can add that same functionality to your site. It a super simple concept, but it makes for a wonderful user experience, and consistent data when you receive form submissions. https://nosir.github.io/cleave.js/

Slick

Slick is here to solve all of your carousel needs. It’s fully responsive, has tons of options, works with swipe gestures for mobile devices, and so much more. You can even sync two different carousels if you want, to create a stacked effect. http://kenwheeler.github.io/slick/

There are TONS of javascript libraries out there that are free for all programmers to use! If there is a certain functionality that you want to incorporate in your program I definitely recommend doing a quick google search to see if you can possibly save yourself some time.

Oh wait! How do you even use these libraries?!

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!READ THE README!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

READ READ READ READ READ READ READ THE README

Here are some helpful resources to explore different javascript libraries:

List of JavaScript libraries - Wikipedia

JavaScripting.com - The Database of JavaScript Libraries

Awesome JavaScript

JS: The Right Way

JavaScript libraries · WebPlatform Docs