Реф-копилка: разбираем сильные дизайн-решения проектов финтеха

Каждый месяц 3D-дизайнер Серёжа студии maryco собирает подборку с самыми любопытными проектами из интернет-просторов. Обсуждают их сильные стороны, рассуждают, что можно улучшить, а что забрать на рефборд. Сегодня рассмотрят свежие 3D-проекты финтеха, а именно российских банков.

Читать на DSGNERS! | #статьи

кому-то очень хотелось анимировать стул и теперь мы на это смотрим.

Выпуск №516. Никита Дубко и Вадим Макеев про новинки Firefox 148, ленивую загрузку медиа, перфоманс <img> и сжатие со словарями.

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

00:01:30 Новинки Firefox 148
00:25:40 Ленивая загрузка медиа
00:41:25 Перфоманс img
01:22:39 Сжатие со словарями
01:46:15 Ответы на вопросы

Нативная случайность в CSS. Альваро Монторо разбирает random() и random-item(), две новые CSS-функции из Values and Units Module Level 5. random() возвращает значение в заданном диапазоне с опциональным шагом, а random-item() выбирает из списка дискретных значений. Обе функции поддерживают параметры совместного использования для корреляции результатов между свойствами и элементами. Пока частичная поддержка есть только в Safari 26.2. #css #safari

https://alvaromontoro.com/blog/68092/native-random-values-in-css

Как задать цвет темы для Safari 26. Мартин Грубингер рассказывает, что Safari 26 отказался от <meta name="theme-color"> и теперь определяет цвет интерфейса по фону body или фиксированного элемента вверху страницы. В статье предложен трюк на scroll-driven анимациях: скрытый фиксированный элемент сохраняет нужный цвет, пока не уходит из вида при прокрутке. Подход не работает, если страница перезагружается не в начальной позиции прокрутки. #safari #css

https://grooovinger.com/notes/2026-02-27-safari-26-header-background

Словарное сжатие наконец здесь, и результаты впечатляют. Тим Перри объясняет, как Compression Dictionary Transport работает с Zstandard и Brotli поверх HTTP: предыдущие ответы используются как словари для сжатия данных почти до размера дельт. JS-бандлы YouTube уменьшаются до 90% по сравнению с Brotli, HTML поиска Google — почти на 50%. Уже используется в Google, Shopify, Pinterest и Notion. Chrome 130+, Safari и Firefox на подходе. #performance #http

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

Новый мета-тег для поддержки масштабирования текста на мобильных. Мануэль Матузович показывает элемент <meta name="textscale"> — предложение, которое позволяет сайтам учитывать настройки размера текста ОС на мобильных устройствах. Относительные единицы em и rem масштабируются с настройками пользователя, а пиксельные значения остаются без изменений. Пока доступно только в Chrome Canary. Firefox уже реагирует на настройки ОС, но масштабирует весь вьюпорт целиком. #html #a11y

https://youtu.be/XVIgKEOVfVg

Слишком ранний брейкпоинт. Ахмад Шадид объясняет, почему многие сайты переключаются на мобильную раскладку слишком рано. На примерах Time и TechCrunch он показывает, как дизайн ломается в сплитах, на планшетах и в превью ссылок iOS. Решение: промежуточные брейкпоинты, выражения от контейнера и гибкие раскладки на гридах и флексах, которые подстраиваются под доступное пространство. #css #layout

https://ishadeed.com/article/too-early-breakpoint/

Выпуск №517. Лёша Красиков, Полина Гуртовая, Нина Торгунакова, Никита Дубко про прототип focusgroup, запись видео в Replit, а также большой холивар про Tailwind.

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

00:01:52 Прототип атрибута focusgroup
00:17:20 Запись видео в Replit
00:32:21 Докатились до Tailwind
00:51:32 (Не)удобство Tailwind
01:22:20 Tailwind на практике
01:39:31 Альтернативы и будущее

CodePen 2.0 вышел в публичную бету. У пенов теперь своя файловая система с папками, новый блочный процесс сборки, где можно комбинировать технологии без конфигурации, совместная работа в реальном времени по приглашению, омнибар для быстрого доступа к файлам и командам, а также настоящие настройки приватности с паролями и доступом только по приглашению. Без установки, без командной строки, без сложной настройки. #tools #css

https://codepen.io/beta

SVG в вебе: сравнение скорости в зависимости от способа загрузки. Джоан Леон сравнивает пять методов и то, как каждый влияет на кеширование, запросы и рендеринг: инлайн <svg>, <img>, <object>, CSS-фон и спрайты с <use>. Главный анти-паттерн: встраивание растровых изображений в base64 внутри SVG увеличивает размер файла на 33% и блокирует рендеринг. #svg #performance

https://joanleon.dev/en/svg-optimization/

Всё, что вы никогда не хотели знать о visually-hidden. Дэвид Бушелл разбирает двадцатилетнюю историю CSS-паттерна visually-hidden и проверяет, хватит ли в 2026 году одних position: absolute и clip-path: circle(0). Статья объясняет, почему у платформы до сих пор нет нативной альтернативы и почему стандартизация хака может скорее навредить, чем помочь. #a11y #css

https://dbushell.com/2026/02/20/visually-hidden/

Новинки Chrome 146. CSS-анимации по скролу позволяют декларативно управлять CSS-анимациями по позиции прокрутки. Sanitizer API помогает защитить приложения от XSS. WebGPU получает режим совместимости со старыми графическими API. Также добавлены Iterator.concat, мета-элемент для масштабирования текста на мобильных, улучшения Navigation API и более точные метрики LCP. #chrome #browser

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

Вы не знаете HTML-таблицы. Фрэнк Тейлор выходит за пределы базовых понятий и разбирает терминологию таблиц, API Table Object Model, семантику заголовочных ячеек с атрибутами scope и headers, а также практические паттерны для создания доступных и хорошо структурированных таблиц с <thead>, <tbody>, <tfoot> и хелперами на JavaScript. #html #a11y

https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/

Выпуск №518. Никита Дубко и Алексей Симоненко про новинки Chrome 146, релиз Vite 8 и краткую историю доменов.

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

00:00:59 Новинки Chrome 146
00:40:47 Релиз Vite 8
01:08:54 Краткая история доменов