Здесь собрано множество полезных инструментов для фронденд-разработчиков.
Автоматизированное тестирование, инструменты сборки, текстовые редакторы и т.д.

Автоматизированное тестирование

Это процесс, когда программные средства выполняют сценарии тестирования до выпуска продукта.

• 5 распространённых мифов про TDD и Unit тестирование: Эрик Эллиотт рассказывает, почему вам стоит заниматься TDD и Unit тестированием.
• Введение в разработку JavaScript тестов: Автор рассказывает о своем опыте создания JavaScript приложения, а также о работе с сетевыми запросами и DOM.
• Работа с шаблонными ошибками: Автор рассказывает о шаблонных ошибках и способах рефакторинга приложений.
• Chai: Библиотека BDD / TDD утверждений для узлов и браузеров, которые работают с любой инфраструктурой тестирования JavaScript.
• Cucumber: Программный инструмент, используемый для тестирования ПО c помощью BDD.
  • Cucumber.js: Тот же Cucumber, написанный на чистом JavaScript, а значит работающий на любой JavaScript платформе.
  • Gherkin: Cucumber, имеющий несколько отличий от оригинального. Основное преимущество — тесты могут быть разработаны не обязательно тестировщиками, а людьми которые вообще могут не знать программирования, например бизнес-аналитиками.
• FiveUI: Инструмент для оценки пользовательских интерфейсов HTML на соответствие определённым стандартам UI.
• Jasmine: Фреймворк для BDD тестирования, не зависящий от браузеров, DOM и других фреймворков.
• JavaScript Тестирование — Unit/Functional/Integration: Всё о видах автоматизированного тестирования, чтобы избежать ошибок при запуске продукта.
• Jest: Фреймворк для юнит-тестов, используемый Facebook для тестирования сервисов и React приложений.
• Karma: Инструмент для исполнения кода в разных браузерах.
• Leche: Расширение для работы с Mocha и Sinon.
• PhantomCSS: Делает скриншоты и сравнивает их с базовыми изображениями для проверки различий в пикселях RGB, а затем помогает устранить различия.
• QUnit: Фреймворк для модульного тестирования JavaScript. Он используется jQuery, jQuery UI и jQuery Mobile и способен тестировать любой JavaScript код.
• Refactor Away Anti-Patterns: Shane Tomlinson continues by refactoring the original application, including testing anti patterns, to be easier to read, easier to reuse, and easier to test.
• Sinon.js: Библиотека для эмуляции и проверки требуемого поведения в JavaScript с использованием spy, stub и mock.
  • Использование Stub и Mock: Здесь рассматривается Stub и Mock и их взаимодействие с другими объектами.
• Тестирование кодовой базы React & Redux: Руководством по тестированию кодовой базы React и Redux.
• Пишем тестируемый код: Автор рассуждает о том, как писать код, чтобы его можно было тестировать.

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

Сборник инструментов и экосистем для автоматизации процессов.

• Автоматизация: Инструмент для автоматизации, встроенный в JavaScript.

Grunt

Инструмент для создания командной строки для JavaScript проектов. 

• Руководство по Grunt: Шаблон по работе с инструкциями.
• Синхронное тестирование между браузерами/устройствами: Описание простого способа тестирования продукта на устройствах.

Gulp

Инструмент для автоматизации сложных процессов.

• Часть 1: Примеры: Введение в gulp и gulpfile.js.
• Часть 2: Плагины Gulp: Плагины Orchestrator, Undertaker, Vinyl и Vinyl FS, Gulp.
• Часть 3: Когда нужных плагинов нет: Использование map-stream, though2 и event-stream.
• Часть 4: Инкрементные разработки:: Создание файлов с кэшированием.
• Часть 5: Предостережения: Управление ошибками и решение замаскированных проблем.
  • gulp-clean-css: Плагин для сжатия CSS файлов с использованием clean-css.
  • gulp-cssnano: Сжатие CSS файлов, используя cssnano.
  • gulp-concat: Плагин для конкатенции.
  • gulp-tar: Create tarball from files.
  • vinyl-ftp: Плагин для подключения по ftp.
  • @sindresorhus plugins: Коллекция плагинов от Синдро Сорхуса.
  • NPM пакеты, работающие с Gulp: Узлы, работающие с Gulp.
  • gulp-cache: Плагин для кэширования изображений.
  • gulp-cached: Плагин для кэширования содержания файлов в памяти.
  • gulp-changed: Запускает задания только для изменённых файлов.
  • gulp-filter: Плагин для работы с исходными файлами.
  • gulp-newer: Плагин для передачи файлов, которые отличаются от предыдущих.
  • gulp-remember: Запоминает проходящие файлы и если нужно вставляет в поток.
  • gulp-imagemin: Плагин для минимизации размера изображений.
  • gulp-webp: Конвертирует PNG, JPEG и GIF в WebP.
  • gulp-uglify: Минимизация JavaScript, используя UglifyJS.
  • Поддержка gulp-sourcemaps: Список плагинов, поддерживающих gulp-sourcemaps.
  • gulp-sourcemaps: Поддержка Source map для Gulp.js
  • gulp-count: Подсчёт файлов в vinyl-потоке.
  • gulp-debug: Отладка vinyl-потоков.
  • gulp-size: Отображение размеров файлов.
  • gulp-chmod: Управление разрешениями для vinyl-файлов.
  • gulp-rename: Плагин для простого изменения имени.
  • vinyl-buffer: Конвертирует файлы из vinyl-поток в буферизованные файлы.
  • vinyl-file: Преобразует обычный файл в vinyl-файл.
  • vinyl-fs: Файловый менеджер для работы с vinyl.
  • vinyl-git: Получение vinyl-файлов из git.
  • vinyl-paths: Доступ к файлам в vinyl потоке.
  • vinyl-to-stream: Преобразование vinyl-потоков в текстовые.

