15 полезных сервисов, чтобы сохранить нервы фронтендера: разметка, доступность и работа с картинками
Разработчик и автор пособия «Фронтенд — это не больно» Александр Беспоясов запустил в Twitter большой тред о полезных сервисах для разработчиков. Автор собрал все, чем пользуется сам и настоятельно рекомендует коллегам. Мы разделили подборку на три части. В первую вошли ресурсы для HTML-разметки и создания доступной среды, а также оптимизации изображений и работы с ними.
Разметка и доступность
1. Emmet
Генератор HTML-код из «CSS-селекторов».
Позволяет превратить это:
nav#navigation>li.menu-item\*2
В это:
<nav id="navigation">
<li class="menu-item"></li>
<li class="menu-item"></li>
</nav>
2. Can I Include
Подскажет, можно ли класть один тег в другой.
По словам Александра, он пользуется этим инструментом в сложных случаях, когда сомневается, можно ли класть, например, <label> в <p>.
3. HTML head
Содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow
Инструмент для обнаружения проблем с заголовками, их порядком и отображением.
Автор подборки проверяет им структуру разделов на странице и правильность видимых и скрытых заголовков.
5. Better Mobile Inputs
Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
Используется Александром для проверки наличия полезных атрибутов при верстки формы.
6. Weblind
Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
С помощью него автор сверяет во время верстки списки определений.
7. Inclusive Components
Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
Лайфхак от автора: с сайта можно «воровать» решения, адаптируя код под свои нужды.
8. Axe
Браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code
Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
Если вам надо сверстать письмо этот набор снипетов поможет сохранить нервы, уверен Александр.
10. How to Favicon in 2021
Статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator
Валидатор HTML-кода.
Инструменты для оптимизации и работы с картинками
1. Squoosh
Приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder
Кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG
Оптимизатор SVG. Содержит массу настроек. Позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview
Предпросмотрщик изображений для соцсетей.
Бонус: дебагер социзображения для Facebook.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: