Compilation: Over 800 resources for front-end developers

We continue to publish collections of useful tools. Below is a selection of more than 800 services, books, articles, video tutorials and other materials that will be useful to everyone involved in front-end development.

/ Photo by Maxime Auger CC

Manuals

• Bento: a collection of web development guides;
• Hack Design: an easy and comprehensible design course for people doing amazing things;
• Web Style Guide: everything from CSS and typography to HTML and text structure;
• SmahingMagazine: how to become the best frontend-developer;
• Training: a list of resources with training materials;
• JavaScriptIsSexy: learn HTML5, CSS3, and responsive web design technologies;
• Codecademy: free online learning programming languages;
• Codeschool: learning web technologies with video tutorials, tasks and screencasts;
• TheExpressiveWeb: a resource from Adobe, which shows the latest and most impressive features of web technologies;
• Treehouse: HTML, CSS, creating applications for the iPhone and much more;
• General Assembly Dash: learn HTML, CSS, and JavaScript by creating projects right in your browser;

Architecture

• Web Components: component model for Web;
• BEM: a web application technology that simplifies development and unifies the team;
• Tutsplus: introduction to BEM;
• SmashingMagazine: an introduction to BEM;
• Video: how to use BEM outside Yandex;
• Article: Atomic Web Design;
• Slides: presentation on atomic web design;
• Pattern Lab; creation of atomic design systems;
• Polymer Project: a library for creating your own HTML elements;
• Flux: this is the application architecture that Facebook uses to create the client side of web applications;

• Aura: event-driven architecture for developing scalable applications by creating widgets;
• Hydra: a framework with all the tools needed to create scalable applications;
• Terrific.js: allows you to structure a project by breaking the jQuery / Zepto code into modules;
• Patterns: for large JavaScript application architectures;
• Article: creating one-page applications;
• Video: Scalable JavaScript application architecture;
• Book: Learning JavaScript Design Patterns. By Eddie Osmani (Addy Osmani);
• Book: "Single page apps in depth". Posted by Mikito Takada (Mikito Takada);
• Book: “Scalable and Modular Architecture for CSS”. Posted by Jonathan Snook;
• Presentation: how to manage large jQuery applications;
• Comparison: design patterns;
• Stubbornella: how media objects can save hundreds of lines of code;

Workflow organization

• Yeoman: is a collection of powerful tools and libraries for quickly creating beautiful web applications;
• Grunt: is a tool for building JavaScript projects from the command line using tasks;
• Web development: how to use Grunt;
• GruntStart: the main components with which you can quickly go to the creation of an optimized website;
• Guide: Getting Started with Grunt;
• Grunt: synchronous testing of the site on different browsers / devices;
• Gulp: this is a build system using threads;
• Gulp + Browserify: review with code examples;
• Gulp: project vision, its history and future;
• Gulp.js: build management;

• Mod: a tool for organizing workflow using tasks;
• Brunch: this is a build system for HTML5 applications;
• FIS: a frontend solution that includes automation tools, a framework, and a development environment;
• Roots: easy, fast and intuitive build system designed to speed up frontend development;
• Mimosa: build system for modern web development;
• Automaton: task automation system;
• Cartero: is a tool that helps with the organization of the frontend-code of multi-page web applications;
• Frontend-development: introduction;
• Frontend-development: setting up the development environment and Yeoman;

• Frontend development: Grunt tasks;
• Frontend development: CSS framework (Inuit);
• CSSCSS: CSS Redundancy Analyzer;
• Helium: a JavaScript tool for finding unused CSS;
• JSLint: a tool for detecting errors by statically analyzing JavaScript programs;
• JSHint: even more flexible analysis of JavaScript-programs;
• JSLint Error Explanations: an explanation of all errors and warnings issued by JSLint and JSHint;
• ImageOptim-CLI: allows you to optimize image sizes;
• jpegoptim: the ability to compress / optimize the size of JPEG files;
• Pngcrush: optimization of PNG files;

• Glue: a simple command line interface tool for generating CSS sprites;
• Wraith: comparison of screenshots;
• Penthouse: creating critical CSS;
• Browser-sync: allows you to test your application on all browsers at the same time;
• Video: JavaScript application development. Paul Irish (Paul Irish);
• Presentation: JavaScript application development. Paul Irish (Paul Irish);

Podcasts

• Shoptalk Show: Web design, web development and user experience podcast;
• JavaScript Jabber: a javascript podcast;
• The Big Web Show: Jeffrey Zeldman podcast about everything related to the web;
• The Web Ahead: a weekly podcast about changing technologies and the future of the web;
• SassCast: Sass preprocessor podcast;
• CDNify: this is a podcast about technology, start-ups and site performance;
• The Non Breaking Space Show: a show featuring the most creative people from the field of design and web development;

Newsletters

