Фронтенд для души

#UX Всем привет! Сегодня расскажу про паттерн - Progressive Profiling. Progressive Profiling - подход, при котором данные о пользователе собираются постепенно, по мере использования продукта и необходимости их для приложения, а не через длинные формы на старте. Он снижает порог входа и позволяет быстрее привести пользователя к первой ценности. Хороший progressive profiling запрашивает только то, что действительно нужно в текущем контексте, и делает это в подходящий момент, а не сразу при регистр...

Всем привет! Сегодня пост с вопросом к вам, мои дорогие подписчики🌟, из каждого утюга сейчас вещают о ИИ, каждый уважающий себя айти блогер пишет сотни постов про вайбкод и другие прекрасные технологии связанные с этим, а мне вот интересен вопрос, как у вас изменился процесс написания кода в связи с нейросетями, стало ли вам проще писать код, насколько активно вы пишете именно продакшен код с помощью всего этого и помогает ли оно вам или скорее отнимает время в дальнейшем на ревью, поделитесь п...

Всем привет! Сегодня немного лайва, но тем не менее связанного с работой, хочу немного рассказать про свой рабочий сетап, может кому-то будет полезно. У меня, как и у многих айтишников в связи со спецификой бывают проблемы с физической активностью и движением в течении дня, но есть красивый и лаконичный способ для решения этой проблемы - стол регулируемый по высоте (электрический с моторчиком) и дорожка для ходьбы. Стол позволяет менять положение работы от лежачего на стуле, до стоячего в полный...

Всем привет! Не так давно появились в CSS Scroll Driven Animations, с помощью них можно делать крутые анимации в зависимости от текущей позиции прокрутки. Работает как и обычная анимация с помощью keyframes, однако тут вместо обычного времени анимации используется привязка к скролл контейнеру animation-timeline: scroll, либо привязка к входу/выходу из видимой области animation-timeline: view, с помощью animation-start можно указывать начальное и конечное значение для проигрывания анимации, подро...

#UX Всем привет! Продолжая тему с онбордингами и легкой интеграцией в продукт, сегодня расскажу про UX-паттерн - Coach Marks. Coach Marks - это контекстные подсказки, которые показывают пользователю, где и что можно сделать прямо в момент его действий в интерфейсе. В отличие от различных промо модалок, гайдов (how to) они более нативны и интегрированы в интерфейс и не ломают пользователю его основной сценарий, а просто идут рядом с ним. Хорошие coach marks короткие, привязаны к конкретному элеме...

#Patterns Всем привет! State или как не плодить кучу условий и сложной бизнес логики Часто бывает такое, что у сущности есть n-ое количество состояний, например Заказ: создан -> оплачен -> отправлен -> доставлен ->(опционально) возвращен и так далее, может быть много ответвленний, много запретов и так далее, если сделать это в лоб, то получим ситуацию, в которой приходится учитывать очень много вводных, что на больших сущностях очень тяжело и именно в этот момент нам на помощь приходит State. С ...

#UX Всем привет! Сегодня расскажу про паттерн - Optimistic UI. Optimistic UI - это подход, при котором интерфейс сразу показывает успешный результат действия, не дожидаясь ответа сервера. Он создаёт ощущение мгновенного отклика и делает приложение быстрее. Кажется, что это уже стандарт индустрии, но довольно часто натыкаешься на какие-нибудь действия типо лайка, дизлайка и тд, которые работают синхронно, хотя спокойно могут выполняться асинхронно. Важно использовать этот подход с умом и в случае...

#UX Всем привет! Сегодня расскажу про паттерн - Onboarding Checklist. Onboarding Checklist - список шагов, который помогает пользователю пройти ключевые действия в продукте и быстрее дойти до первой ценности. Он превращает сложный онбординг в понятный маршрут и снижает ощущение перегруженности. Хороший чеклист - короткий и фокусируется только на важных шагах и даёт ощущение прогресса за счёт статусов и процентов выполнения. Важно, чтобы каждый пункт чеклиста вёл к какому-то реальному результату,...

Всем привет! Я думаю все встречались с тем, что контент скролиться за модалкой, когда пытаешься проскроллить что-то внутри модалки и обычно это решалось body { overflow: hidden } на время, пока модалка открытая, так вот теперь можно не делать так, а использовать нативное CSS-свойство - .container { overscroll-behavior: contain }, с помощью этого кода, скролл останется только у контейнера, а все остальные скроллы будут игнорированны. А если дать это свойство, может отключить фичу pull to refresh ...

#Patterns Всем привет! Facade или как спрятать цирк за ширмой. Обычная история, что внутри одной операции у нас целая подсистема: валидаторы, обращение к АПИ, логирование, сохранение в кэш, в стор и тд. Чтобы выполнить одно простое действие, приходится вызывать их в правильном порядке и учитывать детали реализации. Если это еще и операция создания ордера и может вызываться из нескольких мест с небольшими изменениями, то это превращается в огромное количество копипасты. Вероятно, вы уже использов...