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

0
11918

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

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

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

  • 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.
  • Тестирование кодовой базы React & Redux: Руководством по тестированию кодовой базы React и Redux.
  • Пишем тестируемый код: Автор рассуждает о том, как писать код, чтобы его можно было тестировать.

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

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

Grunt

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

Gulp

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

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: Удобный инструмент для работы с препроцессорами и написания кода.
  • Stylelint: CSS-линтер, необходимый для того, чтобы избавиться от ненужного кода и сделать его красивым.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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: Высокоэффективная система управления версиями.
  • OctoLinker: Браузерное расширение, которое помогает работать с GitHub ссылками.