15 полезных инструментов для веб-разработки в 2021 году

Команда ThemeSelection опубликовала в блоге на dev.to список из 15 полезных инструментов для веб-разработки в 2021 году, которые упростят работу. Вот они. 

#1 Devhints.io

Ресурс с набором готовых сниппетов с популярными фрагментами кода, конфигурациями и командами. Девианты могут пригодиться, если нужно быстро освежить знания или избежать поиска в Google и темах на Stack Overflow. Если на сайте нет нужного сниппета, можно попросить автора добавить его. 

#2 Bootstrap cheatsheet

Интерактивный список классов, переменных и миксинов Bootstrap 5. Поможет найти различия между Bootstrap 4 и Bootstrap 5. 

Ресурс нацелен на большое сообщество пользователей Bootstrap, которым сложно искать классы, переменные и миксины. 

Ключевые функции:

• Поиск классов, переменных и миксинов;
• Предварительный просмотр HTML и сниппета кода в реальном времени;
• Обновление сниппета кода на ходу;
• Легкое копирование сниппета кода и его использование.

#3 Carbon

Инструмент для создания фрагмента кода в виде изображения. Приложение поддерживает множество языков и имеет готовый набор тем, благодаря которым можно модифицировать сниппет.

#4 Google Lighthouse

Автоматизированный инструмент с открытым исходным кодом для измерения качества веб-страниц: производительность, доступность и поисковую оптимизацию. 

#5 Meta Tags

Инструмент для проверки метатегов веб-сайта.

#6 frontendchecklist.io

Ресурс содержит список из 88 пунктов, которые следует учитывать при создании веб-сайта. Дополнительным преимуществом, по мнению автора подборки, является возможность создавать собственные списки и отчеты.

#7 Gitignore.io

Инструмент для создания файла .gitignore. Для использования нужно предоставить программе информацию об информационной системе или среде разработки. 

#8 Regex101

Приложение предлагает инструкцию по созданию регулярных выражения (с объяснениями) и готовую среду для написания и тестирования выражений. 

#9 Ngrok

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

Простая установка и настройка. Есть платный контент, которые предлагает множество расширенных возможностей, например, создание белого списка с IP-адресами или создание поддоменов.

#10 Nibbler

Бесплатный онлайн-инструмент для сканирования веб-сайта. Предоставляет отчет с оценкой веб-сайта по ключевым областям, включая доступность, SEO, социальным сетям и технологиям. 

#11 What the web can do today

Инструмент позволяет проверить, какие API-интерфейсы доступны в используемом браузере. После выбора API приходит набор инструкций по использованию. Есть доступ к данным и диаграммам, показывающим, как выглядит поддержка браузером данных API. 

#12 Website Vulnerability Scanner

Бесплатный онлайн сканер уязвимостей, разработанный Pentest-Tools. Для работы нужно просто ввести свой URL-адрес, после чего инструмент сгенерирует подробный отчет о безопасности. 

#13 CSSreference.io

Доступная, краткая и написанная понятным языком документация по CSS. Для каждого свойства есть изображение или анимация с примером. 

#14 Tinypng

Использует интеллектуальные методы сжатия с потерями, чтобы уменьшить размер файлов PNG. За счет выборочного уменьшения количества цветов в изображении для хранения данных требуется меньше байтов. Эффект практически незаметный, но он сильно влияет на размер файла. 

#15 Clip path marker

Автоматически генерирует CSS-код с помощью инструмента clip-path для создания пользовательских фигур с помощью CSS.