Более 70 полезных инструментов для фронтенд-разработчиков

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

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

    : Эрик Эллиотт рассказывает, почему вам стоит заниматься TDD и Unit тестированием. : Автор рассказывает о своем опыте создания JavaScript приложения, а также о работе с сетевыми запросами и DOM. : Автор рассказывает о шаблонных ошибках и способах рефакторинга приложений. : Библиотека BDD / TDD утверждений для узлов и браузеров, которые работают с любой инфраструктурой тестирования JavaScript. : Программный инструмент, используемый для тестирования ПО c помощью BDD.

      : Тот же 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.
      • Поддержка gulp-sourcemaps: Список плагинов, поддерживающих gulp-sourcemaps. : Поддержка Source map для Gulp.js : Подсчёт файлов в vinyl-потоке. : Отладка vinyl-потоков. : Отображение размеров файлов. : Управление разрешениями для vinyl-файлов. : Плагин для простого изменения имени. : Конвертирует файлы из vinyl-поток в буферизованные файлы. : Преобразует обычный файл в vinyl-файл. : Файловый менеджер для работы с vinyl. : Получение vinyl-файлов из git. : Доступ к файлам в vinyl потоке. : Преобразование vinyl-потоков в текстовые.
        : Инструмент для быстрого старта работы. : Фреймворк для командной работы, позволяющий создавать файлы по уровням.

          : Автоматизация разработки UI с помощью Riot.js и ES6.

        Webpack

        • Изменение JavaScript компонентов : Автор пишет, как сделать так, чтобы код React работал с BEM. : Автор объясняет, как создать среду разработки с помощью Webpack и Docker, чтобы производительность была на высоком уровне. : Здесь описаны все этапы построения интерфейса Node + Redux и интерфейса React + Redux для реальных приложений, используя тестовую разработку. : После прочтения этой статьи вы научитесь работать с загрузчиком изображений Webpack. : Это пошаговое руководство научит вас создавать свой собственный React + Redux проект с помощью Webpack и Babel. : Руководство по Webpack для продвинутых. : Webpack-песочница. : Автор сравнивает, как Grunt, Gulp, Broccoli и 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 файлов.
          • Руководство по оптимизации изображений: В статье рассматривается оптимизация для вывода сайта в топ, повышения производительности и работы с соцсетями. : Оптимизатор PNG. : Оптимизация JPEG без заметной потери качества.

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

            : Инструмент для транспилирования кода. : Как использовать Babel и какое будущее ждёт JavaScript.
            : Сервер для быстрого прототипирования : Модуль для отслеживания изменений в коде.
          • Руководство по 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.

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

            : Установка пакетов с их зависимостями. : Инструмент для оптимизации рабочего процесса управления многопортовыми репозиториями с помощью git и npm. : Пакетный менеджер Node.js для управления модулями и зависимостями.
            : Объединение нескольких файлов в один. : Преобразование в разные форматы. : Создание source-map для файлов в пакете. : Создание и использование source maps в commonjs на старых браузерах.

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

➤