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.
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…