Здесь собрано множество полезных инструментов для фронденд-разработчиков.
Автоматизированное тестирование, инструменты сборки, текстовые редакторы и т.д.
Это процесс, когда программные средства выполняют сценарии тестирования до выпуска продукта.
-
: Эрик Эллиотт рассказывает, почему вам стоит заниматься TDD и Unit тестированием. : Автор рассказывает о своем опыте создания JavaScript приложения, а также о работе с сетевыми запросами и DOM. : Автор рассказывает о шаблонных ошибках и способах рефакторинга приложений. : Библиотека BDD / TDD утверждений для узлов и браузеров, которые работают с любой инфраструктурой тестирования JavaScript. : Программный инструмент, используемый для тестирования ПО c помощью BDD.
- Поддержка gulp-sourcemaps: Список плагинов, поддерживающих gulp-sourcemaps. : Поддержка Source map для Gulp.js : Подсчёт файлов в vinyl-потоке. : Отладка vinyl-потоков. : Отображение размеров файлов. : Управление разрешениями для vinyl-файлов. : Плагин для простого изменения имени. : Конвертирует файлы из vinyl-поток в буферизованные файлы. : Преобразует обычный файл в vinyl-файл. : Файловый менеджер для работы с vinyl. : Получение vinyl-файлов из git. : Доступ к файлам в vinyl потоке. : Преобразование vinyl-потоков в текстовые.
- Изменение JavaScript компонентов : Автор пишет, как сделать так, чтобы код React работал с BEM. : Автор объясняет, как создать среду разработки с помощью Webpack и Docker, чтобы производительность была на высоком уровне. : Здесь описаны все этапы построения интерфейса Node + Redux и интерфейса React + Redux для реальных приложений, используя тестовую разработку. : После прочтения этой статьи вы научитесь работать с загрузчиком изображений Webpack. : Это пошаговое руководство научит вас создавать свой собственный React + Redux проект с помощью Webpack и Babel. : Руководство по Webpack для продвинутых. : Webpack-песочница. : Автор сравнивает, как Grunt, Gulp, Broccoli и Webpack обнаруживают зависимости.
- Руководство по оптимизации изображений: В статье рассматривается оптимизация для вывода сайта в топ, повышения производительности и работы с соцсетями. : Оптимизатор PNG. : Оптимизация JPEG без заметной потери качества.
- Руководство по SystemJS и jspm : Как организовать работу React с BEM с помощью Webpack. : Как создать среду разработки с высокой производительностью.
- Руководство по настройке загрузчика изображений Webpack : Руководство по созданию своего React + Redux проекта с помощью Webpack и Babel.l.
- Webpack — от новичка до профессионала : Webpack песочница. : Позволяет вам запрашивать модули в браузере, объединяя все зависимости. : Загрузчик скриптов для объявлений, виджетов и другого стороннего контента. : загрузчик AMD модулей. : Создавайте приложения и библиотеки с помощью модулей ES2015, и объединяйте их в один файл для использования в браузерах и Node.js. : Универсальный загрузчик модулей ES6, AMD, CommonJS. Работает с Traceur и Babel. : Универсальный модуль, конвертер JavaScript. : Модуль для сборки бандлов и оптимизации модулей JavaScript и других ресурсов для фронтенда : Исходный трансформатор, обеспечивающий функции генератора ECMAScript 6 в JavaScript-of-today.
-
: Тот же Cucumber, написанный на чистом JavaScript, а значит работающий на любой JavaScript платформе. : Cucumber, имеющий несколько отличий от оригинального. Основное преимущество — тесты могут быть разработаны не обязательно тестировщиками, а людьми которые вообще могут не знать программирования, например бизнес-аналитиками.
-
: Здесь рассматривается Stub и Mock и их взаимодействие с другими объектами.
Сборник инструментов и экосистем для автоматизации процессов.
-
: Инструмент для автоматизации, встроенный в JavaScript.
Grunt
Инструмент для создания командной строки для JavaScript проектов.
-
: Шаблон по работе с инструкциями. : Описание простого способа тестирования продукта на устройствах.
Инструмент для автоматизации сложных процессов.
-
: Введение в gulp и gulpfile.js. : Плагины Orchestrator, Undertaker, Vinyl и Vinyl FS, Gulp. : Использование map-stream, though2 и event-stream. : Создание файлов с кэшированием. : Управление ошибками и решение замаскированных проблем.
-
: Плагин для сжатия CSS файлов с использованием clean-css. : Сжатие CSS файлов, используя cssnano. : Плагин для конкатенции. : Create tarball from files. : Плагин для подключения по ftp. : Коллекция плагинов от Синдро Сорхуса. : Узлы, работающие с Gulp. : Плагин для кэширования изображений. : Плагин для кэширования содержания файлов в памяти. : Запускает задания только для изменённых файлов. : Плагин для работы с исходными файлами. : Плагин для передачи файлов, которые отличаются от предыдущих. : Запоминает проходящие файлы и если нужно вставляет в поток. : Плагин для минимизации размера изображений. : Конвертирует PNG, JPEG и GIF в WebP. : Минимизация JavaScript, используя UglifyJS.
-
: Инструмент для быстрого старта работы. : Фреймворк для командной работы, позволяющий создавать файлы по уровням.
-
: Автоматизация разработки UI с помощью Riot.js и ES6.
Webpack
-
: Популярная утилита для более удобной работы над проектом.
Здесь собраны текстовые редакторы для работы с исходным кодом веб-сайтов.
-
: Современный текстовый редактор, который можно максимально персонализировать. : Open-source редактор JavaScript, HTML и CSS кода. : Бесплатный редактор исходного кода, пригодный также для работы с обычным текстом, поддерживающий несколько языков и доступный для работы на Windows. : Кроссплатформенное приложение для создания и отладки как веб, так и облачных приложений.
Инструменты для анализа и обработки CSS файлов.
-
: Собирает графы CSS зависимостей, полученные из dgraph или module-deps в единый набор CSS, учитывая, что каждая вершина графа содержит CSS и то, что граф отсортирован с помощью dept-sort. : Строковый указатель CSS с использованием AST из ‘css.parse’ : Программа для анализа избыточности кода. : Node.js библиотека для уменьшения CSS файлов. : Инструмент для поиска неиспользуемого CSS. : Удобный инструмент для работы с препроцессорами и написания кода.
-
: Статья о том, что такое PostCSS и как с этим работать. : Плагин для объединения ES и CSS модулей. : Статья о том, как повысить качество кода с помощью PostCSS. : Front-end разработчик рассказывает, как PostCSS помогает ему в работе.
-
: Статья о том, почему стоит линтинговать CSS.
Всё о написании, публикации и использовании документации.
-
: Генератор стилей и менеджер компонентов. : Генератор документации, использующий структуры папок и файлы Markdown для быстрого создания пользовательской документации. : Инструмент для создания технической документации, который адаптирует её при изменении кода. : Генератор документации, смешивающий комментарии и код в единый HTML код. : Генератор Markdown документации из комментариев кода. : Инструмент для генерации документации для API из комментариев кода. : Удобный инструмент для сбора всей документации в одном месте. : Генератор JavaScript документации с использованием markdown и jsdoc. : Генерирует документацию из таблиц стилей.
Инструменты для обработки HTML кода.
-
: Простой инструмент для анализа вашего HTML-кода. : Инструмент для минимизации HTML-кода.
Инструменты для изменения и оптимизации изображений.
-
: Универсальная утилита для оптимизации изображений. : Программа для сжатия и оптимизации JPEG файлов.
Инструменты для статистического анализа и обработки JavaScript файлов.
-
: Инструмент для транспилирования кода. : Как использовать Babel и какое будущее ждёт JavaScript.
-
: Сервер для быстрого прототипирования : Модуль для отслеживания изменений в коде.
Средства для автоматизации процессов установки, обновления, настройки и удаления компонентов.
-
: Установка пакетов с их зависимостями. : Инструмент для оптимизации рабочего процесса управления многопортовыми репозиториями с помощью git и npm. : Пакетный менеджер Node.js для управления модулями и зависимостями.
-
: Объединение нескольких файлов в один. : Преобразование в разные форматы. : Создание source-map для файлов в пакете. : Создание и использование source maps в commonjs на старых браузерах.
Инструменты для контроля за изменениями, чтобы в любой момент можно было вернуться к более ранним версиям кода.