Паттерны для 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
Floating UI
Библиотека для позиционирования всплывающих элементов - тултипов, дропдаунов и др. Легковесная (ядро весит всего 600 б), много настроек, удобный интерфейс: https://proglib.io/w/79dd1eb9
#library #interface
Библиотека для позиционирования всплывающих элементов - тултипов, дропдаунов и др. Легковесная (ядро весит всего 600 б), много настроек, удобный интерфейс: https://proglib.io/w/79dd1eb9
#library #interface
Продвинутый React-хук для блокировки скролла
Решаем классическую проблему блокировки скролла при показе модальных окон: https://proglib.io/w/4d804a82
#react #interface
Решаем классическую проблему блокировки скролла при показе модальных окон: https://proglib.io/w/4d804a82
#react #interface
👍6🔥3
📊 Создавайте диаграммы на React с помощью библиотеки chart.js
https://proglib.io/w/8b33f34e
#interface #library
https://proglib.io/w/8b33f34e
#interface #library
Карточки с параллакс-эффектом
Очень красивый эффект при наведении: https://proglib.io/w/a61647c9
#interface #animation #snippets
Очень красивый эффект при наведении: https://proglib.io/w/a61647c9
#interface #animation #snippets
👍1
Анимации в библиотеке компонентов
Виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection: https://proglib.io/w/af55b5d2
#animation #angular #interface
Виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection: https://proglib.io/w/af55b5d2
#animation #angular #interface
👍1😁1
Какая одна вещь может сделать ваш сайт лучше?
Энди Бэлл считает, что это Последовательная, плавномасштабируемая типографика и система отступов
#css #interface
Энди Бэлл считает, что это Последовательная, плавномасштабируемая типографика и система отступов
#css #interface
🥨 Попап вместо селекта
✨Новые HTML-элементы✨ наконец-то решат старую проблему: https://proglib.io/w/cef84c87
#interface #video
✨Новые HTML-элементы✨ наконец-то решат старую проблему: https://proglib.io/w/cef84c87
#interface #video
YouTube
🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему
00:00 Интро
00:22 В чём проблема?
01:50 Описание задачи
02:34 Недостатки селекта
04:36 Что нам нужно
05:22 Open UI
07:20 Попап вместо селекта
09:46 Стилизация попапа
11:45 Доступность и фокус
13:52 Кроссбраузерность
15:41 Выводы
16:59 Аутро
Нравится? Становитесь…
00:22 В чём проблема?
01:50 Описание задачи
02:34 Недостатки селекта
04:36 Что нам нужно
05:22 Open UI
07:20 Попап вместо селекта
09:46 Стилизация попапа
11:45 Доступность и фокус
13:52 Кроссбраузерность
15:41 Выводы
16:59 Аутро
Нравится? Становитесь…
👍12🔥1