Type the code from the image
the only limit for web developers. The most popular have become not only immensely useful to learn, but are often highly sought after skills by employers.
ability to spur invention and innovation. I’ve also included some of my favourite examples that use each library in question to kick-start some ideas. Everything listed below is open-source, so what are you waiting for? Get coding!
Hammer JS, a library for adding gesture and touch recognition to your web app, makes it easy to build web experiences optimized for (or centered around) touch devices. Hammer JS supports panning, swiping, pressing, tapping, multi-tapping, rotating, and
Link to DocumentationExamples: EIDOS, Synesthesia.world
of third-party plugins. Interactivity is easy to implement, allowing your users to add new data, create new charts, or extend existing charts if you choose. It’s also incredibly simple to implement with good documentation.
Link to DocumentationExamples: Multi Axis Chart, Bubble Chart, Custom Line Graph
Aurelia is a front end framework for developing web apps, much like React, Angular, or Vue. Aurelia is composed of many smaller components allowing you to pick and choose features depending on your application, and you can write your app in either
ECMAScript or TypeScript. It supports many of the same features as more well-known frameworks like React and Angular (i.e. two-way data binding, routing, extensible HTML, components), but what set it apart to me was the simple and intuitive
syntax of Aurelia.
as simple to write. All this in conjunction with allowing you to write either ECMAScript or TypeScript means that Aurelia stays unobtrusive and allows you to focus on creation, not syntax.
Link to DocumentationExamples: Farm Track, Name My Band,
Anime JS has almost anything you could want from an animation library. It supports a wide range of targeting (CSS selectors, DOM nodes and node lists, JS objects and arrays) and you can use it to affect CSS properties, object properties, DOM
attributes, or SVG attributes. It features everything you expect: timing durations, delays, easing, specific property parameters (so you can change the values, easing, durations, etc for rotating and scaling), directions, looping, function
based parameters, relative units, support for RGB and HSL colours, specific initial values, animation elasticity, SVG specific functions, and way more. It also supports playbacks, callbacks, promises, has a bunch of built in easing equations,
and custom bezier curves. Even complicated SVG animations become relatively simple to write with Anime JS - if you can dream it, you can achieve it. If animations on the web are your thing, you’ll want to check out Anime JS (seriously,
I think I’m in love).
Link to DocumentationExamples: AWSM Logo Animation,
Anime JS Logo, Floating Draggable Menu,
Modern Retro - IBM Think, Particles (also using Three.JS)
I really can’t overstate how powerful of a library D3 is. At its core, D3 allows you to easily create interactive data visualizations with HTML, SVG, and CSS. What this means though, is that it could be in the form of charts, tables,
maps, models of the solar system, gauges, graphs, mosaics, games - basically anything you can imagine. The focus of D3 is on allowing users to efficiently manipulate documents based on data as opposed to providing a users a framework with
a huge number of features. What this means is that D3 is fast and flexible (allowing D3 to use large datasets and dynamic behaviors) but requires good and creative developers to implement it effectively. D3’s scope is incredibly
broad and the library is very powerful, allowing you to represent and interact with data in inventive and potentially stunning ways.
Link to DocumentationExamples: UK Wind Chart, 3D Bar Chart,
Wimbledon Visualizations, D3 Tree, Airline On-time Performance,
Conway's Game of Life, Word of the Day, Global Excess Nitrogen,
work even when offline, allowing you to build digital experiences that just work - regardless of a user’s current network status.
Link to Documentation, Link to APIExamples: MTBA Alerts (used to code the bot that operates the account), Pokedex.org, Money Tracker
and creative.There are also a variety of supplementary libraries as well. For instance: P5 DOM (for interacting with the document object model), P5 Sound (for audio functions), P5 Collide 2D (for calculating collision detection for
P5 2D geometries), and P5 Bots (allowing you to interact with Arduinos or other microprocessors from your browser). Since the target audience of the library was non-developers, the syntax is incredibly simple and the library stays out
Link to DocumentationExamples: Snake, P5 Data Visualization,
Sticky the Marshmallow (also uses Matter.JS), Rainbolt (CAUTION: can contain strong strobing effects), Fun with Colourful Particles, Abandoned Art 30: 300'000 Points
and organizations. From musicians like J Dilla to companies like Porche, Three JS has been used to create a (frankly) amazing list of immersive and interactive 3D web experiences. Three JS allows you to create your 3D assets through the
library itself, or you can import assets through JSON files from assets made in 3D rendering software like Blender or Maya Autodesk - speeding up development time by allowing you to create complex assets in software designed for the task
Link to DocumentationExamples: A Way To Go, Particle Love,
Paper Planes, Deprogrammed, Short Trip,
Under Neon Lights, I Remember
tilemaps, sprites, physics, inputs, particles, a camera, sound, varying game states (for multiple levels), and more. Jerome Renaux of Dynetis games has even created a multiplayer online game using Phaser, Socket.io, and Node.js. The syntax and conventions of the framework are simple and intuitive and it has strong documentation, so learning Phaser is easy. I’m cheating a bit by sneaking a thirteenth library into this
list, but check out Babylon if you’re interested in a framework for 3D games.
Link to DocumentationExamples: Star Wars: Porg Invasion, Ramp Lab, Rogue Fable II, Zehkiflorn,
Pixi JS is a 2D graphics renderer that allows developers to create interactive 2D experiences. Not only is it lightning quick, but it works cross-platform and cross-browser and falls back to the HTML5 canvas in environments that don’t
support WebGL. The broadness of Pixi JS’ scope means that while you can use it to create games, you can really use it to create any interactive media application that features 2D graphics. Pixi JS is widely used and also supports
plugins, so if anything is missing for what you need to build, there’s likely a plugin that will solve your problem.
Link to DocumentationExamples: In My World, Wake it Up,
Pixi Star Cluster, Inculerate,
These Beats are Dope, Jetlag.photos
features like: compound and composite bodies, conservation of momentum, friction, elasticity, and collision filtering. Matter JS is also mobile and touch compatible and supports plugins (the plugin “matter-attractors” allows
you to simulate forces like wind and magnetism!).
Link to DocumentationExamples: Pablo the Flamingo (also uses Three.JS), Remember Spook?, Twitterpile
and declarative programming so developers can leverage their knowledge of React into easily picking up React VR. It also uses a technology stack of WebGL to render 3D graphics, WebVR API to interact with VR headsets, Three.JS for advanced
3D modelling and a framework called OVRUI which allows Three.JS scenes to be rendered for VR. The popularity of these underlying technologies means that the whole tech stack for React VR is well supported. React VR is cutting down the
barriers to the exciting world of VR development through their coding conventions, use of well-supported and popular technology, and open-source distribution.
Edit (2018-11-28): "React VR" is now called "React 360"
Link to DocumentationExamples: React VR Player, The British Museum Interactive Tour, Bitcoin VR