• Mimosa: Инструмент для быстрого старта работы.
• Plop: Фреймворк для командной работы, позволяющий создавать файлы по уровням.
  • Автоматизация рабочего процесса с использованием plop: Автоматизация разработки UI с помощью Riot.js и ES6.

Webpack

Сборщик модулей.

• Изменение JavaScript компонентов: Автор пишет, как сделать так, чтобы код React работал с BEM.
• Разработка с использованием Docker и Webpack: Автор объясняет, как создать среду разработки с помощью Webpack и Docker, чтобы производительность была на высоком уровне.
• Руководство по Full-Stack Redux: Здесь описаны все этапы построения интерфейса Node + Redux и интерфейса React + Redux для реальных приложений, используя тестовую разработку.
• Настройка загрузчика изображений Webpack: После прочтения этой статьи вы научитесь работать с загрузчиком изображений Webpack.
• SoundCloud клиент в React + Redux: Это пошаговое руководство научит вас создавать свой собственный React + Redux проект с помощью Webpack и Babel.
• Webpack для тех, кто знает основы: Руководство по Webpack для продвинутых.
• WebpackBin: Webpack-песочница.
• Webpack для создания пайплайнов: Автор сравнивает, как Grunt, Gulp, Broccoli и Webpack обнаруживают зависимости.

• Yeoman: Популярная утилита для более удобной работы над проектом.

Текстовые редакторы

Здесь собраны текстовые редакторы для работы с исходным кодом веб-сайтов.

• Atom: Современный текстовый редактор, который можно максимально персонализировать.
• Brackets: Open-source редактор JavaScript, HTML и CSS кода.
• Notepad++: Бесплатный редактор исходного кода, пригодный также для работы с обычным текстом, поддерживающий несколько языков и доступный для работы на Windows.
• Visual Studio Code: Кроссплатформенное приложение для создания и отладки как веб, так и облачных приложений.

Инструменты CSS

Инструменты для анализа и обработки CSS файлов.

• CSS Pack: Собирает графы CSS зависимостей, полученные из dgraph или module-deps в единый набор CSS, учитывая, что каждая вершина графа содержит CSS и то, что граф отсортирован с помощью dept-sort.
• CSS Stringify: Строковый указатель CSS с использованием AST из 'css.parse'
• CSSCSS: Программа для анализа избыточности кода.
• Clean CSS: Node.js библиотека для уменьшения CSS файлов.
• Helium CSS: Инструмент для поиска неиспользуемого CSS.
• PostCSS: Удобный инструмент для работы с препроцессорами и написания кода.
  • Введение в PostCSS: Статья о том, что такое PostCSS и как с этим работать.
  • ES CSS Модули: Плагин для объединения ES и CSS модулей.
  • Улучшаем код, используя PostCSS: Статья о том, как повысить качество кода с помощью PostCSS.
  • Как пригодится PostCSS в работе над изображениями: Front-end разработчик рассказывает, как PostCSS помогает ему в работе.
• Stylelint: CSS-линтер, необходимый для того, чтобы избавиться от ненужного кода и сделать его красивым.
  • Линтинг CSS с использованием Stylelint: Статья о том, почему стоит линтинговать CSS.

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

Всё о написании, публикации и использовании документации.

