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

в 7:30, , рубрики: front-end, Блог компании ИТ-ГРАД, Веб-разработка, дизайн, интерфейсы, ИТ-ГРАД, разработка

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

Мы продолжаем публиковать подборки полезных инструментов. Ниже представлена подборка из более 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);

  • Статья: не надо давать обещания, или 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 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-плагин;

Автор: ИТ-ГРАД

Источник

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js