Javascript
Client side javascript and frameworks
Articles
OOP
- Introduction to Object-Oriented JavaScript on MDN
- JavaScript Garden
- The Module Pattern on CSS-Tricks
- Javascript module instances/objects
- Why I don't love JavaScript's Module Pattern
- Javascript's this
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
- A-frame - A web framework for building virtual reality experiences
- D3JS
- Dexie - Minimalistic Wrapper for IndexedDB
- GPU.js - GPU Accelerated JavaScript
- Greenlet - Move an async function into its own thread
- Icaro - Javascript object observer, ideal for batching DOM updates.
- localForage
- Metrics Graphics JS
- Pixi.js
- PlayerJS
- Pts.js - Enables you to compose and visualize points in spaces.
- Raphael
- Socket.io
- Sockette - Little WebSocket wrapper.
- Three.js - JavaScript 3D library.
- Watch.js
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
- Fuse.js - Lightweight fuzzy-search library
- Fuzzysort - Fast SublimeText-like fuzzy search for JavaScript
- Isotope
- Listjs
- Masonry
- MixItUp
- Muuri - Responsive, sortable, filterable and draggable grid layouts
- ProseMirror
- Shuffle
Editors
Presentation frameworks
Tools
Touch and gestures
- Dragula
- Draggabilly
- Draggable
- egjs - A set of UI interactions, effects and utilities components library
- Hammer
- Interact.js
- Slip
- Sortable
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
- A-frame
- AR.js
- krpano WebVR
- Mozilla VR
- Pano2VR
- ReactVR (on Github / Introduction blog)
- WebVR spec
- WebXR, a proposal for WebXR, based on the WebVR extension
- WebXR Viewer is an iOS app for testing WebXR
Charts and graphs
- Billboard.js - Re-usable easy interface JavaScript chart library, based on D3 v4+
- Britecharts - Reusable Charting Library based on D3.js
- Charts.js - Simple yet flexible JavaScript charting
- Google Charts
- Markvis - Make visualization in markdown
Misc.
- Amplitude HTML audio player for the modern era
- Agile CSS3 Engine
- Birdview.js for a glance at a whole web page with an aerial view
- Clipboard.js
- deeplearn.js a hardware-accelerated machine intelligence library for the web
- Faker.js - generate massive amounts of fake data in the browser and node.js
- Fitty makes text fit perfectly
- GraphicJS
- Howler.js a audio library for the modern web
- Prerender
- Breeze
- Leaflets Creating interactive maps
- Progressively A JavaScript library to load images progressively
- scrollMonitor A simple and fast API to monitor elements as you scroll
- Sizzle a pure-JavaScript CSS selector engine
- Slick
- Superstruct makes it easy to define interfaces and then validate JavaScript data against them
- Tilt.js lightweight parallax hover tilt effect for jQuery
- Timeline.js create a timeline slider easily
- Tinydate A tiny reusable date formatter, extremely fast
- Tracking.js Brings different computer vision algorithms and techniques, real-time color tracking, face detection and much more
- Uppy The file uploader that...
- ViewScroller
- Webpack
Panorama
Frameworks
- Ampersand
- Angular
- Aurelia
- Cell
- Backbone
- Ember
- Rivets.JS
- Stapes.js
- React.js
- Synapse
- Mean
- Moon
- Nerv
- Vue (is a framework alike library)
- Vulcan
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
- Adventures in Angular - A weekly podcast.
- The ginormous and unstoppable list of useful Angular resources on Planning for Aliens
- Stateful and stateless components, the missing manual
MVC - Ember
- EmberWatch
- Getting Into EmberJS on Tutsplus
- Sparks - Ambitious UI components for Ember apps
MVC - Vue
- Learn Vue 2
- NUXT - A minimalistic framework for server-rendered Vue.js applications
- Vuelidate
- Vuetify - A component framework for Vue.js 2
Interactive Libraries
HTML5 Spotlight
- Object.observe
- Promises and Promosis for Dummies
- Native Drag & Drop
- element.animate(), HTML Imports, and Object.observe()
- Presentation API Tutorial
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
- Scully for Angular on a JAM stack
- Wintersmith
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
- Eliminating Known Vulnerabilities With Snyk on Smashing Magazine
D3
JS Fun
- In browser DVD's
- Screeps JavaScript game!
- Swip a library to create multi device experiments
GraphQL
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'));