• HTML5 Weekly: HTML5 and Web technology news;
• HTML5 Bookmarks: list of articles and useful tools;
• CSS Weekly: articles, tutorials and tools;
• JavaScript Weekly: news and articles on JavaScript;
• Sidebar.io: five best links for designers every day;
• Web Design Weekly: weekly newsletter with the best news and articles on the Internet;
• Open Web Platform Daily Digest: the latest frontend technologies and solutions;
• Responsive Design Newsletter: responsive web design: news, articles, tools and tips;
• echo.js: Reddit clone with JavaScript resources;
• Web Tools Weekly: tools for frontend development and web design;
• A Drip of JavaScript: tips on JavaScript once a week;
• ng-newsletter: the best materials on AngularJS;

CSS

• Article: What is border-image;
• Article: what nobody told you about the Z-index;
• Article: full guide to flexbox;
• Article: principles of writing consistent, idiomatic CSS;
• Primer: typography, buttons and guides for writing HTML and CSS from GitHub;
• WordPress: CSS standards;
• Wizardry: CSS guides and tips;
• Absolute Centering: how to center content so that it is displayed correctly in all browsers;
• CSS Positioning 101: everything about CSS positioning;

Javascript

• Book: Eloquent JavaScript. Posted by Marijn Haverbeke;
• Book: Speaking JavaScript. Posted by Axel Rauschmayer;
• Guide: Learn JavaScript;
• Article: JavaScript closures;
• OOP in javascript: what you need to know;
• Article. Part I: useful combinators for working with simple old-style Java objects;
• Article. Part II: useful combinators for working with simple old-style Java objects;
• Article: prototypes and inheritance in JavaScript;
• Series of articles: ECMA 262-3 details;
• JavaScript Garden: a description of the most unusual features of JavaScript;

• Google Style Guide: Google’s Javascript Style Guide ;
• Github Styleguide: GitHub JavaScript website styling guide;
• Wordpress: JavaScript standards;
• Book: "Structure and Interpretation of Computer Programs". Authors Harold Abelson, Gerald Jay Sussman, Julie Sussman;
• RubyJS: This is a JavaScript implementation of all Ruby class methods;
• Mout: this is a collection of JavaScript utilities that can be used in the browser as AMD modules or node.js;
• bacon.js: a library for functional reactive programming for javascript;
• Guide: event loops and coroutines in JavaScript;
• How To Node: asynchronous flow control with Promises;
• Video lecture: monads in JavaScript. Douglas Crockford (Douglas Crockford);

• Article: no need to make promises, or Promises vice versa;
• Article: Promises are asynchronous programming monads;
• Article: Examining Callbacks with JavaScript Generators;
• Article: why do we need Promises;
• Specification: Promises / A +;
• Article: callbacks or coroutines;
• Readme: what is Promises;

JavaScript libraries

• Standalone-Deferred;
• Standalone-Deferred;
• Flowy;
• Step;
• kew;
• jQuery Timing;
• RSVP.js;
• q;
• Watch.js;
• flow.js;

HTML

• Book: "Dive into HTML5". Posted by Mark Pilgrim;
• Article: principles of writing consistent, idiomatic HTML;
• Google Style Guide: Google ’s HTML / CSS website styles guide;
• WordPress: HTML standards;

High level languages

• Dart: a typed programming language created by Google that serves as an alternative to JavaScript;
• Sass: This is a CSS-based metalanguage designed to increase the level of abstraction of CSS code;
• Bourbon: a simple and lightweight mixin library under Sass;
• Less: provides the following CSS extensions — variables, nested blocks, mixins, operators, and functions;
• Stylus: robust and dynamic CSS preprocessor;
• TypeScript: a programming language introduced by Microsoft that extends JavaScript;
• CoffeeScript: a programming language that is broadcast in JavaScript;

JS frameworks

• Guide: choose a framework;
• AngularJS: this is an open source JavaScript framework from Google;
• Github: AngularJS;
• AngularJS-Learning: a huge list of Angular learning resources;
• AngularJS: screencasts;
• Manual: create applications with AngularJS;
• Article: Inheritance scope in AngularJS;
• Article: AngularJS from basics to dependency injection;
• Sample application: To Do List on AngularJS;
• Article: AngularJS or Ember;

• Article: Hitchhiker's Guide to AngularJS Directive;
• Article: building frontend projects with Grunt and Angular JS;
• Tips: AngularJS;
• angular-requirejs-seed: this is a fork of Angular Seed, but with the changes needed to support RequireJS;
• Article: Writing Reusable Angular JS Components with Bower;
• Article: AngularJS native directives for Twitter Bootstrap;
• Article: Automate AngularJS with Yeoman, Grunt and Bower;
• Article: Optimizing Angular Templates from Grunt to Heroku;
• Article: creating offline applications with AngularJS and PouchDB;
• jQuery: a JavaScript library aimed at interoperating JavaScript and HTML;

• jQuery: Github;
• jQuery: a learning resource;
• jQuery: plugin page;
• jQuery: a complete guide to writing jQuery plugins;
• Book: jQuery Fundamentals. Posted by Rebecca Murphy;
• jQuery: jQuery code style;
• Plugins: jQuery;
• Dojo: free modular javascript library;
• Dojo: Github;
• Dojo: documentation;

