Регулярные запросы для обновления простых данных.
При разработке функционала с острым желанием реал-тайма - в голову сразу лезут сокеты.
Есть более простой и рабочий вариант под среднюю задачу - написать щадящий интервальный автоапдейт.
Идейно: Мы перед обновлением данных проверяем вкладку на активность. Если вкладка не активна - запроса не будет, но как только мы на нее вернемся - улетит свежий запрос и данные станут актуальными.
Таким образом мы следим за состоянием вкладки и оперируем несколькими методами для стопа, старта автообновления и самим запросом данных.
Пример реализации во Vue показал в песочнице на фиче обновления комментариев
Вопрос: Для каких задач по вашему подходит такое решение?
При разработке функционала с острым желанием реал-тайма - в голову сразу лезут сокеты.
Есть более простой и рабочий вариант под среднюю задачу - написать щадящий интервальный автоапдейт.
Идейно: Мы перед обновлением данных проверяем вкладку на активность. Если вкладка не активна - запроса не будет, но как только мы на нее вернемся - улетит свежий запрос и данные станут актуальными.
Таким образом мы следим за состоянием вкладки и оперируем несколькими методами для стопа, старта автообновления и самим запросом данных.
Пример реализации во Vue показал в песочнице на фиче обновления комментариев
Вопрос: Для каких задач по вашему подходит такое решение?
👍11🔥6
GSAP теперь абсолютно бесплатный даже для коммерции!
Вот так самые свежие новости, я давненько сюда не постил об инструментах и после майских расскажу про крутой кейс, который мы запустили с моей командой в Spot. Не без помощи вуя конечно же.
На конференциях не раз слышал, что я словно рекламирую GreenSock ибо это платная штука и не все готовы изучать лицензию, брать риски.
Теперь кажется все, или уже нафиг не надо и AnimeJS захватит мир?
Вот так самые свежие новости, я давненько сюда не постил об инструментах и после майских расскажу про крутой кейс, который мы запустили с моей командой в Spot. Не без помощи вуя конечно же.
На конференциях не раз слышал, что я словно рекламирую GreenSock ибо это платная штука и не все готовы изучать лицензию, брать риски.
Теперь кажется все, или уже нафиг не надо и AnimeJS захватит мир?
❤9🔥5🫡2
Как мы оптимизировали отпуска в корпорации Газпромнефть
с десятками тысяч сотрудников
Мы разработали модуль планирования отпусков с двумя ролями в личном кабинете Газпромнефть, где можно быстро и удобно запланировать свой отпуск и утвердить запросы других сотрудников.
Сотрудник видит количество доступных дней, создает периоды, выбирает даты и отправляет на согласование — и всё. Учитываются все ограничения бизнеса: отпуск можно взять только спустя 6 месяцев после приёма, один из периодов обязательно не менее 14 дней, а распланировать нужно все дни.
Руководитель получает наглядную картину по команде: кто когда уходит, есть ли пересечения, можно ли отпускать. Может тут же утвердить или внести корректировки.
Интерфейс собрали на Vue.js + state, стили на препроцессоре SCSS, бэкенд силами внутренней команды. Всё валидируется и на клиенте, и на сервере.
Как результат:
HR-отдел получает точные и валидные запросы на отпуск от сотрудников. Руководители могут запланировать свой отпуск, видят пересечения отпусков подчиненных, корректируют и могут планировать работу без слепых зон. Сотрудники видят количество доступных им дней и имеют возможность через интерфейс отправить запрос на согласование. Больше никакой бумаги и ручки - только интерфейс.
#кейсы #crm_системы #фронтенд
Через какие у вас планируется отпуск, и видно ли там пересечения с другими сотрудниками команды?
с десятками тысяч сотрудников
Мы разработали модуль планирования отпусков с двумя ролями в личном кабинете Газпромнефть, где можно быстро и удобно запланировать свой отпуск и утвердить запросы других сотрудников.
Сотрудник видит количество доступных дней, создает периоды, выбирает даты и отправляет на согласование — и всё. Учитываются все ограничения бизнеса: отпуск можно взять только спустя 6 месяцев после приёма, один из периодов обязательно не менее 14 дней, а распланировать нужно все дни.
Руководитель получает наглядную картину по команде: кто когда уходит, есть ли пересечения, можно ли отпускать. Может тут же утвердить или внести корректировки.
Интерфейс собрали на Vue.js + state, стили на препроцессоре SCSS, бэкенд силами внутренней команды. Всё валидируется и на клиенте, и на сервере.
Как результат:
HR-отдел получает точные и валидные запросы на отпуск от сотрудников. Руководители могут запланировать свой отпуск, видят пересечения отпусков подчиненных, корректируют и могут планировать работу без слепых зон. Сотрудники видят количество доступных им дней и имеют возможность через интерфейс отправить запрос на согласование. Больше никакой бумаги и ручки - только интерфейс.
#кейсы #crm_системы #фронтенд
Через какие у вас планируется отпуск, и видно ли там пересечения с другими сотрудниками команды?
❤17🔥9👏7👍2😁1
Йоу! Ускоряет ли админка Time-to-Market?
В сложных продуктах, таких как онлайн-кинотеатр или игра на сотню тысяч активных игроков — важно реагировать быстро.
Не только планировать и ждать выгрузки пачки изменений, но и иметь панель редактирования их публикации в моменте.
Класс, если панель управления есть в небольшом проекте — это основной инструмент для возможности анализа и роста.
Понятно, что в базе - это управления контентом, но управлять структурой страниц, модулем заявок, интегрировать передачу данных в CRM для оптимизации работы.
🍿
В онлайн-кинотеатре можно:
— включить/отключить доступ к фильму при запросе правообладателя
— активировать праздничную акцию на подписку
— запустить рассылку не подписанных пользователей
🎮
В игровой платформе:
— добавить приз для определенной группы игроков
— скорректировать систему начисления или сроки проведения игры
— включить или выключить финальный экран с результатами
Крутой профит можно получить через конструктор страниц на сайтах, где из набора уже проверенных блоков/секций можно собрать новую страницу и запустить.
Эти примеры влияют на главное: Time-to-Market (время от начала разработки идеи/функционала до выхода конечного продукта).
Если бизнесу что-то нужно — он может сделать это сам. Без привлечения и ожидания команды разработки.
👍
В итоге:
— маркетинг может быстрее тестировать гипотезы
— команда может сравнивать результат работы и меняться в моменте
— цикл принятия решений сокращается
И вопрос:
В каком проекте можно обойтись вообще без админки?
В сложных продуктах, таких как онлайн-кинотеатр или игра на сотню тысяч активных игроков — важно реагировать быстро.
Не только планировать и ждать выгрузки пачки изменений, но и иметь панель редактирования их публикации в моменте.
Класс, если панель управления есть в небольшом проекте — это основной инструмент для возможности анализа и роста.
Понятно, что в базе - это управления контентом, но управлять структурой страниц, модулем заявок, интегрировать передачу данных в CRM для оптимизации работы.
В онлайн-кинотеатре можно:
— включить/отключить доступ к фильму при запросе правообладателя
— активировать праздничную акцию на подписку
— запустить рассылку не подписанных пользователей
В игровой платформе:
— добавить приз для определенной группы игроков
— скорректировать систему начисления или сроки проведения игры
— включить или выключить финальный экран с результатами
Крутой профит можно получить через конструктор страниц на сайтах, где из набора уже проверенных блоков/секций можно собрать новую страницу и запустить.
Эти примеры влияют на главное: Time-to-Market (время от начала разработки идеи/функционала до выхода конечного продукта).
Если бизнесу что-то нужно — он может сделать это сам. Без привлечения и ожидания команды разработки.
В итоге:
— маркетинг может быстрее тестировать гипотезы
— команда может сравнивать результат работы и меняться в моменте
— цикл принятия решений сокращается
И вопрос:
В каком проекте можно обойтись вообще без админки?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍6🔥1😁1
Модульная вёрстка — это стратегический подход к созданию интерфейсов. Он позволяет собирать страницы из готовых блоков.
Это критически важно в проектах, где регулярно появляются новые разделы, типовые элементы и повторяющиеся паттерны. Но чтобы это работало, нужно изначально правильно подготовить дизайн-макеты.
В проекте кинофестеваля мы начали с создания страниц, позже вынесли устоявшиеся компоненты в дизайн-систему.
Дизайнер обязан не просто рисовать страницы, а проектировать и поддерживать систему компонентов. В каждом макете выделяются повторяющиеся элементы — карточки, кнопки, заголовки, формы в общий UI Kit. Это независимые модули с чёткими отступами, поведением и состояниями. Это основа для компонентной системы проекта и дальнейшего кода.
На этапе вёрстки мы изолировали каждый модуль: никакой жёсткой привязки к странице, только входные параметры и слоты. Компоненты гибкие, конфигурируемые и легко переиспользуемые. Все компоненты вынесли в Figma, чтобы вся команда — разработчики, контентщики и менеджеры — знали, что уже реализовано и как этим пользоваться.
Следующий поинт — интеграция с админ-панелью. Контент-менеджеры не обращаются к разработчику для каждой правки контента. Вместо этого страницы собираются из модулей прямо в админке: менять порядок блоков, заголовки, описания, включать и выключать элементы. Для этого у каждого модуля прописываются поля, которые напрямую передаются как props. Так бизнес сам управляет страницами и создает новые, не трогая код.
Чтобы это работало в долгую, нужно одно правило: никаких дубликатов. Каждый новый экран собирается из существующих компонентов. Если чего-то не хватает — создаётся новый модуль, добавляется в библиотеку и документируется. Это позволяет избежать мутации компонентов и хаоса.
Модульный подход — это не про “красоту интерфейса”. Это про эффективность, масштабируемость и контроль продукта. Он позволяет быстро запускать новые страницы, тестировать идеи, экономить ресурсы и масштабировать продукт без перегрузки команды.
Сейчас процесс позволяет быстро собрать новую страницу на дизайне, утвердить и собрать через админку минуя этап верстки.
Удобно, не так ли?
Это критически важно в проектах, где регулярно появляются новые разделы, типовые элементы и повторяющиеся паттерны. Но чтобы это работало, нужно изначально правильно подготовить дизайн-макеты.
В проекте кинофестеваля мы начали с создания страниц, позже вынесли устоявшиеся компоненты в дизайн-систему.
Дизайнер обязан не просто рисовать страницы, а проектировать и поддерживать систему компонентов. В каждом макете выделяются повторяющиеся элементы — карточки, кнопки, заголовки, формы в общий UI Kit. Это независимые модули с чёткими отступами, поведением и состояниями. Это основа для компонентной системы проекта и дальнейшего кода.
На этапе вёрстки мы изолировали каждый модуль: никакой жёсткой привязки к странице, только входные параметры и слоты. Компоненты гибкие, конфигурируемые и легко переиспользуемые. Все компоненты вынесли в Figma, чтобы вся команда — разработчики, контентщики и менеджеры — знали, что уже реализовано и как этим пользоваться.
Следующий поинт — интеграция с админ-панелью. Контент-менеджеры не обращаются к разработчику для каждой правки контента. Вместо этого страницы собираются из модулей прямо в админке: менять порядок блоков, заголовки, описания, включать и выключать элементы. Для этого у каждого модуля прописываются поля, которые напрямую передаются как props. Так бизнес сам управляет страницами и создает новые, не трогая код.
Чтобы это работало в долгую, нужно одно правило: никаких дубликатов. Каждый новый экран собирается из существующих компонентов. Если чего-то не хватает — создаётся новый модуль, добавляется в библиотеку и документируется. Это позволяет избежать мутации компонентов и хаоса.
Модульный подход — это не про “красоту интерфейса”. Это про эффективность, масштабируемость и контроль продукта. Он позволяет быстро запускать новые страницы, тестировать идеи, экономить ресурсы и масштабировать продукт без перегрузки команды.
Сейчас процесс позволяет быстро собрать новую страницу на дизайне, утвердить и собрать через админку минуя этап верстки.
Удобно, не так ли?
❤11🔥8🤝4👏2
Как можно ускорить запуск проектов с помощью v0 и ChatGPT 5 ⚡️
Раньше в отсутствии экспертизы в дизайне мы часто собирали кликабельный прототип на фронтенде.
Это нужно для проверки гипотез и получить первый функционал, сосредоточиться на ключевых фичах и убедиться - что они правильно выполняют бизнес-задачи
⚙️ v0 — позволяет не выдумывать визуал через код. Удачный инструмент для быстрой сборки верстки.
Используем для:
- Мгновенного старта — быстро собрать кликабельный интерфейс для системы бронирования за 3 часа на основе UI библиотек (допустим PrimeVue). В среднем на вёрстку уходило 2–3 дня.
- Проверки гипотез — получить несколько прототипов по ТЗ и показать его клиентам как можно скорее. Клиент смотрит рабочий функционал на моках без готового бэкенда.
- Экономии ресурсов — не требует много времени разработчика и продумывания расположения кнопок при разработке на этапе старта проекта.
Допиливать v0 прототипы можно на уровне легкого рефакторинга при помощи chatGPT, тк v0 переписывает при каждом запросе все компоненты с нуля
🤖 ChatGPT 5 — легкий хелпер для свежого взгляда на функцию или кусок кода.
Не решает все за нас, но позволяет оптимизаровать код и закрыть часть узких мест.
Используем для:
- Рефакторинга кода — можно оптимизировать модуль на Vue 3, уменьшив код или сделать его гибче сделав функции чистыми.
- Автоматизации рутины — базовая задача это генерация документации по API. Покрытие тестами по части функций.
- Быстрых решений — можно найти несколько способов реализации и выбрать для себя лучший предотвратив рефакторинг
Главное не ставить ставку на то, что это реальное решение - это способ ускорить полное понимание задачи, покрутить функционал, сверить ожидания.
Конечно для боевых проектов мы привлекаем дизайнера тк готовых компонентов для релиза не достаточно.
Если в вашем проекте нет брендбука/кита и функционал важнее чем визуал - вам хватит готовой UI библиотеки
⸻
Внимание вопрос:
Расскажите какие инструменты ускоряющие вашу работу и снижающие рутину вы для себя нашли и юзали ли v0?
Раньше в отсутствии экспертизы в дизайне мы часто собирали кликабельный прототип на фронтенде.
Это нужно для проверки гипотез и получить первый функционал, сосредоточиться на ключевых фичах и убедиться - что они правильно выполняют бизнес-задачи
⚙️ v0 — позволяет не выдумывать визуал через код. Удачный инструмент для быстрой сборки верстки.
Используем для:
- Мгновенного старта — быстро собрать кликабельный интерфейс для системы бронирования за 3 часа на основе UI библиотек (допустим PrimeVue). В среднем на вёрстку уходило 2–3 дня.
- Проверки гипотез — получить несколько прототипов по ТЗ и показать его клиентам как можно скорее. Клиент смотрит рабочий функционал на моках без готового бэкенда.
- Экономии ресурсов — не требует много времени разработчика и продумывания расположения кнопок при разработке на этапе старта проекта.
Допиливать v0 прототипы можно на уровне легкого рефакторинга при помощи chatGPT, тк v0 переписывает при каждом запросе все компоненты с нуля
🤖 ChatGPT 5 — легкий хелпер для свежого взгляда на функцию или кусок кода.
Не решает все за нас, но позволяет оптимизаровать код и закрыть часть узких мест.
Используем для:
- Рефакторинга кода — можно оптимизировать модуль на Vue 3, уменьшив код или сделать его гибче сделав функции чистыми.
- Автоматизации рутины — базовая задача это генерация документации по API. Покрытие тестами по части функций.
- Быстрых решений — можно найти несколько способов реализации и выбрать для себя лучший предотвратив рефакторинг
Главное не ставить ставку на то, что это реальное решение - это способ ускорить полное понимание задачи, покрутить функционал, сверить ожидания.
Конечно для боевых проектов мы привлекаем дизайнера тк готовых компонентов для релиза не достаточно.
Если в вашем проекте нет брендбука/кита и функционал важнее чем визуал - вам хватит готовой UI библиотеки
⸻
Внимание вопрос:
Расскажите какие инструменты ускоряющие вашу работу и снижающие рутину вы для себя нашли и юзали ли v0?
👍8❤6👏3🔥1
Мы ведем проект сети музыкальных школ "Виртуозы" и изначально их CRM строилась на Blade шаблонах и jQuery.
Для своего времени это было оптимальное решение: страницы рендерились на сервере, скрипты выполняли всю бизнес-логику и оживляли интерфейс, всё работало стабильно.
Со временем стало понятно, что поддержка таких решений усложняется, а скорость развития не соответствует новым требованиям бизнеса.
Начали миграцию с небольших шагов. Вместо jQuery-плагинов и разрозненных скриптов в новых разделах появились отдельные Vue-модули: расписание занятий, форма записи, переиспользуемые таблицы данных с фильтрами.
Каждый новый модуль автономен, со своим состоянием в store и API, и не зависит от остальных модулей. Решение вынести в модули позволило дорабатывать систему поэтапно: меняешь один блок — остальной проект продолжает работать без сбоев. Появилась база компонентов, которая расширяется набором готовых компонентов из UI библиотеки PrimeVue
Laravel по-прежнему остаётся фундаментом: Blade рендерит основу страниц, а Laravel Mix собирает модули фронта на Vue. Следующим шагом станет переход на Vite. Он даст скорость разработки, горячую замену модулей и ещё более тесную интеграцию Vue в Laravel-экосистему.
В итоге мы не ломаем изначально работающий монолит, а превращаем его в систему с модульной архитектурой. Laravel обеспечивает надёжность, Vue дает реактивность, а сборка пока держится на Mix — до момента, когда станет разумно мигрировать на Vite.
👉 Всегда ли монолит это плохо и стоит ли все проекты переводить в Headless?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10🤝5👍2
Forwarded from MSK VUE.JS News
Всем приветы🌚
Создадим активность в этом чатике!
Пришло время объявить третьего спикера – Влад Худяков 👏
О чем будет доклад Влада:
👉 Регистрация на митап 👈
Ждешь доклад Влада? Ставь 🔥
Создадим активность в этом чатике!
Пришло время объявить третьего спикера – Влад Худяков 👏
О чем будет доклад Влада:
Все мы по-разному используем Nuxt. Где-то хватает статичных страниц, которые поддерживает команда разработчиков. Но если бизнесу важно самому управлять проектом и собирать новые страницы без программиста — нужен гибкий конструктор.
В докладе я покажу, как за три шага превратить обычный Nuxt-проект в конструктор: от простого вызова компонентов до универсальной точки входа по slug. Разберём, как встроить формы в формате конструктора, разгрузить фронтенд-разработчиков и ускорить публикацию страниц в продакшен.
👉 Регистрация на митап 👈
Ждешь доклад Влада? Ставь 🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14💯6🥰5
Знакомство со спикерами WS МИТАП №5: Strapi. Путь фронтендера к фулстеку 🤩
Представляем вам приглашенного спикера — Владислава Худякова, основателя студии веб-разработки Spot.
Влад начинал свой путь с верстки на таблицах и подбора градиентов «на глаз», а сегодня вместе с командой создает реактивные решения для управления digital-продуктами. Основной стек Spot — Vue.js, Laravel и Python. Strapi команда использует в проектах, где важен быстрый запуск и гибкая настройка.
За последние годы Влад выступал на митапах Evrone, Иннополис, Vue MSK и Moscow CSS, участвовал в подкастах Cloud и Frontend Weekend, публиковал статьи на Хабре.
На митапе Влад поделится опытом в докладе «Многоязычный контент без боли: i18n в действии». Расскажет, как устроена локализация в Strapi 5: от включения и преднастройки моделей до работы с данными и лучших практик. Покажет, как правильно настраивать многоязычность, избегать ошибок с глобальными и переводимыми полями и запускать продукты в продакшн без лишней боли.
Не упустите возможность получить практические знания от эксперта, который совмещает разработку, управление студией и активное участие в IT-сообществе.
Напоминаем детали мероприятия:
Когда: 13 сентября, 16:00
Где: г. Ростов-на-Дону, ул. Города Волос 14, 2 этаж, Южный ИТ-Парк
Ознакомиться с полной программой мероприятия и зарегистрироваться можно здесь
Если не сможешь присутствовать очно, подключайся к онлайн-трансляции
Представляем вам приглашенного спикера — Владислава Худякова, основателя студии веб-разработки Spot.
Влад начинал свой путь с верстки на таблицах и подбора градиентов «на глаз», а сегодня вместе с командой создает реактивные решения для управления digital-продуктами. Основной стек Spot — Vue.js, Laravel и Python. Strapi команда использует в проектах, где важен быстрый запуск и гибкая настройка.
За последние годы Влад выступал на митапах Evrone, Иннополис, Vue MSK и Moscow CSS, участвовал в подкастах Cloud и Frontend Weekend, публиковал статьи на Хабре.
На митапе Влад поделится опытом в докладе «Многоязычный контент без боли: i18n в действии». Расскажет, как устроена локализация в Strapi 5: от включения и преднастройки моделей до работы с данными и лучших практик. Покажет, как правильно настраивать многоязычность, избегать ошибок с глобальными и переводимыми полями и запускать продукты в продакшн без лишней боли.
Не упустите возможность получить практические знания от эксперта, который совмещает разработку, управление студией и активное участие в IT-сообществе.
Напоминаем детали мероприятия:
Когда: 13 сентября, 16:00
Где: г. Ростов-на-Дону, ул. Города Волос 14, 2 этаж, Южный ИТ-Парк
Ознакомиться с полной программой мероприятия и зарегистрироваться можно здесь
Если не сможешь присутствовать очно, подключайся к онлайн-трансляции
❤11🔥6
Уже скоро мы можем увидеться на митапе в Ростове-на-Дону
Обсудим мультиязычность при реализации сайтов и приложений при помощи Strapi
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤14🔥6
MSK VUE.JS News
Всем приветы🌚 Создадим активность в этом чатике! Пришло время объявить третьего спикера – Влад Худяков 👏 О чем будет доклад Влада: Все мы по-разному используем Nuxt. Где-то хватает статичных страниц, которые поддерживает команда разработчиков. Но если…
Всем хай, вернулся в строй после первого долгого отпуска. Попутно афигенская новость:
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
2❤11🔥8
Всем доброго вечера пятнички!
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
🔥10
Как превратить выставочный стенд в источник заявок?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
❤14🔥8
Как выбрать стек для многостраничного сайта, если вы любите Nuxt (Vue JS) 👩💻 ❤️
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Please open Telegram to view this post
VIEW IN TELEGRAM
💯10❤5🔥3
Как мы убрали “форменный хаос” из страховых процессов
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
🔥14
This media is not supported in your browser
VIEW IN TELEGRAM
Крути колесо! Как я без слов ушел пилить генератор Колеса фортуны и запилил.
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
🔥7
Хоба! Мы не бросили вью.
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Выпустили в open-source библиотеку для Vue.js
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
npm i vue-wave-player
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
GitHub
GitHub - khudyakv/vue-wave-player: Audio player with Canvas waveform visualization in Telegram style for Vue 3
Audio player with Canvas waveform visualization in Telegram style for Vue 3 - khudyakv/vue-wave-player