Кастомные элементы с поддержкой форм на практике. Роб Левин делится опытом добавления поддержки Form-Associated Custom Element в библиотеку AgnosticUI с помощью ElementInternals API. Статья описывает две стратегии валидации: делегирование нативным элементам формы и реализацию валидации напрямую, с пошаговыми примерами для input, radio и combobox, включая проблемы изоляции Shadow DOM. #webcomponents #html

https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/

Нативные JSON-модули наконец-то стали реальностью. Мэтт Смит объясняет, как атрибуты импорта позволяют загружать JSON-файлы напрямую через import data from 'data.json' with { type: 'json' } без сборщика. Браузеры и рантаймы обрабатывают JSON-модули нативно с явным указанием типа, что избавляет от трансформаций на этапе сборки и закладывает основу для будущих типов модулей. #json #js

https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/

Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как инженеры Squarespace предложили loading="lazy" для элементов <video> и <audio>, работали с WHATWG, написали Web Platform Tests и сотрудничали с командами Mozilla, Apple и Chromium, чтобы фича стала официальным стандартом 23 марта 2026 года. #html #performance

https://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers

Великое расширение CSS. Павел Лаптев рассматривает CSS-фичи, заменяющие JavaScript-библиотеки: anchor positioning вместо Floating UI, Popover API и <dialog> вместо Radix, scroll-driven animations вместо GSAP, view transitions вместо Motion и кастомизируемый <select> вместо React Select. Вместе они могут убрать до 322 КБ JavaScript. #css #performance

https://blog.gitbutler.com/the-great-css-expansion

Выпуск №521. Никита Дубко и Полина Гуртовая про Container Timing, другую пользу Pretext, партизанскую доступность и взлом Axios.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:46 Container Timing
00:17:46 Другая польза Pretext
00:40:48 Партизанская доступность
01:05:19 Взлом Axios
01:30:49 Ответы на вопросы

Что такое CSS containment и как его использовать? Гарри Робертс объясняет недооценённую возможность CSS, позволяющую браузеру пропускать лишнюю работу по раскладке и отрисовке. Статья разбирает каждое значение contain (layout, paint, size, style), сокращения content и strict, а также content-visibility для ленивого рендеринга. Приводится пример OpenTable, где contain: strict сократил время раскладки с 11 до 2 мс, ограничив область с 4371 до 73 элементов. #css #performance

https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/

Как сделать так, чтобы вашей статьёй делились: советы из десяти лет курирования рассылки. Скотт Вандехей, который более десяти лет собирал фронтенд-ссылки, делится практическими советами: добавляйте Open Graph теги, используйте уникальное изображение для шеринга, пишите описательные заголовки, добавляйте краткую аннотацию, правильно настраивайте канонический URL и всегда указывайте дату публикации. #html #learn

https://cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation/

Новинки Chrome 147. View transitions на элементах позволяют запускать несколько анимаций одновременно. CSS-функция contrast-color() возвращает чёрный или белый цвет для максимального контраста. Свойство border-shape создаёт нестандартные формы рамок: многоугольники и круги. Также добавлены Math.sumPrecise для точных сумм, диапазон scroll для именованных таймлайнов, интерфейс CSSPseudoElement, ограничения доступа к локальной сети и XML-парсер на Rust. #chrome #browser

https://developer.chrome.com/release-notes/147

Под капотом нового фронтенда MDN. Лео Макардл рассказывает, как команда MDN заменила устаревшее React SPA на современную архитектуру с веб-компонентами и Lit. Новая система использует серверные компоненты для статической шаблонизации, лениво загружает интерактивные элементы как кастомные элементы и опирается на Baseline при выборе API. Результат: среда разработки стартует за 2 секунды вместо 2 минут. #mdn #webcomponents

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

Инвертированные темы с помощью light-dark(). Дейв Руперт объясняет, как реализовать адаптивное переключение тем с помощью CSS-функции light-dark() и стилевых выражений от контейнера. Техника использует атрибут data-theme="inverted" для автоматического переключения элементов в противоположную цветовую схему на основе настроек браузера. Всё работает в одном стилевом файле без дублирования. Для браузеров без поддержки есть JavaScript-полифил. #css #color

https://daverupert.com/2026/04/inverted-light-dark/

