Постоянными спутниками любого фронтендера являются браузер, редактор кода и Git. Однако для эффективной работы разработчику требуется использовать много сторонних инструментов. Некоторые из них предназначены для решения или упрощения целого спектра задач, а другие нацелены только на одну-две. Опытные разработчики используют несколько таких инструментов, что позволяет писать код быстрее и допускать меньше ошибок.
Для удобства инструменты будут поделены на несколько групп в зависимости от классификации решаемой задачи. С их помощью можно быстрее проверить валидность верстки, ее адаптивность, оптимизировать изображения, настроить типографию текста и так далее.
Проверка стандартов верстки
Верстка готового сайта перед окончательным запуском должна соответствовать определенным общепринятым стандартам. Хотя это и не является обязательным для успешного SEO-продвижения, ошибки в HTML-разметке могут приводить к некорректному отображению некоторых компонентов сайта на разных разрешениях, что уже может повлиять на ранжирование в выдаче крупных поисковиков. Даже если невалидная верстка корректно отображается на всех устройствах, ее будет неудобно обслуживать в будущем, что может привести к дополнительным расходам для клиента.
С помощью специальных инструментов разработчик может не только проверить валидность своей верстки, но и получить некоторые советы или хотя бы объяснение, почему это нужно сделать так, а не иначе. Представленные ниже варианты используются для проверки всей верстки, свойств, поддерживаемых браузером, допустимости использования вложенных тегов в тех или иных ситуациях.
Инструмент 1: Валидатор W3C
Создан международной организацией The World Wide Web Consortium (W3C) в соответствии с ее собственными стандартами валидности HTML-верстки. Здесь можно сразу же проверить готовый код на валидность. Доступно три варианта загрузки - по ссылке на сайт, через загрузку файлов или прямым вводом кусков HTML-кода. По завершении проверки будут показаны обнаруженные проблемы в верстки, а также предупреждения, плюс, даны определенные рекомендации по их устранению.
Интерфейс валидатора W3C
Инструмент 2: Can I use
Не все браузеры способны поддерживать те или иные свойства в HTML или CSS, особенно, если речь идет о новых технологиях, которые не начали массово внедряться или начале делать это недавно. Сервис Can I use как раз позволяет проверить поддержку того или иного инструмента. Работает с HTML, CSS, JavaScript. Разработчику просто нужно ввести в поиск свойство, поддержку которого требуется проверить или выбрать его из предложенного списка на главной странице. Обычно в список попадают самые популярные новые технологии, которые только начинают внедряться.
Интерфейс Can I use
Инструмент 3: Can I include
Чем-то похож на предыдущий инструмент, но только его задача проверить допустимость вложения того или иного тега в другой тег. Can I include предоставляет подробные объяснения и ссылки на техническую документацию по искомым тегам. Разработчику стоит только ввести в левое поле вкладываемый тег, а в правое родительский. Дополнительно, помимо объяснений, почему можно или нельзя вкладывать указанные теги друг в друга, будет указана их поддержка в разных версиях популярных браузеров.
Результат проверки вложенности тегов в Can I include
Работа с версткой и стилями
Эта категория инструментов позволяет посмотреть, как будет выглядеть готовая верстка в разных веб-браузерах, создать или проработать HTML-структуру страниц, проверить соответствие макета концепции Pixel Perfect.
Инструмент 1: BrowserStack
Предназначен для проверки отображения готовой верстки в самых популярных браузерах. Потребуется зарегистрироваться, чтобы воспользоваться данным сервисом. Регистрация и использование по умолчанию бесплатны, но доступна платная подписка. Она предлагает дополнительные инструменты проверки, в том числе и валидности кода, в автоматическом режиме и автоматизации некоторых других процессов.
Ссылка на главную страницу BrowserStack
Главная страница BrowserStack
Инструмент 2: Генератор HTML-дерева
Позволяет быстро задокументировать HTML-структуру проекта в виде дерева. Инструмент очень прост в работе - вставляете код в одно окно и получаете результат в соседнем. Также показывается количество уровней и предупреждения об ошибках и неполадках, если таковые обнаружены в коде.
Ссылка на Генератор HTML-дерева
Результат генерации HTML-дерева
Инструмент 3: Плагин PerfectPixel
Плагин для большинства популярных браузеров, позволяющий просматривать соответствие готовой верстки концепции PerfectPixel. Суть очень простая - происходит наложение картинки дизайн-макета на готовую верстку и ее выравнивание с помощью инструментов плагина. Поддерживается работа с несколькими слоями, их взаимное перекрытие и блокировка, что позволяет лучше калибровать верстку.
Главная страница плагина PerfectPixel
Страница загрузки плагина Perfect Pixel
Инструмент 4: Плагин CSS Peeper
Продвинутый плагин для Google Chrome. С его помощью можно снимать данные CSS-стилей на странице - цвета, картинки, отступы и так далее. Для этого не требуется открытие каких-то дополнительных инструментов разработчика. Также этот инструмент может быть очень полезен тем, кто только обучается верстке, так как позволяет быстро посмотреть реализацию того или иного стилистического решения на разных сайтов без необходимости сохранять страницу и открывать ее в редакторе.
Ссылка на скачивание плагина CSS Peeper
Улучшение работы с кодом
В список инструментов этой категории попали сервисы, но не плагины и дополнительные инструменты для редакторов кода. В блоге уже есть статья, где все это рассматривается для Visual Studio Code. Многие рассмотренные решения есть также и для других редакторов кода. Предложенные ниже инструменты помогут оптимизировать процесс написания кода для создания интерактивного сайта с использование JavaScript и его популярных библиотек.
Инструмент 1: JavaScript Event KeyCodes
Удобный инструмент для быстрого получения key-кода любой клавиши на клавиатуре. Он может пригодиться для реализации интерактивных страниц, где важно нажатие клавиш для взаимодействия с пользователем, например, когда для проигрывания анимации или какого-то сценария нужно нажать определенную клавишу. Для корректного определения key-кода достаточно просто нажать на нужную клавишу на сайте JavaScript Event KeyCodes.
Определение key-кода клавиши в JavaScript Event KeyCodes
Инструмент 2: Regex 101
Расширенная онлайн-библиотека регулярных выражений. Она не подключается к проекту, так как предоставлена для быстрой проверки оптимизации выражений. Оснащена удобным встроенным редактором кода. Поддерживает язык программирования: Python, PHP, JavaScript, Java, Golang. Также в настройках проверки можно выбрать тип используемой функции: список, математическая операция, Unit-тест и так далее.
Интерфейс Regex 101
Инструмент 3: JSON Formatter & Validator
Помогает в формировании и валидации JSON. Разработчику нужно передать на вход неформатированный JSON, а на выходе получить отформатированный. Также инструмент помимо форматирования выполнит проверку валидности по по трем разным RFC и ECMA-404. В настройках можно задать параметры форматирования, выполнения валидации, а также автоматическое исправление или предложение исправлений найденных ошибок.
Ссылка на JSON Formatter & Validator
Интерфейс JSON Formatter & Validator
Инструмент 4: JSON Placeholder
Этот инструмент можно использовать для тестирования проектов, когда нужно заполнить формы или другие элементы фейковыми данными. Подключить его к своему проекту можно, следуя специальной инструкции, находящейся на главной странице сайта разработчиков. Там же представлена техническая документация по использованию инструмента, правда, доступна она только на английском языке.
Главная страница JSON Placeholder
Инструмент 5: Bundlephobia
Позволяет быстро проверить, какие зависимости притянет npm-пакет. Есть возможно загрузить полностью файл package.json для более детальной проверки зависимостей, однако эта возможность пока реализована только в качестве бета-версии, поэтому может работать не совсем корректно.
Интерфейс Bundlephobia
Инструменты для работы с графикой
Они пригодятся как фронтенд-верстальщикам, так и дизайнерам. В основном в перечень данных инструментов входят сервисы сжимания изображений, быстрой подгонки под размеры, склейки и так далее. Они пригодятся в том случае, если нужно быстро оптимизировать картинки или привести их к определенному стандарту, а тратить время на работу в графических редакторах не хочется.
Инструмент 1: Squoosh
Сервис предназначен для оптимизации размера изображений с минимальными потерями в качестве. В правой части интерфейса редактора расположена панель управления с бегунком настройки качества преобразованной картинки. Там же можно выбрать наиболее подходящий алгоритм преобразования и настроить дополнительные параметры. Увидеть визуальную разницу можно с помощью специального переключателя.
Работа с изображением в Squoosh
Инструмент 2: Image Upscaler
Работает на основе нейросети, которая увеличивает размер изображение, стараясь при этом максимально сохранить его качество. Собственно, основная задача инструмента увеличить загружаемое изображение на заданный процент или какой-то фиксированный размер, не допустив при этом значительных потерь в качестве. Также он умеет удалять артефакты с JPEG.
Инструмент 3: SVGOMG
Предназначен для оптимизации SVG-изображений и очистки их от разного рода мусора. Доступно множество параметров для настройки, которые появляются непосредственно после загрузки SVG-изображения. Вы можете наблюдать их применение в режиме реального времени и при необходимости сбросить изменения.
Работа с изображением в SVGOMG
Инструмент 4: SVG to bg
Онлайн-конвертер SVG в CSS-код для дальнейшего использования в верстке, например, в качестве фонового изображения или простых иконок. К сожалению, конвертация происходит не совсем в автоматическом режиме. На сайте представлена подробная инструкция правильной конвертации на нескольких языках, в том числе и русском.
Инструмент 5: Flaticon
Библиотека бесплатных иконок на все случаи жизни и всех основных стилистических направлений. Помимо иконок также представлено несколько наборов стикеров. Все они распространяются в SVG или PNG на полностью бесплатной основе. Хотя на сайте и есть премиум-подписка для доступа к некоторым icon-пакам, но таких меньшинство.
Каталог иконок в Flaticon
Инструмент 6: Unsplash
Популярный у многих верстальщиков фотосток с изображениями, распространяемыми по лицензии формата CC0, то есть полностью бесплатно. Однако главное преимущество у этого решения - наличие собственного API, который можно встроить в проект и автоматизировать установку изображений.
Инструмент 7: Lorem Picsum
Рекомендуется к использованию в проектах, находящихся на стадии разработки. Название не просто так дает отсылку к Lorem Ipsum - инструмент способен генерировать случайные изображения хорошего качества и вставлять их в проект. Там можно выбрать подходящий размер картинок, а также их тематику, если это важно. На сайте находится инструкция подключения инструмента к HTML-файлу страницы.
Инструмент 8: Favicon Generator
Главное предназначение - генерирование иконок как на основе загружаемых изображений, так и через ссылку на выложенный сайт. Инструмент создает фавикон подходящего формат и размера. Разработчику остается только подключить его к проекту.
Главная страница Favicon Generator
Инструмент 9: Eye Dropper
Расширение для основных браузеров, которое позволяет брать образцы цвета с любой страницы открытой в конкретном веб-обозревателе. Достаточно выбрать инструмент в панели браузера, переключиться на пипетку и взять образец цвета. В окошке расширения будут показаны данные выбранного цвета, в том числе стандартные HEX и RGB(a).
Ссылка на главную страницу Eye Dropper
Главная страница Eye Dropper
Инструмент 10: Remove.bg
Онлайн-инструмент на основе нейросетей, предназначенный для удаления фона у изображений. Умеет выделять основной объект и убирать фоновые. Правда, работает не всегда корректно, поэтому его удобно использовать только в том случае, когда точно определен основной объект или объекты и они не сливаются с фоном. Инструмент можно использовать как онлайн, так и интегрировать в свою рабочую среду, следуя инструкциям на сайте.
Главная страница Remove.bg
Работа с текстом
Данная категория инструментов нацелена на приведение текста к единому стандарту и быструю конвертацию его из документов Word или Google в HTML для последующей вставки в файлы проекта. Они будут интересны в первую очередь редакторам, которые работают в гуглдоках и хотят сразу получать нормальный HTML или markdown для вставки на сайт.
Инструмент 1: Типограф
Позволяет быстро привести текст к единому форматированию. В основном это касается тире, кавычек, скобок, пробелов и других типографских элементов. Форматирование предварительно можно настроить под свои потребности.
Главная страница Типографа
Инструмент 2: md2html
Онлайн-конвертер и заодно текстовый редактор. Основная задача - преобразование markdown-документов в HTML. Все происходит достаточно быстро, плюс, удаляет различный технический мусор в виде лишних тегов, который может присутствовать в тексте.
Пример работы конвертера md2html
Заключение
Используя эти инструменты, разработчик сможет значительно оптимизировать процесс верстки проекта. Конечно, часть из них может вам не пригодится совсем, но, как минимум, использование по одной штуки из каждой категории, поможет значительно сократить время на разработку. Их основное удобство в том, что большинство из них можно использовать онлайн, без необходимости добавления в качестве плагина для редактора кода или браузера.
Добавить комментарий: