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

сегодня в 10:30

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

Руководства

• 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);

Библиотеки 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 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

• 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: проверка актуальности версии браузера пользователя;

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

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

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

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

• 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-объектами

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

• 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;

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

Типографика

• Руководство: шрифты и @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: генератор шрифтов;

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

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

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

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

• 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-библиотека, которая следует ООП-концепции;

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

Карта сайта

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

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

Оповещения

Слайдеры

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

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

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

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

Навигация

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

Прочее

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

• 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-плагин, задачей которого является оценка правильности данных, введенных в форму;

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

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

Время и дата

Поиск

• Fullproof: текстовый поиск высокого класса;
• lunr.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

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

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

Рефакторинг

• Статья: рефакторинг кода 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

Анимации

• 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-транспорт

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

• 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: наследование и публичные/приватные члены классов;
• Статья: погружение в темные воды загрузки скриптов;

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

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

Иконки

HTTP

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

Видео и аудио

• 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;

Чат

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

JSON

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

Презентации

Скроллинг

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

Таблицы

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

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

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

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

Прочее

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

• —

• 473

• 50

Автор: @it_man dypsilon

vmware iaas provider

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.