it_man Jan 22 2016 at 10:30

Подборка: Более 800 ресурсов для front-end-разработчиков

24 min

107K

MWS corporate blogWebsite development*Development for IOT*Development of mobile applications*Development for e-commerce*

Translation

Original author: dypsilon

Мы продолжаем публиковать подборки полезных инструментов. Ниже представлена подборка из более 800 сервисов, книг, статей, видеотуториалов и других материалов, которые будут полезны всем, кто занимается фронтенд-разработкой.

/ Фото Maxime Auger CC

Руководства

Bento: коллекция руководств по веб-разработке;
Hack Design: легкий и понятный курс по дизайну для людей, делающих потрясающие вещи;
Web Style Guide: все от CSS и типографики до HTML и структуры текста;
SmahingMagazine: как стать лучшим frontend-разработчиком;
Обучение: список ресурсов с обучающими материалами;
JavaScriptIsSexy: изучайте HTML5, CSS3 и технологии адаптивного веб-дизайна;
Codecademy: бесплатное интерактивное обучение языкам программирования;
Codeschool: обучение веб-технологиям с видеоуроками, заданиями и скринкастами;
TheExpressiveWeb: ресурс от Adobe, где показаны новейшие и самые впечатляющие возможности веб-технологий;
Treehouse: HTML, CSS, создание приложений для iPhone и многое другое;
General Assembly Dash: изучайте HTML, CSS и JavaScript, создавая проекты прямо в своем браузере;

Архитектура

Web Components: компонентная модель для Web'а;
БЭМ: технология создания веб-приложений, упрощающая разработку и объединяющая команду;
Tutsplus: введение в БЭМ;
SmashingMagazine: введение в БЭМ;
Видео: как использовать БЭМ вне Yandex;
Статья: атомарный веб-дизайн;
Слайды: презентация по атомарному веб-дизайну;
Pattern Lab; создание систем атомарного дизайна;
Polymer Project: библиотека для создания собственных HTML-элементов;
Flux: это архитектура приложения, которую использует Facebook для создания клиентской части веб-приложений;

Aura: архитектура управляемая событиями для разработки масштабируемых приложений путем создания виджетов;
Hydra: фреймворк, имеющий все инструменты, необходимые для создания масштабируемых приложений;
Terrific.js: позволяет вам структурировать проект, путем разбиения кода jQuery/Zepto на модули;
Шаблоны: для крупных архитектур приложений на JavaScript;
Статья: создание одностраничных приложений;
Видео: масштабируемая архитектура JavaScript-приложения;
Книга: «Learning JavaScript Design Patterns». Автор Эдди Османи (Addy Osmani);
Книга: «Single page apps in depth». Автор Микито Такада (Mikito Takada);
Книга: «Scalable and Modular Architecture for CSS». Автор Джонатан Снук (Jonathan Snook);
Презентация: как управлять большими jQuery-приложениями;
Сравнение: шаблоны проектирования;
Stubbornella: как медиа-объекты могут сэкономить сотни строк кода;

Организация рабочего процесса

Yeoman: это набор мощных инструментов и библиотек для быстрого создания красивых веб-приложений;
Grunt: это инструмент для сборки JavaScript-проектов из командной строки с использованием задач;
Веб-разработка: как использовать Grunt;
GruntStart: основные составляющие, с помощью которых можно быстро перейти к созданию оптимизированного сайта;
Руководство: начинаем работу с Grunt;
Grunt: синхронное тестирование сайта на разных браузерах/устройствах;
Gulp: это система сборки, использующая потоки;
Gulp + Browserify: обзор с примерами кода;
Gulp: видение проекта, его история и будущее;
Gulp.js: управление сборкой;

Mod: инструмент для организации рабочего процесса с использованием задач;
Brunch: это система сборки для HTML5-приложений;
FIS: frontend-решение, включающее в себя инструменты автоматизации, фреймворк и среду разработки;
Roots: легкая, быстрая и интуитивно понятная система сборки, предназначенная для ускорения frontend-разработки;
Mimosa: система сборки для современной веб-разработки;
Automaton: система автоматизации задач;
Cartero: это инструмент, помогающий с организацией frontend-кода многостраничных веб-приложений;
Frontend-разработка: введение;
Frontend-разработка: настройка среды разработки и Yeoman;

Frontend-разработка: Grunt-задачи;
Frontend-разработка: CSS-фреймворк (Inuit);
CSSCSS: анализатор избыточности CSS;
Helium: инструмент JavaScript для поиска неиспользуемых CSS;
JSLint: инструмент для обнаружения ошибок путем статического анализа JavaScript-программ;
JSHint: еще более гибкий анализ JavaScript-программ;
JSLint Error Explanations: объяснение всех ошибок и предупреждений, выдаваемых JSLint и JSHint;
ImageOptim-CLI: позволяет оптимизировать размеры изображений;
jpegoptim: возможность сжимать/оптимизировать размеры JPEG-файлов;
Pngcrush: оптимизация PNG-файлов;

Glue: простой инструмент с интерфейсом в виде командной строки, позволяющий генерировать CSS-спрайты;
Wraith: сравнение скриншотов;
Penthouse: создание критически важного CSS;
Browser-sync: позволяет тестировать ваше приложение на всех браузерах одновременно;
Видео: разработка приложений на JavaScript. Пол Айриш (Paul Irish);
Презентация: разработка приложений на JavaScript. Пол Айриш (Paul Irish);

Подкасты