• Dojo tutorial: creating your own widget;
• Backbone: JavaScript library based on the Model-View-Presenter design pattern;
• Backbone: Github;
• Book: "Developing Backbone.js Applications". By Eddie Osmani (Addy Osmani);
• Presentation: Backbone;
• Backbone: Marionette.js View Guide;
• Guideline series: creating an application on Backbone.js;
• Backbone: application migration;
• Chaplin.js: a JavaScript framework running on Backbone.js;
• Meteor: is an open source platform for quickly creating high-quality web applications;

• Meteor: Github;
• Zepto.js: a small JavaScript library, sharpened by the engine WebKit;
• Zepto.js: Github;
• Zepto Builder: creating your own version of Zepto with the necessary modules;
• Minified.js: a JavaScript library comparable in size to jQuery and MooTools;
• Minified.js: Github;
• React: Facebook framework;
• React: Github;
• Qooxdoo: a universal JavaScript framework for creating mobile and single-page web applications;

• jQWidgets: a framework and a set of widgets for creating web applications for PCs and mobile devices;
• Flight: Twitter's event-driven web framework;
• Singool.js: a simple JavaScript framework for developing single-page web applications;
• Knockout: start applying the Model-View-View Model (MVVM) template;
• rAppid.js: declarative JavaScript MVC framework;
• Sammy.js: a tiny JavaScript framework that forms the structure of the application;
• Ember.js: framework for creating ambitious web applications;
• Ember.js: Github;
• Guide: creating applications with Ember.js;
• EmberWatch: a huge amount of training material on Ember;

• Maria: MVC framework for JavaScript applications;
• Terrific Composer: frontend framework, following Terrific concepts;
• Rivets.js: a simple solution for linking data and creating templates for developing modern web applications;
• Synapse: data binding solution;
• Cappuccino: open framework that simplifies the creation of desktop applications running in a browser;
• JavaScript: a selection of frameworks;
• JavaScript: frameworks and data binding tools;
• Underscore.js: JavaScript library;

CSS frameworks

• Selection: best CSS frameworks;
• Bootstrap: homepage;
• Bootstrap: GitHub;
• Bootstrap Expo: examples of using Bootstrap;
• Bootstrap Hero List: a large list of resources on Bootstrap;
• Bootstrap video player: HTML5 video player plugin for jQuery;
• Bootstrap: a widget for choosing colors and dates;
• Bootstrap: wysihtml5;
• Bootstrap: image gallery;
• fuelUX: Twitter Bootstrap extension;

• Twitter Bootstrap: date picker;
• Bootbox.js: Dialogs for the Twitter framework Twitter Bootstrap;
• Time Picker: timing;
• Date / Time Picker: select time and date;
• ReCaptcha: captcha for sites;
• Bootstrap Modal: extension for Bootstrap;
• SelectBoxIt: change the appearance of drop-down lists;
• File Upload: file upload line;
• BootPag: Twitter Bootstrap jQuery plugin for pagination;
• Bootstrap Arrows: arrows for Twitter Bootstrap;

• X-editable: inserts editable components;
• Pagination: navigation through the pages;
• Slider: slider;
• Bootswatch: theme directory;
• Bootstrap Zero: themes directory;
• Jumpstart UI: another theme directory;
• Themestrap: a simple way to create themes Twitter Bootstrap;
• jQuery Mobile Boostrap: jQuery theme for mobile devices based on Twitter Bootstrap;
• Bootstrap CDN: CDN for Twitter Bootstrap;
• Flat UI: a set of user interface elements;

• BootstrapWP;
• Roots theme;
• Bootstrap;
• Bootstrap for Wordpress;
• Bootstrap for WP;
• StrapPress;
• WPBS;
• A set of Microsoft CSS3 buttons;
• Inspiritas;
• Facebook;
• One% CSS Grid;
• Workless;

• Gumby
• ProfoundGrid;
• Google+;
• Flatstrap;
• Pinstrap;
• Golden Grid System;
• Kube;
• Typo3;
• Wrapbootstrap;
• rwdgrid;
• Simple Grid;

• Bootstrap Tour: a simple way to create a "tour" on the site;
• Bootsnipp: design elements and snippets for HTML / CSS / JS frameworks;
• Form Builder: creating forms;
• PaintStrap: generate awesome Twitter themes Bootstrap;
• TODC: Google theme for Twitter Bootstrap;
• Layoutit: the builder with the Drag and Drop interface;
• Bootlint: check web pages for HTML errors;
• IceCream: simple grid system;
• Responsive Grid: adaptive grid system;
• Responsive Grid System: another adaptive grid system;

• Compass: designer framework;
• Pondasee: a set of tools that combines the power of Scss and Compass;
• Zurb Foundation: the most advanced adaptive frontend framework in the world;
• Boilerstrap: a mixture of HTML5 Boilerplate and Bootstrap;
• Bootstrap PSD: another tool that simplifies the creation of web applications;
• GroundworkCSS 2: an adaptive HTML5 framework, CSS and JavaScript;
• Ink: a set of tools that accelerate the development of web interfaces;
• neat: framework for Sass and Bourbon;
• BootMetro: Metro style web application framework;
• Cosmo: Windows 8 theme;

