Паттерны для Web Vitals
UX-паттерны, оптимизированные с учетом метрик Web Vitals: https://proglib.io/w/b4777c5c
#performance #interface
UX-паттерны, оптимизированные с учетом метрик Web Vitals: https://proglib.io/w/b4777c5c
#performance #interface
web.dev
Web Vitals patterns | Patterns | web.dev
A collection of common UX patterns optimized for Core Web Vitals.
Отключение ссылки
Disabled links - зачем отключать ссылки, стоит ли это делать и как правильно?
https://proglib.io/w/c047188a
#interface #accessibility
Disabled links - зачем отключать ссылки, стоит ли это делать и как правильно?
https://proglib.io/w/c047188a
#interface #accessibility
www.scottohara.me
Disabling a link | scottohara.me
With HTML alone there is no way to disable a hyperlink (an <a href> element), and have it be both exposed as a “link” and as “disabled”. Now, setting ...
🎨 22 лучших бесплатных учебных курса по UX/UI
Более двух десятков бесплатных учебных курсов по дизайну UX/UI и Фигме на русском и английском языках.
https://proglib.io/w/18c27a58
#interface #design
Более двух десятков бесплатных учебных курсов по дизайну UX/UI и Фигме на русском и английском языках.
https://proglib.io/w/18c27a58
#interface #design
Библиотека программиста
🎨 22 лучших бесплатных учебных курса по UX/UI
Более двух десятков бесплатных учебных курсов по дизайну UX/UI и Фигме на русском и английском языках.
Сайты с модальными диалоговыми окнами без JavaScript
Магия псевдокласса :target https://proglib.io/w/36d118f7
#interface
Магия псевдокласса :target https://proglib.io/w/36d118f7
#interface
NOP::Nuances of programming
Сайты с модальными диалоговыми окнами без JavaScript
Повторюсь: сайты, которые используют JavaScript для большей части таких элементов, как модальные диалоговые окна, выпадающее меню, мобильные меню-«гамбургеры», зачастую демонстрируют полный провал в плане удобства пользования и доступности. В особенности…
Функциональность drag-and-drop с react-beautiful-dnd
https://proglib.io/w/71ff5c7b
#interface #library
https://proglib.io/w/71ff5c7b
#interface #library
LogRocket Blog
Adding drag-and-drop functionality with react-beautiful-dnd - LogRocket Blog
See how to make your application powerful by animating it with the well-known drag-and-drop feature using the react-beautiful-dnd library.
Ссылка для скачивания
Как правильно сделать ссылку, которая открывает системный диалог для сохранения файла: https://proglib.io/w/b82c4d50
#accessibility #interface
Как правильно сделать ссылку, которая открывает системный диалог для сохранения файла: https://proglib.io/w/b82c4d50
#accessibility #interface
Авторские и переводные статьи по фронтенду
Ссылка для скачивания — Веб-стандарты
Простой способ сделать ссылку для скачивания при помощи атрибута download.
Как оформить поле ввода: советы и техники
Поле ввода - самый многоликий элемент в вебе. Разбираемся, как его правильно оформить: https://proglib.io/w/e0e3ae31
#interface
Поле ввода - самый многоликий элемент в вебе. Разбираемся, как его правильно оформить: https://proglib.io/w/e0e3ae31
#interface
Почтовые адреса в интерфейсе
6 советов для работы с почтовыми адресами: https://proglib.io/w/e60c35d2
#interface
6 советов для работы с почтовыми адресами: https://proglib.io/w/e60c35d2
#interface
Как скрыть/показать панель уведомлений при прокрутке
Создаем липкий заголовок, верхняя часть которого исчезнет при прокрутке вниз и появится при прокрутке вверх.
https://proglib.io/w/a31b2a51
#interface
Создаем липкий заголовок, верхняя часть которого исчезнет при прокрутке вниз и появится при прокрутке вверх.
https://proglib.io/w/a31b2a51
#interface
Анимация height: auto
Элементы с автоматически рассчитанной высотой нельзя плавно свернуть/развернуть с помощью transition. Разбираемся, как можно решить эту проблему: https://proglib.io/w/a4bb9c0b
#interface
Элементы с автоматически рассчитанной высотой нельзя плавно свернуть/развернуть с помощью transition. Разбираемся, как можно решить эту проблему: https://proglib.io/w/a4bb9c0b
#interface
nemzes.net
Animating height: auto — nemzes.net
Ever tried to animate or transition the height of an element that has dynamic dimensions? It's frustrating and unsatisfactory. Here are two strategies to make it better.
Floating UI
Библиотека для позиционирования всплывающих элементов - тултипов, дропдаунов и др. Легковесная (ядро весит всего 600 б), много настроек, удобный интерфейс: https://proglib.io/w/79dd1eb9
#library #interface
Библиотека для позиционирования всплывающих элементов - тултипов, дропдаунов и др. Легковесная (ядро весит всего 600 б), много настроек, удобный интерфейс: https://proglib.io/w/79dd1eb9
#library #interface
