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.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…