Renelio
Зеленый человечек
Renelio
Зеленый человечек
- Регистрация
- 25 Май 2017
- Сообщения
- 225
- Реакции
- 78
Здесь собрано множество полезных инструментов для фронденд-разработчиков.
Автоматизированное тестирование, инструменты сборки, текстовые редакторы и т.д.
Автоматизированное тестирование
Это процесс, когда программные средства выполняют сценарии тестирования до выпуска продукта.
Сборник инструментов и экосистем для автоматизации процессов.
Инструмент для создания командной строки для JavaScript проектов.
Инструмент для автоматизации сложных процессов.
Сборщик модулей.
Здесь собраны текстовые редакторы для работы с исходным кодом веб-сайтов.
Инструменты для анализа и обработки CSS файлов.
Всё о написании, публикации и использовании документации.
HTML-инструменты
Инструменты для обработки HTML кода.
Инструменты для изменения и оптимизации изображений.
Инструменты для статистического анализа и обработки JavaScript файлов.
Средства для автоматизации процессов установки, обновления, настройки и удаления компонентов.
Инструменты для контроля за изменениями, чтобы в любой момент можно было вернуться к более ранним версиям кода.
Автоматизированное тестирование, инструменты сборки, текстовые редакторы и т.д.
Автоматизированное тестирование
Это процесс, когда программные средства выполняют сценарии тестирования до выпуска продукта.
- 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.
Инструмент для создания командной строки для JavaScript проектов.
- Руководство по Grunt: Шаблон по работе с инструкциями.
- Синхронное тестирование между браузерами/устройствами: Описание простого способа тестирования продукта на устройствах.
Инструмент для автоматизации сложных процессов.
- Часть 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.
Сборщик модулей.
- Изменение 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 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: Генерирует документацию из таблиц стилей.
HTML-инструменты
Инструменты для обработки HTML кода.
- html-inspector: Простой инструмент для анализа вашего HTML-кода.
- html-minifier: Инструмент для минимизации HTML-кода.
Инструменты для изменения и оптимизации изображений.
- ImageOptim-CLI: Универсальная утилита для оптимизации изображений.
- Jpegoptim: Программа для сжатия и оптимизации JPEG файлов.
- Руководство по оптимизации изображений: В статье рассматривается оптимизация для вывода сайта в топ, повышения производительности и работы с соцсетями.
- Pngcrush: Оптимизатор PNG.
- SMLR: Оптимизация JPEG без заметной потери качества.
Инструменты для статистического анализа и обработки JavaScript файлов.
- Babel: Инструмент для транспилирования кода.
- Full-Stack Redux руководство
- JavaScript Transpilers: что это и зачем: Как использовать Babel и какое будущее ждёт JavaScript.
- Closure Compiler: Инструмент, разработанный Google для сжатия и обфускации JavaScript.
- Flow: Инструмент для статистического анализа кода.
- JSCodeshift: Набор инструментов, помогающих в рефакторинге кода.
- Линтинг JavaScript кода: Процесс запуска программы для поиска возможных ошибок:
- 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 для управления модулями и зависимостями.
- combine-source-map: Объединение нескольких файлов в один.
- convert-source-map: Преобразование в разные форматы.
- generate-sourcemap: Создание source-map для файлов в пакете.
- source-map-cjs: Создание и использование source maps в commonjs на старых браузерах.
Инструменты для контроля за изменениями, чтобы в любой момент можно было вернуться к более ранним версиям кода.
- Git: Высокоэффективная система управления версиями.
- Стань гуру Git: Серия учебников по Git от Atlassian
- OctoLinker: Браузерное расширение, которое помогает работать с GitHub ссылками.