Выпуск №522. Алексей Симоненко, Никита Дубко и Вадим Макеев про новинки Chrome 147, проблемы CSS в Shadow DOM, стейт на CSS-анимациях и фронтенд MDN.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:30 Помощники, возвращайтесь
00:03:49 Новинки Chrome 147
00:35:31 Проблемы CSS в Shadow DOM
00:52:01 Стейт на CSS-анимациях
01:07:11 Фронтенд MDN

Прогрессивные веб-компоненты. Ариэль Салминен представляет Elena — опенсорсную библиотеку для создания веб-компонентов, которые сначала работают на HTML и CSS, а затем гидратируются с помощью JavaScript. Elena решает распространённые проблемы: сдвиги раскладки, проблемы доступности и слабую поддержку серверного рендеринга. Библиотека весит всего 2,6 КБ и включает более 1000 тестов со 100% покрытием кода. #webcomponents #js

https://arielsalminen.com/2026/progressive-web-components/

Динамический текст
Любопытный типографический приём из новой тайпскрипт-библиотеки: текст динамически подстраивается и пересчитывается без DOM и CSS. Техническое новшество в библиотеке открывает возможность по-новому поиграться со шрифтами. Не сильно верю, что это пригодится утилитарным сервисам, но, возможно, мы увидим интересные зрелищные приёмы на промо-сайтах.

Источник
#ui #типографика

Река
Роскошный территориальный брендинг: в русле реки Амазонки дизайнеры увидели формы букв. За наводку спасибо @Vohan_dsgn

Источник
#типографика

Таня Двенадцатова написала о прожарке.

— Она помогает улучшать разрабатываемые фичи и синхронизировать команды. Она похожа на совместное проектирование;
— Это еженедельная встреча на 1–1,5 часа. Лучше выбрать время в начале дня, когда все ещё свежи (самое то для креативных и аналитических задач);
— Докладчики записываются заранее: указывают, какую задачу решали, и добавляют ссылку на артефакт;
— На встрече они презентуют своё решение и отвечают на вопросы и критические замечания зрителей (обычно выстраивается очередь из поднявших руки);
— Вопросы и комментарии лучше не добавлять заранее. Так и комментирующие не тратят на это много времени, и дискуссия получается более живой;
— Обычно участвуют дизайнеры, исследователи, продакты и UX-редакторы, но заглядывают и представители бизнеса, методологи, маркетологи;
— Полезно фиксировать, о чём договорились во время прожарки, чтобы потом учесть это при доработке фичи;
— Участие в прожарке (и необходимость успешно её пройти) можно сделать обязательным шагом в процессе. Для прохождения прожарки может потребоваться несколько итераций;
— По отдельным фичам (незначительное влияние на клиентский путь, регуляторка) можно ограничиться прожаркой и не проводить пользовательское исследование, если зрителям всё было понятно;
— Важно донести, что это не повинность, а полезный процесс. Также это маркер атмосферы и культуры в коллективе.

#design_check

Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.

— Если товар закончился, но запланирована поставка, отображается кнопка «Доставить завтра». Полезно, если клиент готов подождать;
— Если информации о поставке нет, отображается кнопка «Привозите больше». Так можно оценить потенциальный спрос;
— При нажатии на неё появляется список аналогов, которые можно сразу добавить в корзину. Это повышает вероятность, что клиент выберет что-то взамен;
— Остатки товара, особенно если осталось мало, побуждают не отвлекаться от заказа;
— Выбрать количество товаров можно с помощью степпера (если надо изменить значение чуть-чуть), барабана (если значение через степпер выбирать долго), а если нужно нецелое число, есть текстовый ввод;
— Можно добавить комментарий сборщику;
— Если заказ будет получать кто-то другой, можно не только ввести его номер (или выбрать из списка контактов), но и узнать, как пройдёт дальнейшая коммуникация с получателем.

#cart #list #ecommerce

Настройка количества товаров с мусоркой

Иногда встречается такой дизайн элемента для настройки количества товаров в корзине, где вместо минуса рисуют мусорку — мол, товар уже удалится, а не просто уменьшится количество.

Сначала это кажется логичным, ведь уменьшение количества и удаление — разные вещи, и выглядеть должны по-разному. Возможно, кто-то из дизайнеров в этом видит возможность дополнительно предупредить об удалении. Наверное, кому-то просто кажется остроумной такая динамичность.

Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».

Короче, не рекомендую так делать. Элемент хуже узнаётся, ощущается нестабильным и не решает никакой задачи.