Shoptalk Show: подкаст о веб-дизайне, веб-разработке и опыте взаимодействия с пользователем;
JavaScript Jabber: подкаст, посвященный JavaScript;
The Big Web Show: подкаст Джеффри Зелдмана (Jeffrey Zeldman), посвященный всему, что связано с веб;
The Web Ahead: еженедельный подкаст про изменяющиеся технологии и будущее веба;
SassCast: подкаст о препроцессоре Sass;
CDNify: это подкаст о технологиях, стартапах и производительности сайтов;
The Non Breaking Space Show: шоу с участием самых креативных людей из области дизайна и веб-разработки;

Рассылки

HTML5 Weekly: новости HTML5 и веб-технологий;
HTML5 Bookmarks: список статей и полезных инструментов;
CSS Weekly: статьи, руководства и инструменты;
JavaScript Weekly: новости и статьи по JavaScript;
Sidebar.io: пять лучших ссылок для дизайнеров каждый день;
Web Design Weekly: еженедельная рассылка с лучшими новостями и статьями интернета;
Open Web Platform Daily Digest:самые последние frontend-технологии и решения;
Responsive Design Newsletter: адаптивный веб-дизайн: новости, статьи, инструменты и подсказки;
echo.js: клон Reddit с ресурсами JavaScript;
Web Tools Weekly: инструменты для frontend-разработки и веб-дизайна;
A Drip of JavaScript: советы по JavaScript раз в неделю;
ng-newsletter: лучшие материалы по AngularJS;

CSS

Статья: что такое border-image;
Статья: то, что вам никто не рассказывал о Z-index;
Статья: полное руководство по Flexbox;
Статья: принципы написания последовательного, идиоматического CSS;
Primer: типографика, кнопки и руководства по написанию HTML и CSS от GitHub;
WordPress: стандарты CSS;
Wizardry: руководства и советы по CSS;
Absolute Centering: как разместить контент по центру, чтобы он корректно отображался во всех браузерах;
CSS Positioning 101: все о CSS-позиционировании;

JavaScript

Книга: «Eloquent JavaScript». Автор Марижн Хавербеке (Marijn Haverbeke);
Книга: «Speaking JavaScript». Автор Аксель Роушмайер (Axel Rauschmayer);
Руководство: изучаем JavaScript;
Статья: замыкания JavaScript;
OOП в JavaScript: то, что вам нужно знать;
Статья. Часть I: полезные комбинаторы для работы с простыми Java-объектами в старом стиле;
Статья. Часть II: полезные комбинаторы для работы с простыми Java-объектами в старом стиле;
Статья: прототипы и наследование в JavaScript;
Серия статей: подробности стандарта ECMA 262-3;
JavaScript Garden: описание самых необычных возможностей JavaScript;

Google Style Guide: руководство по стилям оформления сайтов на JavaScript от Google;
Github Styleguide: руководство по стилям оформления сайтов на JavaScript от GitHub;
Wordpress: стандарты JavaScript;
Книга: «Structure and Interpretation of Computer Programs». Авторы Харольд Абельсон (Harold Abelson), Джеральд Джей Сассман (Gerald Jay Sussman), Джули Сассман (Julie Sussman);
RubyJS: это JavaScript-реализация всех методов классов Ruby;
Mout: это коллекция утилит JavaScript, которые могут быть использованы в браузере в качестве AMD-модулей или node.js;
bacon.js: библиотека для функционального реактивного программирования для JavaScript;
Руководство: событийные циклы и сопрограммы в JavaScript;
How To Node: асинхронный контроль потока с Promises;
Видео-лекция: монады в JavaScript. Дуглас Крофкфорд (Douglas Crockford);

Статья: не надо давать обещания, или Promises наоборот;
Статья: Promises – это монады асинхронного программирования;
Статья: изучение обратных вызовов с JavaScript Generators;
Статья: зачем нужны Promises;
Спецификация: Promises/A+;
Статья: обратные вызовы или сопрограммы;
Readme: что такое Promises;

Библиотеки JavaScript

HTML

Книга: «Dive into HTML5». Автор Марк Пилгрим (Mark Pilgrim);
Статья: принципы написания последовательного, идиоматического HTML;
Google Style Guide: руководство по стилям оформления сайтов на HTML/CSS от Google;
WordPress: стандарты HTML;

Языки высокого уровня

Dart: типизированный язык программирования, созданный Google, который выступает в качестве альтернативы JavaScript;
Sass: это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода;
Bourbon: простая и легковесная библиотека миксинов под Sass;
Less: обеспечивает следующие расширения CSS – переменные, вложенные блоки, миксины, операторы и функции;
Stylus: надежный и динамичный препроцессор CSS;
TypeScript: язык программирования, представленный Microsoft, расширяющий возможности JavaScript;
CoffeeScript: язык программирования, транслируемый в JavaScript;

Фреймворки JS

Руководство: выбираем фреймворк;
AngularJS: это JavaScript-фреймворк с открытым исходным кодом от Google;
Github: AngularJS;
AngularJS-Learning: огромный список обучающих ресурсов по Angular;
AngularJS: скринкасты;
Руководство: создаем приложения с AngularJS;
Статья: Наследование scope в AngularJS;
Статья: AngularJS от основ до внедрения зависимостей;
Пример приложения: To Do List на AngularJS;
Статья: AngularJS или Ember;

