👋 Привет, Habr!
Вы когда-нибудь пытались найти качественный open-source клон Pinterest — с real-time функционалом, полноценной архитектурой, удобным UI и современной технологической основой? Я — да. И не нашёл. Поэтому решил создать свой.
Представляю вам Pinterest Clone — мой pet-проект, над которым я работал в одиночку 4 месяца, чтобы воссоздать не просто копию, а полнофункциональную платформу с реальным пользовательским опытом, максимально приближённым к оригиналу.
Пытаясь подражать слогу классика, можно сказать, что "все чаты в целом одинаковы, но каждый реализует что-то свое".
так ли это? посмотрим.
TL, DR: далее рассказываю, что мы делаем свой UI набор компонентов для чата, даю ссылки и приглашаю присоединяться к проекту.
Книга «Изучаем Vue: основные концепции и практические паттерны для современных и масштабируемых пользовательских интерфейсов» — это сжатое практическое руководство по Vue.js, ориентированное на уже практикующих разработчиков, работающих над созданием интерфейсов. Автор книги, Майя Шавин — старший инженер-программист в Salesforce (ранее в Microsoft), специализирующаяся на JavaScript и frontend-фреймворках. Наличие примеров и акцента на переиспользуемость компонентов дает разработчикам подсказки как строить масштабируемые и поддерживаемые интерфейсы.
***
Привет, Хабр!
Сколько раз вы сталкивались с ситуацией, когда сделали аккуратный Vue-компонент на <script setup>, вроде всё красиво, а потом... вам внезапно нужно из родительского компонента сфокусировать инпут, сбросить фильтр, открыть модалку, валидировать форму. Казалось бы, задача тривиальная, но script setup не даёт просто так вынуть методы наружу.
Сегодня рассмотрим одну из самых неочевидных, но крайне полезных возможностей Vue 3 — функцию defineExpose().
В декабре 2023 я впервые задумался о похудении. Тогда при росте 194 см я весил 116 кг. Раньше я только играл в мини-футбол, вообще не следил за едой и даже не заглядывал в спортзал.
Начал нормально питаться, поменял привычки, добавил силовые тренировки, к сентябрю 2024 скинул около 30 кг. Это был рекорд по минимальному весу.
Сейчас, через полгода, вешу 89 кг. Оказалось, что нарастить мышцы намного труднее, чем избавиться от жира. Надеюсь, что эти +3 кг в основном мышцы. Почему так: теперь могу подтянуться 11 раз вместо 9, и на фото видны изменения — делаю такие сравнения каждые пару месяцев.
В первой части мы построили бэкенд на FastAPI, Aiogram, Redis и Centrifugo, заложив основу для анонимного чата в Telegram. Теперь пришло время развернуть фронтенд и создать стильный и отзывчивый интерфейс с использованием VueJS 3 в формате Telegram MiniApp.
В этой статье мы:
• Разработаем интерактивный UI с фильтрами поиска, анимациями загрузки и real-time чатом.
• Настроим мгновенный обмен сообщениями через Centrifugo без лишних запросов к серверу.
• Интегрируем монетизацию для заработка на рекламе в приложении.
• Выполним деплой на удаленный сервер и подготовим проект к продакшену.
Если вы хотите создать быстрый, удобный и монетизируемый анонимный чат в Telegram, который работает без задержек и перезагрузок, — эта статья для вас!
Frontend-архитектура, которая не сводит с ума. В этой статье я хочу поделиться своим опытом организации кода, который помог мне упростить разработку и поддержку проектов. Это не истина в последней инстанции, а скорее попытка найти баланс между простотой и гибкостью.
Если вы тоже ищете способы сделать свой код чище и поддерживаемым, или просто хотите обсудить разные подходы к архитектуре, — добро пожаловать в комментарии. Давайте разбираться вместе!
Рассмотрим типичный сценарий разработки фронтенд-приложений. Бизнес выдвигает требования, которые постепенно усложняют компоненты. Это приводит к проблемам сопровождения, особенно в больших проектах.
В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.
Большинство разработчиков воспринимают реактивность как систему событий. У вас есть некоторое состояние, которое обновляется, а все зависящие от него данные пересчитываются. В итоге это изменение проявляется через побочные эффекты.
Привет, интернет!
Я Антон Небыков, Frontend TechLead в ИдаПроджект.
Хочу поделиться опытом автоматизации отображения изображений на сайте, их оптимизацией и — как следствие — улучшением показателей в Lighthouse.
На первый взгляд, работа с изображениями сводится к простому добавлению элемента img и ссылки на изображение в атрибуте src. Но на практике все намного сложнее :)
Погнали разбираться!
Год с небольшим назад я проводил здесь испытания, как поисковики индексируют SPA сайты. На тот момент Google справился на отлично, Yandex - не очень
Сейчас Yandex хорошо проиндексировал SPA сайт на Vue 3.
Всем привет
Хочу поделиться с сообществом своим проектом.
Telescope - это opensource web-приложение для удобной работы с логами, хранящимися в ClickHouse.
Привет, Хабр. На связи Артем, Laravel-разработчик, и я написал инструкцию для начинающих разработчиков по созданию полноценного локального приложения с бэкендом на Laravel и фронтендом на Vue.js.
Одностраничные приложения стали стандартом для создания динамичных и быстрых пользовательских интерфейсов. Одним из популярных стеков для разработки SPA является сочетание Laravel и Vue.js.
Пошагово разберу, как настроить среду разработки, создать API на Laravel, реализовать динамический интерфейс с использованием Vue.js и связать эти две части в единое приложение.
После прочтения статьи вы сможете развернуть свое собственное SPA и использовать его как основу для реализации своих идей по функционалу. Этот пример станет отличной отправной точкой для создания более сложных проектов.
С этой статьи я начну цикл материалов, посвященных базовым концепциям реактивности, основанных на идеях и примерах, которые подробно изложил автор SolidJS, Райан Карниато (Ryan Carniato), в своем блоге. Наша цель — разобрать фундаментальные принципы, лежащие в основе реактивных систем, и показать их применимость в различных контекстах.
Обновилось приложение для хранения личной медицинской информации "слэш" персональный AI-помощник Lissa Health.
Мы добавили загрузку и распознавание результатов лабораторных анализов в виде изображений, возможность загрузки вложений в документ, экспорт данных пользователя в JSON и кое-что еще.
Подробности ниже.
Всем привет.
Статья представляет из себя краткое резюме из моей практики описания Vue компонентов с помощью полноценных jsx шаблонов, то есть, tsx модулей, возвращающих defineComponent.
Как мы все знаем внешний API компонента во Vue разделен, и имеет не только props. Помимо них есть ещё slots и emitters.
основа defineComponent - функция setup. И как вариант всё можно типизировать через хуки defineProps, defineSlots и defineEmits в теле этой функции. Описывать такой способ типизации я не буду - о нём можно почитать и в документации.
Почему я так не делаю? Я просто не хочу захламлять тело setup функции. Мне нравится отделять логику компонента от его внешнего API и декларировать API через свойства defineComponents, отделяя так сказать мух от котлет. И вот тут то как раз и появляются неочевидные моменты, которые я решил немного поанализировав исходники и погуглив.
Типизация свойства props
Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые инструменты сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монорепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.
Привет, Хабр! Я - Frontend Developer в МТС Диджитал. Все чаще и чаще я натыкаюсь на сообщения и комментарии пользователей в различных социальных сетях про Server-Side Rendering.
Обычно эти жалобы о том, кто-то недоволен зависимостью Next.js от Node.js-сервера. Кто-то сталкивается с ограничениями динамического роутинга при статической генерации. Исходя из этого некоторые люди писали в комментариях что-то вроде: "Вы же не ожидали, что SSR-фреймворк решит все проблемы разом?"
Большинство моих коллег с других компаний в принципе не понимают зачем я беру Nuxt почти во все свои проекты и задают вопросы. На первый взгляд это вполне логично. Какой смысл брать SSR фреймворк, если ты выключаешь в нем SSR. На примере Nuxt, SSR можно выключить одним булевым флагом в конфиге:
Eslint плагин eslint-plugin-import-group
В одном из моих недавних проектов столкнулся с проблемой: в большом приложении, над которым работают десятки разработчиков, необходимо было обеспечить единообразный порядок импортов.
Современные web-фреймворки для реализации управления состоянием используют библиотеки, такие, например, как Redux для React или Pinia для Vue. У традиционной реализации управления состоянием есть недостатки. Store в таком варианте является частью скрипта страницы, и его данные при её перезагрузке теряются. Кроме того, если нам в приложении нужно организовать управление отображением контента в нескольких окнах браузера, оказывается, что традиционный Store не может этого обеспечить.
