Инструменты веб-разработчика: сервисы и расширения, о которых в 2021 году должен знать каждый

Kate

Administrator
Команда форума
Оперативно проверить сайт или приложение, найти баги и улучшить проект веб-разработчикам помогут специальные сервисы и расширения. Мы собрали более 25 инструментов, упрощающих жизнь программисту.
Есть множество сервисов, с которыми создание кода из бесконечного поиска ошибок превратится в продуктивное и приятное занятие. Мы неоднократно писали про инструменты для веб-разработчиков и программистов, однако постоянно появляются новые. Представляем вниманию читателей актуализированный список.

Сервисы для работы с прототипами​

Proto.io​

Создать прототип веб-ресурса, провести юзабилити-тестирование, проверить работу блоков и их взаимодействие, безопасность проекта и многое другое поможет онлайн сервис Proto.io. Просмотр данных, а также навигация и проверка функциональности прототипа происходят непосредственно в браузере. Тут же можно вносить необходимые правки.

b4695f75af91572d45ee14f4d9b68dcf.jpg

Figma​

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

Инструменты для упрощения разработки​

Visual Studio Code (VSC)​




Редактировать, собирать и выполнять отладку исходного кода в VS Code можно на macOS, Windows и Linux. Есть навигация, адаптеры узлов и отладок, собственные репозиториии и поддержка Microsoft Azure, Node, React, Python, Angular, Veu.

4d742be4d6594850b0e16034b9e2fe0f.jpg

Для работы с JavaScript также подходит сервис Babel.

Progressive Web Apps (PWA)
Прогрессивное веб-приложение – это технология, которая преобразует визуальную и функциональную части сайта в мобильное приложение.

HUGO​

Генератор статических сайтов Hugo представляет собой программу для обработки структурированных исходных данных (медиафайлы, шаблоны, тексты) и генерирования файлов HTML, готовых к загрузке на сервер. Обработка данных осуществляет быстро, но взаимодействовать с программой нужно в режиме командной строки.

8546a08c210f6dad681daf7672e3410e.jpg

Sketch2Code​

Преобразовать нарисованный от руки макет сайта в код HTML способен Artificial Intelligence (AI) Sketch2Code. Разработка Microsoft упрощает процесс верстки, а также предлагает образцы дизайна страниц проекта.

5397dea52b326dccaedb385bc816ddf7.jpg

Yarn​

Сервис, созданный совместно специалистами Tilde, Facebook, Exponent и Google, упрощает сборку проектов. Yarn является альтернативой npm, притом работает быстрее аналога на 20%.

cce6ca15b15c4c2ef128eadd2d686bf9.jpg

GitHub package registry​

Сервис управления пакетами GitHub package registry поддерживает .Net (NuGet), JavaScript (npm), Ruby (RubyGams), Java (Maven) и Docker. Его функциональность постоянно расширяется, а на GitHub публикуют частные и публичные пакеты вместе с открытым кодом.

Сервисы для работы с медиафайлами​

FavIcon Generator​

Создать фавикон сайта поможет онлайн-сервис FavIcon Generator. В несколько кликов он позволяет делать иконки размером 16х16, 32х32 и 48х48 пикселей.

Orion Icon​

Библиотека Orion Icon предоставляет плоские, цветные, линейные и сплошные иконки на различные тематики. Доступны файлы SVG и векторная графика. Преимущество сервиса заключается в возможности создать свою коллекцию под конкретный проект.

d9c863864b1ee0721ab016d26d2852fe.jpg

Fontello​

Генератор Fontello создает иконки в формате веб-шрифтов. На странице онлайн-сервиса представлены значки, которые можно редактировать и настраивать, формируя коллекцию для собственного проекта.

Фотохостинги​

Ресурсы с фотографиями и видео в высоком качестве:

· Flickr с 2004 года используют для хранения и использования цифровых фотографий и видеоматериалов.

· Pexels позволяет скачать изображение даже незарегистрированным пользователям.

· 500px на нем представлены работы профессиональных фотографов.

Сервисы для тестирования​

Firebug​

Плагин Firebug для браузера Firefox дает разработчикам возможность провести мониторинг, отладку и редактирование кода JavsScript, CSS и HTML.

Jest​

Протестировать код на JavaScript позволяет фреймворком Jest. Сервис поддерживает проекты на Vue, Babel, React, TypeScript, Angular, Node и т.д.

PerfectPixel​

Расширение для Chrome PerfectPixel помогает выполнить попиксельное сравнение макета сайта с имеющимся проектом. Полупрозрачное изображение отражается поверх страницы HTML упрощая проверку качества верстки.

Funkify​

Увидеть сайт глазами людей с ограниченными возможностями можно при помощи Funkify для браузера Chrome.

Расширение поддерживает несколько роботов-симуляторов:

· Blurry Bianca при помощи foggy filter предоставляет размытую картинку.

· Color Carl поддерживает фильтры для разных типов дальтонизма.

· Dyslexia Dani имитирует «танцующие» буквы в словах.

· Trembling Trevor показывает движение неконтролируемого курсора мыши.

· Tunnel Toby демонстрирует картинку глазами людей с тоннельным зрением (радиальным и прямоугольным).

· Peripheral Pierre позволяет настраивать режимы слепоты и размеры пятна (области, которую не воспринимает глаз).

· Elderly Ellen одновременно показывает размытую картинку с плохим контрастом и плохо контролируемым курсором.

· Sunshine Sue отображает картинку, как если бы на экран светило солнце (предусмотрено 3 режима настройки).

· Hyperactive Henny поддерживает визуализацию множества всплывающих вкладок, разных звуков и меняющихся настроек сайта.

· Keyboard Kim скрывает курсор – управлять перемещением по вкладке нужно при помощи клавиатуры.

· Robot Robin показывает, какие настройки есть на странице.

На протяжении четырех дней вся функциональность доступна бесплатно, а для дальнейшего использования нужно заплатить $4,99 за месяц. В платной версии есть настройки симуляторов, возможность создания собственных тренажеров и т.д.

640ad523481bb8d995e91ce34e273d93.jpg

Endtest​

Интеллектуальная платформа Endtest для автоматизированного тестирования работает с Safari, Chrome, Edge и Firefox. На официальном сайте есть инструкции по созданию тестов веб-приложений и мобильных приложений, информация о расширенных настройках и способах размещения результатов на разных платформах (Slack, GitHub, Jenkins, Jira и других).

Load Impact​

Облачный сервис генерирует тестовую нагрузку при большом объеме трафика для сайтов, веб-приложений, мобильных приложений и разнообразных API. При необходимости Load Impact эмулирует одновременное посещение ресурса более чем миллионом пользователей.

BugHerd​

Выполнить дебаггин сайта на стадии разработки поможет BugHerd. Инструмент анализирует связи между пользователем и сервером. В случае ошибки передачи данных, разработчик получит развернутое описание неисправности и отчет по стабильности системы. BugHerd – облачный сервис, что упрощает синхронизацию работы географически распределенной команды. В настройках есть функции фильтрации и сортировки, делегирования задач, установки приоритетов и уровней доступа. Доступна возможность общения и обмена отзывами внутри команды. Оценить функциональность сервиса можно в бесплатной версии, а затем придется платить $29 в месяц.

Website Vulnerability Scanner​

Проверить уязвимости сайта позволяет разработанный в Pantest-Tools онлайн-инструмент Website Vulnerability Scanner. Он проверяет ресурс по ссылке и генерирует отчет.

92180f03c9ab0dac06b30c1ef68b7b22.jpg

Инструменты для проверки конверсии ресурса​

Google Lighthouse​

Для проверки качества веб-проекта подойдет Google Lighthouse. Оно автоматически оценит качество поисковой оптимизации, уровень производительности и доступности сайта, а также сгенерирует детальные отчеты по результатам теста с рекомендациями по улучшению показателей.

LuckyOrange​

Отследить поведение быстро покинувшего сайт пользователя позволяет Lucky Orange. Сервис с тепловыми картами воспроизводит действия человека внутри сессии и анализирует проблемы, которые мешают удерживать внимание аудитории. В аналитическом блоке можно посмотреть историю серфинга посетителя, количество просмотров, способ попадания на ресурс, эффективность ключевых фраз, манеру поведения человека, страну проживания, поддерживаемые браузером языки и другие показатели.

Meta Tags​

Инструмент Meta Tags проверяет наличие метаданных сайта и сгенерирует их для Twitter, Linkedin, Facebook, Punterest, Slack, Google. Сервис необходим для SEO-настройки проекта, которая привлечет больше посетителей.

Источник статьи: https://proglib.io/p/instrumenty-ve...h-v-2021-godu-dolzhen-znat-kazhdyy-2021-02-27
 
Сверху