Spot — мы на проде

Все easy - анимация без математики и жесточайших расчетов новых координат Мы всегда стремимся делать круче, применять раскрытые на очередной конфе знания и добиваться новых побед На первый взгляд может показаться, что для реализации такой анимации из GIF нужно очень много расчетов - но все куда проще Как истинные ценители Vue (вуя) мы теперь имеем шанс делиться с вами демками на Codepen в любимом нам формате фреймворка А это значит, что с минимальными усилиями это можно покрутить и разобрать без долго вникания тут За базу взят тот самый, прилипший ко мне на конфах GSAP с расширением MorphSVG Без знания координат и манипуляций с цифрами мы указываем в таймлайне какой элемент по id мы магически превращаем в другой элемент (так же указав id или селектор) и он чудно сделает все за нас. Нам остается добавить динамики и прикрутить это к эвентам курсора. Сам GreenSock дает возможность фри крутить это в песочнице Codepen - а значит можно изначально понять насколько библиотека упрощает жизнь разрабу и дает возможность оптимизировано креативить цепляя состояние к реактивности Конечно, среди нас много хардовых ребят и вы как челлендж пересчитали бы это в координатах за пару часов/дней - но зачем, если через 15 минут это уже может греть вам сердечко Не правда ли? Шаблон Vue на Codepen Дублирую ссылку на реализацию анимации

Как мы оптимизировали отпуска в корпорации Газпромнефть с десятками тысяч сотрудников Мы разработали модуль планирования отпусков с двумя ролями в личном кабинете Газпромнефть, где можно быстро и удобно запланировать свой отпуск и утвердить запросы других сотрудников. Сотрудник видит количество доступных дней, создает периоды, выбирает даты и отправляет на согласование — и всё. Учитываются все ограничения бизнеса: отпуск можно взять только спустя 6 месяцев после приёма, один из периодов обязательно не менее 14 дней, а распланировать нужно все дни. Руководитель получает наглядную картину по команде: кто когда уходит, есть ли пересечения, можно ли отпускать. Может тут же утвердить или внести корректировки. Интерфейс собрали на Vue.js + state, стили на препроцессоре SCSS, бэкенд силами внутренней команды. Всё валидируется и на клиенте, и на сервере. Как результат: HR-отдел получает точные и валидные запросы на отпуск от сотрудников. Руководители могут запланировать свой отпуск, видят пересечения отпусков подчиненных, корректируют и могут планировать работу без слепых зон. Сотрудники видят количество доступных им дней и имеют возможность через интерфейс отправить запрос на согласование. Больше никакой бумаги и ручки - только интерфейс. #кейсы #crm_системы #фронтенд Через какие у вас планируется отпуск, и видно ли там пересечения с другими сотрудниками команды?

Йоу! Ускоряет ли админка Time-to-Market? В сложных продуктах, таких как онлайн-кинотеатр или игра на сотню тысяч активных игроков — важно реагировать быстро. Не только планировать и ждать выгрузки пачки изменений, но и иметь панель редактирования их публикации в моменте. Класс, если панель управления есть в небольшом проекте — это основной инструмент для возможности анализа и роста. Понятно, что в базе - это управления контентом, но управлять структурой страниц, модулем заявок, интегрировать передачу данных в CRM для оптимизации работы. 🍿 В онлайн-кинотеатре можно: — включить/отключить доступ к фильму при запросе правообладателя — активировать праздничную акцию на подписку — запустить рассылку не подписанных пользователей 🎮 В игровой платформе: — добавить приз для определенной группы игроков — скорректировать систему начисления или сроки проведения игры — включить или выключить финальный экран с результатами Крутой профит можно получить через конструктор страниц на сайтах, где из набора уже проверенных блоков/секций можно собрать новую страницу и запустить. Эти примеры влияют на главное: Time-to-Market (время от начала разработки идеи/функционала до выхода конечного продукта). Если бизнесу что-то нужно — он может сделать это сам. Без привлечения и ожидания команды разработки. 👍 В итоге: — маркетинг может быстрее тестировать гипотезы — команда может сравнивать результат работы и меняться в моменте — цикл принятия решений сокращается И вопрос: В каком проекте можно обойтись вообще без админки?

Модульная вёрстка — это стратегический подход к созданию интерфейсов. Он позволяет собирать страницы из готовых блоков. Это критически важно в проектах, где регулярно появляются новые разделы, типовые элементы и повторяющиеся паттерны. Но чтобы это работало, нужно изначально правильно подготовить дизайн-макеты. В проекте кинофестеваля мы начали с создания страниц, позже вынесли устоявшиеся компоненты в дизайн-систему. Дизайнер обязан не просто рисовать страницы, а проектировать и поддерживать систему компонентов. В каждом макете выделяются повторяющиеся элементы — карточки, кнопки, заголовки, формы в общий UI Kit. Это независимые модули с чёткими отступами, поведением и состояниями. Это основа для компонентной системы проекта и дальнейшего кода. На этапе вёрстки мы изолировали каждый модуль: никакой жёсткой привязки к странице, только входные параметры и слоты. Компоненты гибкие, конфигурируемые и легко переиспользуемые. Все компоненты вынесли в Figma, чтобы вся команда — разработчики, контентщики и менеджеры — знали, что уже реализовано и как этим пользоваться. Следующий поинт — интеграция с админ-панелью. Контент-менеджеры не обращаются к разработчику для каждой правки контента. Вместо этого страницы собираются из модулей прямо в админке: менять порядок блоков, заголовки, описания, включать и выключать элементы. Для этого у каждого модуля прописываются поля, которые напрямую передаются как props. Так бизнес сам управляет страницами и создает новые, не трогая код. Чтобы это работало в долгую, нужно одно правило: никаких дубликатов. Каждый новый экран собирается из существующих компонентов. Если чего-то не хватает — создаётся новый модуль, добавляется в библиотеку и документируется. Это позволяет избежать мутации компонентов и хаоса. Модульный подход — это не про “красоту интерфейса”. Это про эффективность, масштабируемость и контроль продукта. Он позволяет быстро запускать новые страницы, тестировать идеи, экономить ресурсы и масштабировать продукт без перегрузки команды. Сейчас процесс позволяет быстро собрать новую страницу на дизайне, утвердить и собрать через админку минуя этап верстки. Удобно, не так ли?

Как мы убрали “форменный хаос” из страховых процессов Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata dadata.ru для автозаполнения и чуть ускорить процесс. Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе. Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет. Как решали: Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст: автомобили клиента, действующие полисы, история обращений. Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля. При наступлении страхового случая путь сокращается. Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото. Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать. Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.