Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.9K subscribers
2.68K photos
181 videos
40 files
5.04K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
Проблема с отключенными кнопками и что делать вместо них

Adam Silver считает, что атрибут disabled в кнопках вредит UX. И вот почему:

Они не дают обратной связи
Из-за них интерфейс кажется сломанным
Их трудно увидеть
На них нельзя сфокусироваться
Они вводят в заблуждение
Пользователи могут не заметить, что кнопка становится активной

📌 Что делать вместо этого?

1️⃣Напишите четкую метку и текст подсказки, чтобы пользователи поняли вопрос
2️⃣Начните с одной формы ввода на странице, чтобы уменьшить когнитивную нагрузку
3️⃣Включите кнопку, чтобы пользователи всегда получали обратную связь
4️⃣Прощайте тривиальные ошибки
5️⃣Дайте четкие сообщения об ошибках, чтобы помочь пользователям решить проблему

#ux #tip
9👍3🤯3
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Псевдокласс :focus-visible вместо :focus в CSS применяется только тогда, когда фокусировка элемента происходит способами, видимыми для пользователя, например, через клавиатурный ввод.

Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым.

#css #tip #ux by Shripal Soni
👍12🥰81
📌 Разбор интерфейсов: Pinterest

Сегодня смотрим, за счёт чего сетка Pinterest выглядит цельной и удобной.

➡️ Разберем принцип Masonry-layout, способы его реализации и то, почему он стал стандартом для галерей и бесконечных лент.

🐸 Библиотека фронтендера

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
9🔥3
📌 Разбор интерфейсов: Spotify

Сегодня смотрим, за счёт чего Spotify ощущается живым и динамичным.

➡️ Разберём адаптивную сетку карточек, hover-эффекты, lazy-loading с skeleton’ами и плавные переходы между экранами. Плюс — UX-мелочи, которые делают сервис привычным и удобным.

🐸 Библиотека фронтендера

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👏1🥱1
📢 Навигация по каналу

Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:

#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI

#hotfix — реальные баги и проблемы с объяснением, как их исправить

#blueprint — high-level концепции и паттерны

#under_hood — разбираем, что происходит внутри фреймворков и браузера

#stack — обзоры библиотек, плагинов, инструментов

#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания

#code_challenge — интерактивные задачи с разбором на следующий день

#code_battle — столкновение технологий или подходов

#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни

#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат

#ux_review — изучаем интерфейсы и UX известных сайтов и приложений

#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги

🔈 Включайте уведомления, используйте теги для быстрого поиска и оставайтесь в курсе всего: от практических фич до мемов и свежих трендов.

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥1
🦉 Как работает вовлекающий интерфейс Dualingo

Это не просто приложение для изучения языков, а пример того, как интерфейс, микроанимации и мгновенный отклик создают ощущение прогресса и превращают обучение в игру.

Разобрали, как фронтенд помогает вызывать эмоцию «ещё одно упражнение — и я молодец».

🐸 Библиотека фронтендера

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥135👍5
💘 Tinder — UX, построенный на дофамине

Свайп, вспышка, совпадение.

Tinder — пример интерфейса, где фронтенд буквально программирует ощущение награды. Каждое движение, микровибрация, анимация и цвет работают на одно — дать фидбек до того, как пользователь успеет подумать.

🆖 Разбираем, как frontend усиливает механику вознаграждения и удерживает внимание.

🐸 Библиотека фронтендера

#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🥰3🥱1