Javascript

Client side javascript and frameworks

Articles

OOP

Misc.

Animation

  • Animate Plus - A+ animation module for the modern web
  • Anime - A flexible yet lightweight JavaScript animation library.
  • Choreographer-js - A simple library to take care of complicated animations.
  • Kute.js - Animation engine with top performance, memory efficient & modular code.
  • LookForward.js - Small library that helps you to create smooth transitions between pages.
  • Lottie - Animation library, natively on mobile and on the web (with AE and Bodymovin).
  • Micron - Interaction library built with CSS Animations and controlled by JavaScript Power
  • Pop - Create delightful interactions with input tracking, animations and physics.

Awesome stuff

Useful libraries and plugins

Carousel

  • Siema - Lightweight and simple carousel with no dependencies

DOM

  • RE:DOM - Tiny turboboosted JavaScript library for creating user interfaces
  • Superdom.js - Manipulate the DOM like it's 2016

Filter and sort

Editors

Presentation frameworks

Tools

Touch and gestures

User interface

  • Animsition - A simple and easy jQuery plugin for CSS animated page transitions
  • Badger Accordion - An accessible vanilla JS accordion with extensible API
  • Barba.js - Fluid and smooth transition between your website's pages
  • Bosket - collection of front-end tree view components
  • Choices.js - Lightweight, configurable select box/text input plugin
  • egjs - A set of UI interactions, effects and utilities components library
  • Emergence.js - Lightweight, high-performance JS plugin for detecting (scrolling) and manipulating elements in the browser
  • Ensure - Ensure animation runs until class loaded
  • Force.js - Easy way to scroll and animate your page in vanilla javascript
  • Flatpickr - Lightweight and powerful datetimepicker with no dependencies
  • Goodshare - Share a link from your website to social networks or mobile messengers
  • Headroom - Hide your header until you need it
  • in-view - Get notified when a DOM element enters or exits the viewport
  • Infinite Scroll - Automatically add next page
  • jRange - jQuery Plugin to create Range Selector
  • Lozad.js - Highly performant lazy loader in pure JS with no dependencies
  • Micromodal.js - lightweight, configurable and a11y-enabled modal library written in pure JavaScript
  • Modaal - accessible dialog window plugin for all humans
  • multi.js - user-friendly replacement for select boxes with multiple attribute enabled
  • Popper.js - A kickass library used to manage poppers in web applications
  • Progress Bar - Create responsive and stylish progress bars
  • Rellax - Lightweight, vanilla javascript parallax library
  • Scrollama - Scrollytelling with IntersectionObserver (an Introduction)
  • Select2 - The jQuery replacement for select boxes
  • SmartPhoto.js - Most easy to use responsive image viewer especially for mobile devices
  • SmoothState page transitions (introduction article on CSS-Tricks)
  • StickyBits - Lightweight alternative to position: sticky polyfills
  • Sticky Sidebar - Pure JavaScript plugin for making smart and high performance sticky sidebar
  • Stretchy - Form element autosizing, the way it should be.
  • Tooltipser
  • Zoom.js - Medium's Image Zoom (no dependencies, IE 10+)
  • Zoomove - Dynamically zoom images with mouseover

State management

  • Akita - A Reactive State Management Tailor-Made for JS Applications
  • NgRx - Reactive State for Angular
  • Vuex - Vuex is a state management pattern + library for Vue.js applications
  • Recoil - A state management library for React
  • Redux - A Predictable State Container for JS Apps
  • XState - Javascript state machines

Testing

  • Buster.JS - A browser JavaScript testing toolkit.
  • Cypress - Fast, easy and reliable testing for anything that runs in a browser.
  • Intern - Software testing for humans.
  • Jasmine - A behavior-driven development framework.
  • Karma
  • Mocha - Simple, flexible, fun.
  • Nightwatch.js - Browser automated testing done easy.
  • QUnit - A JavaScript Unit Testing framework.

Views

  • Omniscient - Do fast top-down rendering of views while thinking functional programming
  • Riot - Simple and elegant component-based UI library

AR and VR

Charts and graphs

Misc.

Panorama

Frameworks

Check out TodoMVC for real examples!

Libraries

  • Canivete (Brazilian Portuguese for swiss army knife)
  • Umbrella JS the tiny library for DOM manipulation, events and AJAX

Good reads about MVC Frameworks

MVC - Angular

MVC - Ember

MVC - Vue

Interactive Libraries

HTML5 Spotlight

Node

  • Cyclotron, a web application for constructing dashboards
  • Express application framework
  • Fastify fast and low overhead web framework
  • Feathers open source REST and realtime API layer for modern applications
  • Ghost publishing platform
  • Hapi framework for building applications and services
  • Hexo bloging framework
  • Koa next generation web framework for node.js
  • Next minimalistic framework for universal server-rendered React application
  • Nodal API services made easy
  • Passport unobtrusive authentication
  • ROOTS toolbox
  • Sails realtime framework
  • Snyk find & fix known vulnerabilities

Static site generators

NOTE: there is a Node.JS fork called Ayo (pronounced like "IO").

Update Node.js

The easiest way to update node through npm (by David Walsh):

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Security

D3

JS Fun

GraphQL

  • GraphiQL an in-browser IDE for exploring GraphQL
  • GiraffQL an interactive GraphQL exploration tool

Wrapper

(function (window, document) {

    'use strict';

    // Code here please :)

}(this, this.document));

Module

var module = function() {

    'use strict';

    var variable = 'hello';

    function hello(what) {
        return variable + ' ' + what;
    }

    return {
        say: hello
    }
};

var hello = new module();
console.log(hello.say('world'));