15 полезных сервисов, чтобы сохранить нервы фронтендера: разметка, доступность и работа с картинками
Разработчик и автор пособия «Фронтенд — это не больно» Александр Беспоясов запустил в Twitter большой тред о полезных сервисах для разработчиков. Автор собрал все, чем пользуется сам и настоятельно рекомендует коллегам. Мы разделили подборку на три части. В первую вошли ресурсы для HTML-разметки и создания доступной среды, а также оптимизации изображений и работы с ними.
Генератор HTML-код из «CSS-селекторов».
Позволяет превратить это:
nav#navigation>li.menu-item\*2
В это:
<nav id="navigation">
<li class="menu-item"></li>
<li class="menu-item"></li>
</nav> Подскажет, можно ли класть один тег в другой.
По словам Александра, он пользуется этим инструментом в сложных случаях, когда сомневается, можно ли класть, например, <label> в <p>.
Содержит список всего, что может быть в <head> страницы.
Инструмент для обнаружения проблем с заголовками, их порядком и отображением.
Автор подборки проверяет им структуру разделов на странице и правильность видимых и скрытых заголовков.
Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
Используется Александром для проверки наличия полезных атрибутов при верстки формы.
Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
С помощью него автор сверяет во время верстки списки определений.
Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
Лайфхак от автора: с сайта можно «воровать» решения, адаптируя код под свои нужды.
Браузерный плагин для комплексной проверки доступности страниц.
Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
Если вам надо сверстать письмо этот набор снипетов поможет сохранить нервы, уверен Александр.
Статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
Валидатор HTML-кода.
Приложение, CLI и API для оптимизации графики.
Кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
Оптимизатор SVG. Содержит массу настроек. Позволяет ужимать неоптимизированные SVG в десятки раз.
Предпросмотрщик изображений для соцсетей.
Бонус: дебагер социзображения для Facebook.
Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за…
Япония сама по себе — сплошной киберпанк. Это заметил даже культовый писатель жанра Уильям Гибсон,…
Сам по себе телефон Айфон 17 Про Макс – отличный подарок. У него красивая заводская…
На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…