Статья: автостопом по AngularJS Directive;
Статья: сборка frontend-проектов с помощью Grunt и Angular JS;
Советы: AngularJS;
angular-requirejs-seed: это форк Angular Seed, но с изменениями, необходимыми для поддержки RequireJS;
Статья: написание повторно используемых компонентов Angular JS с Bower;
Статья: нативные директивы AngularJS для Twitter Bootstrap;
Статья: автоматизация AngularJS с Yeoman, Grunt и Bower;
Статья: оптимизация шаблонов Angular с Grunt на Heroku;
Статья: создание оффлайн-приложений с AngularJS и PouchDB;
jQuery: библиотека JavaScript, направленная на взаимодействие JavaScript и HTML;

jQuery: Github;
jQuery: обучающий ресурс;
jQuery: страничка о плагинах;
jQuery: полное руководство по написанию плагинов jQuery;
Книга: «jQuery Fundamentals». Автор Ребекка Мерфи (Rebecca Murphy);
jQuery: стиль кода jQuery;
Плагины: jQuery;
Dojo: свободная модульная библиотека JavaScript;
Dojo: Github;
Dojo: документация;

Руководство Dojo: создание своего собственного виджета;
Backbone: JavaScript-библиотека, основанная на шаблоне проектирования Model-View-Presenter;
Backbone: Github;
Книга: «Developing Backbone.js Applications». Автор Эдди Османи (Addy Osmani);
Презентация: Backbone;
Backbone: руководство по Marionette.js View;
Серия руководств: создание приложения на Backbone.js;
Backbone: миграция приложения;
Chaplin.js: фреймворк для JavaScript, работающий поверх Backbone.js;
Meteor: это платформа с открытым исходным кодом для быстрого создания качественных веб-приложений;

Meteor: Github;
Zepto.js: небольшая JavaScript-библиотека, заточенная под движок WebKit;
Zepto.js: Github;
Zepto Builder: создание своей версии Zepto с необходимыми модулями;
Minified.js: библиотека JavaScript, сравнимая по размерам с jQuery и MooTools;
Minified.js: Github;
React: фреймворк от Facebook;
React: Github;
Qooxdoo: универсальный JavaScript-фреймворк для создания мобильных и одностраничных веб-приложений;

jQWidgets: фреймворк и набор виджетов для создания веб-приложений для ПК и мобильных устройств;
Flight: веб-фреймворк управляемый событиями от Twitter;
Singool.js: простой JavaScript-фреймворк для разработки одностраничных веб-приложений;
Knockout: начните применять шаблон Model-View-View Model (MVVM);
rAppid.js: декларативный фреймворк JavaScript MVC;
Sammy.js: крошечный фреймворк JavaScript, формирующий структуру приложения;
Ember.js: фреймворк для создания амбициозных веб-приложений;
Ember.js: Github;
Руководство: создание приложений с Ember.js;
EmberWatch: огромное количество обучающего материала по Ember;

Maria: MVC-фреймворк для приложений JavaScript;
Terrific Composer: frontend-фреймворк, следующий Terrific-концепции;
Rivets.js: простое решение для связывания данных и создания шаблонов для разработки современных веб-приложений;
Synapse: решение для связывания данных;
Cappuccino: открытый фреймворк, упрощающий создание настольных приложений, работающих в браузере;
JavaScript: подборка фреймворков;
JavaScript: фреймворки и инструментарий связывания данных;
Underscore.js: библиотека JavaScript;

Фреймворки CSS

Подборка: лучшие фреймворки CSS;
Bootstrap: домашняя страница;
Bootstrap: GitHub;
Bootstrap Expo: примеры использования Bootstrap;
Bootstrap Hero List: большой список ресурсов по Bootstrap;
Bootstrap video player: HTML5-плагин видеоплеера для jQuery;
Bootstrap: виджет для выбора цвета и даты;
Bootstrap: wysihtml5;
Bootstrap: галерея изображений;
fuelUX: расширение для Twitter Bootstrap;

Twitter Bootstrap: виджет выбора даты;
Bootbox.js: диалоговые окна для фреймворка Twitter Bootstrap;
Time Picker: выбор времени;
Date/Time Picker: выбор времени и даты;
ReCaptcha: капча для сайтов;
Bootstrap Modal: расширение для Bootstrap;
SelectBoxIt: изменение внешнего вида выпадающих списков;
File Upload: строка загрузки файлов;
BootPag: Twitter Bootstrap jQuery-плагин для нумерации страниц;
Bootstrap Arrows: стрелки для Twitter Bootstrap;

X-editable: вставка редактируемых компонентов;
Pagination: навигация по страницам;
Slider: слайдер;
Bootswatch: каталог тем;
Bootstrap Zero: каталог тем;
Jumpstart UI: еще один каталог тем;
Themestrap: простой способ создания тем Twitter Bootstrap;
jQuery Mobile Boostrap: тема jQuery для мобильных устройств, основанная на Twitter Bootstrap;
Bootstrap CDN: CDN для Twitter Bootstrap;
Flat UI: набор элементов пользовательского интерфейса;

Bootstrap Tour: простой способ создания «туров» по сайту;
Bootsnipp: элементы дизайна и сниппеты для фреймворков HTML/CSS/JS;
Form Builder: создание форм;
PaintStrap: сгенерируйте потрясающие темы Twitter Bootstrap;
TODC: тема в стиле Google для Twitter Bootstrap;
Layoutit:билдер с интерфесом Drag and Drop;
Bootlint: проверка веб-страниц на наличие HTML-ошибок;
IceCream: простая сеточная система;
Responsive Grid: адаптивная сеточная система;
Responsive Grid System: еще одна адаптивная сеточная система;

Compass: дизайнерский фреймворк;
Pondasee: набор инструментов, объединяющий в себе мощь Scss и Compass;
Foundation от Zurb: самый продвинутый адаптивный frontend-фреймворк в мире;
Boilerstrap: смесь HTML5 Boilerplate и Bootstrap;
Bootstrap PSD: еще один инструмент, упрощающий создание веб-приложений;
GroundworkCSS 2: адаптивный фреймворк HTML5, CSS и JavaScript;
Ink: набор инструментов, ускоряющих разработку веб-интерфейсов;
neat:фреймворк для Sass и Bourbon;
BootMetro: фреймворк для создания веб-приложений в стиле Metro;
Cosmo: тема Windows 8;

inuit.css: мощный масштабируемый фреймворк для OOCSS;
Kraken: Node.js-фреймворк;
Susy: адаптивные сетки для Compass;
Pure: маленькие адаптивные модули CSS;
Topcoat: это открытая CSS-библиотека от Adobe HTML;
Cascade Framework: мощный и производительный OOCSS-фреймворк с поддержкой новых и старых браузеров;
Cascade Framework Light: облегченная версия Cascade Framework;
Semantic UI: это фреймворк для создания переносимых интерфейсов;

Кроссбраузерность

Normalize.css: браузеры начинают отображать все элементы в соответствии с современными стандартами;
HTML5: кроссбраузерное полизаполнение;
Viewport Component: упрощает работу с вьюпортами;
Can I Use: таблицы совместимости функций HTML5, CSS3, SVG с браузерами;
HTML5 Please: рекомендации по реализации функций HTML5 и CSS3;
Outdated Browser: проверка актуальности версии браузера пользователя;

Адаптивность

Responsive Boilerplate: место, чтобы начать знакомство с адаптивным веб-дизайном;
Видео: адаптивный дизайн от Стефана Хэя (Stephen Hay);
Адаптивные шаблоны: навигация по сайту;
Адаптивные шаблоны: навигация по сайту;
Сложные адаптивные шаблоны: навигация по сайту;
Responsinator: посмотрите, как ваша адаптивная верстка выглядит на разных устройствах;
Статья: об адаптивном веб-дизайне;
Руководство: создание адаптивного веб-приложения;
Am I responsive: проверка адаптивности сайта;
Руководство: создание адаптивных таблиц с данными;

Breakpoints.js: обработка событий;
Harvey.js: обработка событий;
Enquire.js: обработка событиий;
Статья: как использовать адаптивные изображения, чтобы сайт выглядел прекрасно на любой платформе;
Adaptive Images: адаптивные изображения;
Статья: зачем нам нужны адаптивные изображения;
Riloadr: загрузчик адаптивных изображений;
stacktable.js;
FooTable;
Адаптивные изображения;

jQuery Picture;
Picturefill;
PictureFill;
imgLiquid: jQuery-плагин для изменения размеров изображений;
Clown Car: техника для адаптивных изображений;
HiSRC: простой jQuery-плагин для адаптивных изображений;
resrc.it: адаптивные изображения по запросу;
FitText: jQuery-плагин для «надувания» текста;
Out Of Words!: фреймворк для создания адаптивных текстов;
Статья: создание адаптивных текстов;
Responsive Measure: автоматический выбор оптимального размера шрифта для блока или модуля;

Электронная почта

Руководство: создание адаптивных электронных писем;
Адаптивные шаблоны для писем;
Ink от Zurb: отличный фреймворк для создания адаптивных электронных писем от парней из Zurb;
HTML Email Boilerplate: примеры кода для создания HTML-писем;
Таблицы: поддержка CSS в почтовых клиентах;
Email Template Reference: ссылки по дизайну электронных писем;

Мобильные устройства

jQuery Mobile: фреймворк для смартфонов и планшетов;
jQTouch: плагин Zepto/jQuery для мобильных веб-разработок под iPhone, Android, iPod Touch и другие устройства;
JScrollPane: это jQuery-плагин, превращающий стандартные скроллбары браузера в HTML-структуру;
jSwipeKinetic: jQuery-плагин, добавляющий кинетический скроллинг;
jQuery.pep.js: простой плагин для кинетического скроллинга;
Phantom Limb: эмулятор;
Touchе: эмулятор тач-событий;
Junior;
thumbs.js;
Zynga Scroller;
pull-to-refresh.js;
Overthrow;
iscroll;

Работа с жестами

jGestures: jQuery-плагин, позволяющий работать с жестами, например «прокруткой», «тапом», «поворотом»;
hammer.js: это JavaScript-библиотека для обработки функции мультитач;
TouchSwipe: jQuery-плагин для iPad, iPhone и так далее;
toe.js: крошечная jQuery-библиотека для обработки сложных жестов;
JS Touch Layer: фреймворк, упрощающий работу с жестами;
Статья: события касания и абстракции;
Jester;
TipTap;
jQuery.event.swipe;

Управление DOM-объектами

jQuery.event.move;

Обработка тап-событий

Energize;
Lightning Touch;
Tappable: простая библиотека для вызова тап-события в браузерах;
Fastclick: исключите 300-миллисекундную задержку между тапом и кликом в мобильных брауерах;
Руководство: создание «быстрых» кнопок для мобильных веб-браузеров;

Макет страницы

Screensizes: размеры экранов устройств;
Snap.js: JavaScript-библиотека для создания красивых меню в мобильных приложениях;
Flickable.js: позволяет взаимодействовать с любым элементом;
Swipe: это облегченный мобильный слайдер с четкостью перемещения 1:1 при прикосновении;
Swiper: слайдер с аппаратным ускорением;
jQuery-плагин: переход между страницами в мобильных приложениях с поддержкой жестов;
SwipeSlide: Zepto-плагин для iOS;
stackable.js: jQuery-плагин, который грамотно размещает таблицы на экранах небольших устройств;

Работа с датчиками мобильных устройств

lenticular.js: это jQuery-плагин для создания анимаций, реагирующих на наклон устройства или движение курсора мыши;
This End Up: используем датчики ориентации устройства в пространстве;

iOS

Safari: лучшие способы доставки изображений;
Safari: руководство по визуальным эффектам CSS;
Safari: создание веб-контента;
Статья: знакомство с веб-приложениями iOS;
Статья: веб-дизайн для iPad и инструменты разработчика;
Статья: iPhone 4 Retina Display и медиа-запросы CSS3;
Руководство: как сделать так, чтобы изображение всегда отображалось вертикально в веб-приложении для iPhone;
jQuery: плагин для Retina Display;
retina.js: это скрипт, осуществляющий загрузку изображений в высоком разрешении для Retina Display;
Retina Images: оптимизация изображений под Retina Display;

Шаблоны и сниппеты

Адаптивные шаблоны;
CSS3-сниппеты;
Blueprints: коллекция простых компонентов, плагинов для веб-сайтов;

Типографика

Руководство: шрифты и @font-face;
Adobe Edge Web Fonts: бесплатные шрифты от Adobe;
Typekit: шрифты по подписке;
Таблица: шрифты в Mac, Windows, Microsoft Office и Adobe Creative Suite;
SO: шрифты @font-face работают только на своем домене;
FitText: jQuery-плагин для «надувания» шрифта;
Trunk8: инструмент для обрезки текста, чтобы он поместился на форме;
bacon: измените форму блока с текстом;
CSS Typography: небольшой обзор CSS-функций по улучшению типографики;
Font Squirrel: генератор шрифтов;

Различные сервисы

Responsinator: посмотрите, как ваша адаптивная верстка выглядит на разных устройствах;
Color Scheme Designer: найдите сочетающиеся цвета;
Adobe Kuler: создавайте и делитесь цветовыми схемами;
jsFiddle;
SpritePad;
colourco;
HTML Shell;
Form Builder;
Zen BG;

What Font Is: определение шрифта по изображению;
Browser Shots: тесты совместимости практически с любым браузером;
CSSArrowPlease: простой инструмент для создания поясняющего блока со стрелкой;
HTML Entity Lookup: поиск HTML-сущностей;
CodePen: редактор кода HTML, CSS и JavaScript;
site44: «превращает» папки Dropbox в веб-сайты;
JPEGmini: сервер оптимизации изображений;
TinyPNG: сжатие PNG-изображений с потерями;
GenyMotion: эмулятор, приемник AndroVM;

Инструменты для создания веб-сайтов

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

Работа с анимацией

Velocity.js: это jQuery $.animate(), но в 20 раз быстрее и удобнее;
Animo.js: небольшой мощный инструмент для управления CSS-анимациями;
Stylie: инструмент для создания веб-анимации;
animate.less: куча крутых, забавных анимаций, пригодных для использования в любом браузере;
Canvas Advanced Animation Toolkit: фреймворк JavaScript для работы с анимацией;
tween.js: суперпростой инструмент для создания анимаций;
Janis: простой JavaScript-фреймворк для создания анимаций с помощью CSS-переходов;
Rekapi: JavaScript-библиотека для создания анимаций;
CanvasScript3: JavaScript-библиотека для HTML5 Canvas с интерфейсом, похожим на ActionScript3;
Shifty: создание твининг-анимации;

emile.js: JavaScript-фреймворк для создания CSS-анимации;
Firmin: JavaScript-библиотека для создания изображений с помощью CSS-переходов и преобразований;
Keanu: небольшая библиотека для создания анимаций на CanvasJS;
jsAnim: мощная и простая в использовании библиотека, позволяющая добавлять на сайты впечатляющие анимации;
GreenSock: анимация с использвоанием криптов;
GreenSock: обучающие ресурсы;
GreenSock: примеры;
Codepen Repository: примеры использования Greensock;
scripty2: JavaScript-фреймворк для продвинутых HTML-интерфейсов;
Animator.js: библиотека JavaScript для работы с анимацией;

Processing.js: это открытый язык программирования для визуализации в вебе;
jQuery Transit: CSS3-преобразования и переходы для jQuery;
Move.js: маленькая JavaScript-библиотека, упрощающая создание CSS3-анимаций;
Collie: это JavaScript-библиотека, помогающая создавать высокооптимизированные анимации и игры с помощью HTML5;
Year Of Moo: анимации Angular.js;
animate.css: крутые анимации, которые вы можете использовать в своих проектах;
Approach: меняйте внешний вид объектов в зависимости от их расстояния до курсора;
Magic: CSS3-фреймворк с большим количеством анимаций;

Виджеты

AlloyUI: фреймворк на базе YUI3;
Kendo UI: все для создания мобильных и веб-приложений с HTML5 и JavaScript;
jQuery UI Bootstrap: тема Bootstrap для jQuery UI;
jQuery Bootstrap: объединенная мощь Bootstrap и jQuery UI;
Cascade Framework: виджеты как для старых браузеров, так и для новых;
Zebra: JavaScript-библиотека, которая следует ООП-концепции;

Загрузка файлов

Карта сайта

SlickMap CSS;

Создание содержания

Модальные окна

Оповещения

Слайдеры

Навигация/переход по страницам

jPages;

Элементы выбора: выпадающие списки, радиокнопки, чекбоксы

Индикаторы загрузки

Percentage Loader;
progress.js;

Иерархия/деревья

Nestable;

Навигация

jPanelMenu;

Всплывающие подсказки

opentip;

Прочее

jQuery Knob;
DopelessRotate;
jQuery Addresspicker;
Fangle: создавайте интерактивные документы;
Skeucard: форма ввода номера банковской карты, которая выглядит как карта;

Визуализация

Photon;
Morris.js;
Cube;
Cubism.js;
D3.js;
Статья: знакомство с D3;
D3.js: интерактивное руководство;
NVD3;
Vega;
Crossfilter;

easy pie chart: создание простых круговых диаграмм;
CHAP Links Library: отрисовка диаграмм, схем и временных графиков;
Paper.js: фреймворк для работы с векторной графикой;
xCharts: это JS-библиотека для создания привлекательных графиков;
jQuery Gantt: библиотека для построения диаграмм Ганта;
amCharts: инструмент для построения графиков;
Raphael.js: простая векторная графика для веба;
three.js: 3D-библиотека JavaScript;
Highcharts: интерактивные JavaScript-графики для ваших веб-проектов;
Flot: привлекательные графики для jQuery;
Chart.js: простые схемы и графики для дизайнеров и разработчиков;
GoJS: библиотека для создания интерактивных диаграмм;
JointJS: это JS-библиотека для построения графов, схем и графиков;

Проверка правильности введенных данных в форме

Mention.js: дает возможность использовать символ @ для поиска пользвоателей;
ALAJAX: скрипт, позволяющий добавлять в форме свои поля;
Parsley.js: библиотека для быстрого и простого создания форм валидации;
mailcheck.js: jQuery-плагин, следящий за правильностью написания домена в адресе электронной почты;
one-validation: коллекция регулярных выражений для проверки правильности введённых данных;
nextVal: плагин jQuery для оценки правильности введенных данных в форму;
Fields.js; непрерывная оценка правильности введенных данных;
IV.js: специальные фильтры для оценки правильности введенных данных;
Ladda: превращение кнопки подтверждения в индикатор загрузки;
jQuery Super Labels: примеры форм с плейсхолдерами;
jQuery Validation Engine: JavaScript-плагин, задачей которого является оценка правильности данных, введенных в форму;

Анимированные переходы

Работа с числами

Время и дата

moment.js;
XDate;
Pikaday;

Поиск

Fullproof: текстовый поиск высокого класса;
lunr.js: это простой текстовый поисковик для ваших приложений;

Тестирование

BrowserStack: исчерпывающий список браузеров и мобильных эмуляторов, доступных для тестирования онлайн;
Статья: пишем тестируемый код на JavaScript;
Статья: пишем тестируемый код на JavaScript. Часть I;
Gherkin: язык, который понимает Cucumber;
Gherkin: основные функции;
Gherkin: свойства Given, When, Then;
FiveUI;
Введение в BDD;
cucumber;
cucumber.js;

Jasmine: JavaScript-фреймворк с синатксисом, похожим на Rspec;
QUnit: это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на JavaScript;
JsMockito: mock-фреймворк, создатели которого вдохновлялись Mockito;
PhantomCSS: тестирование вёрстки на визуальные регрессии;
Gemini: тестирование вёрстки на визуальные регрессии с помощью скриншотов;
Karma: исполнитель тестов для JavaScript;
ChaiJS: это гибкая библиотека утверждений;
Sinon.JS: три вида тестирования с spy, stub и mock для JavaScript;
sinon-chai: расширение для Chai;
PhantomJS: Webkit в консоли, то есть браузер без графической оболочки;
SlimerJS: браузер с поддержкой сценариев для веб-разработчиков, который работает на Gecko;

Шаблонизаторы

ECT: движок шаблонов с синтаксисом CoffeeScript;
pithy: предметно-ориентированный язык для генерации HTML на JavaScript;
T: использует простую структуру данных JavaScript для представления данных HTML/XML;
Nunjucks: шаблонизатор для JavaScript;
Linked.in Dust.js: сравнение mustache, handlebars, dust.js;
Статья: JSP и Dust.js;
Linked.in Dust.js: руководство;
Linked.in Dust.js: консоль для тестирования;

Маршрутизация
и URL

Crossroads.js;
Hash.js;
director;
Davis.js;
path.js;
URI.js;
Roadcrew.js;
jQuery Address;
page.js;
speakingurl: модуль для транслитерации текстовой строки;

Работа с текстовыми редакторами

Просмотр и редактирование кода

SublimeText;
Rainbow.js;
Intelligist;
Prism.js;
CodeMirror;
Scripted;
tabIndent.js;
Brackets: редактор кода для веба от Adobe, написанный на JavaScript, HTML и CSS;
Behave.js: библиотека, которая добавляет в текстовое поле функционал редакторов кода (IDE);

Рефакторинг

Статья: рефакторинг кода JavaScript с kratko.js;

Производительность

Видео: производительность DOM, HTML5 и CSS;
Видео: высокая производительность JavaScript;
Видео: создание производительного HTML5-приложения;
Руководство: написание быстрого и эффективного кода JavaScript;
Советы: производительность JavaScript;
Статья: повышаем производительность HTML5-приложения;
Советы: повышение производительности веб-приложений с HTML5;
Статья: frontend-производительность для веб-дизайнеров и разработчиков;
Статья: чистим наше приложение от мусора;
Статья: анализ памяти;

Статья: шаблоны утечки памяти в JavaScript;
Статья: понимание и решение проблем с утечкой памяти в Internet Explorer;
Статья: ищем утечки памяти;
Статья: как писать высокопроизводительный код на JavaScript;
Статья: утечки памяти JScript;
Статья: отслеживаем утечки памяти в Node.js;
Статья: эффективное управления памятью – советы от команды Gmail;
Руководство: пишем быстрый и эффективный JavaScript;
jsPerf: проверка производительности JavaScript;
Chrome Developer Tools: обзор инструментов разработчика, встроенных в Chrome;

Оптимизация для V8: серия технических постов про движок V8;
Список: что следует помнить при оптимизации JS-приложения для V8;
Советы: производительность JavaScript под V8;
Navigation Timing: JavaScript API для измерения оценки производительности сайта;
Firebug Paint Events: просмотр деталей события MozAfterPaint;
Locache: JavaScript-фреймворк, который позволяет кэшировать JS-строки, массивы и объекты;
Caliper: веб-сервис для мониторинга производительности веб-приложения;

Манипуляции с элементами DOM

Рендеринг: отрисовка, перерасчет дерева/макета, стилизация;
Перерасчет дерева отрисовки и перерисовка: как избежать потерь производительности;
Статья: будет ли перерасчет дерева отрисовки?
Статья: когда происходит перерасчет дерева отрисовки в DOM-среде;
Ускоряем JavaScript: работа с DOM;
Статья: когда JavaScript делает перерасчет дерева и проводит рендеринг;
Советы: как не нужно делать перерасчет в WebKit;

Анимации

requestAnimationFrame: потрясающие и быстрые анимации;
Collie: высокопроизводительная библиотека для работы с анимациями;
requestAnimationFrame API: теперь с точностью до миллисекунд;
Статья: почему перемещающиеся объекты с translate() лучше, чем pos:abs top/left;

Аппаратное ускорение

Совет: как посмотреть, какие части веб-страницы аппаратно-ускорены;
Список: параметры Chromium;

О браузерах

Видео: Google I/O 2012 – разгоняем JavaScript с помощью V8;
Видео: самые быстрые HTML и CSS – как работает браузерный движок;
Как работают браузеры: за кулисами современных веб-браузеров;
O’Reilly Velocity 2011: как ускорить JavaScript;
Видео: GDC 2012 – от консоли до Chrome;
Быстрые CSS: как браузеры отображают веб-страницы;
Видео: что браузеры думают о вашем приложении;
WebKit: серия статей о рендеринге;
Видео: один день из жизни кнопки в веб;
Статья: как загружается веб-страница;
Видео: основы, примитивы и история HTML5;
Статья: семейное дерево JavaScript;
Статья: как работают компиляторы JavaScript;
Статья: стратегии работы компилятора JavaScript;
Статья: будущее JavaScript;

Изображения

CSS-only: загрузка изображений по запросу;
Статья: оптимизация JPEG-изображений;
Статья: оптимизация PNG-изображений;
Статья: как оптимизировать PNG и JPEG без потери качества. Часть I;
Статья: как оптимизировать PNG и JPEG без потери качества. Часть II;

HTTP-транспорт

Поразительная frontend-производительность: конкатенация, сжатие, кэширование;
Видео: кэш – король всего;
Yahoo: лучшие способы ускорить работу вашего веб-сайта;

Модульность и загрузчики

Lazy Module Declaration: сборщик JavaScript, позволяющий создавать хорошие веб-приложения;
Шаблоны: UMD (Universal Module Definition);
Browserify: позволяет вам использовать стиль node.js модулей для работы в браузере;
require.js: популярный файловый/модульный загрузчик;
require.js: плагины;
sea.js: загрузчик модулей для веба;
CrapLoader: асинхронная загрузка рекламы, виджетов и JavaScript-кода;
Статья: модульная разработка JavaScript-приложений с AMD, CommonJS и ES Harmony;
Статья: путь JavaScript-модуля;
Статья: модульный JavaScript с RequireJS;
LABjs и RequireJS: интересный способ загрузки ресурсов JavaScript;
JavaScript: наследование и публичные/приватные члены классов;
Статья: погружение в темные воды загрузки скриптов;

Управление пакетами

bower;
volo;
parcel;
jam.js;

Управление изображениями

Иконки

GlyphSearch: поиск иконок;
Font Awesome: иконочный шрифт и CSS-инструментарий;
Fontello: генератор иконочных шрифтов;
Perfect Icons: самый простой способ создания иконок социальных сетей;
Iconic;
Entypo;
IcoMoon;
Font Custom;

HTTP

Спецификация;
Использование CORS;
Статья: кроссдоменный AJAX с CORS;

WebSocket

Спецификация;
Socket.io: JavaScript-библиотека для веб-приложений и обмена данными в реальном времени;
Engine.io: низкоуровневый движок, реализующий коммуникацию в старых браузерах для Socket.io;
SockJS: лучшая и наиболее полная альтернативная реализация WebSocket;