• Atomic Docs: Генератор стилей и менеджер компонентов.
• Daux: Генератор документации, использующий структуры папок и файлы Markdown для быстрого создания пользовательской документации.
• Dexy: Инструмент для создания технической документации, который адаптирует её при изменении кода.
• Docco: Генератор документации, смешивающий комментарии и код в единый HTML код.
• Transcribe: Генератор Markdown документации из комментариев кода.
• YUIDoc: Инструмент для генерации документации для API из комментариев кода.
• devdocs.io: Удобный инструмент для сбора всей документации в одном месте.
• dox: Генератор JavaScript документации с использованием markdown и jsdoc.
• styledocco: Генерирует документацию из таблиц стилей.

Шрифты для программистов

• Droid Sans Mono
• Free Programming Fonts
• Mononoki
• Profont
• Source Code Pro
• Space Mono

HTML-инструменты

Инструменты для обработки HTML кода.

• html-inspector: Простой инструмент для анализа вашего HTML-кода.
• html-minifier: Инструмент для минимизации HTML-кода.

Процесс постинга изображений

Инструменты для изменения и оптимизации изображений.

• ImageOptim-CLI: Универсальная утилита для оптимизации изображений.
• Jpegoptim: Программа для сжатия и оптимизации JPEG файлов.
• Руководство по оптимизации изображений: В статье рассматривается оптимизация для вывода сайта в топ, повышения производительности и работы с соцсетями.
• Pngcrush: Оптимизатор PNG.
• SMLR: Оптимизация JPEG без заметной потери качества.

JavaScript инструменты

Инструменты для статистического анализа и обработки JavaScript файлов.

• Babel: Инструмент для транспилирования кода.
  • Full-Stack Redux руководство
  • JavaScript Transpilers: что это и зачем: Как использовать Babel и какое будущее ждёт JavaScript.
• Closure Compiler: Инструмент, разработанный Google для сжатия и обфускации JavaScript.
• Flow: Инструмент для статистического анализа кода.
• JSCodeshift: Набор инструментов, помогающих в рефакторинге кода.
• Линтинг JavaScript кода: Процесс запуска программы для поиска возможных ошибок:
  • ESLint
  • JSHint
  • JSLint
• Bundlers и Loaders:
  • Budo: Сервер для быстрого прототипирования
  • Watchify: Модуль для отслеживания изменений в коде.
  • Руководство по SystemJS и jspm
  • Block, Element, Modifying: Как организовать работу React с BEM с помощью Webpack.
  • Разработка с использованием Docker и Webpack: Как создать среду разработки с высокой производительностью.
  • Руководство Full-Stack Redux
  • Руководство по настройке загрузчика изображений Webpack
  • Клиент SoundCloud в React + Redux: Руководство по созданию своего React + Redux проекта с помощью Webpack и Babel.l.
  • Webpack — от новичка до профессионала
  • WebpackBin: Webpack песочница.
  • Почему следует использовать Webpack при работе с пайплайнами
  • Browserify: Позволяет вам запрашивать модули в браузере, объединяя все зависимости.
  • CrapLoader: Загрузчик скриптов для объявлений, виджетов и другого стороннего контента.
  • Require.js: загрузчик AMD модулей.
  • Rollup.js: Создавайте приложения и библиотеки с помощью модулей ES2015, и объединяйте их в один файл для использования в браузерах и Node.js.
  • SystemJS: Универсальный загрузчик модулей ES6, AMD, CommonJS. Работает с Traceur и Babel.
  • URequire: Универсальный модуль, конвертер JavaScript.
  • Webpack: Модуль для сборки бандлов и оптимизации модулей JavaScript и других ресурсов для фронтенда
  • Regenerator: Исходный трансформатор, обеспечивающий функции генератора ECMAScript 6 в JavaScript-of-today.

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

Средства для автоматизации процессов установки, обновления, настройки и удаления компонентов.

• Bower: Установка пакетов с их зависимостями.
• Lerna: Инструмент для оптимизации рабочего процесса управления многопортовыми репозиториями с помощью git и npm.
• NPM: Пакетный менеджер Node.js для управления модулями и зависимостями.

Source maps

• combine-source-map: Объединение нескольких файлов в один.
• convert-source-map: Преобразование в разные форматы.
• generate-sourcemap: Создание source-map для файлов в пакете.
• source-map-cjs: Создание и использование source maps в commonjs на старых браузерах.

Контроль изменений

Инструменты для контроля за изменениями, чтобы в любой момент можно было вернуться к более ранним версиям кода.

• Git: Высокоэффективная система управления версиями.
  • Стань гуру Git: Серия учебников по Git от Atlassian
• OctoLinker: Браузерное расширение, которое помогает работать с GitHub ссылками.