• inuit.css: powerful scalable OOCSS framework;
• Kraken: Node.js framework;
• Susy: adaptive meshes for Compass;
• Pure: small adaptive CSS modules;
• Topcoat: this is an open css library from Adobe HTML;
• Cascade Framework: a powerful and productive OOCSS framework with support for new and old browsers;
• Cascade Framework Light: a lightweight version of the Cascade Framework;
• Semantic UI: a framework for creating portable interfaces;

Cross-browser compatibility

• Normalize.css: browsers begin to display all elements in accordance with modern standards;
• HTML5: cross-browser polyfill;
• Viewport Component: simplifies work with viewports;
• Can I Use: compatibility tables of functions HTML5, CSS3, SVG with browsers;
• HTML5 Please: recommendations for implementing the functions of HTML5 and CSS3;
• Outdated Browser: checking the relevance of the user's browser version;

Adaptability

• Responsive Boilerplate: a place to start exploring responsive web design;
• Video: responsive design by Stephen Hay;
• Adaptive templates: site navigation;
• Adaptive templates: site navigation;
• Complex adaptive templates: site navigation;
• Responsinator: see how your responsive layout looks on different devices;
• Article: about responsive web design;
• Guide: creating a responsive web application;
• Am I responsive: check the adaptability of the site;
• Guide: creating responsive data tables;

• Breakpoints.js: event handling;
• Harvey.js: event handling;
• Inquire.js: event handling;
• Article: how to use responsive images to make the site look great on any platform;
• Adaptive Images: responsive images;
• Article: Why do we need adaptive images;
• Riloadr: responsive image downloader;
• stacktable.js;
• FooTable;
• Adaptive images;

• jQuery Picture;
• Picturefill;
• PictureFill;
• imgLiquid: jQuery plugin for resizing images;
• Clown Car: adaptive imaging technology;
• HiSRC: a simple jQuery plugin for responsive images;
• resrc.it: responsive images on demand;
• FitText: jQuery-plugin for "inflating" the text;
• Out Of Words !: a framework for creating responsive texts;
• Article: creating adaptive texts;
• Responsive Measure: automatic selection of the optimal font size for a block or module;

Email

• Guide: create responsive emails;
• Adaptive letter templates;
• Ink from Zurb: a great framework for creating responsive emails from guys from Zurb;
• HTML Email Boilerplate: sample code for creating HTML emails;
• Tables: CSS support in email clients;
• Email Template Reference: email design links;

Mobile devices

• jQuery Mobile: a framework for smartphones and tablets;
• jQTouch: Zepto / jQuery plugin for mobile web development for iPhone, Android, iPod Touch and other devices;
• JScrollPane: This is a jQuery plugin that turns standard browser scrolls into an HTML structure;
• jSwipeKinetic: jQuery-plugin that adds kinetic scrolling;
• jQuery.pep.js: a simple plugin for kinetic scrolling;
• Phantom Limb: emulator;
• Touch: touch events emulator;
• Junior;
• thumbs.js;
• Zynga Scroller;
• pull-to-refresh.js;
• Overthrow;
• iscroll;

Work with gestures

• jGestures: jQuery-plugin that allows you to work with gestures, such as "scrolling", "tap", "turning";
• hammer.js: this is a JavaScript library for handling multitouch functions;
• TouchSwipe: jQuery plugin for iPad, iPhone and so on;
• toe.js: a tiny jQuery library for handling complex gestures;
• JS Touch Layer: framework that simplifies the work with gestures;
• Article: touch and abstraction events;
• Jester;
• TipTap;
• jQuery.event.swipe;

DOM object management

• jQuery.event.move;

Handling tap events

• Energize;
• Lightning Touch;
• Tappable: a simple library for invoking tap events in browsers;
• Fastclick: eliminate the 300-ms delay between tap and click in mobile browsers;
• Manual: creating “quick” buttons for mobile web browsers;

Page layout

• Screensizes: device screen sizes;
• Snap.js: JavaScript-library for creating beautiful menus in mobile applications;
• Flickable.js: allows you to interact with any element;
• Swipe: This is a lightweight mobile slider with 1: 1 movement clarity when touched;
• Swiper: hardware accelerated slider;
• jQuery-plugin: switching between pages in mobile applications with support for gestures;
• SwipeSlide: Zepto-plugin for iOS;
• stackable.js: jQuery plugin that intelligently places tables on the screens of small devices;

Work with sensors of mobile devices

• lenticular.js: this is a jQuery plugin for creating animations that respond to tilting the device or moving the mouse cursor;
• This End Up: use the device orientation sensors in space;

iOS