Обработка ошибок и отладка

Tracing.js: Отслеживание выполнения функций JavaScript;
Руководство: как не нужно обрабатывать ошибки JavaScript;
Tattletale: отправка логов через XHR для обработки на сервере;
jsconsole: удаленная консоль;

Документация

DevDocs: вся документация разработчика в одном месте;
dexy: ПО с открытым исходным кодом для составления документации и автоматизации документооборота;
docco: это простенький генератор документации;
styledocco: генератор документации из CSS-файлов на основе специально размеченных комментариев;
Ronn: создание руководств;
dox: генератор документации JavaScript;
YUIDoc: это приложение Node.js, которое генерирует документацию на основании комментариев в исходном коде;
coddoc: это библиотека jsdoc для парсинга;
sphinx: инструмент, упрощающий процесс создания документации;
Статья: знакомство с JSDoc;
Beautiful docs: генерация документации на основе markdown-файлов;
Daux.io: генератор, формирующий документацию «на лету»;

Стили Windows 8

Metro UI CSS;
BootMetro;
metro-bootstrap;
Droptiles;
Metro JS;
Cosmo;
Кнопки Microsoft CSS3;
Библиотека изображений Visual Studio 2012: доступно более 5000 изображений;
Шаблон: Metro UI;
tileJS: плитки Windows Metro с JavaScript и CSS3;
Видео: что нужно знать веб-разработчикам, при создании плиточного дизайна Metro;
Статья: реализация интерфейса Metro;
Демо: анимации в стиле Windows 8 с CSS3 и jQuery;

Видео и аудио

SublimeVideo: HTML5-видеоплеер;
Video.js: HTML5-видеоплеер с открытым исходным кодом;
FlowPlayer: видеоплеер для веба;
longtailVideo: HTML5 и Flash-плеер;
howler.js: позволяет добавить музыку и звуки к веб-страницам;
Stratus 2: плеер SoundCloud;
jPlayer: медиа-библиотека, написанная на JavaScript;
MediaElement.js: HTML5 аудио- и видеопроигрыватель на HTML и CSS;
audio.js: это JavaScript-библиотека, позволяющая использовать тэг HTML5 в любом браузере;

Коллекции библиотек

Unheap: репозиторий с плагинами jQuery;
jster: все, что нужно для JavaScript;
MicroJS: поможет найти мощные микрофреймворки;
JSPkg: менеджер пакетов;
jquer.in: коллекция плагинов jQuery;
JSDB.io: отличный источник лучших фреймворков JavaScript, плагинов и инструментов;

Иные источники, инструменты и ресурсы

pineapple.io: руководства, инструменты и другие средства для разработчиков и дизайнеров;
Frontdesk: список полезных вещей для frontend-разработчиков;
Руководство: стандарты и рекомендации по frontend;
Life of JS: книги по JavaScript;

Чат

XMPP с помощью JSON;
Converse.js: это чат-клиент с открытым исходным кодом, который можно использовать на любом сайте;

Прототипирование

RoughDraft.js;
Видео: чем заменить Photoshop;
fixie;
Holder.js;

JSON

JSON Query Language: это язык запросов, специально разработанный для популярного формата обмена данными JSON;
Oboe.js: потоковый JSON-парсер;
JSONLint: проверка ошибок в JSON-коде;
SpahQL: управление данными JSON;
JSONiq: язык запросов для JSON;

Презентации

Ancesor.js;
Slideshow.html;
HTML5;
reveal.js;
HTML5 от Google;
CSSS;
deck.js;
controldeck.js;
impress.js;
hyhyhy;
Slides: фреймворк для создания презентаций;

Скроллинг

AppScroll.js: крошечная JS-библиотека;
Scrollpath;
jQuery NiceScroll;
FoldScroll;
Scrollorama;

Работа с клавиатурой

Таблицы

Безопасность

oAuth Consumer Library: библиотека, созданная Джоном Кристианом (John Kristian);
ohauth: реализация oAuth 1.0 на JavaScript;
JSO: JavaScript-библиотека oAuth;
xdoauthproxy;
JavaScript Crypto Library;
Stanford JavaScript Crypto Library;
Mozilla/jwcrypto;
Статья: криптография на JavaScript только вредит;
Статья: криптография на JavaScript;

Расположение элементов на странице

Shapeshift: плагин, динамически меняющий расположение элементов в стиле Pinterest;
CollagePlus: плагин для jQuery разместит элементы точно в контейнере;
Masonry: JavaScript-библиотека, позволяющая выводить HTML-блоки в компактно-сложенном виде;
MixItUp: jQuery-плагин, предлагающий анимированную сортировку;

Работа для веб-разработчиков

Работа: GitHub;
Работа: Authentic Jobs;
Работа: 37signals;
Работа: Smashing;
Список: вопросы для собеседования на должность frontend-разработчика;
Interview This! список вопросов, которые стоит задать работникам;
JavaScript: простые задачки;
Работа: StackOverflow;
Работа: CodePen;

Прочее

zip.js;
simpleCart.js;
Mozilla/pdf.js;
Aware.js: настраивайте формат отображения содержимого страницы, в зависимости от поведения пользователя;
Статья: как загружать файлы на Amazon S3 напрямую из клиентского приложения;
jIO: JavaScript-библиотека для управления документами в нескольких хранилищах;
Lo-Dash: это полноценная замена для Underscore.js;
Subtle Patterns:Photoshop-плагин;

Tags:

Hubs: