Forwarded from For Web — фронтенд, дизайн, программирование
SSSVG, справочник по основным возможностям SVG с интерактивными примерами → https://fffuel.co/sssvg/
Forwarded from For Web — фронтенд, дизайн, программирование
Отзывчивая вёрстка в 2023 году: Ахмад Шадид рассказывает о современных возможностях CSS, изменивших подход к отзывчивой вёрстке → https://ishadeed.com/article/responsive-design/
Forwarded from На фронте - javascript, html, css
Что нового завезли в DevTools (Chrome 111)
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
https://habr.com/ru/post/717800/
#js #ru
💬 Чат фронтендеров
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
https://habr.com/ru/post/717800/
#js #ru
💬 Чат фронтендеров
Forwarded from For Web — фронтенд, дизайн, программирование
Современная вёрстка email-писем (без таблиц!): обзор текущего состояния email-клиентов, их возможностей и новых подходов к вёрстке писем → https://fullystacked.net/posts/modern-html-email/
Forwarded from xCode Journal
Общие
Emmet — Генератор HTML-код из «CSS-селекторов»
Can I Include — Подскажет, можно ли класть один тег в другой по правилам семантики
HTML head — Содержит список всего, что может быть в <head> страницы
W3C Validator — валидатор HTML-кода
HEX to RGB — конвертер цветов между разными цветовыми схемами
Доступность
Axe — Браузерный плагин для проверки доступности страниц
Weblind — Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
Inclusive Components — Готовый код слайдеров, аккордеонов и других компонентов с упором на доступность
Logical Content Flow — Инструмент для обнаружения проблем с заголовками, их порядком и отображением
Better Mobile Inputs — Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах
Работа с изображениями
Squoosh — Сжатие изображений без потери качества
SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background в css
SVG OMG — оптимизатор SVG
How to Favicon — Чеклист о том, как добавлять фавиконку на сайт без лишнего кода
Работа с письмами
Good Email Code — Справочник по «пуленепробиваемой» верстки писем
Ставь 🔥 если нашел для себя что-то полезное
@vollex_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from xCode Journal
Общие
Emmet — Генератор HTML-код из «CSS-селекторов»
Can I Include — Подскажет, можно ли класть один тег в другой по правилам семантики
HTML head — Содержит список всего, что может быть в <head> страницы
W3C Validator — валидатор HTML-кода
HEX to RGB — конвертер цветов между разными цветовыми схемами
Доступность
Axe — Браузерный плагин для проверки доступности страниц
Weblind — Содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
Inclusive Components — Готовый код слайдеров, аккордеонов и других компонентов с упором на доступность
Logical Content Flow — Инструмент для обнаружения проблем с заголовками, их порядком и отображением
Better Mobile Inputs — Поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах
Работа с изображениями
Squoosh — Сжатие изображений без потери качества
SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background в css
SVG OMG — оптимизатор SVG
How to Favicon — Чеклист о том, как добавлять фавиконку на сайт без лишнего кода
Работа с письмами
Good Email Code — Справочник по «пуленепробиваемой» верстки писем
Ставь 🔥 если нашел для себя что-то полезное
@vollex_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from For Web — фронтенд, дизайн, программирование
Введение в CSS-маски: Ахмад Шадид объясняет основы использования масок в CSS и делится практическими примерами их применения → https://ishadeed.com/article/css-masking/
Forwarded from For Web — фронтенд, дизайн, программирование
CSS-медиафичи для улучшения доступности: Татьяна Фокина с обзором пользовательских настроек вроде отключения анимаций, которые стоит учитывать в вёрстке → https://tatiana-fokina-blog.ru/posts/css-media-features-for-a11y/
Forwarded from For Web — фронтенд, дизайн, программирование
Перевёрстка блока новостей Vox news на современном CSS: эксперимент Ахмада Шадида по применению гридов, медиавыражений от контейнера и других современных возможностей CSS → https://ishadeed.com/article/rebuild-featured-news-modern-css/
Forwarded from For Web — фронтенд, дизайн, программирование
Анимации, управляемые прокруткой: введение в новые нативные API для анимаций и демонстрация их возможностей → https://developer.chrome.com/articles/scroll-driven-animations/
Forwarded from For Web — фронтенд, дизайн, программирование
Почему большая DOM плохо влияет на быстродействие, как измерять размер DOM и какие подходы использовать для предотвращения проблем → https://web.dev/dom-size-and-interactivity/
Forwarded from For Web — фронтенд, дизайн, программирование
Что нового в разработке веб-интерфейсов в 2023 году: обзор наиболее интересных и полезных свежих браузерных API и возможностей CSS, представленных на Google I/O → https://developer.chrome.com/blog/whats-new-css-ui-2023
Вдогонку 52 видео с веб-трека Google I/O → https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h
Вдогонку 52 видео с веб-трека Google I/O → https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h
Forwarded from For Web — фронтенд, дизайн, программирование
Верстаем письма на React: инженеры Yelp рассказывают, как они адаптировали для разработки писем привычные их фронтендерам инструменты вроде React и Storybook → https://engineeringblog.yelp.com/2022/07/writing-emails-using-react.html
Forwarded from For Web — фронтенд, дизайн, программирование
Cворачиваемые вложенные списки без JS: современное руководство по вёрстке деревьев на HTML/CSS с хорошей семантикой и полноценной навигацией с клавиатуры → https://iamkate.com/code/tree-views/
Forwarded from For Web — фронтенд, дизайн, программирование
Введение в popover API, новый API для всплывающих элементов, нативно решающий большинство проблем вроде позиционирования поверх страницы, управления фокусом, закрытия при нажатии Escape → https://developer.chrome.com/blog/introducing-popover-api/
Forwarded from For Web — фронтенд, дизайн, программирование
Давние желания, сбывающиеся благодаря scroll-driven анимациям: стилизация sticky-элементов в состоянии прилипания, появление и скрытие тени при прокрутке, оглавление с подсветкой текущей секции. Роман Комаров экспериментирует с новой CSS-фичей → https://kizu.dev/scroll-driven-animations/
Forwarded from For Web — фронтенд, дизайн, программирование
Улучшаем UX сообщений об ошибках: обзор практических приёмов с примерами и постер-шпаргалка в PDF → https://www.nngroup.com/articles/error-message-guidelines/
Forwarded from For Web — фронтенд, дизайн, программирование
Новые единицы измерения вьюпорта в CSS: решение для вёрстки, учитывающей скрытие адресной строки в мобильных браузерах → https://ishadeed.com/article/new-viewport-units/
Forwarded from Веб-стандарты (Веб-стандарты)
Дебаг сдвигов раскладки. Кейти Хемпениус показывает, как найти причины прыжков контента во время загрузки страницы.
https://web.dev/debug-layout-shifts/
https://web.dev/debug-layout-shifts/
Forwarded from Веб-стандарты (Веб-стандарты)
Доступный переключатель. Китти Жирадель делится реализацией переключателя, который основан на чекбоксе, легко кастомизируется, поддерживает выключенное состояние и может работать без CSS.
https://kittygiraudel.com/2021/04/05/an-accessible-toggle/
https://kittygiraudel.com/2021/04/05/an-accessible-toggle/
Forwarded from Веб-стандарты (Веб-стандарты)
Список инди-сайтов по фронтенду. Пополняемая коллекция живых блогов или проектов на русском или английском, на своих доменах и со ссылками на RSS. Предложить сайт в список можно через пулреквест.
https://github.com/web-standards-ru/indie-list
https://github.com/web-standards-ru/indie-list