Сайты с модальными диалоговыми окнами без 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
Продвинутый 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
Создание компонентной дизайн-системы UI
Зачем нужна и как создать сбалансированную компонентную дизайн-систему: https://proglib.io/w/e6bd53b5
#interface
Зачем нужна и как создать сбалансированную компонентную дизайн-систему: https://proglib.io/w/e6bd53b5
#interface
👍1👎1
Запуск анимации при скролле
Откладывание старта анимации до момента, когда пользователь до нее доскроллит, - распространенный и эффектный прием. В статье разбирается его реализация с использованием IntersectionObserver API (и фоллбэком для старых браузеров).
https://proglib.io/w/2bbaf368
#interface #animation
Откладывание старта анимации до момента, когда пользователь до нее доскроллит, - распространенный и эффектный прием. В статье разбирается его реализация с использованием IntersectionObserver API (и фоллбэком для старых браузеров).
https://proglib.io/w/2bbaf368
#interface #animation
👍2