• Safari: the best way to deliver images;
• Safari: CSS Visual Effects Guide;
• Safari: create web content;
• Article: introduction to iOS web applications;
• Article: iPad web design and developer tools;
• Article: iPhone 4 Retina Display and CSS3 Media Queries;
• Guide: how to make the image always displayed vertically in the web application for the iPhone;
• jQuery: plugin for Retina Display;
• retina.js: this is a script that uploads high-resolution images for Retina Display;
• Retina Images: image optimization for Retina Display;

Patterns and Snippets

• Adaptive templates;
• CSS3 snippets;
• Blueprints: a collection of simple components, plugins for websites;

Typography

• Manual: fonts and @ font-face;
• Adobe Edge Web Fonts: Adobe free fonts;
• Typekit: subscription fonts;
• Table: Fonts on Mac, Windows, Microsoft Office and Adobe Creative Suite;
• SO: @ font-face fonts work only on their domain;
• FitText: jQuery-plugin for "inflating" the font;
• Trunk8: a text clipping tool to fit on the form;
• bacon: change block shape with text;
• CSS Typography: a small overview of CSS functions to improve typography;
• Font Squirrel: font generator;

• TypeButter;
• slabText;
• Baseline.js;
• jKerny;
• Lettering.js;
• Google fonts;
• Typeset.css;
• typecast;
• CSSTypography;

Various services

• Responsinator: see how your responsive layout looks on different devices;
• Color Scheme Designer: find matching colors;
• Adobe Kuler: create and share color schemes;
• jsFiddle;
• SpritePad;
• colourco;
• HTML Shell;
• Form Builder;
• Zen BG;

• What Font Is: definition of the font in the image;
• Browser Shots: compatibility tests with almost any browser;
• CSSArrowPlease: a simple tool for creating an explanatory block with an arrow;
• HTML Entity Lookup: Search for HTML entities;
• CodePen: HTML, CSS and JavaScript code editor;
• site44: “turns” Dropbox folders into websites;
• JPEGmini: image optimization server;
• TinyPNG: lossy PNG image compression;
• GenyMotion: emulator, AndroVM receiver;

Website creation tools

• Squarespace;
• BaseKit;
• Doomby;
• Edicy;
• IM Creator;
• Jimdo
• Moonfruit;
• uCoz;
• Webnode;
• Webs;
• Weebly;
• Wix;
• Wordpress.com;
• Yola;
• 1 & 1;

Working with animation

• Velocity.js: this is jQuery $ .animate (), but 20 times faster and more convenient;
• Animo.js: a small powerful tool for managing CSS animations;
• Stylie: a tool for creating web animation;
• animate.less: a bunch of cool, fun animations suitable for use in any browser;
• Canvas Advanced Animation Toolkit: a JavaScript framework for working with animations;
• tween.js: a super simple tool for creating animations;
• Janis: a simple JavaScript framework for creating animations using CSS transitions;
• Rekapi: JavaScript library for creating animations;
• CanvasScript3: a JavaScript library for HTML5 Canvas with an interface similar to ActionScript3;
• Shifty: creating twin animations;

• emile.js: JavaScript framework for creating CSS animations;
• Firmin: JavaScript library for creating images using CSS transitions and transformations;
• Keanu: a small library for creating animations on CanvasJS;
• jsAnim: a powerful and easy-to-use library that allows you to add impressive animations to sites;
• GreenSock: animation using crypts;
• GreenSock: learning resources;
• GreenSock: examples;
• Codepen Repository: Greensock usage examples;
• scripty2: a javascript framework for advanced html interfaces;
• Animator.js: a JavaScript library for working with animations;

• Processing.js: this is an open programming language for visualization on the web;
• jQuery Transit: CSS3 transforms and transitions for jQuery;
• Move.js: a small JavaScript library that simplifies creating CSS3 animations;
• Collie: is a JavaScript library that helps create highly optimized animations and games using HTML5;
• Year Of Moo: Angular.js animations;
• animate.css: cool animations that you can use in your projects;
• Approach: change the appearance of objects depending on their distance from the cursor;
• Magic: CSS3 framework with lots of animations;

Widgets

• AlloyUI: framework based on YUI3;
• Kendo UI: everything for creating mobile and web applications with HTML5 and JavaScript;
• jQuery UI Bootstrap: Bootstrap theme for jQuery UI;
• jQuery Bootstrap: the combined power of Bootstrap and jQuery UI;
• Cascade Framework: widgets for both old and new browsers;
• Zebra: a javascript library that follows OOP concepts;

File upload

• jQuery File Upload;
• tus;
• Fine Uploader;
• finderSelect;

Site Map

• SlickMap CSS;

Content creation

• Tocify;
• MagicNav.js;
• jQuery TOC;

Modal windows

• Avgrund;
• Timeout Dialog;
• Magnific Popup;
• Zoombox;

Alerts

• notifier.js;
• noty;
• Toastr;
• alertify.js;
• Apprise;

Sliders

• Sequence;
• Rhinoslider;
• Awkward Showcase;
• Adaptive slider on CSS3;
• Roundabout;
• Slid.es;
• Galleria;

Navigation / Navigation

• jPages;

Elements of choice: drop-down lists, radio buttons, checkboxes

• jQuery Recurrence Input;
• Select2;
• jquery.selectable.js;
• chosen;

Load indicators

• Percentage Loader;
• progress.js;

Hierarchy / trees

• Nestable;

Navigation

• jPanelMenu;

Tooltips

• opentip;

Other

• jQuery Knob;
• DopelessRotate;
• jQuery Addresspicker;
• Fangle: create interactive documents;
• Skeucard: form for entering a bank card number that looks like a card;

Visualization

• Photon;
• Morris.js;
• Cube;
• Cubism.js;
• D3.js;
• Article: Introduction to D3;
• D3.js: online guide;
• NVD3;
• Vega;
• Crossfilter;

• Datavisualization.ch;
• jQuery.Gantt;
• JointJS;
• Gauge.js;
• Google Chart;
• Piecon;
• Viskit.js;
• jStat;
• bonsai;
• Smoothie Charts;
• DataMaps;
• mxgraph;

• easy pie chart: create simple pie charts;
• CHAP Links Library: drawing diagrams, charts and time plots;
• Paper.js: a framework for working with vector graphics;
• xCharts: this is a JS-library for creating attractive graphs;
• jQuery Gantt: a library for building Gantt charts;
• amCharts: graphing tool;
• Raphael.js: simple vector graphics for the web;
• three.js: 3D JavaScript library;
• Highcharts: interactive JavaScript graphics for your web projects;
• Flot: attractive jQuery graphics;
• Chart.js: simple charts and graphics for designers and developers;
• GoJS: a library for creating interactive diagrams;
• JointJS: this is a JS-library for building graphs, charts and graphs;

Validation of entered data in the form

• Mention.js: allows you to use the @ symbol to search for users;
• ALAJAX: a script that allows you to add your fields to the form;
• Parsley.js: a library for quickly and easily creating validation forms;
• mailcheck.js: jQuery plugin that keeps track of the spelling of the domain in the email address;
• one-validation: a collection of regular expressions to validate the entered data;
• nextVal: jQuery plugin to assess the correctness of the entered data in the form;
• Fields.js; continuous evaluation of the correctness of the entered data;
• IV.js: special filters to assess the correctness of the entered data;
• Ladda: turning the confirmation button into a download indicator;
• jQuery Super Labels: Placeholder examples;
• jQuery Validation Engine: JavaScript plugin whose task is to evaluate the correctness of the data entered into the form;

Animated transitions

• Quicksand;
• Isotope;
• flippant.js;

Work with numbers

• numeral.js;
• accounting.js;
• numbers.js;

Time and date

• moment.js;
• XDate;
• Pikaday;

Search

• Fullproof: high-end text search;
• lunr.js: this is a simple text search engine for your applications;

Testing

• BrowserStack: a comprehensive list of browsers and mobile emulators available for online testing;
• Article: writing test code in JavaScript;
• Article: write test code in javascript. Part I;
• Gherkin: a language that Cucumber understands;
• Gherkin: key features;
• Gherkin: Given, When, Then properties;
• FiveUI;
• Introduction to BDD;
• cucumber;
• cucumber.js;

• Jasmine: a javascript framework with synatxis similar to rspec;
• QUnit: this is a library from jQuery developers that allows you to write unit tests for JavaScript code;
• JsMockito: a mock framework inspired by Mockito;
• PhantomCSS: testing layout for visual regression;
• Gemini: testing layout for visual regressions using screenshots;
• Karma: a performer of tests for JavaScript;
• ChaiJS: this is a flexible library of statements;
• Sinon.JS: three types of testing with spy, stub and mock for JavaScript;
• sinon-chai: Chai extension;
• PhantomJS: Webkit in the console, that is, a browser without a graphical shell;
• SlimerJS: a web-enabled script developer for web developers working on Gecko;

Template engines

• ICanHaz.js;
• Hogan.js;
• Handlebars.js;
• Mustache;
• Transparency;
• doT.js;
• Walrus;
• Chibi;
• Templayed.js;
• Jade;
• Linked.in Dust.js;

• ECT: template engine with CoffeeScript syntax;
• pithy: domain-specific language for generating HTML in javascript;
• T: uses a simple JavaScript data structure to represent HTML / XML data;
• Nunjucks: JavaScript template engine;
• Linked.in Dust.js: comparing mustache, handlebars, dust.js;
• Article: JSP and Dust.js;
• Linked.in Dust.js: manual;
• Linked.in Dust.js: console for testing;

Routing

and URL

• Crossroads.js;
• Hash.js;
• director;
• Davis.js;
• path.js;
• URI.js;
• Roadcrew.js;
• jQuery Address;
• page.js;
• speakingurl: a module for transliterating a text string;

Work with text editors

• Mercury;
• Redactor;
• WYSIHTML5;
• MarkItUp;
• Hallo;
• Substance;
• Proper;
• SnapEditor;
• Create.js;
• MDMagick;
• X-editable;

View and edit code

• SublimeText;
• Rainbow.js;
• Intelligist;
• Prism.js;
• CodeMirror;
• Scripted;
• tabIndent.js;
• Brackets: Adobe's code editor for java, html and css;
• Behave.js: a library that adds code editor (IDE) functionality to the text field;

