ruk·si

JavaScript Libraries

Updated at 2014-10-27 13:29

Here is a list of good JavaScript libraries I prefer or find needing a lot.

Web Development

  • Modernizr: Detects what features the visitor has in his browser.
  • lodash underscore: Functional programming patterns (underscore version).
  • Handlebars: String templating engine. Just as good as Mustache. I use whichever my other libraries depend on.
  • Mousetrap: Keybindings to a website.
  • d3: Creating data visualizations, charts, maps etc.
  • Headroom: Show the page header only when scrolling up. Not sure about IE9 support.
  • Nanobar: Lightweight progress bars.
  • progressbar.js: Robust progress bars.
  • scrollReveal: Show elements as you scroll down.
  • ifvisible.js: Check if user is currently looking at the page.
  • countUp.js: Shows running numbers.
  • Moment.js: Manipulate and show times and dates.
  • Howler: Play audio on websites.
  • FatPixels: Draw pixel graphics.
  • hammer.js: Multi-touch gestures.
  • skrollr: Parallax scrolling and scroll animations.
  • Tether: Absolutely positioned elements attach to elements in the page efficiently

Provide Structure

These libraries cannot be used together and usually define how you structure your code.

  • React: Rendering library for web apps. (V of MVC)
  • Swarm: Syncronized data objects for web apps. (M of MVC)
  • Backbone: Provides tools for creating structure for web apps.
  • Thorax: Framework on top of Backbone.
  • AngularJS: Provides structure for web apps.

jQuery:

  • jQuery: A bloated but powerful JavaScript for DOM manipulation etc.
  • FitText: Resizes your headlines for all resolutions.
  • FitVids: Responsive video width.
  • BigVideo: Full screen background videos.
  • jRumble: Shake HTML elements.
  • Midnight: Change a fixed header as you scroll down.
  • Slick: Carousel plugin.
  • OriDomi: Fold up HTML elements like paper.
  • FocusPoint: Reposition and resize big images based on a focus point. Great for full screen backgrounds.
  • Shuffle Images: Show multiple images by moving curser around.
  • Particleground: Background particle system.
  • HalfStyle: Apply a style only for a part of a line or character.
  • One Page Scroll: Create websites that scroll down one view at a time.
  • multiScroll.js: Divided multi-scrolling websites.

Node

  • async: Async utilities.
  • Nightmare: High level wrapper for PhantomJS to automate browser tasks.