Forwarded from moscowcss (Alёna Siprikova)
Друзья, мы совсем скоро начинаем #moscowcss_26
Ссылка на трансляцию: https://www.youtube.com/watch?v=bPgiOkMyxJQ
Начинаем в 19:00
Адрес:
Яндекс
ул. Льва Толстого, 16
https://yandex.ru/maps/org/yandeks/1124715036
Ссылка на трансляцию: https://www.youtube.com/watch?v=bPgiOkMyxJQ
Начинаем в 19:00
Адрес:
Яндекс
ул. Льва Толстого, 16
https://yandex.ru/maps/org/yandeks/1124715036
YouTube
MoscowCSS 26 x Яндекс, 19 июня
19 июня ждём всех любителей CSS и фронтенда на 26 встрече MoscowCSS в уютном офисе Яндекса и онлайн.
Снова встретимся, послушаем доклады и отлично проведём время с комьюнити 💛
Встречаемся в 19:00 по московскому времени.
Чат для обсуждений: https://t.m…
Снова встретимся, послушаем доклады и отлично проведём время с комьюнити 💛
Встречаемся в 19:00 по московскому времени.
Чат для обсуждений: https://t.m…
👍3🔥1🥰1
Влияет ли безопасность приложения на time to market?
Думаю многие понимают, что деплой веб-приложения на продакшн сервера в крупных корпорациях не проходит через один pipeline
Это определенный выстроенный процесс для контроля установленного продуктом требования к качеству и безопасности.
И если вроде внутри корпорации все понятно, описанный флоу взаимодействия, стек, инструменты, распределены роли - то работа со внешними студиями от части может вызывать негатив и еще сильнее удлиняя этот путь.
Отсюда у студии может быть несколько сценариев, что бы не сорвать релизы и комфортно сработать:
1. Вы на берегу договариваетесь, какие проверенные вами библиотеки будете использовать в проекте и согласовываете. Возможно вовсе отказываетесь от их использования в пользу упрощения процедуры приемки у СБ, но это может повысить затраты на тестирование.
2. Вы внутри выстраиваете процесс CI/CD для проверки безопасности(SAST) вашего кода, что бы подстраховать путь приемки перед релизом.
Если слышите об этом впервые, можно минимально собрать это из библиотеки темплейтов по вкусу и покрыть хотя бы минимум - проверка на стороне корпорации все равно будет, просто шансов сорвать дедлайн и будет меньше.
SAST (Static Application Security Testing) - это метод анализа исходного кода на наличие уязвимостей без выполнения программы.
Многие уязвимости могут возникать именно из-за использования устаревших библиотек или расширяющих поддержку старых устройств.
Все это страховка, но не гарантия. Даже в популярных библиотеках типа axios есть свои приколы, которые могут проявить себя в сжатые сроки. Там нет уязвимости, но есть повод который обязательно развернет и запустит цикл повторно. Отказ от использования сторонних библиотек и применение SAST могут существенно снизить риски.
Важно соблюдать баланс между безопасностью, производительностью и функциональностью, что бы сократить time to market.
Думаю многие понимают, что деплой веб-приложения на продакшн сервера в крупных корпорациях не проходит через один pipeline
Это определенный выстроенный процесс для контроля установленного продуктом требования к качеству и безопасности.
И если вроде внутри корпорации все понятно, описанный флоу взаимодействия, стек, инструменты, распределены роли - то работа со внешними студиями от части может вызывать негатив и еще сильнее удлиняя этот путь.
Отсюда у студии может быть несколько сценариев, что бы не сорвать релизы и комфортно сработать:
1. Вы на берегу договариваетесь, какие проверенные вами библиотеки будете использовать в проекте и согласовываете. Возможно вовсе отказываетесь от их использования в пользу упрощения процедуры приемки у СБ, но это может повысить затраты на тестирование.
2. Вы внутри выстраиваете процесс CI/CD для проверки безопасности(SAST) вашего кода, что бы подстраховать путь приемки перед релизом.
Если слышите об этом впервые, можно минимально собрать это из библиотеки темплейтов по вкусу и покрыть хотя бы минимум - проверка на стороне корпорации все равно будет, просто шансов сорвать дедлайн и будет меньше.
SAST (Static Application Security Testing) - это метод анализа исходного кода на наличие уязвимостей без выполнения программы.
Многие уязвимости могут возникать именно из-за использования устаревших библиотек или расширяющих поддержку старых устройств.
Все это страховка, но не гарантия. Даже в популярных библиотеках типа axios есть свои приколы, которые могут проявить себя в сжатые сроки. Там нет уязвимости, но есть повод который обязательно развернет и запустит цикл повторно. Отказ от использования сторонних библиотек и применение SAST могут существенно снизить риски.
Важно соблюдать баланс между безопасностью, производительностью и функциональностью, что бы сократить time to market.
🔥8🥰4⚡2
This media is not supported in your browser
VIEW IN TELEGRAM
Все easy - анимация без математики и жесточайших расчетов новых координат
Мы всегда стремимся делать круче, применять раскрытые на очередной конфе знания и добиваться новых побед
На первый взгляд может показаться, что для реализации такой анимации из GIF нужно очень много расчетов - но все куда проще
Как истинные ценители Vue (вуя) мы теперь имеем шанс делиться с вами демками на Codepen в любимом нам формате фреймворка
А это значит, что с минимальными усилиями это можно покрутить и разобрать без долго вникания тут
За базу взят тот самый, прилипший ко мне на конфах GSAP с расширением MorphSVG
Без знания координат и манипуляций с цифрами мы указываем в таймлайне какой элемент по id мы магически превращаем в другой элемент (так же указав id или селектор) и он чудно сделает все за нас.
Нам остается добавить динамики и прикрутить это к эвентам курсора.
Сам GreenSock дает возможность фри крутить это в песочнице Codepen - а значит можно изначально понять насколько библиотека упрощает жизнь разрабу и дает возможность оптимизировано креативить цепляя состояние к реактивности
Конечно, среди нас много хардовых ребят и вы как челлендж пересчитали бы это в координатах за пару часов/дней - но зачем, если через 15 минут это уже может греть вам сердечко
Не правда ли?
Шаблон Vue на Codepen
Дублирую ссылку на реализацию анимации
P.S второй пост за день. Не правда ли прекрасно?
Мы всегда стремимся делать круче, применять раскрытые на очередной конфе знания и добиваться новых побед
На первый взгляд может показаться, что для реализации такой анимации из GIF нужно очень много расчетов - но все куда проще
Как истинные ценители Vue (вуя) мы теперь имеем шанс делиться с вами демками на Codepen в любимом нам формате фреймворка
А это значит, что с минимальными усилиями это можно покрутить и разобрать без долго вникания тут
За базу взят тот самый, прилипший ко мне на конфах GSAP с расширением MorphSVG
Без знания координат и манипуляций с цифрами мы указываем в таймлайне какой элемент по id мы магически превращаем в другой элемент (так же указав id или селектор) и он чудно сделает все за нас.
Нам остается добавить динамики и прикрутить это к эвентам курсора.
Сам GreenSock дает возможность фри крутить это в песочнице Codepen - а значит можно изначально понять насколько библиотека упрощает жизнь разрабу и дает возможность оптимизировано креативить цепляя состояние к реактивности
Конечно, среди нас много хардовых ребят и вы как челлендж пересчитали бы это в координатах за пару часов/дней - но зачем, если через 15 минут это уже может греть вам сердечко
Не правда ли?
Шаблон Vue на Codepen
Дублирую ссылку на реализацию анимации
P.S второй пост за день. Не правда ли прекрасно?
🔥22👍6❤🔥4❤2
Регулярные запросы для обновления простых данных.
При разработке функционала с острым желанием реал-тайма - в голову сразу лезут сокеты.
Есть более простой и рабочий вариант под среднюю задачу - написать щадящий интервальный автоапдейт.
Идейно: Мы перед обновлением данных проверяем вкладку на активность. Если вкладка не активна - запроса не будет, но как только мы на нее вернемся - улетит свежий запрос и данные станут актуальными.
Таким образом мы следим за состоянием вкладки и оперируем несколькими методами для стопа, старта автообновления и самим запросом данных.
Пример реализации во 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