Refactoring

• Article: Refactoring JavaScript code with kratko.js;

Performance

• Video: DOM, HTML5 and CSS performance;
• Video: high performance javascript;
• Video: creating a productive HTML5 application;
• Guide: Writing quick and effective JavaScript code;
• Tips: JavaScript performance;
• Article: Improving the performance of an HTML5 application;
• Tips: Improving the performance of web applications with HTML5;
• Article: frontend-performance for web designers and developers;
• Article: we clean our application from garbage;
• Article: memory analysis;

• Article: memory leak patterns in javascript;
• Article: understanding and solving problems with memory leaks in Internet Explorer;
• Article: looking for memory leaks;
• Article: How to write high-performance JavaScript code;
• Article: JScript memory leaks;
• Article: track memory leaks in Node.js;
• Article: Effective Memory Management - Tips from the Gmail Team;
• Manual: write fast and efficient JavaScript;
• jsPerf: javascript performance test;
• Chrome Developer Tools: an overview of the developer tools built into Chrome;

• Optimization for V8: a series of technical posts about the V8 engine;
• List: what to remember when optimizing a JS application for a V8;
• Tips: JavaScript performance under V8;
• Navigation Timing: JavaScript API for measuring site performance;
• Firebug Paint Events: view the details of the MozAfterPaint event;
• Locache: a JavaScript framework that allows you to cache JS strings, arrays and objects;
• Caliper: a web service for monitoring the performance of a web application;

DOM element manipulations

• Rendering: rendering, recalculation of a tree / layout, styling;
• Recalculation of the drawing tree and redrawing: how to avoid performance losses;
• Article: Will there be a recalculation of the drawing tree?
• Article: when the rendering tree is recalculated in the DOM environment;
• Accelerate JavaScript: work with DOM;
• Article: when javascript does the tree recalculation and renders;
• Tips: how not to do recalculation in WebKit;

Animations

• requestAnimationFrame: amazing and fast animations;
• Collie: high-performance library for working with animations;
• requestAnimationFrame API: now with millisecond accuracy;
• Article: Why moving objects with translate () are better than pos: abs top / left;

Hardware acceleration

• Tip: How to see which parts of a web page are hardware accelerated;
• List: Chromium parameters;

About browsers

• Video: Google I / O 2012 - overclocking JavaScript using V8;
• Video: the fastest HTML and CSS - how the browser engine works;
• How browsers work: behind the scenes of modern web browsers;
• O'Reilly Velocity 2011: how to speed up JavaScript;
• Video: GDC 2012 - from the console to Chrome;
• Fast CSS: how browsers display web pages;
• Video: what browsers think about your application;
• WebKit: a series of articles about rendering;
• Video: one day in the life of a button on the web;
• Article: How the webpage loads;
• Video: fundamentals, primitives and history of HTML5;
• Article: family tree javascript;
• Article: how JavaScript compilers work;
• Article: JavaScript compiler work strategies;
• Article: The Future of JavaScript;

Images

• CSS-only: loading images on demand;
• Article: optimizing JPEG images;
• Article: optimization of PNG images;
• Article: how to optimize PNG and JPEG without losing quality. Part I;
• Article: how to optimize PNG and JPEG without losing quality. Part II;

HTTP transport

• Striking frontend-performance: concatenation, compression, caching;
• Video: cache is the king of everything;
• Yahoo: the best ways to speed up your website;

Modularity and loaders

• Lazy Module Declaration: a JavaScript collector that allows you to create good web applications;
• Patterns: UMD (Universal Module Definition);
• Browserify: allows you to use the node.js style of modules for working in a browser;
• require.js: popular file / modular loader;
• require.js: plugins;
• sea.js: web module loader;
• CrapLoader: asynchronous loading of ads, widgets and JavaScript code;
• Article: Modular development of JavaScript applications with AMD, CommonJS and ES Harmony;
• Article: JavaScript module path;
• Article: Modular JavaScript with RequireJS;
• LABjs and RequireJS: an interesting way to load JavaScript resources;
• JavaScript: inheritance and public / private members of classes;
• Article: Immersion in the dark waters of loading scripts;

Package management

• bower;
• volo;
• parcel;
• jam.js;

Image management

• Paintbrush.js;
• Obscura;
• jCrop;

Icons

• GlyphSearch: search for icons;
• Font Awesome: icon font and CSS toolkit;
• Fontello: icon font generator;
• Perfect Icons: the easiest way to create icons of social networks;
• Iconic;
• Entypo;
• IcoMoon;
• Font Custom;

HTTP

• Specification;
• Using CORS;
• Article: Cross Domain AJAX with CORS;

Websocket

• Specification;
• Socket.io: JavaScript-library for web applications and real-time data exchange;
• Engine.io: a low-level engine that implements communication in older browsers for Socket.io;
• SockJS: the best and most complete alternative implementation of WebSocket;

Error handling and debugging

• Tracing.js: Tracking the execution of JavaScript functions;
• Guide: how not to handle javascript errors;
• Tattletale: sending logs via XHR for processing on the server;
• jsconsole: remote console;

Documentation

• DevDocs: all developer documentation in one place;
• dexy: open source software for documentation and workflow automation;
• docco: this is a simple documentation generator;
• styledocco: documentation generator from CSS files based on specially marked comments;
• Ronn: creating manuals;
• dox: JavaScript documentation generator;
• YUIDoc: this is a Node.js application that generates documentation based on comments in the source code;
• coddoc: this is a parsing jsdoc library;
• sphinx: a tool that simplifies the process of creating documentation;
• Article: Introduction to JSDoc;
• Beautiful docs: generation of documentation based on markdown files;
• Daux.io: a generator that generates documentation on the fly;

Windows 8 styles

• Metro UI CSS;
• BootMetro;
• metro-bootstrap;
• Droptiles;
• Metro JS;
• Cosmo;
• Microsoft CSS3 buttons;
• Visual Studio 2012 Image Library: More than 5000 images are available;
• Template: Metro UI;
• tileJS: Windows Metro tiles with JavaScript and CSS3;
• Video: what web developers need to know when creating Metro tile design;
• Article: implementation of the Metro interface;
• Demo: animations in the style of Windows 8 with CSS3 and jQuery;

Video and audio

• SublimeVideo: HTML5 video player;
• Video.js: an open source HTML5 video player;
• FlowPlayer: video player for the web;
• longtailVideo: HTML5 and Flash Player;
• howler.js: allows you to add music and sounds to web pages;
• Stratus 2: SoundCloud player;
• jPlayer: media library written in JavaScript;
• MediaElement.js: HTML5 audio and video player in HTML and CSS;
• audio.js: this is a JavaScript library that allows you to use the HTML5 tag in any browser;

Library collections

• Unheap: jQuery plugin repository;
• jster: everything you need for javascript;
• MicroJS: helps you find powerful microfreemorki;
• JSPkg: package manager;
• jquer.in: jQuery plugin collection;
• JSDB.io: an excellent source of top JavaScript frameworks, plugins and tools;

Other sources, tools and resources

• pineapple.io: guides, tools, and other tools for developers and designers;
• Frontdesk: a list of useful things for frontend-developers;
• Guide: standards and guidelines for frontend;
• Life of JS: books on JavaScript;

Chat

• XMPP using JSON;
• Converse.js: this is an open source chat client that can be used on any website;

Prototyping

• RoughDraft.js;
• Video: how to replace Photoshop;
• fixie;
• Holder.js;

Json

• JSON Query Language: this is a query language specially designed for the popular JSON data exchange format;
• Oboe.js: stream JSON parser;
• JSONLint: error checking in JSON code;
• SpahQL: JSON data management;
• JSONiq: query language for JSON;

Presentations

• Ancesor.js;
• Slideshow.html;
• HTML5;
• reveal.js;
• HTML5 from Google;
• CSSS;
• deck.js;
• controldeck.js;
• impress.js;
• hyhyhy;
• Slides: a framework for creating presentations;

Scrolling

• AppScroll.js: a tiny JS library;
• Scrollpath;
• jQuery NiceScroll;
• FoldScroll;
• Scrollorama;

Keyboard operation

• Mousetrap;
• Keypress;
• konami.js;
• Keys.js;
• keymage.js;
• jwerty;

Tables

• Tablecloth.js;
• Adaptive data tables;
• stacktable.js;
• FooTable;
• Handsontable;
• Backgrid.js;
• Gridster;
• Flex;
• grid-list;

Security

• oAuth Consumer Library: a library created by John Kristian;
• ohauth: oAuth 1.0 JavaScript implementation;
• JSO: oAuth javascript library;
• xdoauthproxy;
• JavaScript Crypto Library;
• Stanford JavaScript Crypto Library;
• Mozilla / jwcrypto;
• Article: JavaScript cryptography only hurts;
• Article: JavaScript cryptography;

The location of elements on the page

• Shapeshift: plug-in, dynamically changing the location of elements in the style of Pinterest;
• CollagePlus: a plugin for jQuery will place elements exactly in the container;
• Masonry: a JavaScript library that allows you to display HTML blocks in a compactly folded form;
• MixItUp: jQuery plugin, offering animated sorting;

Work for web developers

• Work: GitHub;
• Work: Authentic Jobs;
• Work: 37signals;
• Work: Smashing;
• List: interview questions for the frontend developer position;
• Interview This! a list of questions to ask employees;
• JavaScript: simple tasks;
• Work: StackOverflow;
• Work: CodePen;

Other

• zip.js;
• simpleCart.js;
• Mozilla / pdf.js;
• Aware.js: customize the display format of the page content, depending on user behavior;
• Article: How to upload files to Amazon S3 directly from the client application
• jIO: JavaScript library for managing documents in multiple repositories;
• Lo-Dash: This is a full replacement for Underscore.js;
• Subtle Patterns: Photoshop plugin;